ngx-com 0.0.21 → 0.1.0

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

@@ -12,7 +12,7 @@ import { startWith } from 'rxjs';
 const tabItemVariants = cva([
     'relative inline-flex items-center justify-center gap-2',
     'whitespace-nowrap font-medium select-none',
-    'transition-colors duration-150',
+    'transition-colors duration-normal',
     'disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed disabled:pointer-events-none',
     'focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',
 ], {
@@ -171,7 +171,7 @@ 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',
+    'transition-opacity duration-normal',
     'focus-visible:outline-none',
 ], {
     variants: {
@@ -198,7 +198,7 @@ const tabScrollButtonVariants = cva([
 const tabCloseButtonVariants = cva([
     'inline-flex items-center justify-center rounded-interactive-sm',
     'text-muted-foreground hover:text-foreground',
-    'transition-colors duration-100',
+    'transition-colors duration-fast',
     'focus-visible:outline-[1px] focus-visible:outline-offset-1 focus-visible:outline-ring',
 ], {
     variants: {
@@ -214,7 +214,7 @@ const tabCloseButtonVariants = cva([
 const tabPanelVariants = cva('focus-visible:outline-none', {
     variants: {
         animated: {
-            true: 'animate-fade-in',
+            true: 'animate-fade-in motion-reduce:animate-none',
             false: '',
         },
     },
@@ -227,7 +227,9 @@ const tabPanelVariants = cva('focus-visible:outline-none', {
  * 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>`.
+ * Applied to an `<ng-template>` inside `<com-tab>`.
+ *
+ * @tokens none
  *
  * @example
  * ```html
@@ -241,15 +243,15 @@ const tabPanelVariants = cva('focus-visible:outline-none', {
  * </com-tab>
  * ```
  */
-class TabLabelDirective {
+class ComTabLabel {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComTabLabel, isStandalone: true, selector: "ng-template[comTabLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[comTabLabel]',
@@ -262,6 +264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Content wrapped in `<ng-template comTabContent>` is only instantiated
  * when the tab becomes active for the first time.
  *
+ * @tokens none
+ *
  * @example Lazy loaded content
  * ```html
  * <com-tab label="Analytics">
@@ -284,15 +288,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </com-tab>
  * ```
  */
-class TabContentDirective {
+class ComTabContent {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComTabContent, isStandalone: true, selector: "ng-template[comTabContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[comTabContent]',
@@ -303,7 +307,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * 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`.
+ * It provides a label and content template to the parent `ComTabGroup`.
+ *
+ * @tokens none
  *
  * @example Basic usage
  * ```html
@@ -339,7 +345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </com-tab>
  * ```
  */
-class TabComponent {
+class ComTab {
     // ─── Inputs ───
     /** Plain text label; ignored if `[comTabLabel]` template is provided. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -352,13 +358,13 @@ class TabComponent {
     closed = output();
     // ─── Template References ───
     /** Custom label template (queried from content). */
-    customLabel = contentChild(TabLabelDirective, ...(ngDevMode ? [{ debugName: "customLabel" }] : []));
+    customLabel = contentChild(ComTabLabel, ...(ngDevMode ? [{ debugName: "customLabel" }] : []));
     /** Lazy content template (queried from content). */
-    lazyContent = contentChild(TabContentDirective, ...(ngDevMode ? [{ debugName: "lazyContent" }] : []));
+    lazyContent = contentChild(ComTabContent, ...(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. */
+    // ─── State (set by parent ComTabGroup) ───
+    /** Whether this tab is currently active. Set by ComTabGroup. */
     isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     /** Whether this tab content has been rendered at least once. */
     hasBeenActivated = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenActivated" }] : []));
@@ -376,14 +382,14 @@ class TabComponent {
      * 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ComTab, 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: ComTabLabel, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: ComTabContent, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'com-tab',
@@ -394,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `,
                     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 }] }] } });
+        }], 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(() => ComTabLabel), { isSignal: true }] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComTabContent), { isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: ['implicitContent', { isSignal: true }] }] } });
 
 let tabIdCounter = 0;
 /**
@@ -410,9 +416,13 @@ function generateTabId() {
  * Handles overflow detection, scroll buttons, keyboard navigation,
  * and the active indicator (for underline variant).
  *
+ * @tokens `--color-primary`, `--color-accent`, `--color-foreground`, `--color-muted-foreground`,
+ *         `--color-muted`, `--color-border`, `--color-background`, `--color-ring`,
+ *         `--color-disabled`, `--color-disabled-foreground`
+ *
  * @internal Not exported in public API.
  */
-class TabHeaderComponent {
+class ComTabHeader {
     destroyRef = inject(DestroyRef);
     // ─── Inputs ───
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
@@ -559,13 +569,14 @@ class TabHeaderComponent {
                 event.preventDefault();
                 break;
             case 'Enter':
-            case ' ':
+            case ' ': {
                 const activeIndex = this.keyManager.activeItemIndex;
                 if (activeIndex !== null && activeIndex >= 0) {
                     this.selectTab(activeIndex);
                 }
                 event.preventDefault();
                 break;
+            }
         }
     }
     // ─── Private Methods ───
@@ -609,6 +620,8 @@ class TabHeaderComponent {
         const button = buttons[index]?.nativeElement;
         if (!button)
             return;
+        if (!container.getBoundingClientRect || !button.getBoundingClientRect)
+            return;
         const containerRect = container.getBoundingClientRect();
         const buttonRect = button.getBoundingClientRect();
         if (buttonRect.left < containerRect.left) {
@@ -640,8 +653,8 @@ class TabHeaderComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTabHeader, 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
@@ -671,6 +684,7 @@ class TabHeaderComponent {
       class="flex overflow-x-auto scrollbar-none"
       [class]="headerClasses()"
       role="tablist"
+      tabindex="-1"
       [attr.aria-orientation]="'horizontal'"
       (scroll)="onScroll()"
       (keydown)="onKeydown($event)"
@@ -690,6 +704,7 @@ class TabHeaderComponent {
           [tabindex]="selectedIndex() === i ? 0 : -1"
           (click)="selectTab(i)"
           (focus)="onTabFocus(i)"
+          (keydown.delete)="tab.closable() && closeTab($event, i)"
         >
           @if (tab.labelTemplate()) {
             <ng-container [ngTemplateOutlet]="tab.labelTemplate()!" />
@@ -699,10 +714,9 @@ class TabHeaderComponent {
 
           @if (tab.closable()) {
             <span
-              role="button"
+              aria-hidden="true"
               [class]="closeButtonClasses()"
               (click)="closeTab($event, i)"
-              [attr.aria-label]="'Close ' + tab.label()"
             >
               <svg
                 viewBox="0 0 24 24"
@@ -724,7 +738,7 @@ class TabHeaderComponent {
       <!-- 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="absolute bottom-0 h-0.5 bg-current transition-all duration-slow ease-out"
           [class]="indicatorColorClass()"
           [style.left.px]="indicatorLeft()"
           [style.width.px]="indicatorWidth()"
@@ -756,7 +770,7 @@ class TabHeaderComponent {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabHeader, decorators: [{
             type: Component,
             args: [{ selector: 'com-tab-header', template: `
     <!-- Scroll button left -->
@@ -788,6 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       class="flex overflow-x-auto scrollbar-none"
       [class]="headerClasses()"
       role="tablist"
+      tabindex="-1"
       [attr.aria-orientation]="'horizontal'"
       (scroll)="onScroll()"
       (keydown)="onKeydown($event)"
@@ -807,6 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           [tabindex]="selectedIndex() === i ? 0 : -1"
           (click)="selectTab(i)"
           (focus)="onTabFocus(i)"
+          (keydown.delete)="tab.closable() && closeTab($event, i)"
         >
           @if (tab.labelTemplate()) {
             <ng-container [ngTemplateOutlet]="tab.labelTemplate()!" />
@@ -816,10 +832,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
           @if (tab.closable()) {
             <span
-              role="button"
+              aria-hidden="true"
               [class]="closeButtonClasses()"
               (click)="closeTab($event, i)"
-              [attr.aria-label]="'Close ' + tab.label()"
             >
               <svg
                 viewBox="0 0 24 24"
@@ -841,7 +856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       <!-- 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="absolute bottom-0 h-0.5 bg-current transition-all duration-slow ease-out"
           [class]="indicatorColorClass()"
           [style.left.px]="indicatorLeft()"
           [style.width.px]="indicatorWidth()"
@@ -921,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </com-tab-group>
  * ```
  */
-class TabGroupComponent {
+class ComTabGroup {
     /** Unique ID for this tab group instance. */
     baseId = generateTabId();
     // ─── Inputs ───
@@ -945,8 +960,8 @@ class TabGroupComponent {
     /** 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" }] : []));
+    /** All ComTab children. */
+    tabs = contentChildren(ComTab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     // ─── Computed ───
     /** The currently active tab. */
     activeTab = computed(() => this.tabs()[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
@@ -982,7 +997,7 @@ class TabGroupComponent {
      * Determines whether a tab's content should be rendered.
      * For lazy tabs, content is only rendered after first activation.
      */
-    shouldRenderTab(tab, index) {
+    shouldRenderTab(tab, _index) {
         // Non-lazy tabs always render their content
         if (!tab.isLazy()) {
             return true;
@@ -1007,8 +1022,8 @@ class TabGroupComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTabGroup, 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: ComTab, isSignal: true }], ngImport: i0, template: `
     <com-tab-header
       [tabs]="tabs()"
       [selectedIndex]="selectedIndex()"
@@ -1053,9 +1068,9 @@ class TabGroupComponent {
         }
       }
     </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 });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ComTabHeader, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabGroup, decorators: [{
             type: Component,
             args: [{ selector: 'com-tab-group', template: `
     <com-tab-header
@@ -1102,10 +1117,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }
       }
     </div>
-  `, imports: [TabHeaderComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, imports: [ComTabHeader, 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 }] }] } });
+        }], 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(() => ComTab), { isSignal: true }] }] } });
 
 /**
  * Tab link directive for route-driven navigation tabs.
@@ -1113,6 +1128,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Applied to anchor or button elements inside `com-tab-nav-bar`.
  * Automatically detects active state from `routerLinkActive` if present.
  *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-muted`,
+ *         `--color-border`, `--color-ring`,
+ *         `--color-disabled`, `--color-disabled-foreground`
+ *
  * @example Basic usage with router
  * ```html
  * <nav com-tab-nav-bar>
@@ -1131,7 +1152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * <a comTabLink [disabled]="true">Coming Soon</a>
  * ```
  */
-class TabLinkDirective {
+class ComTabLink {
     routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
     elementRef = inject(ElementRef);
     // ─── Inputs ───
@@ -1176,10 +1197,10 @@ class TabLinkDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComTabLink, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[comTabLink], button[comTabLink]',
@@ -1220,7 +1241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * </nav>
  * ```
  */
-class TabNavBarComponent {
+class ComTabNavBar {
     destroyRef = inject(DestroyRef);
     /** Unique ID for this nav bar instance. */
     baseId = generateTabId();
@@ -1234,8 +1255,8 @@ class TabNavBarComponent {
     /** Tab alignment within the bar. */
     alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
     // ─── Content Children ───
-    /** All TabLinkDirective children. */
-    tabLinks = contentChildren(TabLinkDirective, ...(ngDevMode ? [{ debugName: "tabLinks" }] : []));
+    /** All ComTabLink children. */
+    tabLinks = contentChildren(ComTabLink, ...(ngDevMode ? [{ debugName: "tabLinks" }] : []));
     // ─── View Children ───
     scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
     // ─── State ───
@@ -1366,8 +1387,8 @@ class TabNavBarComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabNavBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTabNavBar, 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: ComTabLink, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Scroll button left -->
     @if (showScrollLeft()) {
       <button
@@ -1397,6 +1418,7 @@ class TabNavBarComponent {
       class="flex overflow-x-auto scrollbar-none"
       [class]="headerClasses()"
       role="tablist"
+      tabindex="-1"
       [attr.aria-orientation]="'horizontal'"
       (scroll)="onScroll()"
       (keydown)="onKeydown($event)"
@@ -1406,7 +1428,7 @@ class TabNavBarComponent {
       <!-- 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="absolute bottom-0 h-0.5 bg-current transition-all duration-slow ease-out"
           [class]="indicatorColorClass()"
           [style.left.px]="indicatorLeft()"
           [style.width.px]="indicatorWidth()"
@@ -1438,7 +1460,7 @@ class TabNavBarComponent {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTabNavBar, decorators: [{
             type: Component,
             args: [{ selector: 'com-tab-nav-bar, nav[com-tab-nav-bar]', template: `
     <!-- Scroll button left -->
@@ -1470,6 +1492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       class="flex overflow-x-auto scrollbar-none"
       [class]="headerClasses()"
       role="tablist"
+      tabindex="-1"
       [attr.aria-orientation]="'horizontal'"
       (scroll)="onScroll()"
       (keydown)="onKeydown($event)"
@@ -1479,7 +1502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       <!-- 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="absolute bottom-0 h-0.5 bg-current transition-all duration-slow ease-out"
           [class]="indicatorColorClass()"
           [style.left.px]="indicatorLeft()"
           [style.width.px]="indicatorWidth()"
@@ -1512,7 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `, 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 }] }] } });
+        }], 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(() => ComTabLink), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
 
 // Public API for the tabs component
 // Variants (for advanced customization)
@@ -1521,5 +1544,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TabComponent, TabContentDirective, TabGroupComponent, TabLabelDirective, TabLinkDirective, TabNavBarComponent, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants };
+export { ComTab, ComTabContent, ComTabGroup, ComTabLabel, ComTabLink, ComTabNavBar, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants };
 //# sourceMappingURL=ngx-com-components-tabs.mjs.map