ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-tabs.mjs

@@ -0,0 +1,1522 @@
+import { cva } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, viewChild, signal, computed, ChangeDetectionStrategy, Component, DestroyRef, viewChildren, afterNextRender, effect, model, contentChildren, ElementRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { mergeClasses } from 'ngx-com/utils';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterLinkActive } from '@angular/router';
+import { startWith } from 'rxjs';
+
+// ─── Tab Button / Link ───
+const tabItemVariants = cva([
+    'relative inline-flex items-center justify-center gap-2',
+    'whitespace-nowrap font-medium select-none',
+    'transition-colors duration-150',
+    'disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed disabled:pointer-events-none',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+], {
+    variants: {
+        variant: {
+            underline: 'bg-transparent border-b-2 border-transparent rounded-none',
+            pill: 'rounded-pill',
+            outline: 'border border-transparent rounded-tab',
+            solid: 'rounded-tab',
+        },
+        size: {
+            sm: 'h-8 px-3 text-xs gap-1.5',
+            md: 'h-10 px-4 text-sm gap-2',
+            lg: 'h-12 px-5 text-base gap-2.5',
+        },
+        color: {
+            primary: '',
+            accent: '',
+            muted: '',
+        },
+        active: {
+            true: '',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // ─── Underline ───
+        // Active
+        {
+            variant: 'underline',
+            color: 'primary',
+            active: true,
+            class: 'border-b-primary text-primary',
+        },
+        {
+            variant: 'underline',
+            color: 'accent',
+            active: true,
+            class: 'border-b-accent text-accent',
+        },
+        {
+            variant: 'underline',
+            color: 'muted',
+            active: true,
+            class: 'border-b-foreground text-foreground',
+        },
+        // Inactive
+        {
+            variant: 'underline',
+            active: false,
+            class: 'text-muted-foreground hover:text-foreground hover:border-b-border',
+        },
+        // ─── Pill ───
+        {
+            variant: 'pill',
+            color: 'primary',
+            active: true,
+            class: 'bg-primary text-primary-foreground',
+        },
+        {
+            variant: 'pill',
+            color: 'accent',
+            active: true,
+            class: 'bg-accent text-accent-foreground',
+        },
+        {
+            variant: 'pill',
+            color: 'muted',
+            active: true,
+            class: 'bg-muted text-foreground',
+        },
+        {
+            variant: 'pill',
+            active: false,
+            class: 'text-muted-foreground hover:text-foreground hover:bg-muted',
+        },
+        // ─── Outline ───
+        {
+            variant: 'outline',
+            color: 'primary',
+            active: true,
+            class: 'border-primary text-primary bg-primary-subtle',
+        },
+        {
+            variant: 'outline',
+            color: 'accent',
+            active: true,
+            class: 'border-accent text-accent bg-accent-subtle',
+        },
+        {
+            variant: 'outline',
+            color: 'muted',
+            active: true,
+            class: 'border-border text-foreground bg-muted',
+        },
+        {
+            variant: 'outline',
+            active: false,
+            class: 'text-muted-foreground hover:text-foreground hover:border-border',
+        },
+        // ─── Solid ───
+        {
+            variant: 'solid',
+            color: 'primary',
+            active: true,
+            class: 'bg-primary text-primary-foreground shadow-sm',
+        },
+        {
+            variant: 'solid',
+            color: 'accent',
+            active: true,
+            class: 'bg-accent text-accent-foreground shadow-sm',
+        },
+        {
+            variant: 'solid',
+            color: 'muted',
+            active: true,
+            class: 'bg-muted text-foreground shadow-sm',
+        },
+        {
+            variant: 'solid',
+            active: false,
+            class: 'text-muted-foreground hover:text-foreground hover:bg-muted',
+        },
+    ],
+    defaultVariants: {
+        variant: 'underline',
+        size: 'md',
+        color: 'primary',
+        active: false,
+    },
+});
+// ─── Tab Header / Nav Bar Container ───
+const tabHeaderVariants = cva('relative flex', {
+    variants: {
+        alignment: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+            stretch: '[&>*]:flex-1',
+        },
+        variant: {
+            underline: 'border-b border-border',
+            pill: 'gap-1 p-1 bg-muted rounded-tab-list',
+            outline: 'gap-1',
+            solid: 'gap-1 p-1 bg-muted rounded-tab-list',
+        },
+    },
+    defaultVariants: {
+        alignment: 'start',
+        variant: 'underline',
+    },
+});
+// ─── Scroll Button ───
+const tabScrollButtonVariants = cva([
+    'absolute top-0 z-10 flex items-center justify-center',
+    'h-full w-8',
+    'text-muted-foreground hover:text-foreground',
+    'transition-opacity duration-150',
+    'focus-visible:outline-none',
+], {
+    variants: {
+        direction: {
+            left: 'left-0 bg-gradient-to-r from-background to-transparent',
+            right: 'right-0 bg-gradient-to-l from-background to-transparent',
+        },
+        variant: {
+            underline: '',
+            pill: 'from-muted',
+            outline: '',
+            solid: 'from-muted',
+        },
+    },
+    defaultVariants: {
+        direction: 'left',
+        variant: 'underline',
+    },
+});
+// ─── Close Button on Closable Tabs ───
+const tabCloseButtonVariants = cva([
+    'inline-flex items-center justify-center rounded-interactive-sm',
+    'text-current opacity-60 hover:opacity-100',
+    'transition-opacity duration-100',
+    'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring',
+], {
+    variants: {
+        size: {
+            sm: 'h-3.5 w-3.5',
+            md: 'h-4 w-4',
+            lg: 'h-5 w-5',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+// ─── Tab Panel Container ───
+const tabPanelVariants = cva('focus-visible:outline-none', {
+    variants: {
+        animated: {
+            true: 'animate-fade-in',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        animated: true,
+    },
+});
+
+/**
+ * Marker directive for custom tab label templates.
+ *
+ * Provides a custom label template for rich tab headers (icons, badges, counters).
+ * Applied to an `<ng-template>` inside `<ui-tab>`.
+ *
+ * @example
+ * ```html
+ * <com-tab>
+ *   <ng-template comTabLabel>
+ *     <svg class="w-4 h-4">...</svg>
+ *     <span>Settings</span>
+ *     <span class="bg-warn text-warn-foreground text-xs rounded-pill px-1.5">3</span>
+ *   </ng-template>
+ *   <p>Tab content here.</p>
+ * </com-tab>
+ * ```
+ */
+class TabLabelDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: TabLabelDirective, isStandalone: true, selector: "ng-template[comTabLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comTabLabel]',
+                }]
+        }] });
+
+/**
+ * Marker directive for lazy tab content rendering.
+ *
+ * Content wrapped in `<ng-template comTabContent>` is only instantiated
+ * when the tab becomes active for the first time.
+ *
+ * @example Lazy loaded content
+ * ```html
+ * <com-tab label="Analytics">
+ *   <ng-template comTabContent>
+ *     <app-analytics-dashboard />
+ *   </ng-template>
+ * </com-tab>
+ * ```
+ *
+ * @example Combined with @defer
+ * ```html
+ * <com-tab label="Reports">
+ *   <ng-template comTabContent>
+ *     &#64;defer {
+ *       <app-report-builder />
+ *     } &#64;loading {
+ *       <p>Loading reports...</p>
+ *     }
+ *   </ng-template>
+ * </com-tab>
+ * ```
+ */
+class TabContentDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: TabContentDirective, isStandalone: true, selector: "ng-template[comTabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comTabContent]',
+                }]
+        }] });
+
+/**
+ * Individual tab definition component.
+ *
+ * This is a **definition component** — it doesn't render anything itself.
+ * It provides a label and content template to the parent `TabGroupComponent`.
+ *
+ * @example Basic usage
+ * ```html
+ * <com-tab label="Overview">
+ *   <p>Overview content.</p>
+ * </com-tab>
+ * ```
+ *
+ * @example Custom label with icon
+ * ```html
+ * <com-tab>
+ *   <ng-template comTabLabel>
+ *     <svg class="w-4 h-4"><!-- icon --></svg>
+ *     <span>Settings</span>
+ *   </ng-template>
+ *   <p>Settings content.</p>
+ * </com-tab>
+ * ```
+ *
+ * @example Lazy loaded content
+ * ```html
+ * <com-tab label="Analytics">
+ *   <ng-template comTabContent>
+ *     <app-heavy-dashboard />
+ *   </ng-template>
+ * </com-tab>
+ * ```
+ *
+ * @example Closable tab
+ * ```html
+ * <com-tab label="Document" [closable]="true" (closed)="onClose()">
+ *   <p>Document content.</p>
+ * </com-tab>
+ * ```
+ */
+class TabComponent {
+    // ─── Inputs ───
+    /** Plain text label; ignored if `[comTabLabel]` template is provided. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Prevents selection when true. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Shows a close/remove button on the tab. */
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : {}), transform: booleanAttribute });
+    // ─── Outputs ───
+    /** Emitted when the close button is clicked. */
+    closed = output();
+    // ─── Template References ───
+    /** Custom label template (queried from content). */
+    customLabel = contentChild(TabLabelDirective, ...(ngDevMode ? [{ debugName: "customLabel" }] : []));
+    /** Lazy content template (queried from content). */
+    lazyContent = contentChild(TabContentDirective, ...(ngDevMode ? [{ debugName: "lazyContent" }] : []));
+    /** Implicit content template from ng-content. */
+    implicitContent = viewChild('implicitContent', ...(ngDevMode ? [{ debugName: "implicitContent" }] : []));
+    // ─── State (set by parent TabGroupComponent) ───
+    /** Whether this tab is currently active. Set by TabGroupComponent. */
+    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    /** Whether this tab content has been rendered at least once. */
+    hasBeenActivated = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenActivated" }] : []));
+    // ─── Computed ───
+    /**
+     * Returns the label template if provided, otherwise null.
+     * Parent uses this to decide between string label or template.
+     */
+    labelTemplate = computed(() => this.customLabel()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "labelTemplate" }] : []));
+    /**
+     * Returns the content template: lazy template if present, else implicit content.
+     */
+    contentTemplate = computed(() => this.lazyContent()?.templateRef ?? this.implicitContent(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    /**
+     * Whether this tab uses lazy loading.
+     */
+    isLazy = computed(() => !!this.lazyContent(), ...(ngDevMode ? [{ debugName: "isLazy" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: TabComponent, isStandalone: true, selector: "com-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "customLabel", first: true, predicate: TabLabelDirective, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: TabContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #implicitContent>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-tab',
+                    template: `
+    <ng-template #implicitContent>
+      <ng-content />
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], customLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabLabelDirective), { isSignal: true }] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabContentDirective), { isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: ['implicitContent', { isSignal: true }] }] } });
+
+let tabIdCounter = 0;
+/**
+ * Generates a unique ID for tab components.
+ */
+function generateTabId() {
+    return `com-tab-${++tabIdCounter}`;
+}
+
+/**
+ * Internal scrollable tab header component.
+ *
+ * Handles overflow detection, scroll buttons, keyboard navigation,
+ * and the active indicator (for underline variant).
+ *
+ * @internal Not exported in public API.
+ */
+class TabHeaderComponent {
+    destroyRef = inject(DestroyRef);
+    // ─── Inputs ───
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    selectedIndex = input.required(...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    baseId = input.required(...(ngDevMode ? [{ debugName: "baseId" }] : []));
+    // ─── Outputs ───
+    tabSelected = output();
+    tabFocused = output();
+    tabClosed = output();
+    // ─── View Children ───
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+    tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "tabButtons" }] : []));
+    // ─── State ───
+    scrollLeftValue = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeftValue" }] : []));
+    containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+    scrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollWidth" }] : []));
+    indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
+    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    keyManager = null;
+    resizeObserver = null;
+    // ─── Computed ───
+    hasOverflow = computed(() => this.scrollWidth() > this.containerWidth(), ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+    showScrollLeft = computed(() => this.hasOverflow() && this.scrollLeftValue() > 0, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : []));
+    showScrollRight = computed(() => {
+        const remaining = this.scrollWidth() - this.containerWidth() - this.scrollLeftValue();
+        return this.hasOverflow() && remaining > 1;
+    }, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : []));
+    headerClasses = computed(() => mergeClasses(tabHeaderVariants({
+        alignment: this.alignment(),
+        variant: this.variant(),
+    }), 'relative'), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    scrollLeftClasses = computed(() => tabScrollButtonVariants({
+        direction: 'left',
+        variant: this.variant(),
+    }), ...(ngDevMode ? [{ debugName: "scrollLeftClasses" }] : []));
+    scrollRightClasses = computed(() => tabScrollButtonVariants({
+        direction: 'right',
+        variant: this.variant(),
+    }), ...(ngDevMode ? [{ debugName: "scrollRightClasses" }] : []));
+    closeButtonClasses = computed(() => tabCloseButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "closeButtonClasses" }] : []));
+    indicatorColorClass = computed(() => {
+        const colorMap = {
+            primary: 'text-primary',
+            accent: 'text-accent',
+            muted: 'text-foreground',
+        };
+        return colorMap[this.color()];
+    }, ...(ngDevMode ? [{ debugName: "indicatorColorClass" }] : []));
+    constructor() {
+        // Setup resize observer after render
+        afterNextRender(() => {
+            this.setupResizeObserver();
+            this.updateScrollState();
+            this.updateIndicator();
+            this.setupKeyManager();
+        });
+        // Update indicator when selected index changes
+        effect(() => {
+            this.selectedIndex();
+            this.updateIndicator();
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            this.keyManager?.destroy();
+        });
+    }
+    // ─── Public Methods ───
+    getTabId(index) {
+        return `${this.baseId()}-tab-${index}`;
+    }
+    getPanelId(index) {
+        return `${this.baseId()}-panel-${index}`;
+    }
+    getTabClasses(index) {
+        return tabItemVariants({
+            variant: this.variant(),
+            size: this.size(),
+            color: this.color(),
+            active: this.selectedIndex() === index,
+        });
+    }
+    selectTab(index) {
+        const tab = this.tabs()[index];
+        if (tab && !tab.disabled()) {
+            this.tabSelected.emit(index);
+            this.scrollTabIntoView(index);
+        }
+    }
+    scrollLeft() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.75;
+            container.scrollTo({
+                left: container.scrollLeft - scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    }
+    scrollRight() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.75;
+            container.scrollTo({
+                left: container.scrollLeft + scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    }
+    // ─── Event Handlers ───
+    onScroll() {
+        this.updateScrollState();
+    }
+    onTabFocus(index) {
+        this.tabFocused.emit(index);
+        this.scrollTabIntoView(index);
+    }
+    closeTab(event, index) {
+        event.stopPropagation();
+        this.tabClosed.emit(index);
+    }
+    onKeydown(event) {
+        if (!this.keyManager)
+            return;
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.keyManager.setPreviousItemActive();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.keyManager.setNextItemActive();
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.keyManager.setFirstItemActive();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                const activeIndex = this.keyManager.activeItemIndex;
+                if (activeIndex !== null && activeIndex >= 0) {
+                    this.selectTab(activeIndex);
+                }
+                event.preventDefault();
+                break;
+        }
+    }
+    // ─── Private Methods ───
+    setupResizeObserver() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateScrollState();
+            this.updateIndicator();
+        });
+        this.resizeObserver.observe(container);
+    }
+    updateScrollState() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        this.scrollLeftValue.set(container.scrollLeft);
+        this.containerWidth.set(container.clientWidth);
+        this.scrollWidth.set(container.scrollWidth);
+    }
+    updateIndicator() {
+        const buttons = this.tabButtons();
+        const index = this.selectedIndex();
+        if (buttons.length === 0 || index < 0 || index >= buttons.length) {
+            this.indicatorLeft.set(0);
+            this.indicatorWidth.set(0);
+            return;
+        }
+        const button = buttons[index]?.nativeElement;
+        if (button) {
+            this.indicatorLeft.set(button.offsetLeft);
+            this.indicatorWidth.set(button.offsetWidth);
+        }
+    }
+    scrollTabIntoView(index) {
+        const container = this.scrollContainer()?.nativeElement;
+        const buttons = this.tabButtons();
+        if (!container || index < 0 || index >= buttons.length)
+            return;
+        const button = buttons[index]?.nativeElement;
+        if (!button)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        if (buttonRect.left < containerRect.left) {
+            container.scrollTo({
+                left: container.scrollLeft - (containerRect.left - buttonRect.left) - 16,
+                behavior: 'smooth',
+            });
+        }
+        else if (buttonRect.right > containerRect.right) {
+            container.scrollTo({
+                left: container.scrollLeft + (buttonRect.right - containerRect.right) + 16,
+                behavior: 'smooth',
+            });
+        }
+    }
+    setupKeyManager() {
+        const items = this.createKeyManagerItems();
+        this.keyManager = new FocusKeyManager(items)
+            .withHorizontalOrientation('ltr')
+            .withWrap()
+            .skipPredicate(item => item.disabled);
+        this.keyManager.setActiveItem(this.selectedIndex());
+    }
+    createKeyManagerItems() {
+        const buttons = this.tabButtons();
+        const tabs = this.tabs();
+        return buttons.map((buttonRef, index) => ({
+            focus: () => buttonRef.nativeElement.focus(),
+            disabled: tabs[index]?.disabled() ?? false,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabHeaderComponent, isStandalone: true, selector: "com-tab-header", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabSelected: "tabSelected", tabFocused: "tabFocused", tabClosed: "tabClosed" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Scroll button left -->
+    @if (showScrollLeft()) {
+      <button
+        type="button"
+        [class]="scrollLeftClasses()"
+        (click)="scrollLeft()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+    }
+
+    <!-- Tab list -->
+    <div
+      #scrollContainer
+      class="flex overflow-x-auto scrollbar-none"
+      [class]="headerClasses()"
+      role="tablist"
+      [attr.aria-orientation]="'horizontal'"
+      (scroll)="onScroll()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track $index; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="getTabId(i)"
+          [class]="getTabClasses(i)"
+          [attr.aria-selected]="selectedIndex() === i"
+          [attr.aria-controls]="getPanelId(i)"
+          [attr.aria-disabled]="tab.disabled() || null"
+          [attr.data-state]="selectedIndex() === i ? 'active' : 'inactive'"
+          [disabled]="tab.disabled()"
+          [tabindex]="selectedIndex() === i ? 0 : -1"
+          (click)="selectTab(i)"
+          (focus)="onTabFocus(i)"
+        >
+          @if (tab.labelTemplate()) {
+            <ng-container [ngTemplateOutlet]="tab.labelTemplate()!" />
+          } @else {
+            {{ tab.label() }}
+          }
+
+          @if (tab.closable()) {
+            <span
+              role="button"
+              [class]="closeButtonClasses()"
+              (click)="closeTab($event, i)"
+              [attr.aria-label]="'Close ' + tab.label()"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-full w-full"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </span>
+          }
+        </button>
+      }
+
+      <!-- Active indicator (underline variant only) -->
+      @if (variant() === 'underline') {
+        <div
+          class="absolute bottom-0 h-0.5 bg-current transition-all duration-200 ease-out"
+          [class]="indicatorColorClass()"
+          [style.left.px]="indicatorLeft()"
+          [style.width.px]="indicatorWidth()"
+        ></div>
+      }
+    </div>
+
+    <!-- Scroll button right -->
+    @if (showScrollRight()) {
+      <button
+        type="button"
+        [class]="scrollRightClasses()"
+        (click)="scrollRight()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:block;position:relative}.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-none::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-tab-header', template: `
+    <!-- Scroll button left -->
+    @if (showScrollLeft()) {
+      <button
+        type="button"
+        [class]="scrollLeftClasses()"
+        (click)="scrollLeft()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+    }
+
+    <!-- Tab list -->
+    <div
+      #scrollContainer
+      class="flex overflow-x-auto scrollbar-none"
+      [class]="headerClasses()"
+      role="tablist"
+      [attr.aria-orientation]="'horizontal'"
+      (scroll)="onScroll()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track $index; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="getTabId(i)"
+          [class]="getTabClasses(i)"
+          [attr.aria-selected]="selectedIndex() === i"
+          [attr.aria-controls]="getPanelId(i)"
+          [attr.aria-disabled]="tab.disabled() || null"
+          [attr.data-state]="selectedIndex() === i ? 'active' : 'inactive'"
+          [disabled]="tab.disabled()"
+          [tabindex]="selectedIndex() === i ? 0 : -1"
+          (click)="selectTab(i)"
+          (focus)="onTabFocus(i)"
+        >
+          @if (tab.labelTemplate()) {
+            <ng-container [ngTemplateOutlet]="tab.labelTemplate()!" />
+          } @else {
+            {{ tab.label() }}
+          }
+
+          @if (tab.closable()) {
+            <span
+              role="button"
+              [class]="closeButtonClasses()"
+              (click)="closeTab($event, i)"
+              [attr.aria-label]="'Close ' + tab.label()"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-full w-full"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </span>
+          }
+        </button>
+      }
+
+      <!-- Active indicator (underline variant only) -->
+      @if (variant() === 'underline') {
+        <div
+          class="absolute bottom-0 h-0.5 bg-current transition-all duration-200 ease-out"
+          [class]="indicatorColorClass()"
+          [style.left.px]="indicatorLeft()"
+          [style.width.px]="indicatorWidth()"
+        ></div>
+      }
+    </div>
+
+    <!-- Scroll button right -->
+    @if (showScrollRight()) {
+      <button
+        type="button"
+        [class]="scrollRightClasses()"
+        (click)="scrollRight()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    }
+  `, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-none::-webkit-scrollbar{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], baseId: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseId", required: true }] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], tabFocused: [{ type: i0.Output, args: ["tabFocused"] }], tabClosed: [{ type: i0.Output, args: ["tabClosed"] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
+
+/**
+ * Tab group component — orchestrates tab state and renders header + panels.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-border`, `--color-ring`,
+ *         `--color-disabled`, `--color-disabled-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-tab-group>
+ *   <com-tab label="Overview">
+ *     <p>Overview content.</p>
+ *   </com-tab>
+ *   <com-tab label="Settings">
+ *     <p>Settings content.</p>
+ *   </com-tab>
+ * </com-tab-group>
+ * ```
+ *
+ * @example With variants
+ * ```html
+ * <com-tab-group variant="pill" color="accent">
+ *   <com-tab label="Tab 1"><p>Pill style.</p></com-tab>
+ *   <com-tab label="Tab 2"><p>Content.</p></com-tab>
+ * </com-tab-group>
+ * ```
+ *
+ * @example Two-way binding
+ * ```html
+ * <com-tab-group [(selectedIndex)]="currentTab">
+ *   <com-tab label="One"><p>First.</p></com-tab>
+ *   <com-tab label="Two"><p>Second.</p></com-tab>
+ * </com-tab-group>
+ * ```
+ *
+ * @example Lazy loaded content
+ * ```html
+ * <com-tab-group>
+ *   <com-tab label="Summary"><p>Loads immediately.</p></com-tab>
+ *   <com-tab label="Analytics">
+ *     <ng-template comTabContent>
+ *       <app-analytics-dashboard />
+ *     </ng-template>
+ *   </com-tab>
+ * </com-tab-group>
+ * ```
+ */
+class TabGroupComponent {
+    /** Unique ID for this tab group instance. */
+    baseId = generateTabId();
+    // ─── Inputs ───
+    /** Visual treatment of tab buttons. */
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Controls tab button padding and font size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Active tab color. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Tab alignment within the header. */
+    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    /** Two-way bindable selected tab index. */
+    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    /** Enable/disable panel transition animation. */
+    animationEnabled = input(true, { ...(ngDevMode ? { debugName: "animationEnabled" } : {}), transform: booleanAttribute });
+    /** When true, keeps inactive tab DOM alive (hidden); when false, destroys inactive tab content. */
+    preserveContent = input(false, { ...(ngDevMode ? { debugName: "preserveContent" } : {}), transform: booleanAttribute });
+    // ─── Outputs ───
+    /** Emits when the selected tab changes with index and tab reference. */
+    selectedTabChange = output();
+    /** Emits the index of the focused (not yet selected) tab for keyboard navigation feedback. */
+    focusChange = output();
+    // ─── Content Children ───
+    /** All TabComponent children. */
+    tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    // ─── Computed ───
+    /** The currently active tab. */
+    activeTab = computed(() => this.tabs()[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /** ID of the active tab button. */
+    activeTabId = computed(() => this.getTabId(this.selectedIndex()), ...(ngDevMode ? [{ debugName: "activeTabId" }] : []));
+    /** ID of the active panel. */
+    activePanelId = computed(() => this.getPanelId(this.selectedIndex()), ...(ngDevMode ? [{ debugName: "activePanelId" }] : []));
+    /** Classes for panel container. */
+    panelClasses = computed(() => tabPanelVariants({ animated: this.animationEnabled() }), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    constructor() {
+        // Update isActive state on tabs when selection changes
+        effect(() => {
+            const currentIndex = this.selectedIndex();
+            const allTabs = this.tabs();
+            allTabs.forEach((tab, index) => {
+                const isActive = index === currentIndex;
+                tab.isActive.set(isActive);
+                // Mark as activated for lazy loading
+                if (isActive && !tab.hasBeenActivated()) {
+                    tab.hasBeenActivated.set(true);
+                }
+            });
+        });
+    }
+    // ─── Public Methods ───
+    getTabId(index) {
+        return `${this.baseId}-tab-${index}`;
+    }
+    getPanelId(index) {
+        return `${this.baseId}-panel-${index}`;
+    }
+    /**
+     * Determines whether a tab's content should be rendered.
+     * For lazy tabs, content is only rendered after first activation.
+     */
+    shouldRenderTab(tab, index) {
+        // Non-lazy tabs always render their content
+        if (!tab.isLazy()) {
+            return true;
+        }
+        // Lazy tabs render only if they've been activated at least once
+        return tab.hasBeenActivated();
+    }
+    // ─── Event Handlers ───
+    onTabSelected(index) {
+        const tab = this.tabs()[index];
+        if (tab && !tab.disabled()) {
+            this.selectedIndex.set(index);
+            this.selectedTabChange.emit({ index, tab });
+        }
+    }
+    onTabFocused(index) {
+        this.focusChange.emit(index);
+    }
+    onTabClosed(index) {
+        const tab = this.tabs()[index];
+        if (tab) {
+            tab.closed.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabGroupComponent, isStandalone: true, selector: "com-tab-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, animationEnabled: { classPropertyName: "animationEnabled", publicName: "animationEnabled", isSignal: true, isRequired: false, transformFunction: null }, preserveContent: { classPropertyName: "preserveContent", publicName: "preserveContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { classAttribute: "com-tab-group" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: `
+    <com-tab-header
+      [tabs]="tabs()"
+      [selectedIndex]="selectedIndex()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [alignment]="alignment()"
+      [baseId]="baseId"
+      (tabSelected)="onTabSelected($event)"
+      (tabFocused)="onTabFocused($event)"
+      (tabClosed)="onTabClosed($event)"
+    />
+
+    <div
+      class="mt-2"
+      role="tabpanel"
+      [id]="activePanelId()"
+      [attr.aria-labelledby]="activeTabId()"
+      tabindex="0"
+    >
+      @if (preserveContent()) {
+        @for (tab of tabs(); track $index; let i = $index) {
+          <div
+            [hidden]="selectedIndex() !== i"
+            [class]="panelClasses()"
+            role="tabpanel"
+            [id]="getPanelId(i)"
+            [attr.aria-labelledby]="getTabId(i)"
+          >
+            @if (shouldRenderTab(tab, i)) {
+              <ng-container [ngTemplateOutlet]="tab.contentTemplate()!" />
+            }
+          </div>
+        }
+      } @else {
+        @if (activeTab(); as tab) {
+          <div [class]="panelClasses()">
+            @if (shouldRenderTab(tab, selectedIndex())) {
+              <ng-container [ngTemplateOutlet]="tab.contentTemplate()!" />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TabHeaderComponent, selector: "com-tab-header", inputs: ["tabs", "selectedIndex", "variant", "size", "color", "alignment", "baseId"], outputs: ["tabSelected", "tabFocused", "tabClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-tab-group', template: `
+    <com-tab-header
+      [tabs]="tabs()"
+      [selectedIndex]="selectedIndex()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [alignment]="alignment()"
+      [baseId]="baseId"
+      (tabSelected)="onTabSelected($event)"
+      (tabFocused)="onTabFocused($event)"
+      (tabClosed)="onTabClosed($event)"
+    />
+
+    <div
+      class="mt-2"
+      role="tabpanel"
+      [id]="activePanelId()"
+      [attr.aria-labelledby]="activeTabId()"
+      tabindex="0"
+    >
+      @if (preserveContent()) {
+        @for (tab of tabs(); track $index; let i = $index) {
+          <div
+            [hidden]="selectedIndex() !== i"
+            [class]="panelClasses()"
+            role="tabpanel"
+            [id]="getPanelId(i)"
+            [attr.aria-labelledby]="getTabId(i)"
+          >
+            @if (shouldRenderTab(tab, i)) {
+              <ng-container [ngTemplateOutlet]="tab.contentTemplate()!" />
+            }
+          </div>
+        }
+      } @else {
+        @if (activeTab(); as tab) {
+          <div [class]="panelClasses()">
+            @if (shouldRenderTab(tab, selectedIndex())) {
+              <ng-container [ngTemplateOutlet]="tab.contentTemplate()!" />
+            }
+          </div>
+        }
+      }
+    </div>
+  `, imports: [TabHeaderComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-tab-group',
+                    }, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], animationEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationEnabled", required: false }] }], preserveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveContent", required: false }] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
+
+/**
+ * Tab link directive for route-driven navigation tabs.
+ *
+ * Applied to anchor or button elements inside `com-tab-nav-bar`.
+ * Automatically detects active state from `routerLinkActive` if present.
+ *
+ * @example Basic usage with router
+ * ```html
+ * <nav com-tab-nav-bar>
+ *   <a comTabLink routerLink="overview" routerLinkActive>Overview</a>
+ *   <a comTabLink routerLink="settings" routerLinkActive>Settings</a>
+ * </nav>
+ * ```
+ *
+ * @example Manual active state control
+ * ```html
+ * <a comTabLink [active]="isOverviewActive">Overview</a>
+ * ```
+ *
+ * @example Disabled link
+ * ```html
+ * <a comTabLink [disabled]="true">Coming Soon</a>
+ * ```
+ */
+class TabLinkDirective {
+    routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
+    elementRef = inject(ElementRef);
+    // ─── Inputs ───
+    /** Manual active state control. */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
+    /** Prevents interaction when true. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Visual variant (inherited from parent nav bar or set directly). */
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size (inherited from parent nav bar or set directly). */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Color (inherited from parent nav bar or set directly). */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Additional CSS classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    // ─── Private ───
+    /**
+     * Reactive signal from RouterLinkActive.isActiveChange.
+     * Converts the EventEmitter to a signal for proper reactivity.
+     */
+    routerLinkActiveState = this.routerLinkActive
+        ? toSignal(this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive)), { initialValue: this.routerLinkActive.isActive })
+        : null;
+    // ─── Computed ───
+    /**
+     * Resolved active state — uses routerLinkActive if available, otherwise input.
+     */
+    isActive = computed(() => {
+        if (this.routerLinkActiveState) {
+            return this.routerLinkActiveState();
+        }
+        return this.active();
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    /** Computed host class from CVA + consumer overrides. */
+    computedClass = computed(() => mergeClasses(tabItemVariants({
+        variant: this.variant(),
+        size: this.size(),
+        color: this.color(),
+        active: this.isActive(),
+    }), this.disabled() && 'pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    /** Focus this tab link element. */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TabLinkDirective, isStandalone: true, selector: "a[comTabLink], button[comTabLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, properties: { "class": "computedClass()", "attr.aria-selected": "isActive()", "attr.aria-disabled": "disabled() || null", "attr.data-state": "isActive() ? \"active\" : \"inactive\"", "tabindex": "isActive() ? 0 : -1" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[comTabLink], button[comTabLink]',
+                    host: {
+                        role: 'tab',
+                        '[class]': 'computedClass()',
+                        '[attr.aria-selected]': 'isActive()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.data-state]': 'isActive() ? "active" : "inactive"',
+                        '[tabindex]': 'isActive() ? 0 : -1',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Tab navigation bar component for route-driven tabs.
+ *
+ * Renders a styled, scrollable row of links that map to routes.
+ * Content is handled by `<router-outlet>`.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-ring`, `--color-disabled`, `--color-disabled-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <nav com-tab-nav-bar>
+ *   <a comTabLink routerLink="overview" routerLinkActive>Overview</a>
+ *   <a comTabLink routerLink="settings" routerLinkActive>Settings</a>
+ * </nav>
+ * <router-outlet />
+ * ```
+ *
+ * @example With variants
+ * ```html
+ * <nav com-tab-nav-bar variant="pill" color="accent" size="sm">
+ *   <a comTabLink routerLink="grid" routerLinkActive>Grid</a>
+ *   <a comTabLink routerLink="list" routerLinkActive>List</a>
+ * </nav>
+ * ```
+ */
+class TabNavBarComponent {
+    destroyRef = inject(DestroyRef);
+    /** Unique ID for this nav bar instance. */
+    baseId = generateTabId();
+    // ─── Inputs ───
+    /** Visual treatment of tab links. */
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Controls tab link padding and font size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Active tab color. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Tab alignment within the bar. */
+    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    // ─── Content Children ───
+    /** All TabLinkDirective children. */
+    tabLinks = contentChildren(TabLinkDirective, ...(ngDevMode ? [{ debugName: "tabLinks" }] : []));
+    // ─── View Children ───
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+    // ─── State ───
+    scrollLeftValue = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeftValue" }] : []));
+    containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+    scrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollWidth" }] : []));
+    indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
+    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    keyManager = null;
+    resizeObserver = null;
+    // ─── Computed ───
+    /** The currently active link. */
+    activeLink = computed(() => this.tabLinks().find(link => link.isActive()), ...(ngDevMode ? [{ debugName: "activeLink" }] : []));
+    hasOverflow = computed(() => this.scrollWidth() > this.containerWidth(), ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+    showScrollLeft = computed(() => this.hasOverflow() && this.scrollLeftValue() > 0, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : []));
+    showScrollRight = computed(() => {
+        const remaining = this.scrollWidth() - this.containerWidth() - this.scrollLeftValue();
+        return this.hasOverflow() && remaining > 1;
+    }, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : []));
+    headerClasses = computed(() => mergeClasses(tabHeaderVariants({
+        alignment: this.alignment(),
+        variant: this.variant(),
+    }), 'relative'), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    scrollLeftClasses = computed(() => tabScrollButtonVariants({
+        direction: 'left',
+        variant: this.variant(),
+    }), ...(ngDevMode ? [{ debugName: "scrollLeftClasses" }] : []));
+    scrollRightClasses = computed(() => tabScrollButtonVariants({
+        direction: 'right',
+        variant: this.variant(),
+    }), ...(ngDevMode ? [{ debugName: "scrollRightClasses" }] : []));
+    indicatorColorClass = computed(() => {
+        const colorMap = {
+            primary: 'text-primary',
+            accent: 'text-accent',
+            muted: 'text-foreground',
+        };
+        return colorMap[this.color()];
+    }, ...(ngDevMode ? [{ debugName: "indicatorColorClass" }] : []));
+    constructor() {
+        // Setup resize observer after render
+        afterNextRender(() => {
+            this.setupResizeObserver();
+            this.updateScrollState();
+            this.setupKeyManager();
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            this.keyManager?.destroy();
+        });
+    }
+    // ─── Public Methods ───
+    scrollLeft() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.75;
+            container.scrollTo({
+                left: container.scrollLeft - scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    }
+    scrollRight() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.75;
+            container.scrollTo({
+                left: container.scrollLeft + scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    }
+    // ─── Event Handlers ───
+    onScroll() {
+        this.updateScrollState();
+    }
+    onKeydown(event) {
+        if (!this.keyManager)
+            return;
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.keyManager.setPreviousItemActive();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.keyManager.setNextItemActive();
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.keyManager.setFirstItemActive();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+                break;
+        }
+    }
+    // ─── Private Methods ───
+    setupResizeObserver() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateScrollState();
+        });
+        this.resizeObserver.observe(container);
+    }
+    updateScrollState() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        this.scrollLeftValue.set(container.scrollLeft);
+        this.containerWidth.set(container.clientWidth);
+        this.scrollWidth.set(container.scrollWidth);
+    }
+    setupKeyManager() {
+        const items = this.createKeyManagerItems();
+        this.keyManager = new FocusKeyManager(items)
+            .withHorizontalOrientation('ltr')
+            .withWrap()
+            .skipPredicate(item => item.disabled);
+    }
+    createKeyManagerItems() {
+        return this.tabLinks().map(link => ({
+            focus: () => link.focus(),
+            disabled: link.disabled(),
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabNavBarComponent, isStandalone: true, selector: "com-tab-nav-bar, nav[com-tab-nav-bar]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "com-tab-nav-bar" }, queries: [{ propertyName: "tabLinks", predicate: TabLinkDirective, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Scroll button left -->
+    @if (showScrollLeft()) {
+      <button
+        type="button"
+        [class]="scrollLeftClasses()"
+        (click)="scrollLeft()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+    }
+
+    <!-- Tab link container -->
+    <div
+      #scrollContainer
+      class="flex overflow-x-auto scrollbar-none"
+      [class]="headerClasses()"
+      role="tablist"
+      [attr.aria-orientation]="'horizontal'"
+      (scroll)="onScroll()"
+      (keydown)="onKeydown($event)"
+    >
+      <ng-content />
+
+      <!-- Active indicator (underline variant only) -->
+      @if (variant() === 'underline' && activeLink()) {
+        <div
+          class="absolute bottom-0 h-0.5 bg-current transition-all duration-200 ease-out"
+          [class]="indicatorColorClass()"
+          [style.left.px]="indicatorLeft()"
+          [style.width.px]="indicatorWidth()"
+        ></div>
+      }
+    </div>
+
+    <!-- Scroll button right -->
+    @if (showScrollRight()) {
+      <button
+        type="button"
+        [class]="scrollRightClasses()"
+        (click)="scrollRight()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:block;position:relative}.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-none::-webkit-scrollbar{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabNavBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-tab-nav-bar, nav[com-tab-nav-bar]', template: `
+    <!-- Scroll button left -->
+    @if (showScrollLeft()) {
+      <button
+        type="button"
+        [class]="scrollLeftClasses()"
+        (click)="scrollLeft()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+    }
+
+    <!-- Tab link container -->
+    <div
+      #scrollContainer
+      class="flex overflow-x-auto scrollbar-none"
+      [class]="headerClasses()"
+      role="tablist"
+      [attr.aria-orientation]="'horizontal'"
+      (scroll)="onScroll()"
+      (keydown)="onKeydown($event)"
+    >
+      <ng-content />
+
+      <!-- Active indicator (underline variant only) -->
+      @if (variant() === 'underline' && activeLink()) {
+        <div
+          class="absolute bottom-0 h-0.5 bg-current transition-all duration-200 ease-out"
+          [class]="indicatorColorClass()"
+          [style.left.px]="indicatorLeft()"
+          [style.width.px]="indicatorWidth()"
+        ></div>
+      }
+    </div>
+
+    <!-- Scroll button right -->
+    @if (showScrollRight()) {
+      <button
+        type="button"
+        [class]="scrollRightClasses()"
+        (click)="scrollRight()"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <svg
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-tab-nav-bar',
+                    }, styles: [":host{display:block;position:relative}.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-none::-webkit-scrollbar{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], tabLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabLinkDirective), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
+
+// Public API for the tabs component
+// Variants (for advanced customization)
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TabComponent, TabContentDirective, TabGroupComponent, TabLabelDirective, TabLinkDirective, TabNavBarComponent, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants };
+//# sourceMappingURL=ngx-com-components-tabs.mjs.map