@acorex/components 22.1.7 → 22.2.0-next.0

package/fesm2022/acorex-components-tabs.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation, Component, Renderer2, input, booleanAttribute, viewChild, NgZone, PLATFORM_ID, signal, effect, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { inject, ViewContainerRef, Renderer2, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ContentChild, ViewEncapsulation, Component, DestroyRef, input, booleanAttribute, viewChild, NgZone, PLATFORM_ID, signal, effect, afterNextRender, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { MXInteractiveComponent, AXComponent, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
 import * as i1 from '@acorex/cdk/drag-drop';
 import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
-import { MXInteractiveComponent, AXComponent, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
 import { NgTemplateOutlet, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i2 from '@acorex/cdk/horizontal-scroll';
 import { AXHorizontalScrollDirective } from '@acorex/cdk/horizontal-scroll';
@@ -11,7 +11,10 @@ import { PortalModule } from '@angular/cdk/portal';
 
 class AXTabContentDirective {
     constructor() {
-        this._viewContainerRef = inject(ViewContainerRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.panes = new Map();
+        this.defaultView = null;
     }
     get portal() {
         return this._portal;
@@ -19,14 +22,115 @@ class AXTabContentDirective {
     set portal(v) {
         if (v) {
             this._portal = v;
-            this._viewContainerRef.clear();
-            this._viewContainerRef.createEmbeddedView(v, null, 0);
+            this.activate(v, 'default');
+        }
+    }
+    /**
+     * Shows the given tab template using the specified render mode.
+     */
+    activate(template, mode) {
+        if (!template) {
+            return;
+        }
+        this._portal = template;
+        if (mode === 'default') {
+            this.destroyDefaultView();
+            this.resetKeepAlivePanes();
+            this.viewContainerRef.clear();
+            this.defaultView = this.viewContainerRef.createEmbeddedView(template, null, 0);
+            return;
+        }
+        this.destroyDefaultView();
+        this.ensurePane(template);
+        this.showPane(template);
+    }
+    /**
+     * Ensures embedded views exist for every tab template (all-tabs mode).
+     */
+    preload(templates) {
+        templates.forEach((template) => this.ensurePane(template));
+    }
+    /**
+     * Removes panes whose tab templates are no longer present.
+     */
+    sync(templates) {
+        const activeTemplates = new Set(templates);
+        for (const [template, pane] of this.panes) {
+            if (activeTemplates.has(template)) {
+                continue;
+            }
+            this.destroyPane(template, pane);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXTabContentDirective, isStandalone: true, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 }); }
+    /**
+     * Destroys all cached panes and clears the view container.
+     */
+    reset() {
+        this.destroyDefaultView();
+        this.resetKeepAlivePanes();
+        this.viewContainerRef.clear();
+    }
+    ngOnDestroy() {
+        this.reset();
+    }
+    destroyDefaultView() {
+        if (!this.defaultView) {
+            return;
+        }
+        this.defaultView.destroy();
+        this.defaultView = null;
+    }
+    resetKeepAlivePanes() {
+        for (const [template, pane] of this.panes) {
+            this.destroyPane(template, pane);
+        }
+        this.panes.clear();
+    }
+    ensurePane(template) {
+        const existing = this.panes.get(template);
+        if (existing && !existing.view.destroyed) {
+            return existing;
+        }
+        if (existing) {
+            this.panes.delete(template);
+            this.renderer.removeChild(existing.host.parentElement, existing.host);
+        }
+        const view = this.viewContainerRef.createEmbeddedView(template, null, this.viewContainerRef.length);
+        const host = this.renderer.createElement('div');
+        this.renderer.addClass(host, 'ax-tab-content-pane');
+        this.renderer.setAttribute(host, 'hidden', '');
+        const anchor = this.viewContainerRef.element.nativeElement;
+        this.renderer.insertBefore(anchor.parentElement, host, anchor);
+        for (const node of view.rootNodes) {
+            this.renderer.appendChild(host, node);
+        }
+        const pane = { view, host };
+        this.panes.set(template, pane);
+        return pane;
+    }
+    showPane(template) {
+        for (const [paneTemplate, pane] of this.panes) {
+            if (paneTemplate === template) {
+                this.renderer.removeAttribute(pane.host, 'hidden');
+            }
+            else {
+                this.renderer.setAttribute(pane.host, 'hidden', '');
+            }
+        }
+    }
+    destroyPane(template, pane) {
+        if (!pane.view.destroyed) {
+            pane.view.destroy();
+        }
+        if (pane.host.parentElement) {
+            this.renderer.removeChild(pane.host.parentElement, pane.host);
+        }
+        this.panes.delete(template);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXTabContentDirective, isStandalone: true, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTabContent]',
@@ -35,15 +139,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Marks an `ng-template` as tab panel content. Use this instead of projecting
+ * components directly into `ax-content` when you need `renderMode="default"`
+ * to destroy and recreate panel state on each tab switch.
+ *
+ * @example
+ * ```html
+ * <ax-tab-item text="Account">
+ *   <ng-template axTabPanel>
+ *     <my-panel />
+ *   </ng-template>
+ * </ax-tab-item>
+ * ```
+ */
+class AXTabPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXTabPanelDirective, isStandalone: true, selector: "ng-template[axTabPanel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[axTabPanel]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * @category
  *  Represents an individual tab item in a tab component.
  */
 class AXTabItemComponent extends MXInteractiveComponent {
     constructor() {
-        super(...arguments);
+        super();
         this._drag = inject(AXDragDirective, { self: true });
         this._reorderEnabled = false;
+        this._panTouchAction = 'none';
         /**
          * Emits an event when the `active` state of the component changes.
          * @event
@@ -56,6 +189,15 @@ class AXTabItemComponent extends MXInteractiveComponent {
         this.onClick = new EventEmitter();
         /** @ignore */
         this._active = false;
+        this._drag.isDragDisabled.set(true);
+        this._drag.dragCursorOverride.set('none');
+    }
+    /**
+     * Template rendered for this tab's content area.
+     * Prefer `ng-template[axTabPanel]` so `renderMode="default"` can recreate panel state.
+     */
+    get template() {
+        return this._panel?.template ?? this._contentTemplate;
     }
     /**
      * Gets or sets the component's active state, controlling its behavior and appearance.
@@ -76,14 +218,29 @@ class AXTabItemComponent extends MXInteractiveComponent {
     /** @ignore */
     setReorderEnabled(enabled, delay = 0, touchAction = 'none') {
         this._reorderEnabled = enabled;
-        this._drag.startDelay.set(delay);
+        this._panTouchAction = touchAction;
+        this._drag.startDelay.set(enabled ? delay : 0);
         this._drag.dragTouchAction.set(touchAction);
-        this._drag.dragCursorOverride.set('grab');
+        this._drag.dragCursorOverride.set(enabled ? 'grab-on-drag' : 'none');
         this.updateDragState();
     }
     /** @ignore */
     updateDragState() {
         this._drag.isDragDisabled.set(!this._reorderEnabled || this.disabled);
+        this.applyScrollTouchAction();
+    }
+    /** @ignore */
+    applyScrollTouchAction() {
+        const handle = this.getHostElement();
+        if (this._reorderEnabled) {
+            return;
+        }
+        if (this._panTouchAction !== 'none') {
+            handle.style.touchAction = this._panTouchAction;
+        }
+        else {
+            handle.style.removeProperty('touch-action');
+        }
     }
     /**
      * @ignore
@@ -119,14 +276,14 @@ class AXTabItemComponent extends MXInteractiveComponent {
      */
     getStats() {
         return {
-            width: this.getHostElement().clientWidth,
-            height: this.getHostElement().clientHeight,
+            width: this.getHostElement().offsetWidth,
+            height: this.getHostElement().offsetHeight,
             left: this.getHostElement().offsetLeft,
             top: this.getHostElement().offsetTop,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXTabItemComponent, isStandalone: true, selector: "ax-tab-item", inputs: { disabled: "disabled", text: "text", key: "key", headerTemplate: "headerTemplate", active: "active" }, outputs: { disabledChange: "disabledChange", onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", activeChange: "activeChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDragDirective, inputs: ["dragCursor", "dragCursor", "dragStartDelay", "dragStartDelay", "dragClonedTemplate", "dragClonedTemplate"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXTabItemComponent, isStandalone: true, selector: "ax-tab-item", inputs: { disabled: "disabled", text: "text", key: "key", headerTemplate: "headerTemplate", active: "active" }, outputs: { disabledChange: "disabledChange", onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", activeChange: "activeChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }], queries: [{ propertyName: "_panel", first: true, predicate: AXTabPanelDirective, descendants: true }], viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDragDirective, inputs: ["dragStartDelay", "dragStartDelay", "dragClonedTemplate", "dragClonedTemplate"] }], ngImport: i0, template: `
     @if (headerTemplate) {
       <ng-container
         [ngTemplateOutlet]="headerTemplate"
@@ -140,8 +297,8 @@ class AXTabItemComponent extends MXInteractiveComponent {
         }"
       ></ng-container>
     } @else {
-      <div>
-        <ng-content select="ax-prefix"></ng-content>
+      <ng-content select="ax-prefix"></ng-content>
+      <div class="ax-tab-item-header">
         <div class="ax-tab-item-text">{{ text }}</div>
       </div>
       <ng-content select="ax-suffix"></ng-content>
@@ -151,14 +308,14 @@ class AXTabItemComponent extends MXInteractiveComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
                     hostDirectives: [
                         {
                             directive: AXDragDirective,
-                            inputs: ['dragCursor', 'dragStartDelay', 'dragClonedTemplate'],
+                            inputs: ['dragStartDelay', 'dragClonedTemplate'],
                         },
                     ],
                     template: `
@@ -175,8 +332,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }"
       ></ng-container>
     } @else {
-      <div>
-        <ng-content select="ax-prefix"></ng-content>
+      <ng-content select="ax-prefix"></ng-content>
+      <div class="ax-tab-item-header">
         <div class="ax-tab-item-text">{{ text }}</div>
       </div>
       <ng-content select="ax-suffix"></ng-content>
@@ -192,11 +349,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     imports: [NgTemplateOutlet],
                     providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }],
                 }]
-        }], propDecorators: { text: [{
+        }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], key: [{
                 type: Input
-            }], template: [{
+            }], _panel: [{
+                type: ContentChild,
+                args: [AXTabPanelDirective]
+            }], _contentTemplate: [{
                 type: ViewChild,
                 args: ['content']
             }], headerTemplate: [{
@@ -223,6 +383,18 @@ class AXTabsReorderedEvent extends AXEvent {
  * A component that serves as a container for tab items.
  */
 class AXTabsComponent extends MXBaseComponent {
+    /**
+     * The `AXTabContentDirective` associated with the tab.
+     */
+    set content(value) {
+        this._content = value;
+        if (value && this._selectedItem) {
+            this._renderContent(this._selectedItem);
+        }
+    }
+    get content() {
+        return this._content;
+    }
     get items() {
         const tabs = this._contentTabs?.toArray() ?? [];
         if (!isPlatformBrowser(this.platformId) || tabs.length < 2) {
@@ -241,6 +413,7 @@ class AXTabsComponent extends MXBaseComponent {
     #reorderableEffect;
     #orientationEffect;
     #tabChange;
+    #renderModeEffect;
     /** @ignore */
     get __hostClass() {
         const cssClasses = [];
@@ -250,11 +423,14 @@ class AXTabsComponent extends MXBaseComponent {
             cssClasses.push(`ax-tabs-fit`);
         if (this.reorderable())
             cssClasses.push(`ax-tabs-reorderable`);
+        if (this.stacked())
+            cssClasses.push(`ax-tabs-stacked`);
         return cssClasses;
     }
     constructor() {
         super();
         this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
         this._dropList = inject(AXDropListDirective, { self: true });
         this._scroll = inject(AXHorizontalScrollDirective, { self: true });
         /**
@@ -278,12 +454,29 @@ class AXTabsComponent extends MXBaseComponent {
         this.reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Press-and-hold duration in milliseconds before a tab can be dragged to reorder.
-         * After this delay the cursor changes to indicate reorder mode. Moving before the
-         * delay ends cancels reorder and allows swipe or pan scrolling instead.
+         * After this delay the cursor changes to grab while the pointer is still held. Moving before
+         * the delay ends cancels reorder and allows swipe or pan scrolling instead.
          * @defaultValue 250
          */
         this.reorderDelay = input(250, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "reorderDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls how tab content is rendered in the DOM.
+         *
+         * - `default` — Only the active tab's content is in the DOM. Switching tabs replaces content and does not preserve state.
+         * - `all-tabs` — All tab contents are rendered and kept in the DOM. State is preserved; higher memory use.
+         * - `on-demand` — Only the active tab is rendered initially. Other tabs are rendered on first visit and then kept; state is preserved.
+         *
+         * @defaultValue 'default'
+         */
+        this.renderMode = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderMode" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, stacks prefix, title, and suffix vertically inside each tab header
+         * instead of arranging them in a horizontal row.
+         * @defaultValue false
+         */
+        this.stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @defaultValue 'false'
          * Specifies whether the component should resize to fit its parent container.
@@ -300,8 +493,15 @@ class AXTabsComponent extends MXBaseComponent {
         this.platformId = inject(PLATFORM_ID);
         /** @ignore */
         this._isUserInteraction = false;
+        /** @ignore */
+        this._clickSubscriptions = new WeakSet();
+        /** @ignore */
+        this._activeSubscriptions = new WeakSet();
         this.activeTab = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.viewReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewReady" }] : /* istanbul ignore next */ []));
+        this.lastRenderMode = null;
         this.#reorderableEffect = effect(() => {
             this._dropList.isSortingDisabled.set(!this.reorderable());
             this._syncDragState();
@@ -316,15 +516,29 @@ class AXTabsComponent extends MXBaseComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#orientationEffect" }] : /* istanbul ignore next */ []));
         this.#tabChange = effect(() => {
-            if (this.activeTab() && this.location()) {
-                if (this.look() === 'with-line-color' || this.look() === 'with-line') {
-                    setTimeout(() => {
-                        this.setIndicatorPosition(this.activeTab());
-                    });
-                }
+            const look = this.look();
+            const location = this.location();
+            const activeTab = this.activeTab();
+            if (!location || !activeTab || !this.viewReady()) {
+                return;
+            }
+            if (look !== 'with-line-color' && look !== 'with-line') {
+                return;
             }
+            this.scheduleIndicatorUpdate(activeTab);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#tabChange" }] : /* istanbul ignore next */ []));
+        this.#renderModeEffect = effect(() => {
+            const mode = this.renderMode();
+            const selected = this._selectedItem;
+            if (!selected || !this.content) {
+                return;
+            }
+            if (this.lastRenderMode !== null && this.lastRenderMode !== mode) {
+                this._renderContent(selected);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#renderModeEffect" }] : /* istanbul ignore next */ []));
         /**
          * @event
          */
@@ -335,11 +549,22 @@ class AXTabsComponent extends MXBaseComponent {
          * @event
          */
         this.onTabsReordered = new EventEmitter();
-        this._dropList.dropListDropped.subscribe((event) => {
+        afterNextRender(() => {
+            this.viewReady.set(true);
+            this.scheduleIndicatorUpdate(this.activeTab());
+        });
+        const dropSub = this._dropList.dropListDropped.subscribe((event) => {
             if (this.reorderable()) {
                 this._applyReorder(event);
             }
         });
+        const previewSub = this._dropList.sortPreviewChanged.subscribe(() => {
+            this.scheduleIndicatorUpdate(this.activeTab());
+        });
+        this.destroyRef.onDestroy(() => {
+            dropSub.unsubscribe();
+            previewSub.unsubscribe();
+        });
     }
     /** @ignore */
     ngAfterContentInit() {
@@ -355,15 +580,16 @@ class AXTabsComponent extends MXBaseComponent {
                 this.changes = new ResizeObserver((entries) => {
                     const activeTab = this.activeTab();
                     if (entries[0].contentRect.width && activeTab) {
-                        this.renderer.setStyle(this.indicator().nativeElement, 'transition', 'none');
+                        const indicatorEl = this.indicator()?.nativeElement;
+                        if (!indicatorEl) {
+                            return;
+                        }
+                        this.renderer.setStyle(indicatorEl, 'transition', 'none');
                         this.setIndicatorPosition(activeTab);
-                        this.renderer.removeStyle(this.indicator().nativeElement, 'transition');
+                        this.renderer.removeStyle(indicatorEl, 'transition');
                     }
                 });
-                const activeTab = this.activeTab();
-                if (activeTab)
-                    this.changes.observe(activeTab.getHostElement());
-                this.changes.observe(this.getHostElement());
+                this._observeActiveTabForResize(this.activeTab());
             });
         }
     }
@@ -375,25 +601,46 @@ class AXTabsComponent extends MXBaseComponent {
         const selected = this.items.find((c) => c.active) || this.items[0];
         this.select(selected);
         this.items.forEach((c) => {
-            if (!c.onClick.length) {
+            if (!this._clickSubscriptions.has(c)) {
+                this._clickSubscriptions.add(c);
                 c.onClick.subscribe((t) => {
                     this._isUserInteraction = t.nativeEvent?.isTrusted;
                     this.select(c);
                 });
             }
+            if (!this._activeSubscriptions.has(c)) {
+                this._activeSubscriptions.add(c);
+                c.activeChange.subscribe((isActive) => {
+                    if (!isActive) {
+                        return;
+                    }
+                    if (this._selectedItem !== c) {
+                        this.select(c);
+                        return;
+                    }
+                    this.activeTab.set(c);
+                    this.scheduleIndicatorUpdate(c);
+                });
+            }
         });
         this._syncDragState();
     }
     /** @ignore */
     _syncDragState() {
-        const enabled = this.reorderable();
+        const reorderEnabled = this.reorderable();
         const vertical = this.location() === 'start' || this.location() === 'end';
         const touchAction = vertical ? 'pan-x' : 'pan-y';
         this.items.forEach((tab) => {
-            tab.setReorderEnabled(enabled, this.reorderDelay(), touchAction);
-            if (enabled && isPlatformBrowser(this.platformId)) {
+            tab.setReorderEnabled(reorderEnabled, this.reorderDelay(), touchAction);
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            if (reorderEnabled) {
                 this.renderer.setStyle(tab.getHostElement(), 'transition-property', 'transform, opacity, translate, background-color, color');
             }
+            else {
+                this.renderer.removeStyle(tab.getHostElement(), 'transition-property');
+            }
         });
     }
     /** @ignore */
@@ -424,17 +671,39 @@ class AXTabsComponent extends MXBaseComponent {
         else {
             this.renderer.appendChild(parent, movedEl);
         }
-        this.onTabsReordered.emit({
-            component: this,
-            tab: tabItem,
-            previousIndex,
-            currentIndex,
+        this.zone.run(() => {
+            this.onTabsReordered.emit({
+                component: this,
+                tab: tabItem,
+                previousIndex,
+                currentIndex,
+            });
         });
-        requestAnimationFrame(() => {
-            const active = this.activeTab();
-            if (active) {
-                this.setIndicatorPosition(active);
-            }
+        this.scheduleIndicatorUpdate(this.activeTab());
+        setTimeout(() => this.scheduleIndicatorUpdate(this.activeTab()), 200);
+    }
+    /** @ignore */
+    _observeActiveTabForResize(tab) {
+        if (!this.changes || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.changes.disconnect();
+        if (tab) {
+            this.changes.observe(tab.getHostElement());
+        }
+        this.changes.observe(this.getHostElement());
+    }
+    /** @ignore */
+    scheduleIndicatorUpdate(tab) {
+        if (!tab || !this.viewReady()) {
+            return;
+        }
+        const look = this.look();
+        if (look !== 'with-line' && look !== 'with-line-color') {
+            return;
+        }
+        queueMicrotask(() => {
+            this.setIndicatorPosition(tab);
         });
     }
     /**
@@ -444,17 +713,18 @@ class AXTabsComponent extends MXBaseComponent {
      */
     select(tab) {
         const tabItem = typeof tab == 'number' ? this.items[tab] : tab;
+        if (!tabItem) {
+            return;
+        }
+        const isSameTab = this._selectedItem === tabItem;
         this.activeTab.set(tabItem);
-        //
-        if (!tabItem || this.selectedItem == tabItem)
+        this._renderContent(tabItem);
+        if (isSameTab) {
             return;
+        }
         this._selectedItem = tabItem;
-        //
         this.items.forEach((c) => (c.active = false));
         tabItem.active = true;
-        if (this.content) {
-            this.content.portal = tabItem.template;
-        }
         this.cdr.markForCheck();
         this.onActiveTabChanged.emit({
             component: this,
@@ -463,13 +733,58 @@ class AXTabsComponent extends MXBaseComponent {
             index: this.selectedIndex,
         });
         this._isUserInteraction = false;
+        this._observeActiveTabForResize(tabItem);
+        this.scheduleIndicatorUpdate(tabItem);
+    }
+    /** @ignore */
+    _renderContent(tabItem) {
+        if (!this.content || !tabItem?.template) {
+            return;
+        }
+        const mode = this.renderMode();
+        const templates = this.items.map((item) => item.template).filter(Boolean);
+        if (this.lastRenderMode !== null && this.lastRenderMode !== mode) {
+            this.content.reset();
+        }
+        this.lastRenderMode = mode;
+        if (mode === 'default') {
+            this.content.activate(tabItem.template, mode);
+            return;
+        }
+        this.content.sync(templates);
+        if (mode === 'all-tabs') {
+            this.content.preload(templates);
+        }
+        this.content.activate(tabItem.template, mode);
+    }
+    /** @ignore */
+    getTabIndicatorStats(tabItem) {
+        const tabEl = tabItem.getHostElement();
+        if (!isPlatformBrowser(this.platformId)) {
+            return tabItem.getStats();
+        }
+        const hostEl = this.getHostElement();
+        const tabRect = tabEl.getBoundingClientRect();
+        const hostRect = hostEl.getBoundingClientRect();
+        return {
+            width: tabRect.width,
+            height: tabRect.height,
+            left: tabRect.left - hostRect.left,
+            top: tabRect.top - hostRect.top,
+        };
     }
     setIndicatorPosition(tabItem) {
-        const indicatorStyle = this.indicator().nativeElement.style;
-        const itemStats = tabItem.getStats();
+        const indicatorEl = this.indicator()?.nativeElement;
+        if (!indicatorEl) {
+            return;
+        }
+        const itemStats = this.getTabIndicatorStats(tabItem);
+        const indicatorStyle = indicatorEl.style;
         if (this.location() === 'top' || this.location() === 'bottom') {
             indicatorStyle.width = `${itemStats.width}px`;
             indicatorStyle.height = `var(--ax-comp-tabs-indicator-size)`;
+            indicatorStyle.insetInlineStart = `unset`;
+            indicatorStyle.insetInlineEnd = `unset`;
             indicatorStyle.left = `${itemStats.left}px`;
             indicatorStyle.right = `unset`;
             if (this.location() === 'top') {
@@ -482,30 +797,32 @@ class AXTabsComponent extends MXBaseComponent {
             }
         }
         if (this.location() === 'start' || this.location() === 'end') {
-            indicatorStyle.width = ` var(--ax-comp-tabs-indicator-size)`;
+            indicatorStyle.width = `var(--ax-comp-tabs-indicator-size)`;
             indicatorStyle.height = `${itemStats.height}px`;
             indicatorStyle.top = `${itemStats.top}px`;
             indicatorStyle.bottom = `unset`;
+            indicatorStyle.insetInlineStart = `unset`;
+            indicatorStyle.insetInlineEnd = `unset`;
             if (this.location() === 'start') {
-                indicatorStyle.insetInlineStart = `0px`;
-                indicatorStyle.insetInlineEnd = `unset`;
+                indicatorStyle.left = `0px`;
+                indicatorStyle.right = `unset`;
             }
             if (this.location() === 'end') {
-                indicatorStyle.insetInlineStart = `unset`;
-                indicatorStyle.insetInlineEnd = `0px`;
+                indicatorStyle.left = `unset`;
+                indicatorStyle.right = `0px`;
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXTabsComponent, isStandalone: true, selector: "ax-tabs", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, reorderDelay: { classPropertyName: "reorderDelay", publicName: "reorderDelay", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTabChanged: "onActiveTabChanged", onTabsReordered: "onTabsReordered" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDropListDirective }, { directive: i2.AXHorizontalScrollDirective }], ngImport: i0, template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, isInline: true, styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;min-width:100%;flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable{width:fit-content;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-tabs.ax-tabs-reorderable ax-tab-item{cursor:grab}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;cursor:pointer;justify-content:space-between;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{cursor:grabbing;background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXTabsComponent, isStandalone: true, selector: "ax-tabs", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, reorderDelay: { classPropertyName: "reorderDelay", publicName: "reorderDelay", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTabChanged: "onActiveTabChanged", onTabsReordered: "onTabsReordered" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDropListDirective }, { directive: i2.AXHorizontalScrollDirective }], ngImport: i0, template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, isInline: true, styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:flex-start;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:nowrap;align-items:center}ax-tabs ax-tab-item ax-prefix,ax-tabs ax-tab-item ax-suffix{display:flex;flex-shrink:0;align-items:center}ax-tabs ax-tab-item ax-suffix{margin-inline-start:auto}ax-tabs ax-tab-item .ax-tab-item-text{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 2);white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}:is(ax-tabs.ax-tabs-fit.ax-top,ax-tabs.ax-tabs-fit.ax-bottom) ax-tab-item{min-width:max-content}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{flex-shrink:0;align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{left:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{right:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item{flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-header{flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 0)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-tab-content-pane{display:contents}.ax-tab-content-pane[hidden]{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tabs', hostDirectives: [AXDropListDirective, AXHorizontalScrollDirective], template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;min-width:100%;flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable{width:fit-content;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-tabs.ax-tabs-reorderable ax-tab-item{cursor:grab}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;cursor:pointer;justify-content:space-between;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{cursor:grabbing;background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-tabs', hostDirectives: [AXDropListDirective, AXHorizontalScrollDirective], template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:flex-start;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:nowrap;align-items:center}ax-tabs ax-tab-item ax-prefix,ax-tabs ax-tab-item ax-suffix{display:flex;flex-shrink:0;align-items:center}ax-tabs ax-tab-item ax-suffix{margin-inline-start:auto}ax-tabs ax-tab-item .ax-tab-item-text{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 2);white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}:is(ax-tabs.ax-tabs-fit.ax-top,ax-tabs.ax-tabs-fit.ax-bottom) ax-tab-item{min-width:max-content}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{flex-shrink:0;align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{left:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{right:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item{flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-header{flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 0)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-tab-content-pane{display:contents}.ax-tab-content-pane[hidden]{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabItemComponent]
-            }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], reorderDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDelay", required: false }] }], fitParent: [{
+            }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], reorderDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDelay", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], fitParent: [{
                 type: Input
             }], minWidth: [{
                 type: Input
@@ -520,14 +837,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
+const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective];
 const MODULES = [CommonModule, PortalModule, AXDecoratorModule];
 class AXTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, imports: [CommonModule, PortalModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent, AXTabContentDirective], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, imports: [CommonModule, PortalModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -540,5 +857,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
+export { AXTabContentDirective, AXTabItemComponent, AXTabPanelDirective, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
 //# sourceMappingURL=acorex-components-tabs.mjs.map