@bsginstitute/bsg-integra 0.0.3 → 0.0.5

package/fesm2022/bsginstitute-bsg-integra.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { input, signal, computed, Component, inject, output, contentChildren, viewChild, effect, HostListener, linkedSignal, forwardRef, HostBinding, Directive, ElementRef, model, Injectable, PLATFORM_ID, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { input, signal, computed, Component, inject, output, contentChildren, viewChild, effect, HostListener, linkedSignal, forwardRef, HostBinding, Directive, ElementRef, model, Injectable, PLATFORM_ID, ChangeDetectionStrategy, EventEmitter, Output, Input, ViewChild } from '@angular/core';
 import { clsx } from 'clsx';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common';
-import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 
@@ -338,11 +338,11 @@ const alertVariants = cva(clsx(
 'box-border'), {
     variants: {
         variant: {
-            default: 'text-sky-600',
-            info: 'bg-blue-200 text-blue-600',
-            success: 'bg-green-200 text-green-600',
-            warning: 'bg-yellow-200 text-yellow-600',
-            destructive: 'bg-red-200 text-red-600',
+            default: 'text-muted-foreground',
+            info: 'bg-info/20 text-info',
+            success: 'bg-success/20 text-success',
+            warning: 'bg-warning/20 text-warning',
+            destructive: 'bg-destructive/20 text-destructive',
         },
     },
     defaultVariants: {
@@ -718,8 +718,8 @@ const avatarVariants = cva(clsx(
         },
         type: {
             default: 'bg-transparent',
-            fallback: 'bg-violet-600',
-            image: 'bg-neutral-100',
+            fallback: 'bg-primary',
+            image: 'bg-muted',
         },
     },
     defaultVariants: {
@@ -734,7 +734,7 @@ const avatarVariants = cva(clsx(
  */
 const avatarInitialsVariants = cva(clsx(
 // Color
-'text-white', 
+'text-primary-foreground', 
 // Typography
 'font-sans font-normal tracking-wide', 
 // Layout
@@ -980,11 +980,11 @@ const badgeVariants = cva(clsx(
 'pointer-events-none select-none'), {
     variants: {
         variant: {
-            default: 'bg-violet-600 text-white',
-            secondary: 'bg-blue-600 text-white',
-            destructive: 'bg-red-600 text-white',
-            success: 'bg-green-600 text-white',
-            outline: 'bg-white text-slate-800 border border-slate-300',
+            default: 'bg-primary text-primary-foreground',
+            secondary: 'bg-secondary text-secondary-foreground',
+            destructive: 'bg-destructive text-destructive-foreground',
+            success: 'bg-success text-success-foreground',
+            outline: 'bg-background text-foreground border border-border',
         },
         size: {
             dot: 'w-3 h-3', // 12x12
@@ -1001,7 +1001,7 @@ const badgeVariants = cva(clsx(
         {
             variant: 'outline',
             size: 'dot',
-            class: 'bg-transparent border border-slate-300',
+            class: 'bg-transparent border border-border',
         },
         // Default size "text" (pequeño)
         {
@@ -1138,28 +1138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
 
-/**
- * Button variants
- *
- * Controls the button styles including size, variant, shape, and state
- */
-const buttonVariants = cva(clsx(
-// Layout
-'inline-flex items-center justify-center', 
-// Gap
-'gap-2.5', 
-// Typography
-'text-sm font-medium leading-normal tracking-tight', 
-// Cursor
-'cursor-pointer', 
-// Transition
-'transition-all duration-200', 
-// Whitespace
-'whitespace-nowrap', 
-// Border reset
-'border-0', 
-// Focus outline reset (prevent focus ring on click)
-'outline-none'), {
+// projects/bsg-integra/src/lib/components/button/button.variants.ts
+const buttonVariants = cva(clsx('inline-flex items-center justify-center', 'gap-2.5', 'text-sm font-medium leading-normal tracking-tight', 'cursor-pointer', 'transition-all duration-200', 'whitespace-nowrap', 'border-0', 'outline-none', 'relative'), {
     variants: {
         size: {
             sm: 'h-[27px] py-2 px-4',
@@ -1169,7 +1149,7 @@ const buttonVariants = cva(clsx(
         variant: {
             default: clsx('bg-violet-600 text-white', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus-visible:bg-violet-900 focus-visible:ring-2 focus-visible:ring-violet-600 focus-visible:ring-offset-2'),
             secondary: clsx('bg-blue-600 text-white', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus-visible:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2'),
-            outline: clsx('bg-transparent text-violet-600 border border-violet-600', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus-visible:border-violet-900 focus-visible:text-violet-900 focus-visible:ring-2 focus-visible:ring-violet-600 focus-visible:ring-offset-2'),
+            outline: clsx('bg-transparent text-violet-600 border border-violet-600', 'hover:bg-violet-50', 'active:bg-violet-100', 'focus-visible:border-violet-900 focus-visible:text-violet-900 focus-visible:ring-2 focus-visible:ring-violet-600 focus-visible:ring-offset-2'),
             ghost: clsx('bg-violet-100 text-slate-800', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus-visible:bg-violet-200 focus-visible:ring-2 focus-visible:ring-violet-600 focus-visible:ring-offset-2'),
             link: clsx('bg-transparent text-blue-600', 'hover:opacity-90', 'active:underline', 'focus-visible:text-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2'),
             destructive: clsx('bg-red-600 text-white', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus-visible:bg-red-700 focus-visible:ring-2 focus-visible:ring-red-600 focus-visible:ring-offset-2'),
@@ -1179,7 +1159,7 @@ const buttonVariants = cva(clsx(
             pill: 'rounded-full',
             icon: 'rounded-md',
             'icon-text': 'rounded-md',
-            'icon-only': 'rounded-full p-0',
+            'icon-only': 'rounded-full',
         },
         disabled: {
             true: 'opacity-40 cursor-not-allowed pointer-events-none',
@@ -1187,57 +1167,49 @@ const buttonVariants = cva(clsx(
         },
     },
     compoundVariants: [
-        // Icon shape sizes
         { shape: 'icon', size: 'sm', class: 'w-[27px] h-[27px] p-2' },
         { shape: 'icon', size: 'md', class: 'w-[35px] h-[35px] p-2' },
         { shape: 'icon', size: 'lg', class: 'w-[43px] h-[43px] p-2' },
-        // Icon-only shape sizes
         {
             shape: 'icon-only',
             size: 'sm',
-            class: 'w-[27px] h-[27px] min-w-[27px] min-h-[27px]',
+            class: 'w-[27px] h-[27px] min-w-[27px] min-h-[27px] p-0',
         },
         {
             shape: 'icon-only',
             size: 'md',
-            class: 'w-[35px] h-[35px] min-w-[35px] min-h-[35px]',
+            class: 'w-[35px] h-[35px] min-w-[35px] min-h-[35px] p-0',
         },
         {
             shape: 'icon-only',
             size: 'lg',
-            class: 'w-[43px] h-[43px] min-w-[43px] min-h-[43px]',
+            class: 'w-[43px] h-[43px] min-w-[43px] min-h-[43px] p-0',
         },
-        // Icon-only + outline variant
         {
             shape: 'icon-only',
             variant: 'outline',
             class: 'bg-transparent border border-slate-300 text-purple-600 hover:opacity-90 active:border-purple-600 focus-visible:border-slate-500 focus-visible:text-purple-800 focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2',
         },
-        // Icon-only + default variant
         {
             shape: 'icon-only',
             variant: 'default',
             class: 'bg-violet-600 text-white border border-violet-600',
         },
-        // Icon-only + secondary variant
         {
             shape: 'icon-only',
             variant: 'secondary',
             class: 'bg-blue-600 text-white border border-blue-600',
         },
-        // Icon-only + ghost variant
         {
             shape: 'icon-only',
             variant: 'ghost',
             class: 'bg-violet-100 text-slate-800 border border-violet-100',
         },
-        // Icon-only + link variant
         {
             shape: 'icon-only',
             variant: 'link',
             class: 'bg-transparent text-blue-600 border border-transparent',
         },
-        // Icon-only + destructive variant
         {
             shape: 'icon-only',
             variant: 'destructive',
@@ -1251,14 +1223,7 @@ const buttonVariants = cva(clsx(
         disabled: false,
     },
 });
-/**
- * Button icon variants
- *
- * Controls the icon styling within buttons
- */
-const buttonIconVariants = cva(clsx(
-// Layout
-'shrink-0'), {
+const buttonIconVariants = cva(clsx('inline-flex items-center justify-center shrink-0 leading-none'), {
     variants: {
         position: {
             left: '-mr-0.5',
@@ -1270,187 +1235,124 @@ const buttonIconVariants = cva(clsx(
         position: 'left',
     },
 });
-/**
- * Button label variants
- *
- * Controls the label text styling
- */
-const buttonLabelVariants = cva(clsx(
-// Layout
-'inline-block'));
-/**
- * Button icon-only wrapper variants
- *
- * Controls the icon wrapper for icon-only buttons
- */
-const buttonIconOnlyVariants = cva(clsx(
-// Layout
-'flex items-center justify-center', 'w-full h-full'), {
+const buttonLabelVariants = cva(clsx('inline-block'));
+const buttonIconOnlyVariants = cva(clsx('flex items-center justify-center leading-none'), {
     variants: {
-        size: {
-            sm: 'w-[17px] h-[17px]',
-            md: 'w-[21px] h-[21px]',
-            lg: 'w-[26px] h-[26px]',
+        size: { sm: '', md: '', lg: '' },
+    },
+    defaultVariants: { size: 'md' },
+});
+/** ✅ nuevo: spinner overlay centrado */
+const buttonSpinnerVariants = cva(clsx('absolute inset-0 flex items-center justify-center'), {
+    variants: {
+        shape: {
+            rectangular: '',
+            pill: '',
+            icon: '',
+            'icon-text': '',
+            'icon-only': '',
         },
     },
     defaultVariants: {
-        size: 'md',
+        shape: 'rectangular',
     },
 });
 
-// Icon definitions for icon-only buttons
-const icons = {
-    'chevron-left': `<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.64776 3.57275C9.91136 3.30915 10.3386 3.30915 10.6023 3.57275C10.8659 3.83636 10.8659 4.26364 10.6023 4.52724L7.0295 8.1L10.6023 11.6728C10.8659 11.9364 10.8659 12.3636 10.6023 12.6272C10.3386 12.8908 9.91136 12.8908 9.64776 12.6272L5.59776 8.57724C5.33415 8.31364 5.33415 7.88636 5.59776 7.62275L9.64776 3.57275Z" fill="currentColor"/>
-</svg>`,
-    'chevron-right': `<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.35224 3.57275C6.08864 3.30915 5.66136 3.30915 5.39776 3.57275C5.13415 3.83636 5.13415 4.26364 5.39776 4.52724L8.9705 8.1L5.39776 11.6728C5.13415 11.9364 5.13415 12.3636 5.39776 12.6272C5.66136 12.8908 6.08864 12.8908 6.35224 12.6272L10.4022 8.57724C10.6659 8.31364 10.6659 7.88636 10.4022 7.62275L6.35224 3.57275Z" fill="currentColor"/>
-</svg>`,
-    'chevron-up': `<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.57275 9.64776C3.30915 9.91136 3.30915 10.3386 3.57275 10.6023C3.83636 10.8659 4.26364 10.8659 4.52724 10.6023L8.1 7.0295L11.6728 10.6023C11.9364 10.8659 12.3636 10.8659 12.6272 10.6023C12.8908 10.3386 12.8908 9.91136 12.6272 9.64776L8.57724 5.59776C8.31364 5.33415 7.88636 5.33415 7.62275 5.59776L3.57275 9.64776Z" fill="currentColor"/>
-</svg>`,
-    'chevron-down': `<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.57275 6.35224C3.30915 6.08864 3.30915 5.66136 3.57275 5.39776C3.83636 5.13415 4.26364 5.13415 4.52724 5.39776L8.1 8.9705L11.6728 5.39776C11.9364 5.13415 12.3636 5.13415 12.6272 5.39776C12.8908 5.66136 12.8908 6.08864 12.6272 6.35224L8.57724 10.4022C8.31364 10.6659 7.88636 10.6659 7.62275 10.4022L3.57275 6.35224Z" fill="currentColor"/>
-</svg>`,
-    check: `<svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor"/>
-</svg>`,
-    none: '',
-};
-/**
- * Button Component - Interactive button with multiple variants
- *
- * Following shadcn/ui pattern:
- * ```html
- * <bsg-button
- *   [variant]="'default'"
- *   [size]="'md'"
- *   [shape]="'rectangular'"
- *   [label]="'Click me'"
- *   (Click)="onClick()"
- * />
- * ```
- */
 class ButtonComponent {
-    sanitizer;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    /** Size of the button */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /** Visual variant of the button */
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    /** Shape of the button */
     shape = input('rectangular', ...(ngDevMode ? [{ debugName: "shape" }] : []));
-    /** Button label text */
     label = input('Boton', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Show icon */
-    icon = input(false, ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    /** Icon position (left or right) */
-    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
-    /** Icon name for icon-only buttons */
-    iconName = input('chevron-left', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    /** Disabled state */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /** Additional CSS classes */
+    /** ✅ nuevo: muestra spinner y bloquea click */
+    spinner = input(false, ...(ngDevMode ? [{ debugName: "spinner" }] : []));
+    /** Accesibilidad para icon buttons */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    /** Click event emitter */
     Click = output();
-    // Computed disabled state
-    isDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    // Computed button classes
+    isDisabled = computed(() => this.disabled() || this.spinner(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isIconButton = computed(() => this.shape() === 'icon-only' || this.shape() === 'icon', ...(ngDevMode ? [{ debugName: "isIconButton" }] : []));
+    buttonSquarePx = computed(() => this.size() === 'sm' ? 27 : this.size() === 'lg' ? 43 : 35, ...(ngDevMode ? [{ debugName: "buttonSquarePx" }] : []));
+    iconFontPx = computed(() => this.size() === 'sm' ? 15 : this.size() === 'lg' ? 22 : 18, ...(ngDevMode ? [{ debugName: "iconFontPx" }] : []));
+    spinnerPx = computed(() => this.size() === 'sm' ? 14 : this.size() === 'lg' ? 20 : 16, ...(ngDevMode ? [{ debugName: "spinnerPx" }] : []));
     buttonClasses = computed(() => clsx(buttonVariants({
         size: this.size(),
         variant: this.variant(),
         shape: this.shape(),
-        disabled: this.disabled(),
-    }), this.icon() && 'btn-with-icon', this.className()), ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
-    // Computed icon classes
-    iconClasses(position) {
-        return clsx(buttonIconVariants({ position }), this.shape() === 'icon' && 'm-0');
-    }
-    // Computed label classes
+        disabled: this.isDisabled(),
+    }), this.className()), ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
     labelClasses = computed(() => clsx(buttonLabelVariants()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
-    // Computed icon-only wrapper classes
     iconOnlyClasses = computed(() => clsx(buttonIconOnlyVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "iconOnlyClasses" }] : []));
-    // Computed icon color based on variant
-    iconColor = computed(() => {
-        const variantVal = this.variant();
-        if (variantVal === 'outline')
-            return '#7C3AED';
-        if (variantVal === 'ghost')
-            return '#1E293B';
-        if (variantVal === 'link')
-            return '#2563EB';
-        return 'white';
-    }, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-    getIconSvg(iconName) {
-        const svg = icons[iconName] || icons['none'];
-        return this.sanitizer.bypassSecurityTrustHtml(svg);
+    spinnerClasses = computed(() => clsx(buttonSpinnerVariants({ shape: this.shape() })), ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : []));
+    iconClasses(position) {
+        return clsx(buttonIconVariants({ position }));
     }
     handleClick(event) {
-        if (!this.disabled()) {
+        if (!this.isDisabled())
             this.Click.emit(event);
-        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: true, selector: "bsg-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { Click: "Click" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: true, selector: "bsg-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spinner: { classPropertyName: "spinner", publicName: "spinner", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { Click: "Click" }, ngImport: i0, template: `
     <button
       type="button"
       (click)="handleClick($event)"
       [class]="buttonClasses()"
       [disabled]="isDisabled()"
       [attr.aria-disabled]="isDisabled()"
+      [attr.aria-busy]="spinner() ? 'true' : null"
       [attr.aria-label]="
-        shape() === 'icon-only' ? label() || 'Icon button' : null
+        ariaLabel() ?? (isIconButton() ? label() || 'Icon button' : null)
       "
+      [style.width.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.minWidth.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.height.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.minHeight.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.padding]="isIconButton() ? '0' : null"
     >
-      <!-- Icon-only button: centered icon using DomSanitizer -->
-      @if (shape() === 'icon-only') {
+      <!-- Spinner -->
+      @if (spinner()) {
         <span
-          [class]="iconOnlyClasses()"
-          [innerHTML]="getIconSvg(iconName())"
-        ></span>
+          [class]="spinnerClasses()"
+          [style.fontSize.px]="spinnerPx()"
+          [attr.aria-hidden]="'true'"
+        >
+          <i class="fa-solid fa-spinner fa-spin"></i>
+        </span>
       }
 
-      <!-- Regular buttons with optional icons -->
-      @if (shape() !== 'icon-only' && icon() && iconPosition() === 'left') {
-        <svg
+      <!-- Icon-only / Icon button content -->
+      @if (isIconButton()) {
+        <span
+          [class]="iconOnlyClasses()"
+          [style.fontSize.px]="iconFontPx()"
+          [style.lineHeight]="1"
+          [style.opacity]="spinner() ? 0 : 1"
+        >
+          <ng-content></ng-content>
+        </span>
+      } @else {
+        <span
+          class="bsg-btn-icon"
           [class]="iconClasses('left')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          [style.opacity]="spinner() ? 0 : 1"
         >
-          <path
-            d="M6.43152 0.706459C7.98489 0.461733 9.57507 0.757369 10.9371 1.54325C11.236 1.71571 11.3389 2.09758 11.1666 2.39652C10.9941 2.6955 10.6117 2.79791 10.3127 2.6254C9.19838 1.98244 7.8971 1.74102 6.62622 1.9412C5.35531 2.14143 4.19123 2.77142 3.32849 3.72587C2.46577 4.68036 1.95621 5.90193 1.88501 7.18656C1.81383 8.47123 2.18524 9.74182 2.93726 10.7858C3.68927 11.8297 4.7767 12.5845 6.0177 12.9239C7.2587 13.2632 8.57874 13.167 9.75733 12.651C10.936 12.1351 11.9022 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.0129 6.37479C12.944 6.03664 13.1625 5.7065 13.5006 5.63749C13.8388 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.3279 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2584 13.7961C8.81797 14.4266 7.20484 14.5441 5.68811 14.1293C4.17129 13.7145 2.84198 12.7923 1.92285 11.5164C1.00374 10.2404 0.549867 8.68771 0.636842 7.11759C0.723839 5.54744 1.3469 4.05449 2.40137 2.88786C3.45582 1.7213 4.87818 0.951184 6.43152 0.706459ZM13.3084 2.05778C13.5524 1.81398 13.9482 1.81382 14.1921 2.05778C14.4362 2.30186 14.4362 2.6981 14.1921 2.94218L7.94214 9.19218C7.69815 9.43613 7.30244 9.43597 7.05835 9.19218L5.18335 7.31718C4.93927 7.0731 4.93927 6.67686 5.18335 6.43278C5.42744 6.18898 5.82315 6.18882 6.06714 6.43278L7.50025 7.86588L13.3084 2.05778Z"
-            [attr.fill]="iconColor()"
-          />
-        </svg>
-      }
+          <ng-content select="[left-icon]"></ng-content>
+        </span>
 
-      @if (shape() !== 'icon' && shape() !== 'icon-only') {
-        <span [class]="labelClasses()">{{ label() }}</span>
-      }
+        <span [class]="labelClasses()" [style.opacity]="spinner() ? 0 : 1">{{
+          label()
+        }}</span>
 
-      @if (shape() !== 'icon-only' && icon() && iconPosition() === 'right') {
-        <svg
+        <span
+          class="bsg-btn-icon"
           [class]="iconClasses('right')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          [style.opacity]="spinner() ? 0 : 1"
         >
-          <path
-            d="M6.43152 0.706459C7.98489 0.461733 9.57507 0.757369 10.9371 1.54325C11.236 1.71571 11.3389 2.09758 11.1666 2.39652C10.9941 2.6955 10.6117 2.79791 10.3127 2.6254C9.19838 1.98244 7.8971 1.74102 6.62622 1.9412C5.35531 2.14143 4.19123 2.77142 3.32849 3.72587C2.46577 4.68036 1.95621 5.90193 1.88501 7.18656C1.81383 8.47123 2.18524 9.74182 2.93726 10.7858C3.68927 11.8297 4.7767 12.5845 6.0177 12.9239C7.2587 13.2632 8.57874 13.167 9.75733 12.651C10.936 12.1351 11.9022 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.0129 6.37479C12.944 6.03664 13.1625 5.7065 13.5006 5.63749C13.8388 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.3279 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2584 13.7961C8.81797 14.4266 7.20484 14.5441 5.68811 14.1293C4.17129 13.7145 2.84198 12.7923 1.92285 11.5164C1.00374 10.2404 0.549867 8.68771 0.636842 7.11759C0.723839 5.54744 1.3469 4.05449 2.40137 2.88786C3.45582 1.7213 4.87818 0.951184 6.43152 0.706459ZM13.3084 2.05778C13.5524 1.81398 13.9482 1.81382 14.1921 2.05778C14.4362 2.30186 14.4362 2.6981 14.1921 2.94218L7.94214 9.19218C7.69815 9.43613 7.30244 9.43597 7.05835 9.19218L5.18335 7.31718C4.93927 7.0731 4.93927 6.67686 5.18335 6.43278C5.42744 6.18898 5.82315 6.18882 6.06714 6.43278L7.50025 7.86588L13.3084 2.05778Z"
-            [attr.fill]="iconColor()"
-          />
-        </svg>
+          <ng-content select="[right-icon]"></ng-content>
+        </span>
       }
     </button>
-  `, isInline: true, styles: [":host{display:inline-block}\n"] });
+  `, isInline: true, styles: [":host{display:inline-block}.bsg-btn-icon:empty{display:none}:host ::ng-deep i{color:inherit}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -1461,57 +1363,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       [class]="buttonClasses()"
       [disabled]="isDisabled()"
       [attr.aria-disabled]="isDisabled()"
+      [attr.aria-busy]="spinner() ? 'true' : null"
       [attr.aria-label]="
-        shape() === 'icon-only' ? label() || 'Icon button' : null
+        ariaLabel() ?? (isIconButton() ? label() || 'Icon button' : null)
       "
+      [style.width.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.minWidth.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.height.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.minHeight.px]="isIconButton() ? buttonSquarePx() : null"
+      [style.padding]="isIconButton() ? '0' : null"
     >
-      <!-- Icon-only button: centered icon using DomSanitizer -->
-      @if (shape() === 'icon-only') {
+      <!-- Spinner -->
+      @if (spinner()) {
         <span
-          [class]="iconOnlyClasses()"
-          [innerHTML]="getIconSvg(iconName())"
-        ></span>
+          [class]="spinnerClasses()"
+          [style.fontSize.px]="spinnerPx()"
+          [attr.aria-hidden]="'true'"
+        >
+          <i class="fa-solid fa-spinner fa-spin"></i>
+        </span>
       }
 
-      <!-- Regular buttons with optional icons -->
-      @if (shape() !== 'icon-only' && icon() && iconPosition() === 'left') {
-        <svg
+      <!-- Icon-only / Icon button content -->
+      @if (isIconButton()) {
+        <span
+          [class]="iconOnlyClasses()"
+          [style.fontSize.px]="iconFontPx()"
+          [style.lineHeight]="1"
+          [style.opacity]="spinner() ? 0 : 1"
+        >
+          <ng-content></ng-content>
+        </span>
+      } @else {
+        <span
+          class="bsg-btn-icon"
           [class]="iconClasses('left')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          [style.opacity]="spinner() ? 0 : 1"
         >
-          <path
-            d="M6.43152 0.706459C7.98489 0.461733 9.57507 0.757369 10.9371 1.54325C11.236 1.71571 11.3389 2.09758 11.1666 2.39652C10.9941 2.6955 10.6117 2.79791 10.3127 2.6254C9.19838 1.98244 7.8971 1.74102 6.62622 1.9412C5.35531 2.14143 4.19123 2.77142 3.32849 3.72587C2.46577 4.68036 1.95621 5.90193 1.88501 7.18656C1.81383 8.47123 2.18524 9.74182 2.93726 10.7858C3.68927 11.8297 4.7767 12.5845 6.0177 12.9239C7.2587 13.2632 8.57874 13.167 9.75733 12.651C10.936 12.1351 11.9022 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.0129 6.37479C12.944 6.03664 13.1625 5.7065 13.5006 5.63749C13.8388 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.3279 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2584 13.7961C8.81797 14.4266 7.20484 14.5441 5.68811 14.1293C4.17129 13.7145 2.84198 12.7923 1.92285 11.5164C1.00374 10.2404 0.549867 8.68771 0.636842 7.11759C0.723839 5.54744 1.3469 4.05449 2.40137 2.88786C3.45582 1.7213 4.87818 0.951184 6.43152 0.706459ZM13.3084 2.05778C13.5524 1.81398 13.9482 1.81382 14.1921 2.05778C14.4362 2.30186 14.4362 2.6981 14.1921 2.94218L7.94214 9.19218C7.69815 9.43613 7.30244 9.43597 7.05835 9.19218L5.18335 7.31718C4.93927 7.0731 4.93927 6.67686 5.18335 6.43278C5.42744 6.18898 5.82315 6.18882 6.06714 6.43278L7.50025 7.86588L13.3084 2.05778Z"
-            [attr.fill]="iconColor()"
-          />
-        </svg>
-      }
+          <ng-content select="[left-icon]"></ng-content>
+        </span>
 
-      @if (shape() !== 'icon' && shape() !== 'icon-only') {
-        <span [class]="labelClasses()">{{ label() }}</span>
-      }
+        <span [class]="labelClasses()" [style.opacity]="spinner() ? 0 : 1">{{
+          label()
+        }}</span>
 
-      @if (shape() !== 'icon-only' && icon() && iconPosition() === 'right') {
-        <svg
+        <span
+          class="bsg-btn-icon"
           [class]="iconClasses('right')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          [style.opacity]="spinner() ? 0 : 1"
         >
-          <path
-            d="M6.43152 0.706459C7.98489 0.461733 9.57507 0.757369 10.9371 1.54325C11.236 1.71571 11.3389 2.09758 11.1666 2.39652C10.9941 2.6955 10.6117 2.79791 10.3127 2.6254C9.19838 1.98244 7.8971 1.74102 6.62622 1.9412C5.35531 2.14143 4.19123 2.77142 3.32849 3.72587C2.46577 4.68036 1.95621 5.90193 1.88501 7.18656C1.81383 8.47123 2.18524 9.74182 2.93726 10.7858C3.68927 11.8297 4.7767 12.5845 6.0177 12.9239C7.2587 13.2632 8.57874 13.167 9.75733 12.651C10.936 12.1351 11.9022 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.0129 6.37479C12.944 6.03664 13.1625 5.7065 13.5006 5.63749C13.8388 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.3279 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2584 13.7961C8.81797 14.4266 7.20484 14.5441 5.68811 14.1293C4.17129 13.7145 2.84198 12.7923 1.92285 11.5164C1.00374 10.2404 0.549867 8.68771 0.636842 7.11759C0.723839 5.54744 1.3469 4.05449 2.40137 2.88786C3.45582 1.7213 4.87818 0.951184 6.43152 0.706459ZM13.3084 2.05778C13.5524 1.81398 13.9482 1.81382 14.1921 2.05778C14.4362 2.30186 14.4362 2.6981 14.1921 2.94218L7.94214 9.19218C7.69815 9.43613 7.30244 9.43597 7.05835 9.19218L5.18335 7.31718C4.93927 7.0731 4.93927 6.67686 5.18335 6.43278C5.42744 6.18898 5.82315 6.18882 6.06714 6.43278L7.50025 7.86588L13.3084 2.05778Z"
-            [attr.fill]="iconColor()"
-          />
-        </svg>
+          <ng-content select="[right-icon]"></ng-content>
+        </span>
       }
     </button>
-  `, styles: [":host{display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], Click: [{ type: i0.Output, args: ["Click"] }] } });
+  `, styles: [":host{display:inline-block}.bsg-btn-icon:empty{display:none}:host ::ng-deep i{color:inherit}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinner", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], Click: [{ type: i0.Output, args: ["Click"] }] } });
 
 /**
  * Card container variants
@@ -1530,19 +1436,19 @@ const cardVariants = cva(clsx(
 // Border
 'rounded-lg', 
 // Background
-'bg-white', 
+'bg-card', 
 // Transition
 'transition-all duration-200'), {
     variants: {
         variant: {
-            default: 'border border-zinc-200',
+            default: 'border border-border',
         },
         contentVariant: {
             default: '',
-            metric: clsx('items-center justify-center', 'px-[89px] py-4', 'min-h-[87px]', 'bg-red-50 border border-red-200'),
-            infoDate: clsx('items-center justify-center', 'px-2 py-[17px]', 'gap-2', 'min-h-[84px]', 'w-fit max-w-[101px]', 'bg-blue-50 border-0'),
-            infoCurrency: clsx('items-start justify-start', 'p-4', 'gap-4', 'min-h-[90px]', 'w-fit max-w-[273px]', 'bg-blue-200 border-0'),
-            placeholder: clsx('w-[277px] min-h-[225px]', 'border border-slate-200', 'bg-transparent', 'p-0'),
+            metric: clsx('items-center justify-center', 'px-[89px] py-4', 'min-h-[87px]', 'bg-destructive/10 border border-destructive/30'),
+            infoDate: clsx('items-center justify-center', 'px-2 py-[17px]', 'gap-2', 'min-h-[84px]', 'w-fit max-w-[101px]', 'bg-info/10 border-0'),
+            infoCurrency: clsx('items-start justify-start', 'p-4', 'gap-4', 'min-h-[90px]', 'w-fit max-w-[273px]', 'bg-info/30 border-0'),
+            placeholder: clsx('w-[277px] min-h-[225px]', 'border border-border', 'bg-transparent', 'p-0'),
         },
     },
     defaultVariants: {
@@ -1573,7 +1479,7 @@ const cardHeaderVariants = cva(clsx(
 // Typography
 'text-sm font-normal leading-normal', 
 // Color
-'text-slate-600'));
+'text-muted-foreground'));
 /**
  * Card info icon variants
  *
@@ -1603,7 +1509,7 @@ const cardValueVariants = cva(clsx(
 // Typography
 'text-[32px] font-extrabold leading-[1.2]', 
 // Color
-'text-neutral-800'));
+'text-card-foreground'));
 /**
  * Card helper row variants
  *
@@ -1625,7 +1531,7 @@ const cardHelperVariants = cva(clsx(
 // Layout
 'shrink-0', 
 // Default color (green for positive)
-'text-green-600'));
+'text-success'));
 /**
  * Card helper description variants
  *
@@ -1635,7 +1541,7 @@ const cardHelperDescriptionVariants = cva(clsx(
 // Typography
 'text-[13px] font-normal leading-normal', 
 // Color
-'text-slate-500'));
+'text-muted-foreground'));
 /**
  * Card metric title variants
  *
@@ -1647,7 +1553,7 @@ const cardMetricTitleVariants = cva(clsx(
 // Typography
 'text-xs font-medium leading-normal text-center', 
 // Color
-'text-slate-600'));
+'text-muted-foreground'));
 /**
  * Card metric value variants
  *
@@ -1659,7 +1565,7 @@ const cardMetricValueVariants = cva(clsx(
 // Typography
 'text-2xl font-bold leading-normal text-center', 
 // Color
-'text-red-600'));
+'text-destructive'));
 /**
  * Card info label variants
  *
@@ -1671,7 +1577,7 @@ const cardInfoLabelVariants = cva(clsx(
 // Typography
 'text-xs font-medium leading-normal text-center', 
 // Color
-'text-slate-600'));
+'text-muted-foreground'));
 /**
  * Card info text variants
  *
@@ -1683,7 +1589,7 @@ const cardInfoTextVariants = cva(clsx(
 // Typography
 'text-sm font-bold leading-normal text-center', 
 // Color
-'text-slate-600'));
+'text-muted-foreground'));
 /**
  * Card currency label variants
  *
@@ -1695,7 +1601,7 @@ const cardCurrencyLabelVariants = cva(clsx(
 // Typography
 'text-sm font-medium leading-normal', 
 // Color
-'text-slate-700'));
+'text-foreground'));
 /**
  * Card currency content variants
  *
@@ -1727,7 +1633,7 @@ const cardCurrencyTextVariants = cva(clsx(
 // Typography
 'text-xl font-bold leading-normal', 
 // Color
-'text-blue-600'));
+'text-info'));
 /**
  * Slot header/body/footer variants (estilo shadcn)
  * Son “wrappers” que te permiten componer cards personalizadas.
@@ -2062,11 +1968,11 @@ const carouselArrowVariants = cva(clsx('absolute top-1/2 -translate-y-1/2', 'z-2
 // Tamaño
 'w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 lg:w-[41px] lg:h-[41px]', 
 // Forma
-'rounded-full bg-white border border-[#E2E8F0]', 
+'rounded-full bg-background border border-border', 
 // Color del icono
-'text-purple-600', 
+'text-primary', 
 // Interacción
-'cursor-pointer p-0', 'transition-opacity duration-200', 'disabled:opacity-40 disabled:cursor-not-allowed', 'hover:not-disabled:opacity-80', 'focus-visible:outline-2 focus-visible:outline-purple-600 focus-visible:outline-offset-2', 'focus:not-focus-visible:outline-none'), {
+'cursor-pointer p-0', 'transition-opacity duration-200', 'disabled:opacity-40 disabled:cursor-not-allowed', 'hover:not-disabled:opacity-80', 'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2', 'focus:not-focus-visible:outline-none'), {
     variants: {
         direction: {
             prev: 'left-2.5',
@@ -2079,7 +1985,7 @@ const carouselArrowVariants = cva(clsx('absolute top-1/2 -translate-y-1/2', 'z-2
 });
 const carouselChevronVariants = cva(clsx('block', 'w-4 h-4 sm:w-5 sm:h-5 md:w-[22px] md:h-[22px] lg:w-6 lg:h-6', 'pointer-events-none'));
 const carouselIndicatorsVariants = cva(clsx('flex items-center justify-center', 'gap-3 sm:gap-5', 'mt-4 sm:mt-6', 'w-full', 'pointer-events-auto'));
-const carouselIndicatorVariants = cva(clsx('w-2.5 h-2.5 sm:w-3 sm:h-3', 'rounded-full', 'bg-purple-600', 'border-0', 'p-0', 'cursor-pointer', 'transition-opacity duration-200', 'shrink-0', 'hover:opacity-60', 'focus-visible:outline-2 focus-visible:outline-purple-600 focus-visible:outline-offset-2', 'focus:not-focus-visible:outline-none'), {
+const carouselIndicatorVariants = cva(clsx('w-2.5 h-2.5 sm:w-3 sm:h-3', 'rounded-full', 'bg-primary', 'border-0', 'p-0', 'cursor-pointer', 'transition-opacity duration-200', 'shrink-0', 'hover:opacity-60', 'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2', 'focus:not-focus-visible:outline-none'), {
     variants: {
         active: {
             true: 'opacity-100',
@@ -3343,7 +3249,7 @@ const dialogOverlayVariants = cva(clsx('fixed inset-0', 'z-[9999]', 'flex justif
 /**
  * Dialog content variants
  */
-const dialogContentVariants = cva(clsx('relative', 'flex flex-col', 'shrink-0', 'bg-white', 'rounded-xl', 'shadow-xl', 'max-h-[90vh]', 'w-full', 'box-border', 'animate-in zoom-in-95 duration-200', 'select-text', 'focus:outline-none'), {
+const dialogContentVariants = cva(clsx('relative', 'flex flex-col', 'shrink-0', 'bg-card', 'rounded-xl', 'shadow-xl', 'max-h-[90vh]', 'w-full', 'box-border', 'animate-in zoom-in-95 duration-200', 'select-text', 'focus:outline-none'), {
     variants: {
         size: {
             sm: 'max-w-sm',
@@ -3366,9 +3272,9 @@ const dialogContentVariants = cva(clsx('relative', 'flex flex-col', 'shrink-0',
 const dialogHeaderVariants = cva(clsx('flex items-center', 'min-h-[57px]', 'px-[17px] py-5 md:px-3.5 md:py-4', 'rounded-t-xl', 'box-border', 'font-sans text-base font-semibold leading-normal', 'md:text-sm'), {
     variants: {
         tone: {
-            brand: 'bg-orange-600 text-white',
-            info: 'bg-purple-100 text-purple-600',
-            secondary: 'bg-purple-100 text-purple-600',
+            brand: 'bg-brand text-brand-foreground',
+            info: 'bg-primary/20 text-primary',
+            secondary: 'bg-primary/20 text-primary',
         },
     },
     defaultVariants: {
@@ -3378,7 +3284,7 @@ const dialogHeaderVariants = cva(clsx('flex items-center', 'min-h-[57px]', 'px-[
 /**
  * Dialog body variants
  */
-const dialogBodyVariants = cva(clsx('flex-1', 'px-[23px] py-5 md:px-3.5 md:py-4', 'box-border', 'font-sans text-sm font-medium leading-normal', 'md:text-[13px]', 'text-slate-500'), {
+const dialogBodyVariants = cva(clsx('flex-1', 'px-[23px] py-5 md:px-3.5 md:py-4', 'box-border', 'font-sans text-sm font-medium leading-normal', 'md:text-[13px]', 'text-muted-foreground'), {
     variants: {
         scrollable: {
             true: 'overflow-y-auto max-h-[calc(90vh-200px)] md:max-h-[calc(95vh-180px)]',
@@ -3392,7 +3298,7 @@ const dialogBodyVariants = cva(clsx('flex-1', 'px-[23px] py-5 md:px-3.5 md:py-4'
 /**
  * Dialog footer variants
  */
-const dialogFooterVariants = cva(clsx('flex items-center justify-end flex-nowrap', 'gap-8 md:gap-5', 'px-[23px] py-5 md:px-3.5 md:py-4', 'border-t border-slate-200', 'box-border', 'w-full'));
+const dialogFooterVariants = cva(clsx('flex items-center justify-end flex-nowrap', 'gap-8 md:gap-5', 'px-[23px] py-5 md:px-3.5 md:py-4', 'border-t border-border', 'box-border', 'w-full'));
 
 // projects/bsg-integra/src/lib/components/dialog/dialog.component.ts
 class DialogComponent {
@@ -3707,7 +3613,7 @@ const labelVariants = cva(clsx(
 // Typography
 'text-sm', 'font-inherit', 
 // Color
-'text-slate-800'));
+'text-foreground'));
 
 /**
  * Label Component
@@ -6472,6 +6378,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
 
+/**
+ * Spinner variants
+ *
+ * Controls the spinner appearance including size and color variants.
+ * Based on shadcn/ui spinner pattern.
+ */
+const spinnerVariants = cva(clsx(
+// Base animation
+'animate-spin', 
+// Accessibility
+'shrink-0'), {
+    variants: {
+        /**
+         * Size variants
+         * Following shadcn/ui pattern: size-3, size-4 (default), size-6, size-8
+         */
+        size: {
+            xs: 'size-3',
+            sm: 'size-4',
+            md: 'size-6',
+            lg: 'size-8',
+            xl: 'size-10',
+        },
+        /**
+         * Color variants using design tokens
+         */
+        variant: {
+            default: 'text-foreground',
+            primary: 'text-primary',
+            secondary: 'text-secondary-foreground',
+            muted: 'text-muted-foreground',
+            destructive: 'text-destructive',
+            success: 'text-success',
+            warning: 'text-warning',
+            info: 'text-info',
+            brand: 'text-brand',
+        },
+    },
+    defaultVariants: {
+        size: 'sm',
+        variant: 'primary',
+    },
+});
+
+/**
+ * Spinner Component
+ *
+ * A loading indicator that shows a spinning animation.
+ * Based on shadcn/ui spinner pattern using an SVG loader icon.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <bsg-spinner />
+ *
+ * <!-- With size -->
+ * <bsg-spinner size="lg" />
+ *
+ * <!-- With variant (color) -->
+ * <bsg-spinner variant="destructive" />
+ *
+ * <!-- Custom aria-label -->
+ * <bsg-spinner ariaLabel="Processing request..." />
+ * ```
+ */
+class SpinnerComponent {
+    /** Spinner size */
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Spinner color variant */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Accessibility label for screen readers */
+    ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Computed spinner classes */
+    spinnerClasses = computed(() => clsx(spinnerVariants({
+        size: this.size(),
+        variant: this.variant(),
+    }), this.className()), ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: SpinnerComponent, isStandalone: true, selector: "bsg-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [class]="spinnerClasses()"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      role="status"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-spinner', standalone: true, template: `
+    <svg
+      [class]="spinnerClasses()"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      role="status"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
 /**
  * Switch root variants
  *
@@ -6651,6 +6674,3090 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
+/**
+ * Tabs Root Component
+ *
+ * The root container for a set of tabs. Manages the active tab state.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs [defaultValue]="0" (valueChange)="onTabChange($event)">
+ *   <bsg-tabs-list>
+ *     <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *     <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ *   </bsg-tabs-list>
+ *   <bsg-tabs-content [value]="0">Content 1</bsg-tabs-content>
+ *   <bsg-tabs-content [value]="1">Content 2</bsg-tabs-content>
+ * </bsg-tabs>
+ * ```
+ */
+class TabsComponent {
+    /** Default active tab value */
+    defaultValue = input(0, ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Controlled value (if you want to control the tab from outside) */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Event emitted when tab changes */
+    valueChange = output();
+    // Internal state for active tab
+    _internalValue = signal(null, ...(ngDevMode ? [{ debugName: "_internalValue" }] : []));
+    // Computed active value (uses controlled value if set, otherwise internal state, otherwise default)
+    activeValue = computed(() => {
+        const controlled = this.value();
+        if (controlled !== null)
+            return controlled;
+        const internal = this._internalValue();
+        if (internal !== null)
+            return internal;
+        return this.defaultValue();
+    }, ...(ngDevMode ? [{ debugName: "activeValue" }] : []));
+    // Computed classes
+    computedClasses = computed(() => clsx(this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    /**
+     * Set the active tab value
+     */
+    setValue(value) {
+        // Only update if it's not a controlled component
+        if (this.value() === null) {
+            this._internalValue.set(value);
+        }
+        this.valueChange.emit(value);
+    }
+    /**
+     * Get the current active tab value
+     */
+    getValue() {
+        return this.activeValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TabsComponent, isStandalone: true, selector: "bsg-tabs", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div [class]="computedClasses()" data-orientation="horizontal">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tabs', standalone: true, template: `
+    <div [class]="computedClasses()" data-orientation="horizontal">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Tab Navigation container variants
+ *
+ * Controls the overall tab navigation container layout
+ */
+const tabNavigationVariants = cva(clsx(
+// Layout
+'flex', 'gap-2', 'items-start'), {
+    variants: {
+        layout: {
+            default: 'flex-wrap',
+            carousel: clsx('overflow-x-auto', 'overflow-y-hidden', 'flex-nowrap', 'scroll-smooth', 
+            // Hide scrollbar - navigation is via buttons
+            '[scrollbar-width:none]', '[&::-webkit-scrollbar]:hidden'),
+        },
+    },
+    defaultVariants: {
+        layout: 'default',
+    },
+});
+/**
+ * Tab Item variants
+ *
+ * Controls the individual tab button styles with size, variant, and color combinations
+ */
+const tabItemVariants = cva(clsx(
+// Base layout
+'flex', 'justify-center', 'items-center', 'rounded-lg', 'border-none', 
+// Typography
+'font-medium', 'text-sm', 
+// Interaction
+'cursor-pointer', 'transition-all', 'duration-200', 
+// Box model
+'box-border', 'relative', 
+// Focus visible (semantic token)
+'focus-visible:outline-2', 'focus-visible:outline-offset-2', 'focus-visible:outline-ring'), {
+    variants: {
+        variant: {
+            text: 'gap-2.5',
+            'icon-text': 'flex-col gap-0',
+        },
+        size: {
+            sm: '',
+            md: '',
+            lg: '',
+        },
+        color: {
+            default: clsx(
+            // Inactive state (semantic tokens)
+            'bg-primary/10', 'text-primary', 'hover:not-disabled:not-[data-active=true]:opacity-70', 'hover:not-disabled:not-[data-active=true]:underline', 
+            // Active state (semantic tokens)
+            'data-[active=true]:bg-primary', 'data-[active=true]:text-primary-foreground'),
+            info: clsx(
+            // Inactive state (semantic tokens)
+            'bg-info/10', 'text-info', 'hover:not-disabled:not-[data-active=true]:opacity-70', 'hover:not-disabled:not-[data-active=true]:underline', 
+            // Active state (semantic tokens)
+            'data-[active=true]:bg-info', 'data-[active=true]:text-info-foreground'),
+            success: clsx(
+            // Inactive state (semantic tokens)
+            'bg-success/10', 'text-success', 'hover:not-disabled:not-[data-active=true]:opacity-70', 'hover:not-disabled:not-[data-active=true]:underline', 
+            // Active state (semantic tokens)
+            'data-[active=true]:bg-success', 'data-[active=true]:text-success-foreground'),
+            warning: clsx(
+            // Inactive state (semantic tokens)
+            'bg-warning/10', 'text-warning', 'hover:not-disabled:not-[data-active=true]:opacity-70', 'hover:not-disabled:not-[data-active=true]:underline', 
+            // Active state (semantic tokens)
+            'data-[active=true]:bg-warning', 'data-[active=true]:text-warning-foreground'),
+            destructive: clsx(
+            // Inactive state (semantic tokens)
+            'bg-destructive/10', 'text-destructive', 'hover:not-disabled:not-[data-active=true]:opacity-70', 'hover:not-disabled:not-[data-active=true]:underline', 
+            // Active state (semantic tokens)
+            'data-[active=true]:bg-destructive', 'data-[active=true]:text-destructive-foreground'),
+        },
+        disabled: {
+            true: 'opacity-40 cursor-not-allowed pointer-events-none',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // Size + Variant: text
+        {
+            variant: 'text',
+            size: 'sm',
+            class: 'px-4 py-2 min-h-[29px]',
+        },
+        {
+            variant: 'text',
+            size: 'md',
+            class: 'px-6 py-3 min-h-[35px]',
+        },
+        {
+            variant: 'text',
+            size: 'lg',
+            class: 'px-8 py-4 min-h-[43px]',
+        },
+        // Size + Variant: icon-text
+        {
+            variant: 'icon-text',
+            size: 'sm',
+            class: 'px-[18px] py-2 min-h-[80px] w-[168px]',
+        },
+        {
+            variant: 'icon-text',
+            size: 'md',
+            class: 'px-[26px] py-[13px] min-h-[88px] w-[184px]',
+        },
+        {
+            variant: 'icon-text',
+            size: 'lg',
+            class: 'px-[34px] py-[17px] min-h-[96px] w-[200px]',
+        },
+    ],
+    defaultVariants: {
+        variant: 'text',
+        size: 'md',
+        color: 'default',
+        disabled: false,
+    },
+});
+/**
+ * Tab Icon Circle variants
+ *
+ * Controls the circular icon container in icon-text variant
+ */
+const tabIconCircleVariants = cva(clsx(
+// Size and shape
+'size-8', 'rounded-full', 
+// Layout
+'flex', 'items-center', 'justify-center', 'shrink-0', 
+// Transition
+'transition-colors', 'duration-200'), {
+    variants: {
+        color: {
+            default: 'bg-primary/20 group-data-[active=true]:bg-primary-foreground/20',
+            info: 'bg-info/20 group-data-[active=true]:bg-info-foreground/20',
+            success: 'bg-success/20 group-data-[active=true]:bg-success-foreground/20',
+            warning: 'bg-warning/20 group-data-[active=true]:bg-warning-foreground/20',
+            destructive: 'bg-destructive/20 group-data-[active=true]:bg-destructive-foreground/20',
+        },
+    },
+    defaultVariants: {
+        color: 'default',
+    },
+});
+/**
+ * Tab Icon Content variants
+ *
+ * Controls the icon + label container layout
+ */
+const tabIconContentVariants = cva(clsx('flex', 'flex-col', 'items-center', 'justify-center', 'w-full'));
+/**
+ * Tab Label variants
+ *
+ * Controls the label text in icon-text variant
+ */
+const tabLabelVariants = cva(clsx('text-xs', 'font-semibold', 'leading-normal', 'text-center', 'mt-1'));
+/**
+ * Tab Text Content variants
+ *
+ * Controls the text content in text variant
+ */
+const tabTextContentVariants = cva(clsx('whitespace-nowrap'));
+
+/**
+ * Tabs List Component
+ *
+ * Container for tab triggers. This is where you place your bsg-tabs-trigger components.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs-list>
+ *   <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *   <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ * </bsg-tabs-list>
+ * ```
+ *
+ * Carousel layout with navigation buttons:
+ * ```html
+ * <bsg-tabs-list layout="carousel">
+ *   <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *   <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ *   <!-- Many more tabs... -->
+ * </bsg-tabs-list>
+ * ```
+ */
+class TabsListComponent {
+    /** Layout mode: default (wraps) or carousel (scrolls horizontally) */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    // ViewChild for scroll container
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+    // Signals for button visibility
+    canScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : []));
+    canScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : []));
+    // ResizeObserver for detecting content changes
+    resizeObserver = null;
+    constructor() {
+        // Effect to check scroll position on layout change
+        effect(() => {
+            const isCarousel = this.layout() === 'carousel';
+            if (isCarousel) {
+                // Delay to ensure DOM is ready
+                setTimeout(() => this.updateScrollButtons(), 100);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Initialize scroll buttons after view is ready
+        this.setupResizeObserver();
+        // Multiple checks to ensure content is rendered
+        setTimeout(() => this.updateScrollButtons(), 0);
+        setTimeout(() => this.updateScrollButtons(), 100);
+        setTimeout(() => this.updateScrollButtons(), 500);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    setupResizeObserver() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateScrollButtons();
+        });
+        this.resizeObserver.observe(container);
+        // Also observe children for content changes
+        const children = container.children;
+        for (let i = 0; i < children.length; i++) {
+            this.resizeObserver.observe(children[i]);
+        }
+    }
+    // Computed: is carousel mode
+    isCarousel = computed(() => this.layout() === 'carousel', ...(ngDevMode ? [{ debugName: "isCarousel" }] : []));
+    // Container classes
+    containerClasses = computed(() => clsx('relative', 'flex', 'items-center', this.isCarousel() ? 'gap-3' : ''), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    // Computed classes using the existing tabNavigationVariants
+    computedClasses = computed(() => clsx(tabNavigationVariants({
+        layout: this.layout(),
+    }), this.isCarousel() ? 'flex-1 min-w-0' : '', this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    // Scroll left
+    scrollLeft() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.8;
+            container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+        }
+    }
+    // Scroll right
+    scrollRight() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (container) {
+            const scrollAmount = container.clientWidth * 0.8;
+            container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        }
+    }
+    // Handle scroll event
+    onScroll() {
+        this.updateScrollButtons();
+    }
+    // Update button visibility based on scroll position
+    updateScrollButtons() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        // Can scroll left if not at start
+        this.canScrollLeft.set(scrollLeft > 0);
+        // Can scroll right if not at end (with small tolerance)
+        this.canScrollRight.set(scrollLeft < scrollWidth - clientWidth - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabsListComponent, isStandalone: true, selector: "bsg-tabs-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      <!-- Previous Button - Only shown in carousel mode -->
+      @if (isCarousel()) {
+        <button
+          type="button"
+          class="carousel-nav-btn carousel-nav-btn--prev"
+          (click)="scrollLeft()"
+          [disabled]="!canScrollLeft()"
+          aria-label="Previous tabs"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+      }
+
+      <!-- Tabs Container -->
+      <div
+        #scrollContainer
+        role="tablist"
+        aria-orientation="horizontal"
+        aria-label="Tab navigation"
+        data-orientation="horizontal"
+        [class]="computedClasses()"
+        (scroll)="onScroll()"
+      >
+        <ng-content />
+      </div>
+
+      <!-- Next Button - Only shown in carousel mode -->
+      @if (isCarousel()) {
+        <button
+          type="button"
+          class="carousel-nav-btn carousel-nav-btn--next"
+          (click)="scrollRight()"
+          [disabled]="!canScrollRight()"
+          aria-label="Next tabs"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.carousel-nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid hsl(var(--border));background-color:hsl(var(--background));color:hsl(var(--foreground));cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.carousel-nav-btn:hover:not(:disabled){background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}.carousel-nav-btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.carousel-nav-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tabs-list', standalone: true, template: `
+    <div [class]="containerClasses()">
+      <!-- Previous Button - Only shown in carousel mode -->
+      @if (isCarousel()) {
+        <button
+          type="button"
+          class="carousel-nav-btn carousel-nav-btn--prev"
+          (click)="scrollLeft()"
+          [disabled]="!canScrollLeft()"
+          aria-label="Previous tabs"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+      }
+
+      <!-- Tabs Container -->
+      <div
+        #scrollContainer
+        role="tablist"
+        aria-orientation="horizontal"
+        aria-label="Tab navigation"
+        data-orientation="horizontal"
+        [class]="computedClasses()"
+        (scroll)="onScroll()"
+      >
+        <ng-content />
+      </div>
+
+      <!-- Next Button - Only shown in carousel mode -->
+      @if (isCarousel()) {
+        <button
+          type="button"
+          class="carousel-nav-btn carousel-nav-btn--next"
+          (click)="scrollRight()"
+          [disabled]="!canScrollRight()"
+          aria-label="Next tabs"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.carousel-nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid hsl(var(--border));background-color:hsl(var(--background));color:hsl(var(--foreground));cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.carousel-nav-btn:hover:not(:disabled){background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}.carousel-nav-btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.carousel-nav-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
+
+/**
+ * Tabs Trigger Component
+ *
+ * A clickable tab that activates its associated content panel.
+ *
+ * Usage for text variant:
+ * ```html
+ * <bsg-tabs-trigger [value]="0">
+ *   Tab Label
+ * </bsg-tabs-trigger>
+ * ```
+ *
+ * Usage for icon-text variant:
+ * ```html
+ * <bsg-tabs-trigger [value]="0" variant="icon-text">
+ *   <svg slot="icon">...</svg>
+ *   <span slot="label">Tab Label</span>
+ * </bsg-tabs-trigger>
+ * ```
+ */
+class TabsTriggerComponent {
+    // Inject parent tabs component
+    tabs = inject(TabsComponent, { optional: true });
+    /** The value that identifies this tab */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Tab visual variant */
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Tab size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Tab color scheme */
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Whether the tab is disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    // Computed: is this tab active?
+    isActive = computed(() => {
+        if (!this.tabs)
+            return false;
+        return this.tabs.activeValue() === this.value();
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    // Computed tab button classes
+    computedClasses = computed(() => clsx(tabItemVariants({
+        variant: this.variant(),
+        size: this.size(),
+        color: this.color(),
+        disabled: this.disabled(),
+    }), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    // Computed icon content classes
+    iconContentClasses = computed(() => clsx(tabIconContentVariants()), ...(ngDevMode ? [{ debugName: "iconContentClasses" }] : []));
+    // Computed icon circle classes
+    iconCircleClasses = computed(() => clsx(tabIconCircleVariants({
+        color: this.color(),
+    })), ...(ngDevMode ? [{ debugName: "iconCircleClasses" }] : []));
+    // Computed label classes
+    labelClasses = computed(() => clsx(tabLabelVariants()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    // Computed text content classes
+    textContentClasses = computed(() => clsx(tabTextContentVariants()), ...(ngDevMode ? [{ debugName: "textContentClasses" }] : []));
+    // Handle click
+    handleClick() {
+        if (!this.disabled() && this.tabs) {
+            this.tabs.setValue(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabsTriggerComponent, isStandalone: true, selector: "bsg-tabs-trigger", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      type="button"
+      role="tab"
+      [class]="computedClasses()"
+      class="group"
+      [attr.aria-selected]="isActive()"
+      [attr.aria-controls]="'tabpanel-' + value()"
+      [attr.id]="'tab-' + value()"
+      [attr.data-state]="isActive() ? 'active' : 'inactive'"
+      [attr.data-active]="isActive()"
+      [attr.data-disabled]="disabled() ? '' : null"
+      data-orientation="horizontal"
+      [attr.tabindex]="isActive() ? 0 : -1"
+      [disabled]="disabled()"
+      (click)="handleClick()"
+    >
+      @if (variant() === 'icon-text') {
+        <!-- Icon-text variant layout -->
+        <div [class]="iconContentClasses()">
+          <div [class]="iconCircleClasses()">
+            <ng-content select="[slot='icon']" />
+          </div>
+          <span [class]="labelClasses()">
+            <ng-content select="[slot='label']" />
+          </span>
+        </div>
+      } @else {
+        <!-- Text variant layout -->
+        <span [class]="textContentClasses()">
+          <ng-content />
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tabs-trigger', standalone: true, template: `
+    <button
+      type="button"
+      role="tab"
+      [class]="computedClasses()"
+      class="group"
+      [attr.aria-selected]="isActive()"
+      [attr.aria-controls]="'tabpanel-' + value()"
+      [attr.id]="'tab-' + value()"
+      [attr.data-state]="isActive() ? 'active' : 'inactive'"
+      [attr.data-active]="isActive()"
+      [attr.data-disabled]="disabled() ? '' : null"
+      data-orientation="horizontal"
+      [attr.tabindex]="isActive() ? 0 : -1"
+      [disabled]="disabled()"
+      (click)="handleClick()"
+    >
+      @if (variant() === 'icon-text') {
+        <!-- Icon-text variant layout -->
+        <div [class]="iconContentClasses()">
+          <div [class]="iconCircleClasses()">
+            <ng-content select="[slot='icon']" />
+          </div>
+          <span [class]="labelClasses()">
+            <ng-content select="[slot='label']" />
+          </span>
+        </div>
+      } @else {
+        <!-- Text variant layout -->
+        <span [class]="textContentClasses()">
+          <ng-content />
+        </span>
+      }
+    </button>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Tabs Content Component
+ *
+ * A container for tab panel content. Only displays when its value matches the active tab.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs-content [value]="0">
+ *   <p>Content for tab 0</p>
+ * </bsg-tabs-content>
+ * ```
+ */
+class TabsContentComponent {
+    // Inject parent tabs component
+    tabs = inject(TabsComponent, { optional: true });
+    /** The value that identifies which tab this content belongs to */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    // Computed: is this content active?
+    isActive = computed(() => {
+        if (!this.tabs)
+            return false;
+        return this.tabs.activeValue() === this.value();
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    // Computed classes with default mt-2
+    computedClasses = computed(() => clsx('mt-2', this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabsContentComponent, isStandalone: true, selector: "bsg-tabs-content", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (isActive()) {
+      <div
+        role="tabpanel"
+        [id]="'tabpanel-' + value()"
+        [attr.aria-labelledby]="'tab-' + value()"
+        [attr.data-state]="isActive() ? 'active' : 'inactive'"
+        data-orientation="horizontal"
+        [attr.tabindex]="0"
+        [class]="computedClasses()"
+      >
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tabs-content', standalone: true, template: `
+    @if (isActive()) {
+      <div
+        role="tabpanel"
+        [id]="'tabpanel-' + value()"
+        [attr.aria-labelledby]="'tab-' + value()"
+        [attr.data-state]="isActive() ? 'active' : 'inactive'"
+        data-orientation="horizontal"
+        [attr.tabindex]="0"
+        [class]="computedClasses()"
+      >
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Directive to mark content that should be projected into a specific tab panel
+ *
+ * Usage:
+ * ```html
+ * <bsg-tab-navigation [tabs]="tabs">
+ *   <ng-template bsgTabContent>Content for tab 0</ng-template>
+ *   <ng-template bsgTabContent>Content for tab 1</ng-template>
+ * </bsg-tab-navigation>
+ * ```
+ */
+class TabContentDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TabContentDirective, isStandalone: true, selector: "[bsgTabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsgTabContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+/**
+ * Tab Navigation Component
+ *
+ * A tabbed navigation component with support for text and icon-text variants.
+ * Follows the shadcn/ui tabs pattern with separated TabsList and TabsContent.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tab-navigation
+ *   [tabs]="tabs"
+ *   [variant]="'text'"
+ *   [size]="'md'"
+ *   [color]="'default'"
+ *   [activeIndex]="0"
+ *   (tabChange)="onTabChange($event)"
+ * >
+ *   <ng-template bsgTabContent>Content for first tab</ng-template>
+ *   <ng-template bsgTabContent>Content for second tab</ng-template>
+ * </bsg-tab-navigation>
+ * ```
+ */
+class TabNavigationComponent {
+    /** Tab size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Tab visual variant */
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Tab color scheme */
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Whether all tabs are disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** List of tab items */
+    tabs = input([
+        { label: 'Solicitudes Realizadas', count: 3 },
+        { label: 'Información del cliente' },
+    ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /** Active tab index */
+    activeIndex = input(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    /** Additional CSS classes for container */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Tab change event */
+    tabChange = output();
+    /** Content children (tab content templates) */
+    tabContents = contentChildren(TabContentDirective, ...(ngDevMode ? [{ debugName: "tabContents" }] : []));
+    // Internal state for active tab
+    _activeIndex = signal(null, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
+    // Computed active index (uses internal state if set, otherwise input)
+    internalActiveIndex = computed(() => {
+        const internal = this._activeIndex();
+        return internal !== null ? internal : this.activeIndex();
+    }, ...(ngDevMode ? [{ debugName: "internalActiveIndex" }] : []));
+    // Computed container classes
+    containerClasses = computed(() => clsx(this.className()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    // Computed tabs list classes
+    tabsListClasses = computed(() => clsx(tabNavigationVariants()), ...(ngDevMode ? [{ debugName: "tabsListClasses" }] : []));
+    // Computed tab content classes
+    tabContentClasses = computed(() => clsx('mt-2'), ...(ngDevMode ? [{ debugName: "tabContentClasses" }] : []));
+    // Computed icon content classes
+    iconContentClasses = computed(() => clsx(tabIconContentVariants()), ...(ngDevMode ? [{ debugName: "iconContentClasses" }] : []));
+    // Computed label classes
+    labelClasses = computed(() => clsx(tabLabelVariants()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    // Computed text content classes
+    textContentClasses = computed(() => clsx(tabTextContentVariants()), ...(ngDevMode ? [{ debugName: "textContentClasses" }] : []));
+    // Get tab button classes for a specific index
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getTabClasses(index) {
+        return clsx(tabItemVariants({
+            variant: this.variant(),
+            size: this.size(),
+            color: this.color(),
+            disabled: this.disabled(),
+        }));
+    }
+    // Get icon circle classes
+    getIconCircleClasses() {
+        return clsx(tabIconCircleVariants({
+            color: this.color(),
+        }));
+    }
+    // Get icon stroke color based on active state (uses currentColor to inherit from parent)
+    getIconStroke(_index) {
+        return 'currentColor';
+    }
+    // Handle tab click
+    handleTabClick(index) {
+        if (!this.disabled() && index !== this.internalActiveIndex()) {
+            this._activeIndex.set(index);
+            this.tabChange.emit(index);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabNavigationComponent, isStandalone: true, selector: "bsg-tab-navigation", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "tabContents", predicate: TabContentDirective, isSignal: true }], ngImport: i0, template: `
+    <!-- Tabs Root -->
+    <div [class]="containerClasses()" data-orientation="horizontal">
+      <!-- Tabs List -->
+      <div
+        role="tablist"
+        aria-orientation="horizontal"
+        aria-label="Tab navigation"
+        data-orientation="horizontal"
+        [class]="tabsListClasses()"
+      >
+        @for (tab of tabs(); track $index) {
+          <!-- Tabs Trigger -->
+          <button
+            type="button"
+            role="tab"
+            [class]="getTabClasses($index)"
+            class="group"
+            [attr.aria-selected]="$index === internalActiveIndex()"
+            [attr.aria-controls]="'tabpanel-' + $index"
+            [attr.id]="'tab-' + $index"
+            [attr.data-state]="
+              $index === internalActiveIndex() ? 'active' : 'inactive'
+            "
+            [attr.data-active]="$index === internalActiveIndex()"
+            [attr.data-disabled]="disabled() ? '' : null"
+            data-orientation="horizontal"
+            [attr.tabindex]="$index === internalActiveIndex() ? 0 : -1"
+            [disabled]="disabled()"
+            (click)="handleTabClick($index)"
+          >
+            @if (variant() === 'icon-text') {
+              <div [class]="iconContentClasses()">
+                <div [class]="getIconCircleClasses()">
+                  <svg
+                    class="block"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M19 21V19C19 17.9391 18.5786 16.9217 17.8284 16.1716C17.0783 15.4214 16.0609 15 15 15H9C7.93913 15 6.92172 15.4214 6.17157 16.1716C5.42143 16.9217 5 17.9391 5 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+                      [attr.stroke]="getIconStroke($index)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </div>
+                <span [class]="labelClasses()">{{ tab.label }}</span>
+              </div>
+            } @else {
+              <span [class]="textContentClasses()">
+                {{ tab.label }}
+                @if (tab.count !== undefined) {
+                  ({{ tab.count }})
+                }
+              </span>
+            }
+          </button>
+        }
+      </div>
+
+      <!-- Tabs Content Panels -->
+      @for (tab of tabs(); track $index) {
+        <div
+          role="tabpanel"
+          [id]="'tabpanel-' + $index"
+          [attr.aria-labelledby]="'tab-' + $index"
+          [attr.data-state]="
+            $index === internalActiveIndex() ? 'active' : 'inactive'
+          "
+          data-orientation="horizontal"
+          [attr.tabindex]="0"
+          [attr.hidden]="$index !== internalActiveIndex() ? true : null"
+          [class]="tabContentClasses()"
+        >
+          @if ($index === internalActiveIndex() && tabContents()[$index]) {
+            <ng-container *ngTemplateOutlet="tabContents()[$index].template" />
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tab-navigation', standalone: true, imports: [NgTemplateOutlet], template: `
+    <!-- Tabs Root -->
+    <div [class]="containerClasses()" data-orientation="horizontal">
+      <!-- Tabs List -->
+      <div
+        role="tablist"
+        aria-orientation="horizontal"
+        aria-label="Tab navigation"
+        data-orientation="horizontal"
+        [class]="tabsListClasses()"
+      >
+        @for (tab of tabs(); track $index) {
+          <!-- Tabs Trigger -->
+          <button
+            type="button"
+            role="tab"
+            [class]="getTabClasses($index)"
+            class="group"
+            [attr.aria-selected]="$index === internalActiveIndex()"
+            [attr.aria-controls]="'tabpanel-' + $index"
+            [attr.id]="'tab-' + $index"
+            [attr.data-state]="
+              $index === internalActiveIndex() ? 'active' : 'inactive'
+            "
+            [attr.data-active]="$index === internalActiveIndex()"
+            [attr.data-disabled]="disabled() ? '' : null"
+            data-orientation="horizontal"
+            [attr.tabindex]="$index === internalActiveIndex() ? 0 : -1"
+            [disabled]="disabled()"
+            (click)="handleTabClick($index)"
+          >
+            @if (variant() === 'icon-text') {
+              <div [class]="iconContentClasses()">
+                <div [class]="getIconCircleClasses()">
+                  <svg
+                    class="block"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M19 21V19C19 17.9391 18.5786 16.9217 17.8284 16.1716C17.0783 15.4214 16.0609 15 15 15H9C7.93913 15 6.92172 15.4214 6.17157 16.1716C5.42143 16.9217 5 17.9391 5 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+                      [attr.stroke]="getIconStroke($index)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </div>
+                <span [class]="labelClasses()">{{ tab.label }}</span>
+              </div>
+            } @else {
+              <span [class]="textContentClasses()">
+                {{ tab.label }}
+                @if (tab.count !== undefined) {
+                  ({{ tab.count }})
+                }
+              </span>
+            }
+          </button>
+        }
+      </div>
+
+      <!-- Tabs Content Panels -->
+      @for (tab of tabs(); track $index) {
+        <div
+          role="tabpanel"
+          [id]="'tabpanel-' + $index"
+          [attr.aria-labelledby]="'tab-' + $index"
+          [attr.data-state]="
+            $index === internalActiveIndex() ? 'active' : 'inactive'
+          "
+          data-orientation="horizontal"
+          [attr.tabindex]="0"
+          [attr.hidden]="$index !== internalActiveIndex() ? true : null"
+          [class]="tabContentClasses()"
+        >
+          @if ($index === internalActiveIndex() && tabContents()[$index]) {
+            <ng-container *ngTemplateOutlet="tabContents()[$index].template" />
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabContentDirective), { isSignal: true }] }] } });
+
+// New composable components (shadcn/ui pattern)
+
+/**
+ * Table wrapper variants
+ *
+ * Container with subtle shadow for depth and rounded corners
+ * for a modern, polished look
+ */
+const tableWrapperVariants = cva(clsx('relative', 'w-full', 'overflow-auto', 'rounded-xl', 'border', 'border-slate-200', 'bg-white', 
+// Subtle shadow for depth perception
+'shadow-sm', 
+// Smooth scrollbar for better UX
+'scrollbar-thin', 'scrollbar-thumb-slate-300', 'scrollbar-track-transparent'));
+/**
+ * Table variants
+ *
+ * Clean table with proper spacing and typography
+ */
+const tableVariants = cva(clsx('w-full', 'caption-bottom', 'text-sm', 'border-collapse', 'border-spacing-0', 'font-sans'));
+/**
+ * Table Header variants
+ *
+ * Distinct header with subtle background gradient
+ * and clear visual separation from body
+ */
+const tableHeaderVariants = cva(clsx(
+// Subtle gradient for visual interest
+'bg-gradient-to-b', 'from-blue-50', 'to-blue-50/70', 
+// Border for separation
+'[&_tr]:border-b', '[&_tr]:border-slate-200', 
+// Sticky header for long tables
+'sticky', 'top-0', 'z-10', 
+// Backdrop blur for when scrolling
+'backdrop-blur-sm'));
+/**
+ * Table Body variants
+ *
+ * Clean body with alternating row colors option
+ */
+const tableBodyVariants = cva(clsx('[&_tr:last-child]:border-0', 
+// Smooth transitions for row interactions
+'[&_tr]:transition-colors', '[&_tr]:duration-150', '[&_tr]:ease-in-out'));
+/**
+ * Table Footer variants
+ *
+ * Distinct footer for totals and summaries
+ */
+const tableFooterVariants = cva(clsx('bg-gradient-to-t', 'from-slate-50', 'to-slate-50/50', 'border-t-2', 'border-slate-200', 'font-semibold', '[&>tr]:last:border-b-0'));
+/**
+ * Table Row variants
+ *
+ * Interactive rows with clear hover and selected states
+ * Following UX best practices for discoverability
+ */
+const tableRowVariants = cva(clsx('border-b', 'border-slate-100', 
+// Smooth transition for hover effect
+'transition-all', 'duration-150', 'ease-in-out', 
+// Hover state - subtle but noticeable
+'hover:bg-slate-50/80', 
+// Selected state - clear visual feedback
+'data-[state=selected]:bg-blue-50/60', 'data-[state=selected]:border-blue-100', 
+// Focus within for keyboard navigation
+'focus-within:bg-slate-50/50', 
+// Cursor hint for clickable rows
+'cursor-default'));
+/**
+ * Table Head variants
+ *
+ * Clear, readable headers with proper hierarchy
+ * Using semibold weight and blue accent for brand consistency
+ */
+const tableHeadVariants = cva(clsx(
+// Vertical rhythm
+'h-12', 'px-4', 'py-3', 
+// Alignment
+'text-left', 'align-middle', 
+// Typography - clear hierarchy
+'font-semibold', 'text-blue-700', 'text-xs', 'uppercase', 'tracking-wide', 
+// Prevent text wrapping for cleaner look
+'whitespace-nowrap', 
+// Checkbox alignment
+'[&:has([role=checkbox])]:pr-0', 
+// Sort indicator space
+'[&:has(button)]:pr-2'));
+/**
+ * Table Cell variants
+ *
+ * Readable cells with proper spacing and alignment
+ */
+const tableCellVariants = cva(clsx(
+// Generous padding for readability
+'px-4', 'py-4', 
+// Alignment
+'align-middle', 
+// Typography - optimized for scanning
+'text-slate-600', 'text-sm', 'font-normal', 
+// Line height for multi-line content
+'leading-relaxed', 
+// Checkbox alignment
+'[&:has([role=checkbox])]:pr-0', 
+// First column emphasis
+'[&:first-child]:font-medium', '[&:first-child]:text-slate-900'));
+/**
+ * Table Card Header variants
+ *
+ * Prominent header with semantic colors and clear hierarchy
+ * Following UX principles for visual weight distribution
+ */
+const tableCardHeaderVariants = cva(clsx('flex', 'items-center', 'gap-3', 'px-5', 'py-4', 
+// Gradient for visual interest
+'bg-gradient-to-r', 
+// Rounded top corners
+'rounded-t-xl', 
+// Subtle bottom border
+'border-b'), {
+    variants: {
+        color: {
+            default: clsx('from-slate-100', 'to-slate-50', 'border-slate-200/50'),
+            info: clsx('from-blue-100', 'to-blue-50', 'border-blue-200/50'),
+            success: clsx('from-green-100', 'to-green-50', 'border-green-200/50'),
+            warning: clsx('from-amber-100', 'to-amber-50', 'border-amber-200/50'),
+            destructive: clsx('from-red-100', 'to-red-50', 'border-red-200/50'),
+        },
+    },
+    defaultVariants: {
+        color: 'info',
+    },
+});
+/**
+ * Table Card Footer variants
+ *
+ * Clean footer area for pagination and actions
+ */
+const tableCardFooterVariants = cva(clsx('flex', 'items-center', 'justify-between', 'gap-3', 'px-5', 'py-4', 'bg-slate-50/50', 'border-t', 'border-slate-200', 'rounded-b-xl'));
+/**
+ * Table Pagination wrapper variants
+ *
+ * Clean pagination area with proper spacing
+ */
+const tablePaginationVariants = cva(clsx('px-4', 'py-3', 'border-t', 'border-slate-100', 'bg-slate-50/30'));
+/**
+ * Table Empty State variants
+ *
+ * For when table has no data
+ */
+const tableEmptyStateVariants = cva(clsx('py-12', 'px-4', 'text-center', 'text-slate-400', 'text-sm'));
+/**
+ * Table Loading State variants
+ *
+ * For skeleton loading states
+ */
+const tableLoadingVariants = cva(clsx('animate-pulse', 'bg-slate-100', 'rounded'));
+/**
+ * Striped table modifier
+ *
+ * Apply to tbody for alternating row colors
+ */
+const tableStripedVariants = cva(clsx('[&>tr:nth-child(even)]:bg-slate-50/50'));
+/**
+ * Compact table modifier
+ *
+ * Reduced padding for dense data
+ */
+const tableCompactVariants = cva(clsx('[&_th]:py-2', '[&_th]:px-3', '[&_td]:py-2', '[&_td]:px-3', '[&_th]:text-xs', '[&_td]:text-xs'));
+
+/**
+ * Table Component
+ *
+ * A responsive table wrapper with semantic HTML table element.
+ * Follows shadcn/ui table structure.
+ *
+ * Usage:
+ * ```html
+ * <bsg-table>
+ *   <bsg-table-caption>A list of your recent invoices.</bsg-table-caption>
+ *   <bsg-table-header>
+ *     <bsg-table-row>
+ *       <bsg-table-head>Invoice</bsg-table-head>
+ *       <bsg-table-head>Status</bsg-table-head>
+ *     </bsg-table-row>
+ *   </bsg-table-header>
+ *   <bsg-table-body>
+ *     <bsg-table-row>
+ *       <bsg-table-cell>INV001</bsg-table-cell>
+ *       <bsg-table-cell>Paid</bsg-table-cell>
+ *     </bsg-table-row>
+ *   </bsg-table-body>
+ * </bsg-table>
+ * ```
+ */
+class TableComponent {
+    /** Additional CSS classes for wrapper */
+    wrapperClassName = input(...(ngDevMode ? [undefined, { debugName: "wrapperClassName" }] : []));
+    /** Additional CSS classes for table */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    wrapperClasses = computed(() => clsx(tableWrapperVariants(), this.wrapperClassName()), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    tableClasses = computed(() => clsx(tableVariants(), this.className()), ...(ngDevMode ? [{ debugName: "tableClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableComponent, isStandalone: true, selector: "bsg-table", inputs: { wrapperClassName: { classPropertyName: "wrapperClassName", publicName: "wrapperClassName", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="wrapperClasses()">
+      <table [class]="tableClasses()">
+        <ng-content />
+      </table>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table', standalone: true, template: `
+    <div [class]="wrapperClasses()">
+      <table [class]="tableClasses()">
+        <ng-content />
+      </table>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { wrapperClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClassName", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Header Component
+ *
+ * Wraps table header rows (thead element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-header>
+ *   <bsg-table-row>
+ *     <bsg-table-head>Column 1</bsg-table-head>
+ *     <bsg-table-head>Column 2</bsg-table-head>
+ *   </bsg-table-row>
+ * </bsg-table-header>
+ * ```
+ */
+class TableHeaderComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    computedClasses = computed(() => clsx(tableHeaderVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableHeaderComponent, isStandalone: true, selector: "bsg-table-header", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <thead [class]="computedClasses()">
+      <ng-content />
+    </thead>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-header', standalone: true, template: `
+    <thead [class]="computedClasses()">
+      <ng-content />
+    </thead>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Body Component
+ *
+ * Wraps table body rows (tbody element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-body>
+ *   <bsg-table-row>
+ *     <bsg-table-cell>Cell 1</bsg-table-cell>
+ *     <bsg-table-cell>Cell 2</bsg-table-cell>
+ *   </bsg-table-row>
+ * </bsg-table-body>
+ * ```
+ */
+class TableBodyComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    computedClasses = computed(() => clsx(tableBodyVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableBodyComponent, isStandalone: true, selector: "bsg-table-body", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <tbody [class]="computedClasses()">
+      <ng-content />
+    </tbody>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-body', standalone: true, template: `
+    <tbody [class]="computedClasses()">
+      <ng-content />
+    </tbody>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Footer Component
+ *
+ * Wraps table footer rows (tfoot element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-footer>
+ *   <bsg-table-row>
+ *     <bsg-table-cell colSpan="3">Total</bsg-table-cell>
+ *     <bsg-table-cell>$2,500.00</bsg-table-cell>
+ *   </bsg-table-row>
+ * </bsg-table-footer>
+ * ```
+ */
+class TableFooterComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    computedClasses = computed(() => clsx(tableFooterVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableFooterComponent, isStandalone: true, selector: "bsg-table-footer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <tfoot [class]="computedClasses()">
+      <ng-content />
+    </tfoot>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-footer', standalone: true, template: `
+    <tfoot [class]="computedClasses()">
+      <ng-content />
+    </tfoot>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Row Component
+ *
+ * A table row element (tr).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-row>
+ *   <bsg-table-cell>Cell 1</bsg-table-cell>
+ *   <bsg-table-cell>Cell 2</bsg-table-cell>
+ * </bsg-table-row>
+ * ```
+ */
+class TableRowComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Whether the row is selected */
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    computedClasses = computed(() => clsx(tableRowVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableRowComponent, isStandalone: true, selector: "bsg-table-row", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <tr
+      [class]="computedClasses()"
+      [attr.data-state]="selected() ? 'selected' : null"
+    >
+      <ng-content />
+    </tr>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-row', standalone: true, template: `
+    <tr
+      [class]="computedClasses()"
+      [attr.data-state]="selected() ? 'selected' : null"
+    >
+      <ng-content />
+    </tr>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
+
+/**
+ * Table Head Component
+ *
+ * A table header cell element (th).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-head>Column Name</bsg-table-head>
+ * <bsg-table-head className="w-[100px]">ID</bsg-table-head>
+ * <bsg-table-head className="text-right">Amount</bsg-table-head>
+ * ```
+ */
+class TableHeadComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Column span */
+    colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : []));
+    /** Scope attribute for accessibility */
+    scope = input('col', ...(ngDevMode ? [{ debugName: "scope" }] : []));
+    computedClasses = computed(() => clsx(tableHeadVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableHeadComponent, isStandalone: true, selector: "bsg-table-head", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <th
+      [class]="computedClasses()"
+      [attr.colspan]="colSpan()"
+      [scope]="scope()"
+    >
+      <ng-content />
+    </th>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableHeadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-head', standalone: true, template: `
+    <th
+      [class]="computedClasses()"
+      [attr.colspan]="colSpan()"
+      [scope]="scope()"
+    >
+      <ng-content />
+    </th>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }] } });
+
+/**
+ * Table Cell Component
+ *
+ * A table data cell element (td).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-cell>Cell content</bsg-table-cell>
+ * <bsg-table-cell className="font-medium">Bold content</bsg-table-cell>
+ * <bsg-table-cell className="text-right">$250.00</bsg-table-cell>
+ * <bsg-table-cell [colSpan]="3">Spanning cell</bsg-table-cell>
+ * ```
+ */
+class TableCellComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Column span */
+    colSpan = input(...(ngDevMode ? [undefined, { debugName: "colSpan" }] : []));
+    computedClasses = computed(() => clsx(tableCellVariants(), this.className()), ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableCellComponent, isStandalone: true, selector: "bsg-table-cell", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <td [class]="computedClasses()" [attr.colspan]="colSpan()">
+      <ng-content />
+    </td>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-cell', standalone: true, template: `
+    <td [class]="computedClasses()" [attr.colspan]="colSpan()">
+      <ng-content />
+    </td>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }] } });
+
+/**
+ * Table Card Component
+ *
+ * A wrapper that provides a polished card container for tables,
+ * using content projection for header and footer sections.
+ *
+ * UX Considerations:
+ * - Clear visual hierarchy with prominent header
+ * - Consistent spacing and alignment
+ * - Subtle shadows for depth without distraction
+ * - Flexible composition with header/footer slots
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-card>
+ *   <bsg-tableCard-header title="My Table Title">
+ *     <button slot="action">New Item</button>
+ *   </bsg-tableCard-header>
+ *
+ *   <bsg-table>
+ *     ...
+ *   </bsg-table>
+ *
+ *   <bsg-tableCard-footer>
+ *     <span>Showing 1-10 of 100</span>
+ *   </bsg-tableCard-footer>
+ * </bsg-table-card>
+ * ```
+ */
+class TableCardComponent {
+    /** Additional CSS classes for the card container */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    cardClasses = computed(() => clsx('w-full', 'rounded-xl', 'border', 'border-slate-200', 'bg-white', 'shadow-sm', 'overflow-hidden', 'transition-shadow', 'duration-200', 'hover:shadow-md', this.className()), ...(ngDevMode ? [{ debugName: "cardClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableCardComponent, isStandalone: true, selector: "bsg-table-card", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="cardClasses()">
+      <!-- Header slot -->
+      <ng-content select="bsg-tableCard-header" />
+
+      <!-- Content wrapper - removes nested borders/shadows -->
+      <div
+        class="[&>bsg-table]:rounded-none [&>bsg-table>div]:rounded-none [&>bsg-table>div]:border-0 [&>bsg-table>div]:shadow-none"
+      >
+        <ng-content />
+      </div>
+
+      <!-- Footer slot -->
+      <ng-content select="bsg-tableCard-footer" />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-card', standalone: true, template: `
+    <div [class]="cardClasses()">
+      <!-- Header slot -->
+      <ng-content select="bsg-tableCard-header" />
+
+      <!-- Content wrapper - removes nested borders/shadows -->
+      <div
+        class="[&>bsg-table]:rounded-none [&>bsg-table>div]:rounded-none [&>bsg-table>div]:border-0 [&>bsg-table>div]:shadow-none"
+      >
+        <ng-content />
+      </div>
+
+      <!-- Footer slot -->
+      <ng-content select="bsg-tableCard-footer" />
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Card Header Component
+ *
+ * Header section for table cards with content projection for icon and title.
+ *
+ * Usage:
+ * ```html
+ * <!-- Simple title -->
+ * <bsg-tableCard-header>
+ *   <span>Titulo de la Tabla</span>
+ * </bsg-tableCard-header>
+ *
+ * <!-- With icon and title -->
+ * <bsg-tableCard-header color="info">
+ *   <svg class="size-5">...</svg>
+ *   <span>Titulo de la Tabla</span>
+ * </bsg-tableCard-header>
+ *
+ * <!-- With icon, title and action -->
+ * <bsg-tableCard-header color="success">
+ *   <svg class="size-5">...</svg>
+ *   <span>Titulo de la Tabla</span>
+ *   <button slot="action">Nueva Accion</button>
+ * </bsg-tableCard-header>
+ * ```
+ */
+class TableCardHeaderComponent {
+    /** Semantic color variant */
+    color = input('info', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Additional CSS classes for header */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    headerClasses = computed(() => clsx(tableCardHeaderVariants({ color: this.color() }), this.className()), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    contentClasses = computed(() => {
+        const colorMap = {
+            default: 'text-slate-800',
+            info: 'text-blue-800',
+            success: 'text-green-800',
+            warning: 'text-amber-800',
+            destructive: 'text-red-800',
+        };
+        return clsx('flex', 'items-center', 'gap-3', 'flex-1', 'text-base', 'font-semibold', 'leading-tight', 'tracking-tight', colorMap[this.color()]);
+    }, ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableCardHeaderComponent, isStandalone: true, selector: "bsg-tableCard-header", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="headerClasses()">
+      <!-- Content (icon + title) -->
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      <!-- Action slot -->
+      <div class="ml-auto flex items-center gap-2">
+        <ng-content select="[slot='action']" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tableCard-header', standalone: true, template: `
+    <div [class]="headerClasses()">
+      <!-- Content (icon + title) -->
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      <!-- Action slot -->
+      <div class="ml-auto flex items-center gap-2">
+        <ng-content select="[slot='action']" />
+      </div>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Table Card Footer Component
+ *
+ * Footer section for table cards, typically used for pagination,
+ * summary info, or action buttons.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tableCard-footer>
+ *   <span>Showing 1-10 of 100</span>
+ *   <div>
+ *     <button>Previous</button>
+ *     <button>Next</button>
+ *   </div>
+ * </bsg-tableCard-footer>
+ * ```
+ */
+class TableCardFooterComponent {
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    footerClasses = computed(() => clsx(tableCardFooterVariants(), this.className()), ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: TableCardFooterComponent, isStandalone: true, selector: "bsg-tableCard-footer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="footerClasses()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableCardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-tableCard-footer', standalone: true, template: `
+    <div [class]="footerClasses()">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * Pagination container variants
+ *
+ * Main wrapper for the pagination component
+ */
+const paginationContainerVariants = cva(clsx(
+// Layout
+'flex items-center gap-4', 
+// Size
+'h-[29px]', 
+// Typography
+'font-sans', 
+// Responsive
+'max-md:flex-wrap max-md:h-auto max-md:gap-3'));
+/**
+ * Pagination section left variants
+ *
+ * Contains page number input
+ */
+const paginationSectionLeftVariants = cva(clsx(
+// Layout
+'flex items-center gap-2'));
+/**
+ * Pagination section middle variants
+ *
+ * Contains page size selector
+ */
+const paginationSectionMiddleVariants = cva(clsx(
+// Layout
+'flex items-center gap-2.5'));
+/**
+ * Pagination section right variants
+ *
+ * Contains range label and navigation controls
+ */
+const paginationSectionRightVariants = cva(clsx(
+// Layout
+'flex items-center gap-[17px]', 
+// Positioning
+'ml-auto', 
+// Responsive
+'max-md:ml-0 max-md:w-full max-md:justify-between'));
+/**
+ * Pagination label variants
+ *
+ * Standard label text style
+ */
+const paginationLabelVariants = cva(clsx(
+// Typography
+'text-muted-foreground text-[13px] font-medium leading-normal tracking-[-0.26px]'));
+/**
+ * Pagination range label variants
+ *
+ * Range display text (e.g., "1 - 5 de 5 ítems")
+ */
+const paginationRangeLabelVariants = cva(clsx(
+// Typography
+'text-muted-foreground text-[13px] font-medium leading-normal tracking-[-0.26px]', 
+// Text behavior
+'whitespace-nowrap'));
+/**
+ * Pagination input variants
+ *
+ * Page number input field
+ */
+const paginationInputVariants = cva(clsx(
+// Size
+'w-[42px] h-[29px]', 
+// Spacing
+'px-2', 
+// Border
+'rounded-md border border-border', 
+// Background
+'bg-background', 
+// Typography
+'text-muted-foreground font-sans text-[13px] font-medium leading-normal tracking-[-0.26px] text-center', 
+// Focus
+'outline-none', 
+// Transitions
+'transition-all duration-200', 
+// Remove number input spinners
+'[appearance:textfield]', '[&::-webkit-outer-spin-button]:appearance-none', '[&::-webkit-inner-spin-button]:appearance-none', 
+// States
+'hover:enabled:border-muted-foreground/30', 'focus:border-ring focus:ring-2 focus:ring-ring/30', 'disabled:bg-muted disabled:cursor-not-allowed disabled:opacity-50'));
+/**
+ * Pagination select wrapper variants
+ *
+ * Wrapper for the select dropdown
+ */
+const paginationSelectWrapperVariants = cva(clsx(
+// Position
+'relative', 
+// Display
+'inline-block'));
+/**
+ * Pagination select variants
+ *
+ * Page size select dropdown
+ */
+const paginationSelectVariants = cva(clsx(
+// Size
+'w-[47px] h-[29px]', 
+// Spacing
+'pl-2 pr-6', 
+// Border
+'rounded-md border border-border', 
+// Background
+'bg-background', 
+// Typography
+'text-muted-foreground font-sans text-[13px] font-medium leading-normal tracking-[-0.26px]', 
+// Focus
+'outline-none', 
+// Cursor
+'cursor-pointer', 
+// Appearance
+'appearance-none', 
+// Transitions
+'transition-all duration-200', 
+// States
+'hover:enabled:border-muted-foreground/30', 'focus:border-ring focus:ring-2 focus:ring-ring/30'));
+/**
+ * Pagination select icon variants
+ *
+ * Dropdown chevron icon
+ */
+const paginationSelectIconVariants = cva(clsx(
+// Position
+'absolute right-[7px] top-1/2 -translate-y-1/2', 
+// Pointer events
+'pointer-events-none'));
+/**
+ * Pagination navigation controls variants
+ *
+ * Container for navigation buttons
+ */
+const paginationNavControlsVariants = cva(clsx(
+// Layout
+'flex items-center gap-[7px]'));
+/**
+ * Pagination navigation button variants
+ *
+ * Navigation buttons (first, prev, next, last, refresh)
+ */
+const paginationNavButtonVariants = cva(clsx(
+// Size
+'w-[29px] h-[29px]', 
+// Layout
+'flex items-center justify-center', 
+// Border
+'rounded-md border border-border', 
+// Background
+'bg-background', 
+// Cursor
+'cursor-pointer', 
+// Focus
+'outline-none', 
+// Spacing
+'p-0', 
+// Transitions
+'transition-all duration-200', 
+// States
+'hover:enabled:bg-muted hover:enabled:border-muted-foreground/30', 'active:enabled:bg-muted/80', 'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30', 'disabled:cursor-not-allowed disabled:opacity-40', 
+// Disabled SVG color
+'[&:disabled_svg_path]:fill-muted-foreground'), {
+    variants: {
+        isRefresh: {
+            true: 'w-[30px]',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        isRefresh: false,
+    },
+});
+
+class PaginationComponent {
+    /** Inputs (API existente) */
+    currentPage = input(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    totalPages = input(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : [])); // se mantiene, pero se "resuelve" automáticamente
+    pageSize = input(5, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    pageSizeOptions = input([5, 10, 20], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    totalItems = input(5, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    rangeLabel = input('', ...(ngDevMode ? [{ debugName: "rangeLabel" }] : [])); // se mantiene, pero ahora el label se calcula
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Outputs (API existente) */
+    pageChange = output();
+    pageSizeChange = output();
+    paginationChange = output();
+    refresh = output();
+    /** Estado interno (para que el componente funcione sin que el padre lo controle) */
+    pageSig = signal(1, ...(ngDevMode ? [{ debugName: "pageSig" }] : []));
+    pageSizeSig = signal(5, ...(ngDevMode ? [{ debugName: "pageSizeSig" }] : []));
+    /** Buffer para edición del input */
+    tempPageValue = signal('', ...(ngDevMode ? [{ debugName: "tempPageValue" }] : []));
+    constructor() {
+        // Sincroniza estado interno si el padre cambia inputs desde afuera (Storybook Controls o app real)
+        effect(() => {
+            this.pageSig.set(this.currentPage());
+        });
+        effect(() => {
+            this.pageSizeSig.set(this.pageSize());
+        });
+        // Si cambia pageSizeOptions y el pageSize actual ya no existe, cae al primero
+        effect(() => {
+            const opts = this.pageSizeOptions();
+            if (opts.length === 0)
+                return;
+            const current = this.pageSizeSig();
+            if (!opts.includes(current)) {
+                this.setPageSize(opts[0]);
+            }
+        });
+    }
+    /** Total pages calculado con totalItems/pageSize */
+    resolvedTotalPages = computed(() => {
+        const totalItems = this.totalItems();
+        const size = this.pageSizeSig();
+        if (totalItems > 0 && size > 0) {
+            return Math.max(0, Math.ceil(totalItems / size));
+        }
+        // fallback si no hay totalItems (o es 0) => respeta el input
+        return Math.max(0, this.totalPages());
+    }, ...(ngDevMode ? [{ debugName: "resolvedTotalPages" }] : []));
+    /** Range label calculado (siempre) */
+    computedRangeLabel = computed(() => {
+        const total = this.totalItems();
+        const page = this.pageSig();
+        const size = this.pageSizeSig();
+        if (total <= 0 || size <= 0 || this.resolvedTotalPages() === 0) {
+            return `0 - 0 de ${Math.max(0, total)} ítems`;
+        }
+        const start = (page - 1) * size + 1;
+        const end = Math.min(total, page * size);
+        return `${start} - ${end} de ${total} ítems`;
+    }, ...(ngDevMode ? [{ debugName: "computedRangeLabel" }] : []));
+    /** Valor visible en el input de página */
+    pageInputValue = computed(() => {
+        const tmp = this.tempPageValue();
+        return tmp !== '' ? tmp : String(this.pageSig());
+    }, ...(ngDevMode ? [{ debugName: "pageInputValue" }] : []));
+    // Classes
+    containerClasses = computed(() => clsx(paginationContainerVariants(), this.className()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    sectionLeftClasses = computed(() => clsx(paginationSectionLeftVariants()), ...(ngDevMode ? [{ debugName: "sectionLeftClasses" }] : []));
+    sectionMiddleClasses = computed(() => clsx(paginationSectionMiddleVariants()), ...(ngDevMode ? [{ debugName: "sectionMiddleClasses" }] : []));
+    sectionRightClasses = computed(() => clsx(paginationSectionRightVariants()), ...(ngDevMode ? [{ debugName: "sectionRightClasses" }] : []));
+    labelClasses = computed(() => clsx(paginationLabelVariants()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    rangeLabelClasses = computed(() => clsx(paginationRangeLabelVariants()), ...(ngDevMode ? [{ debugName: "rangeLabelClasses" }] : []));
+    inputClasses = computed(() => clsx(paginationInputVariants()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    selectWrapperClasses = computed(() => clsx(paginationSelectWrapperVariants()), ...(ngDevMode ? [{ debugName: "selectWrapperClasses" }] : []));
+    selectClasses = computed(() => clsx(paginationSelectVariants()), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    selectIconClasses = computed(() => clsx(paginationSelectIconVariants()), ...(ngDevMode ? [{ debugName: "selectIconClasses" }] : []));
+    navControlsClasses = computed(() => clsx(paginationNavControlsVariants()), ...(ngDevMode ? [{ debugName: "navControlsClasses" }] : []));
+    navButtonClasses = computed(() => clsx(paginationNavButtonVariants({ isRefresh: false })), ...(ngDevMode ? [{ debugName: "navButtonClasses" }] : []));
+    refreshButtonClasses = computed(() => clsx(paginationNavButtonVariants({ isRefresh: true })), ...(ngDevMode ? [{ debugName: "refreshButtonClasses" }] : []));
+    // Navigation
+    goToFirstPage() {
+        if (this.resolvedTotalPages() > 0)
+            this.updatePage(1);
+    }
+    goToPreviousPage() {
+        if (this.pageSig() > 1)
+            this.updatePage(this.pageSig() - 1);
+    }
+    goToNextPage() {
+        if (this.pageSig() < this.resolvedTotalPages())
+            this.updatePage(this.pageSig() + 1);
+    }
+    goToLastPage() {
+        const last = this.resolvedTotalPages();
+        if (last > 0)
+            this.updatePage(last);
+    }
+    // Page input handling
+    onPageInputFocus() {
+        this.tempPageValue.set(String(this.pageSig()));
+    }
+    onPageInputChange(event) {
+        const inputEl = event.target;
+        this.tempPageValue.set(inputEl.value);
+    }
+    onPageInputBlur() {
+        const tempValue = this.tempPageValue().trim();
+        if (tempValue === '') {
+            this.tempPageValue.set('');
+            return;
+        }
+        let page = parseInt(tempValue, 10);
+        if (Number.isNaN(page)) {
+            this.tempPageValue.set('');
+            return;
+        }
+        page = Math.max(1, Math.min(page, this.resolvedTotalPages() || 1));
+        this.updatePage(page);
+        this.tempPageValue.set('');
+    }
+    // Page size change
+    onPageSizeSelectChange(event) {
+        const select = event.target;
+        const newSize = parseInt(select.value, 10);
+        if (Number.isNaN(newSize) || newSize <= 0)
+            return;
+        if (newSize !== this.pageSizeSig()) {
+            this.setPageSize(newSize);
+        }
+    }
+    setPageSize(newSize) {
+        this.pageSizeSig.set(newSize);
+        // Ajusta página actual si se sale del rango con el nuevo totalPages
+        const max = this.resolvedTotalPages();
+        const nextPage = Math.max(1, Math.min(this.pageSig(), max || 1));
+        // Si prefieres resetear siempre a 1 al cambiar tamaño, cambia por: this.updatePage(1)
+        this.pageSig.set(nextPage);
+        this.pageSizeChange.emit(newSize);
+        this.paginationChange.emit({ currentPage: nextPage, pageSize: newSize });
+        // Si el clamp cambió la página, también notificamos pageChange
+        if (nextPage !== this.currentPage()) {
+            this.pageChange.emit(nextPage);
+        }
+    }
+    onRefresh() {
+        this.refresh.emit();
+    }
+    updatePage(page) {
+        const max = this.resolvedTotalPages();
+        const clamped = Math.max(1, Math.min(page, max || 1));
+        this.pageSig.set(clamped);
+        this.tempPageValue.set('');
+        this.pageChange.emit(clamped);
+        this.paginationChange.emit({
+            currentPage: clamped,
+            pageSize: this.pageSizeSig(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginationComponent, isStandalone: true, selector: "bsg-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", paginationChange: "paginationChange", refresh: "refresh" }, ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      <!-- Left section: Current page -->
+      <div [class]="sectionLeftClasses()">
+        <span [class]="labelClasses()">Página</span>
+        <input
+          type="number"
+          [class]="inputClasses()"
+          [value]="pageInputValue()"
+          [min]="1"
+          [max]="resolvedTotalPages()"
+          (focus)="onPageInputFocus()"
+          (input)="onPageInputChange($event)"
+          (keydown.enter)="onPageInputBlur()"
+          (blur)="onPageInputBlur()"
+          [disabled]="resolvedTotalPages() === 0"
+        />
+        <span [class]="labelClasses()">de {{ resolvedTotalPages() }}</span>
+      </div>
+
+      <!-- Middle section: Page size selector -->
+      <div [class]="sectionMiddleClasses()">
+        <div [class]="selectWrapperClasses()">
+          <select
+            [class]="selectClasses()"
+            [value]="pageSizeSig()"
+            (change)="onPageSizeSelectChange($event)"
+          >
+            @for (option of pageSizeOptions(); track option) {
+              <option [value]="option">{{ option }}</option>
+            }
+          </select>
+
+          <svg
+            [class]="selectIconClasses()"
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.8081 5.18312C11.0522 4.93904 11.4478 4.93904 11.6919 5.18312C11.936 5.4272 11.936 5.82283 11.6919 6.06691L7.94191 9.81691C7.69783 10.061 7.3022 10.061 7.05812 9.81691L3.30812 6.06691C3.06404 5.82283 3.06404 5.4272 3.30812 5.18312C3.5522 4.93904 3.94783 4.93904 4.19191 5.18312L7.50001 8.49122L10.8081 5.18312Z"
+              fill="#848485"
+            />
+          </svg>
+        </div>
+        <span [class]="labelClasses()">ítems por página</span>
+      </div>
+
+      <!-- Right section: Range label and navigation -->
+      <div [class]="sectionRightClasses()">
+        <span [class]="rangeLabelClasses()">{{ computedRangeLabel() }}</span>
+
+        <div [class]="navControlsClasses()">
+          <!-- First page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="pageSig() === 1 || resolvedTotalPages() === 0"
+            (click)="goToFirstPage()"
+            aria-label="Primera página"
+          >
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.43312 3.93312C6.6772 3.68904 7.07283 3.68904 7.31691 3.93312C7.56099 4.1772 7.56099 4.57283 7.31691 4.81691L4.6338 7.50001L7.31691 10.1831C7.56099 10.4272 7.56099 10.8228 7.31691 11.0669C7.07283 11.311 6.6772 11.311 6.43312 11.0669L3.30812 7.94191C3.06404 7.69783 3.06404 7.3022 3.30812 7.05812L6.43312 3.93312ZM10.8081 3.93312C11.0522 3.68904 11.4478 3.68904 11.6919 3.93312C11.936 4.1772 11.936 4.57283 11.6919 4.81691L9.0088 7.50001L11.6919 10.1831C11.936 10.4272 11.936 10.8228 11.6919 11.0669C11.4478 11.311 11.0522 11.311 10.8081 11.0669L7.68312 7.94191C7.43904 7.69783 7.43904 7.3022 7.68312 7.05812L10.8081 3.93312Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Previous page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="pageSig() === 1 || resolvedTotalPages() === 0"
+            (click)="goToPreviousPage()"
+            aria-label="Página anterior"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.33754 3.08754C8.56535 2.85974 8.93461 2.85974 9.16241 3.08754C9.39022 3.31535 9.39022 3.68461 9.16241 3.91241L6.07485 6.99998L9.16241 10.0875C9.39022 10.3153 9.39022 10.6846 9.16241 10.9124C8.93461 11.1402 8.56535 11.1402 8.33754 10.9124L4.83754 7.41241C4.60974 7.18461 4.60974 6.81535 4.83754 6.58754L8.33754 3.08754Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Next page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="
+              pageSig() >= resolvedTotalPages() || resolvedTotalPages() === 0
+            "
+            (click)="goToNextPage()"
+            aria-label="Página siguiente"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.52864 3.52864C5.78899 3.26829 6.21099 3.26829 6.47134 3.52864L10.4713 7.52864C10.7317 7.78899 10.7317 8.211 10.4713 8.47134L6.47134 12.4713C6.21099 12.7317 5.78899 12.7317 5.52864 12.4713C5.26829 12.211 5.26829 11.789 5.52864 11.5286L9.05728 7.99999L5.52864 4.47134C5.26829 4.21099 5.26829 3.78899 5.52864 3.52864Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Last page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="
+              pageSig() >= resolvedTotalPages() || resolvedTotalPages() === 0
+            "
+            (click)="goToLastPage()"
+            aria-label="Última página"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.52864 4.19532C3.78899 3.93497 4.21099 3.93497 4.47134 4.19532L7.80468 7.52866C8.06503 7.78901 8.06503 8.21102 7.80468 8.47136L4.47134 11.8047C4.21099 12.065 3.78899 12.065 3.52864 11.8047C3.26829 11.5443 3.26829 11.1223 3.52864 10.862L6.39062 8.00001L3.52864 5.13803C3.26829 4.87768 3.26829 4.45567 3.52864 4.19532ZM8.1953 4.19532C8.45565 3.93497 8.87766 3.93497 9.13801 4.19532L12.4713 7.52866C12.7317 7.78901 12.7317 8.21102 12.4713 8.47136L9.13801 11.8047C8.87766 12.065 8.45565 12.065 8.1953 11.8047C7.93495 11.5443 7.93495 11.1223 8.1953 10.862L11.0573 8.00001L8.1953 5.13803C7.93495 4.87768 7.93495 4.45567 8.1953 4.19532Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Refresh -->
+          <button
+            type="button"
+            [class]="refreshButtonClasses()"
+            (click)="onRefresh()"
+            aria-label="Refrescar"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1.16663 12.25V9.33332C1.16663 9.01116 1.42779 8.74999 1.74996 8.74999H4.66663C4.98879 8.74999 5.24996 9.01116 5.24996 9.33332C5.24996 9.65549 4.98879 9.91666 4.66663 9.91666H3.15816L3.47376 10.2322L3.65491 10.3992C4.57867 11.2098 5.76662 11.6612 7.0011 11.6661C8.23836 11.6658 9.42511 11.1749 10.3 10.3C11.1752 9.42487 11.6666 8.23767 11.6666 6.99999C11.6666 6.67782 11.9278 6.41666 12.25 6.41666C12.5721 6.41666 12.8333 6.67782 12.8333 6.99999C12.8333 8.54709 12.2188 10.0309 11.1249 11.1249C10.0309 12.2189 8.54706 12.8333 6.99996 12.8333H6.99768C5.48052 12.8276 4.02054 12.2721 2.88529 11.2759L2.65572 11.064L2.33329 10.7415V12.25C2.33329 12.5722 2.07213 12.8333 1.74996 12.8333C1.42779 12.8333 1.16663 12.5722 1.16663 12.25ZM1.16663 6.99999C1.16663 5.45289 1.78108 3.96903 2.87504 2.87507C3.969 1.78111 5.45286 1.16666 6.99996 1.16666H7.00224L7.30473 1.1752C8.71256 1.24848 10.055 1.79424 11.1146 2.72411L11.3442 2.93603L11.6666 3.25845V1.74999C11.6666 1.42782 11.9278 1.16666 12.25 1.16666C12.5721 1.16666 12.8333 1.42782 12.8333 1.74999V4.66666C12.8333 4.98882 12.5721 5.24999 12.25 5.24999H9.33329C9.01113 5.24999 8.74996 4.98882 8.74996 4.66666C8.74996 4.34449 9.01113 4.08332 9.33329 4.08332H10.8418L10.5262 3.76773L10.345 3.60082C9.4211 2.79008 8.23293 2.33809 6.99825 2.33332C5.76119 2.33378 4.57468 2.82517 3.69991 3.69994C2.82474 4.57511 2.33329 5.76231 2.33329 6.99999C2.33329 7.32216 2.07213 7.58332 1.74996 7.58332C1.42779 7.58332 1.16663 7.32216 1.16663 6.99999Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-pagination', standalone: true, template: `
+    <div [class]="containerClasses()">
+      <!-- Left section: Current page -->
+      <div [class]="sectionLeftClasses()">
+        <span [class]="labelClasses()">Página</span>
+        <input
+          type="number"
+          [class]="inputClasses()"
+          [value]="pageInputValue()"
+          [min]="1"
+          [max]="resolvedTotalPages()"
+          (focus)="onPageInputFocus()"
+          (input)="onPageInputChange($event)"
+          (keydown.enter)="onPageInputBlur()"
+          (blur)="onPageInputBlur()"
+          [disabled]="resolvedTotalPages() === 0"
+        />
+        <span [class]="labelClasses()">de {{ resolvedTotalPages() }}</span>
+      </div>
+
+      <!-- Middle section: Page size selector -->
+      <div [class]="sectionMiddleClasses()">
+        <div [class]="selectWrapperClasses()">
+          <select
+            [class]="selectClasses()"
+            [value]="pageSizeSig()"
+            (change)="onPageSizeSelectChange($event)"
+          >
+            @for (option of pageSizeOptions(); track option) {
+              <option [value]="option">{{ option }}</option>
+            }
+          </select>
+
+          <svg
+            [class]="selectIconClasses()"
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.8081 5.18312C11.0522 4.93904 11.4478 4.93904 11.6919 5.18312C11.936 5.4272 11.936 5.82283 11.6919 6.06691L7.94191 9.81691C7.69783 10.061 7.3022 10.061 7.05812 9.81691L3.30812 6.06691C3.06404 5.82283 3.06404 5.4272 3.30812 5.18312C3.5522 4.93904 3.94783 4.93904 4.19191 5.18312L7.50001 8.49122L10.8081 5.18312Z"
+              fill="#848485"
+            />
+          </svg>
+        </div>
+        <span [class]="labelClasses()">ítems por página</span>
+      </div>
+
+      <!-- Right section: Range label and navigation -->
+      <div [class]="sectionRightClasses()">
+        <span [class]="rangeLabelClasses()">{{ computedRangeLabel() }}</span>
+
+        <div [class]="navControlsClasses()">
+          <!-- First page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="pageSig() === 1 || resolvedTotalPages() === 0"
+            (click)="goToFirstPage()"
+            aria-label="Primera página"
+          >
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.43312 3.93312C6.6772 3.68904 7.07283 3.68904 7.31691 3.93312C7.56099 4.1772 7.56099 4.57283 7.31691 4.81691L4.6338 7.50001L7.31691 10.1831C7.56099 10.4272 7.56099 10.8228 7.31691 11.0669C7.07283 11.311 6.6772 11.311 6.43312 11.0669L3.30812 7.94191C3.06404 7.69783 3.06404 7.3022 3.30812 7.05812L6.43312 3.93312ZM10.8081 3.93312C11.0522 3.68904 11.4478 3.68904 11.6919 3.93312C11.936 4.1772 11.936 4.57283 11.6919 4.81691L9.0088 7.50001L11.6919 10.1831C11.936 10.4272 11.936 10.8228 11.6919 11.0669C11.4478 11.311 11.0522 11.311 10.8081 11.0669L7.68312 7.94191C7.43904 7.69783 7.43904 7.3022 7.68312 7.05812L10.8081 3.93312Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Previous page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="pageSig() === 1 || resolvedTotalPages() === 0"
+            (click)="goToPreviousPage()"
+            aria-label="Página anterior"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.33754 3.08754C8.56535 2.85974 8.93461 2.85974 9.16241 3.08754C9.39022 3.31535 9.39022 3.68461 9.16241 3.91241L6.07485 6.99998L9.16241 10.0875C9.39022 10.3153 9.39022 10.6846 9.16241 10.9124C8.93461 11.1402 8.56535 11.1402 8.33754 10.9124L4.83754 7.41241C4.60974 7.18461 4.60974 6.81535 4.83754 6.58754L8.33754 3.08754Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Next page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="
+              pageSig() >= resolvedTotalPages() || resolvedTotalPages() === 0
+            "
+            (click)="goToNextPage()"
+            aria-label="Página siguiente"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.52864 3.52864C5.78899 3.26829 6.21099 3.26829 6.47134 3.52864L10.4713 7.52864C10.7317 7.78899 10.7317 8.211 10.4713 8.47134L6.47134 12.4713C6.21099 12.7317 5.78899 12.7317 5.52864 12.4713C5.26829 12.211 5.26829 11.789 5.52864 11.5286L9.05728 7.99999L5.52864 4.47134C5.26829 4.21099 5.26829 3.78899 5.52864 3.52864Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Last page -->
+          <button
+            type="button"
+            [class]="navButtonClasses()"
+            [disabled]="
+              pageSig() >= resolvedTotalPages() || resolvedTotalPages() === 0
+            "
+            (click)="goToLastPage()"
+            aria-label="Última página"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.52864 4.19532C3.78899 3.93497 4.21099 3.93497 4.47134 4.19532L7.80468 7.52866C8.06503 7.78901 8.06503 8.21102 7.80468 8.47136L4.47134 11.8047C4.21099 12.065 3.78899 12.065 3.52864 11.8047C3.26829 11.5443 3.26829 11.1223 3.52864 10.862L6.39062 8.00001L3.52864 5.13803C3.26829 4.87768 3.26829 4.45567 3.52864 4.19532ZM8.1953 4.19532C8.45565 3.93497 8.87766 3.93497 9.13801 4.19532L12.4713 7.52866C12.7317 7.78901 12.7317 8.21102 12.4713 8.47136L9.13801 11.8047C8.87766 12.065 8.45565 12.065 8.1953 11.8047C7.93495 11.5443 7.93495 11.1223 8.1953 10.862L11.0573 8.00001L8.1953 5.13803C7.93495 4.87768 7.93495 4.45567 8.1953 4.19532Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+
+          <!-- Refresh -->
+          <button
+            type="button"
+            [class]="refreshButtonClasses()"
+            (click)="onRefresh()"
+            aria-label="Refrescar"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1.16663 12.25V9.33332C1.16663 9.01116 1.42779 8.74999 1.74996 8.74999H4.66663C4.98879 8.74999 5.24996 9.01116 5.24996 9.33332C5.24996 9.65549 4.98879 9.91666 4.66663 9.91666H3.15816L3.47376 10.2322L3.65491 10.3992C4.57867 11.2098 5.76662 11.6612 7.0011 11.6661C8.23836 11.6658 9.42511 11.1749 10.3 10.3C11.1752 9.42487 11.6666 8.23767 11.6666 6.99999C11.6666 6.67782 11.9278 6.41666 12.25 6.41666C12.5721 6.41666 12.8333 6.67782 12.8333 6.99999C12.8333 8.54709 12.2188 10.0309 11.1249 11.1249C10.0309 12.2189 8.54706 12.8333 6.99996 12.8333H6.99768C5.48052 12.8276 4.02054 12.2721 2.88529 11.2759L2.65572 11.064L2.33329 10.7415V12.25C2.33329 12.5722 2.07213 12.8333 1.74996 12.8333C1.42779 12.8333 1.16663 12.5722 1.16663 12.25ZM1.16663 6.99999C1.16663 5.45289 1.78108 3.96903 2.87504 2.87507C3.969 1.78111 5.45286 1.16666 6.99996 1.16666H7.00224L7.30473 1.1752C8.71256 1.24848 10.055 1.79424 11.1146 2.72411L11.3442 2.93603L11.6666 3.25845V1.74999C11.6666 1.42782 11.9278 1.16666 12.25 1.16666C12.5721 1.16666 12.8333 1.42782 12.8333 1.74999V4.66666C12.8333 4.98882 12.5721 5.24999 12.25 5.24999H9.33329C9.01113 5.24999 8.74996 4.98882 8.74996 4.66666C8.74996 4.34449 9.01113 4.08332 9.33329 4.08332H10.8418L10.5262 3.76773L10.345 3.60082C9.4211 2.79008 8.23293 2.33809 6.99825 2.33332C5.76119 2.33378 4.57468 2.82517 3.69991 3.69994C2.82474 4.57511 2.33329 5.76231 2.33329 6.99999C2.33329 7.32216 2.07213 7.58332 1.74996 7.58332C1.42779 7.58332 1.16663 7.32216 1.16663 6.99999Z"
+                fill="#939394"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], rangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }] } });
+
+/**
+ * Separator variants
+ *
+ * Controls the visual separator line between content sections
+ */
+const separatorVariants = cva(clsx(
+// Base
+'shrink-0', 
+// Background color (semantic token)
+'bg-border', 
+// Reset
+'border-none'), {
+    variants: {
+        orientation: {
+            horizontal: 'w-full h-px',
+            vertical: 'h-full w-px self-stretch',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+
+/**
+ * Separator Component
+ *
+ * A visual divider between content sections.
+ *
+ * Usage:
+ * ```html
+ * <bsg-separator />
+ * <bsg-separator orientation="vertical" />
+ * ```
+ */
+class SeparatorComponent {
+    /** Separator orientation */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Computed separator classes */
+    separatorClasses = computed(() => clsx(separatorVariants({ orientation: this.orientation() }), this.className()), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: SeparatorComponent, isStandalone: true, selector: "bsg-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      [class]="separatorClasses()"
+      role="separator"
+      [attr.aria-orientation]="orientation()"
+    ></div>
+  `, isInline: true, styles: [":host{display:block}:host([orientation=\"vertical\"]){display:inline-block;height:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-separator', standalone: true, template: `
+    <div
+      [class]="separatorClasses()"
+      role="separator"
+      [attr.aria-orientation]="orientation()"
+    ></div>
+  `, styles: [":host{display:block}:host([orientation=\"vertical\"]){display:inline-block;height:100%}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
+
+/**
+ * @deprecated Use the new composable table components (TableComponent, TableHeader, TableBody, etc.) instead.
+ * This component is kept for backwards compatibility.
+ */
+class TableContainerComponent {
+    /** Container title */
+    title = 'Título del Contenedor';
+    /** Display variant */
+    variant = 'table-basic';
+    /** Header action button (e.g., "Nuevo mensaje") */
+    headerAction;
+    // Collapsible mode inputs
+    isCollapsible = false;
+    isExpanded = true;
+    disableExpansion = false;
+    // Table variant inputs
+    tableColumns = [];
+    tableRows = [];
+    tablePagination;
+    // Table-actions specific
+    showActionsColumn = true;
+    actionsColumnLabel = 'Acciones';
+    actionsColumnWidth = '200px';
+    // List variant inputs
+    listItems = [];
+    // Tabs variant inputs
+    tabs = [];
+    activeTabIndex = 0;
+    tabsPagination = [];
+    // Events
+    headerActionClick = new EventEmitter();
+    collapseToggle = new EventEmitter();
+    tabChange = new EventEmitter();
+    tablePageChange = new EventEmitter();
+    tablePageSizeChange = new EventEmitter();
+    tableRefresh = new EventEmitter();
+    tabPageChange = new EventEmitter();
+    tabPageSizeChange = new EventEmitter();
+    tabRefresh = new EventEmitter();
+    rowAction = new EventEmitter();
+    get containerClasses() {
+        const classes = [`table-${this.variant}`];
+        if (this.isCollapsible && !this.isExpanded) {
+            classes.push('table-collapsed');
+        }
+        return classes;
+    }
+    toggleCollapse() {
+        this.isExpanded = !this.isExpanded;
+        this.collapseToggle.emit(this.isExpanded);
+    }
+    onHeaderAction() {
+        this.headerActionClick.emit();
+    }
+    onTabChange(index) {
+        this.activeTabIndex = index;
+        this.tabChange.emit(index);
+    }
+    onTablePageChange(page) {
+        this.tablePageChange.emit(page);
+    }
+    onTablePageSizeChange(pageSize) {
+        this.tablePageSizeChange.emit(pageSize);
+    }
+    onTableRefresh() {
+        this.tableRefresh.emit();
+    }
+    onTabPageChange(tabIndex, page) {
+        this.tabPageChange.emit({ tabIndex, page });
+    }
+    onTabPageSizeChange(tabIndex, pageSize) {
+        this.tabPageSizeChange.emit({ tabIndex, pageSize });
+    }
+    onTabRefresh(tabIndex) {
+        this.tabRefresh.emit(tabIndex);
+    }
+    onRowAction(rowIndex, action) {
+        this.rowAction.emit({ rowIndex, action });
+        if (action.onClick) {
+            action.onClick();
+        }
+    }
+    getActionVariant(actionVariant) {
+        switch (actionVariant) {
+            case 'approve':
+                return 'default'; // Green variant
+            case 'reject':
+                return 'destructive'; // Red variant
+            case 'view':
+                return 'ghost'; // Light blue variant
+            default:
+                return 'default';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableContainerComponent, isStandalone: true, selector: "bsg-table-container", inputs: { title: "title", variant: "variant", headerAction: "headerAction", isCollapsible: "isCollapsible", isExpanded: "isExpanded", disableExpansion: "disableExpansion", tableColumns: "tableColumns", tableRows: "tableRows", tablePagination: "tablePagination", showActionsColumn: "showActionsColumn", actionsColumnLabel: "actionsColumnLabel", actionsColumnWidth: "actionsColumnWidth", listItems: "listItems", tabs: "tabs", activeTabIndex: "activeTabIndex", tabsPagination: "tabsPagination" }, outputs: { headerActionClick: "headerActionClick", collapseToggle: "collapseToggle", tabChange: "tabChange", tablePageChange: "tablePageChange", tablePageSizeChange: "tablePageSizeChange", tableRefresh: "tableRefresh", tabPageChange: "tabPageChange", tabPageSizeChange: "tabPageSizeChange", tabRefresh: "tabRefresh", rowAction: "rowAction" }, ngImport: i0, template: `
+    <div class="table" [class]="containerClasses">
+      <!-- Header -->
+      <div
+        class="table-header"
+        [class.table-header-collapsible]="isCollapsible"
+      >
+        <!-- Icon -->
+        @if (!isCollapsible) {
+          <div class="table-icon">
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 28 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="14" cy="14" r="14" fill="#2563EB" />
+            </svg>
+            <svg
+              class="table-check-icon"
+              width="15"
+              height="15"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_check)">
+                <path
+                  d="M6.43155 0.706459C7.98492 0.461733 9.5751 0.757369 10.9372 1.54325C11.2361 1.71571 11.339 2.09758 11.1667 2.39652C10.9942 2.6955 10.6118 2.79791 10.3128 2.6254C9.19841 1.98244 7.89713 1.74102 6.62625 1.9412C5.35534 2.14143 4.19126 2.77142 3.32852 3.72587C2.4658 4.68036 1.95624 5.90193 1.88504 7.18656C1.81386 8.47123 2.18527 9.74182 2.93729 10.7858C3.6893 11.8297 4.77673 12.5845 6.01773 12.9239C7.25873 13.2632 8.57877 13.167 9.75736 12.651C10.936 12.1351 11.9023 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.013 6.37479C12.9441 6.03664 13.1625 5.7065 13.5006 5.63749C13.8389 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.328 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2585 13.7961C8.818 14.4266 7.20487 14.5441 5.68814 14.1293C4.17132 13.7145 2.84201 12.7923 1.92288 11.5164C1.00377 10.2404 0.549897 8.68771 0.636872 7.11759C0.72387 5.54744 1.34693 4.05449 2.4014 2.88786C3.45585 1.7213 4.87821 0.951184 6.43155 0.706459ZM13.3084 2.05778C13.5525 1.81398 13.9482 1.81382 14.1922 2.05778C14.4362 2.30185 14.4362 2.6981 14.1922 2.94218L7.94217 9.19218C7.69818 9.43613 7.30247 9.43597 7.05838 9.19218L5.18338 7.31718C4.9393 7.0731 4.9393 6.67686 5.18338 6.43278C5.42747 6.18898 5.82318 6.18882 6.06717 6.43278L7.50028 7.86588L13.3084 2.05778Z"
+                  fill="white"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_check">
+                  <rect width="15" height="15" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        }
+
+        <!-- Title -->
+        <h2 class="table-title">{{ title }}</h2>
+
+        <!-- Header Actions (e.g., "Nuevo mensaje" button) -->
+        @if (headerAction && !isCollapsible) {
+          <div class="table-header-actions">
+            <bsg-button
+              [label]="headerAction.label"
+              [variant]="headerAction.variant || 'default'"
+              [size]="headerAction.size || 'md'"
+              (onClick)="onHeaderAction()"
+            ></bsg-button>
+          </div>
+        }
+
+        <!-- Chevron Icon for Collapsible Mode (right side) -->
+        @if (isCollapsible) {
+          <button
+            type="button"
+            class="table-collapse-chevron"
+            [class.table-chevron-expanded]="isExpanded"
+            (click)="toggleCollapse()"
+            [attr.aria-expanded]="isExpanded"
+            [attr.aria-label]="isExpanded ? 'Contraer' : 'Expandir'"
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.3691 8.22462C11.7618 7.90427 12.3408 7.92686 12.707 8.29298L18.707 14.293C19.0975 14.6835 19.0975 15.3165 18.707 15.707C18.3164 16.0976 17.6834 16.0976 17.2929 15.707L11.9999 10.4141L6.70696 15.707C6.31643 16.0976 5.68342 16.0976 5.29289 15.707C4.90237 15.3165 4.90237 14.6835 5.29289 14.293L11.2929 8.29298L11.3691 8.22462Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        }
+      </div>
+
+      <!-- Body -->
+      <div class="table-body">
+        <!-- Table Variants (table-basic, table-actions) -->
+        @if (variant === 'table-basic' || variant === 'table-actions') {
+          <div class="table-content">
+            <!-- Table Header -->
+            <div class="table-content-header">
+              @for (column of tableColumns; track column.key) {
+                <div
+                  class="table-header-cell"
+                  [style.width]="column.width || 'auto'"
+                >
+                  {{ column.label }}
+                </div>
+              }
+              @if (variant === 'table-actions' && showActionsColumn) {
+                <div
+                  class="table-header-cell table-actions-header"
+                  [style.width]="actionsColumnWidth || 'auto'"
+                >
+                  {{ actionsColumnLabel || 'Acciones' }}
+                </div>
+              }
+            </div>
+
+            <bsg-separator></bsg-separator>
+
+            <!-- Table Rows -->
+            <div class="table-content-body">
+              @for (row of tableRows; track $index; let i = $index) {
+                <div class="table-row">
+                  @for (column of tableColumns; track column.key) {
+                    <div
+                      class="table-cell"
+                      [style.width]="column.width || 'auto'"
+                    >
+                      <!-- Render badge if specified -->
+                      @if (row[column.key + '_badge']) {
+                        <bsg-badge
+                          [variant]="row[column.key + '_badge_variant'] || 'default'"
+                          [value]="row[column.key]"
+                          [size]="row[column.key + '_badge_size'] || 'default'"
+                        ></bsg-badge>
+                      } @else if (row[column.key + '_label']) {
+                        <!-- Render label if specified -->
+                        <bsg-label [text]="row[column.key]"></bsg-label>
+                      } @else {
+                        <!-- Render plain text otherwise -->
+                        <span>{{ row[column.key] }}</span>
+                      }
+                    </div>
+                  }
+
+                  <!-- Actions Column (for table-actions variant) -->
+                  @if (variant === 'table-actions' && row['actions']) {
+                    <div
+                      class="table-cell table-actions-cell"
+                      [style.width]="actionsColumnWidth || 'auto'"
+                    >
+                      <div class="table-actions">
+                        @for (action of row['actions']; track $index) {
+                          <bsg-button
+                            [label]="action.label"
+                            [variant]="getActionVariant(action.variant)"
+                            [size]="'md'"
+                            [shape]="'rectangular'"
+                            (onClick)="onRowAction(i, action)"
+                            class="table-action-btn"
+                          ></bsg-button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+
+            <!-- Pagination -->
+            @if (tablePagination) {
+              <div class="table-pagination">
+                <bsg-separator></bsg-separator>
+                <bsg-pagination
+                  [currentPage]="tablePagination.currentPage"
+                  [totalPages]="tablePagination.totalPages"
+                  [pageSize]="tablePagination.pageSize"
+                  [pageSizeOptions]="tablePagination.pageSizeOptions"
+                  [totalItems]="tablePagination.totalItems"
+                  [rangeLabel]="tablePagination.rangeLabel"
+                  (pageChange)="onTablePageChange($event)"
+                  (pageSizeChange)="onTablePageSizeChange($event)"
+                  (refresh)="onTableRefresh()"
+                ></bsg-pagination>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- List Variant (list-content) -->
+        @if (variant === 'list-content') {
+          <div class="table-list">
+            @for (item of listItems; track $index; let i = $index) {
+              <div class="table-list-item">
+                <div class="table-list-number">
+                  <svg
+                    width="27"
+                    height="26"
+                    viewBox="0 0 27 26"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <ellipse cx="13.5" cy="13" rx="13.5" ry="13" fill="#2563EB" />
+                  </svg>
+                  <span class="table-list-number-text">{{ i + 1 }}</span>
+                </div>
+                <div class="table-list-text">{{ item.text }}</div>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- Tabs Variant (table-tabs) -->
+        @if (variant === 'table-tabs') {
+          <div class="table-tabs-wrapper">
+            <!-- Tab Navigation -->
+            <bsg-tab-navigation
+              [tabs]="tabs"
+              [activeIndex]="activeTabIndex"
+              [size]="'md'"
+              [variant]="'text'"
+              (tabChange)="onTabChange($event)"
+            ></bsg-tab-navigation>
+
+            <!-- Tab Content -->
+            <div class="table-tab-content">
+              @for (tab of tabs; track $index; let i = $index) {
+                @if (i === activeTabIndex && tab.tableData) {
+                  <div class="table-content">
+                    <!-- Table Header -->
+                    <div class="table-content-header">
+                      @for (column of tab.tableData.columns; track column.key) {
+                        <div
+                          class="table-header-cell"
+                          [style.width]="column.width || 'auto'"
+                        >
+                          {{ column.label }}
+                        </div>
+                      }
+                    </div>
+
+                    <bsg-separator></bsg-separator>
+
+                    <!-- Table Rows -->
+                    <div class="table-content-body">
+                      @for (row of tab.tableData.rows; track $index) {
+                        <div class="table-row">
+                          @for (column of tab.tableData.columns; track column.key) {
+                            <div
+                              class="table-cell"
+                              [style.width]="column.width || 'auto'"
+                            >
+                              <!-- Render badge if specified -->
+                              @if (row[column.key + '_badge']) {
+                                <bsg-badge
+                                  [variant]="row[column.key + '_badge_variant'] || 'default'"
+                                  [value]="row[column.key]"
+                                  [size]="row[column.key + '_badge_size'] || 'default'"
+                                ></bsg-badge>
+                              } @else if (row[column.key + '_label']) {
+                                <!-- Render label if specified -->
+                                <bsg-label [text]="row[column.key]"></bsg-label>
+                              } @else {
+                                <!-- Render plain text otherwise -->
+                                <span>{{ row[column.key] }}</span>
+                              }
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+
+                    <!-- Pagination for this tab -->
+                    @if (tabsPagination && tabsPagination[i]) {
+                      <div class="table-pagination">
+                        <bsg-separator></bsg-separator>
+                        <bsg-pagination
+                          [currentPage]="tabsPagination[i].currentPage"
+                          [totalPages]="tabsPagination[i].totalPages"
+                          [pageSize]="tabsPagination[i].pageSize"
+                          [pageSizeOptions]="tabsPagination[i].pageSizeOptions"
+                          [totalItems]="tabsPagination[i].totalItems"
+                          [rangeLabel]="tabsPagination[i].rangeLabel"
+                          (pageChange)="onTabPageChange(i, $event)"
+                          (pageSizeChange)="onTabPageSizeChange(i, $event)"
+                          (refresh)="onTabRefresh(i)"
+                        ></bsg-pagination>
+                      </div>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".table{width:100%;border-radius:12px;border:1px solid #cbd5e1;background:#fff;overflow:hidden;font-family:Inter,-apple-system,Roboto,Helvetica,sans-serif}.table-header{display:flex;align-items:center;gap:14px;padding:20px;background:#dbeafe;border-radius:12px 12px 0 0;position:relative}.table-header-collapsible{padding:16px 20px;gap:12px;justify-content:space-between}.table-header-collapsible .table-title{flex:1}.table-icon{position:relative;width:28px;height:28px;flex-shrink:0}.table-check-icon{position:absolute;left:7px;top:6px}.table-title{flex:1;margin:0;color:#2563eb;font-size:16px;font-weight:600;line-height:normal}.table-header-actions{margin-left:auto;margin-right:16px}.table-collapse-chevron{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0;outline:none;transition:transform .3s ease;flex-shrink:0;color:#2563eb;margin-left:auto;margin-right:0}.table-collapse-chevron:hover{opacity:.8}.table-collapse-chevron:focus-visible{outline:2px solid #7c3aed;outline-offset:-2px;border-radius:4px}.table-chevron-expanded{transform:rotate(180deg)}.table-body,.table-content{padding:0}.table-content-header{display:flex;gap:16px;padding:12px 20px;background:#eff6ff;margin:0;align-items:flex-start}.table-header-cell{color:#2563eb;font-size:14px;font-weight:500;line-height:1.5;flex-shrink:1;word-break:break-word;overflow-wrap:break-word;white-space:normal}.table-actions-header{text-align:center}.table-content-body{padding:0 20px}.table-row{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid #cbd5e1;align-items:flex-start}.table-row:last-child{border-bottom:none}.table-cell{color:#334155;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:flex-start;flex-shrink:1;word-break:break-word;overflow-wrap:break-word;white-space:normal}.table-actions-cell{justify-content:center}.table-actions{display:flex;flex-direction:column;gap:16px;width:100%}.table-action-btn{width:83px;height:26px}.table-pagination{padding:20px}.table-pagination bsg-separator{margin-bottom:20px}.table-list{padding:20px;display:flex;flex-direction:column;gap:24px}.table-list-item{display:flex;align-items:flex-start;gap:17px}.table-list-number{position:relative;width:27px;height:26px;flex-shrink:0}.table-list-number-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:500;line-height:normal}.table-list-text{flex:1;color:#334155;font-size:14px;font-weight:500;line-height:normal}.table-tabs-wrapper{padding:0}.table-tabs-wrapper bsg-tab-navigation{display:block;padding:20px}.table-tabs-wrapper bsg-tab-navigation .tab-navigation{display:flex;gap:8px;flex-wrap:wrap}.table-tab-content{margin-top:0;padding:0}.table-tab-content .table-content{padding:0}.table-tab-content .table-content-header{margin:0;padding:12px 20px;background:#eff6ff}.table-tab-content .table-content-body{margin-top:0;padding:0 20px}.table-tab-content .table-row{padding:20px 0}.table-tab-content .table-pagination{padding:20px}.table-collapsed,.table-collapsed .table-header{border-radius:12px}.table-collapsed .table-body{display:none}@media (max-width: 768px){.table-header{padding:16px}.table-title{font-size:14px}.table-content,.table-list,.table-tabs-wrapper{padding:16px}.table-content-header,.table-row{flex-direction:column;gap:8px}.table-header-cell,.table-cell{width:100%!important}.table-actions{flex-direction:row;justify-content:center}.table-pagination{padding:16px}}.table-action-btn bsg-button{width:100%}.table-actions .table-action-btn:first-child bsg-button{--button-bg: #16a34a;--button-color: #ffffff}.table-actions .table-action-btn:last-child bsg-button{--button-bg: #dc2626;--button-color: #ffffff}\n"], dependencies: [{ kind: "component", type: TabNavigationComponent, selector: "bsg-tab-navigation", inputs: ["size", "variant", "color", "disabled", "tabs", "activeIndex", "className"], outputs: ["tabChange"] }, { kind: "component", type: PaginationComponent, selector: "bsg-pagination", inputs: ["currentPage", "totalPages", "pageSize", "pageSizeOptions", "totalItems", "rangeLabel", "className"], outputs: ["pageChange", "pageSizeChange", "paginationChange", "refresh"] }, { kind: "component", type: SeparatorComponent, selector: "bsg-separator", inputs: ["orientation", "className"] }, { kind: "component", type: LabelComponent, selector: "bsg-label", inputs: ["text", "className"] }, { kind: "component", type: ButtonComponent, selector: "bsg-button", inputs: ["size", "variant", "shape", "label", "disabled", "spinner", "ariaLabel", "className"], outputs: ["Click"] }, { kind: "component", type: BadgeComponent, selector: "bsg-badge", inputs: ["variant", "size", "layout", "value", "className"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-table-container', standalone: true, imports: [
+                        TabNavigationComponent,
+                        PaginationComponent,
+                        SeparatorComponent,
+                        LabelComponent,
+                        ButtonComponent,
+                        BadgeComponent,
+                    ], template: `
+    <div class="table" [class]="containerClasses">
+      <!-- Header -->
+      <div
+        class="table-header"
+        [class.table-header-collapsible]="isCollapsible"
+      >
+        <!-- Icon -->
+        @if (!isCollapsible) {
+          <div class="table-icon">
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 28 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="14" cy="14" r="14" fill="#2563EB" />
+            </svg>
+            <svg
+              class="table-check-icon"
+              width="15"
+              height="15"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_check)">
+                <path
+                  d="M6.43155 0.706459C7.98492 0.461733 9.5751 0.757369 10.9372 1.54325C11.2361 1.71571 11.339 2.09758 11.1667 2.39652C10.9942 2.6955 10.6118 2.79791 10.3128 2.6254C9.19841 1.98244 7.89713 1.74102 6.62625 1.9412C5.35534 2.14143 4.19126 2.77142 3.32852 3.72587C2.4658 4.68036 1.95624 5.90193 1.88504 7.18656C1.81386 8.47123 2.18527 9.74182 2.93729 10.7858C3.6893 11.8297 4.77673 12.5845 6.01773 12.9239C7.25873 13.2632 8.57877 13.167 9.75736 12.651C10.936 12.1351 11.9023 11.2303 12.4948 10.0882C13.0872 8.94613 13.2698 7.63546 13.013 6.37479C12.9441 6.03664 13.1625 5.7065 13.5006 5.63749C13.8389 5.56857 14.169 5.78696 14.2379 6.12516C14.5519 7.66605 14.328 9.26786 13.6038 10.6637C12.8796 12.0596 11.699 13.1654 10.2585 13.7961C8.818 14.4266 7.20487 14.5441 5.68814 14.1293C4.17132 13.7145 2.84201 12.7923 1.92288 11.5164C1.00377 10.2404 0.549897 8.68771 0.636872 7.11759C0.72387 5.54744 1.34693 4.05449 2.4014 2.88786C3.45585 1.7213 4.87821 0.951184 6.43155 0.706459ZM13.3084 2.05778C13.5525 1.81398 13.9482 1.81382 14.1922 2.05778C14.4362 2.30185 14.4362 2.6981 14.1922 2.94218L7.94217 9.19218C7.69818 9.43613 7.30247 9.43597 7.05838 9.19218L5.18338 7.31718C4.9393 7.0731 4.9393 6.67686 5.18338 6.43278C5.42747 6.18898 5.82318 6.18882 6.06717 6.43278L7.50028 7.86588L13.3084 2.05778Z"
+                  fill="white"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_check">
+                  <rect width="15" height="15" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        }
+
+        <!-- Title -->
+        <h2 class="table-title">{{ title }}</h2>
+
+        <!-- Header Actions (e.g., "Nuevo mensaje" button) -->
+        @if (headerAction && !isCollapsible) {
+          <div class="table-header-actions">
+            <bsg-button
+              [label]="headerAction.label"
+              [variant]="headerAction.variant || 'default'"
+              [size]="headerAction.size || 'md'"
+              (onClick)="onHeaderAction()"
+            ></bsg-button>
+          </div>
+        }
+
+        <!-- Chevron Icon for Collapsible Mode (right side) -->
+        @if (isCollapsible) {
+          <button
+            type="button"
+            class="table-collapse-chevron"
+            [class.table-chevron-expanded]="isExpanded"
+            (click)="toggleCollapse()"
+            [attr.aria-expanded]="isExpanded"
+            [attr.aria-label]="isExpanded ? 'Contraer' : 'Expandir'"
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.3691 8.22462C11.7618 7.90427 12.3408 7.92686 12.707 8.29298L18.707 14.293C19.0975 14.6835 19.0975 15.3165 18.707 15.707C18.3164 16.0976 17.6834 16.0976 17.2929 15.707L11.9999 10.4141L6.70696 15.707C6.31643 16.0976 5.68342 16.0976 5.29289 15.707C4.90237 15.3165 4.90237 14.6835 5.29289 14.293L11.2929 8.29298L11.3691 8.22462Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        }
+      </div>
+
+      <!-- Body -->
+      <div class="table-body">
+        <!-- Table Variants (table-basic, table-actions) -->
+        @if (variant === 'table-basic' || variant === 'table-actions') {
+          <div class="table-content">
+            <!-- Table Header -->
+            <div class="table-content-header">
+              @for (column of tableColumns; track column.key) {
+                <div
+                  class="table-header-cell"
+                  [style.width]="column.width || 'auto'"
+                >
+                  {{ column.label }}
+                </div>
+              }
+              @if (variant === 'table-actions' && showActionsColumn) {
+                <div
+                  class="table-header-cell table-actions-header"
+                  [style.width]="actionsColumnWidth || 'auto'"
+                >
+                  {{ actionsColumnLabel || 'Acciones' }}
+                </div>
+              }
+            </div>
+
+            <bsg-separator></bsg-separator>
+
+            <!-- Table Rows -->
+            <div class="table-content-body">
+              @for (row of tableRows; track $index; let i = $index) {
+                <div class="table-row">
+                  @for (column of tableColumns; track column.key) {
+                    <div
+                      class="table-cell"
+                      [style.width]="column.width || 'auto'"
+                    >
+                      <!-- Render badge if specified -->
+                      @if (row[column.key + '_badge']) {
+                        <bsg-badge
+                          [variant]="row[column.key + '_badge_variant'] || 'default'"
+                          [value]="row[column.key]"
+                          [size]="row[column.key + '_badge_size'] || 'default'"
+                        ></bsg-badge>
+                      } @else if (row[column.key + '_label']) {
+                        <!-- Render label if specified -->
+                        <bsg-label [text]="row[column.key]"></bsg-label>
+                      } @else {
+                        <!-- Render plain text otherwise -->
+                        <span>{{ row[column.key] }}</span>
+                      }
+                    </div>
+                  }
+
+                  <!-- Actions Column (for table-actions variant) -->
+                  @if (variant === 'table-actions' && row['actions']) {
+                    <div
+                      class="table-cell table-actions-cell"
+                      [style.width]="actionsColumnWidth || 'auto'"
+                    >
+                      <div class="table-actions">
+                        @for (action of row['actions']; track $index) {
+                          <bsg-button
+                            [label]="action.label"
+                            [variant]="getActionVariant(action.variant)"
+                            [size]="'md'"
+                            [shape]="'rectangular'"
+                            (onClick)="onRowAction(i, action)"
+                            class="table-action-btn"
+                          ></bsg-button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+
+            <!-- Pagination -->
+            @if (tablePagination) {
+              <div class="table-pagination">
+                <bsg-separator></bsg-separator>
+                <bsg-pagination
+                  [currentPage]="tablePagination.currentPage"
+                  [totalPages]="tablePagination.totalPages"
+                  [pageSize]="tablePagination.pageSize"
+                  [pageSizeOptions]="tablePagination.pageSizeOptions"
+                  [totalItems]="tablePagination.totalItems"
+                  [rangeLabel]="tablePagination.rangeLabel"
+                  (pageChange)="onTablePageChange($event)"
+                  (pageSizeChange)="onTablePageSizeChange($event)"
+                  (refresh)="onTableRefresh()"
+                ></bsg-pagination>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- List Variant (list-content) -->
+        @if (variant === 'list-content') {
+          <div class="table-list">
+            @for (item of listItems; track $index; let i = $index) {
+              <div class="table-list-item">
+                <div class="table-list-number">
+                  <svg
+                    width="27"
+                    height="26"
+                    viewBox="0 0 27 26"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <ellipse cx="13.5" cy="13" rx="13.5" ry="13" fill="#2563EB" />
+                  </svg>
+                  <span class="table-list-number-text">{{ i + 1 }}</span>
+                </div>
+                <div class="table-list-text">{{ item.text }}</div>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- Tabs Variant (table-tabs) -->
+        @if (variant === 'table-tabs') {
+          <div class="table-tabs-wrapper">
+            <!-- Tab Navigation -->
+            <bsg-tab-navigation
+              [tabs]="tabs"
+              [activeIndex]="activeTabIndex"
+              [size]="'md'"
+              [variant]="'text'"
+              (tabChange)="onTabChange($event)"
+            ></bsg-tab-navigation>
+
+            <!-- Tab Content -->
+            <div class="table-tab-content">
+              @for (tab of tabs; track $index; let i = $index) {
+                @if (i === activeTabIndex && tab.tableData) {
+                  <div class="table-content">
+                    <!-- Table Header -->
+                    <div class="table-content-header">
+                      @for (column of tab.tableData.columns; track column.key) {
+                        <div
+                          class="table-header-cell"
+                          [style.width]="column.width || 'auto'"
+                        >
+                          {{ column.label }}
+                        </div>
+                      }
+                    </div>
+
+                    <bsg-separator></bsg-separator>
+
+                    <!-- Table Rows -->
+                    <div class="table-content-body">
+                      @for (row of tab.tableData.rows; track $index) {
+                        <div class="table-row">
+                          @for (column of tab.tableData.columns; track column.key) {
+                            <div
+                              class="table-cell"
+                              [style.width]="column.width || 'auto'"
+                            >
+                              <!-- Render badge if specified -->
+                              @if (row[column.key + '_badge']) {
+                                <bsg-badge
+                                  [variant]="row[column.key + '_badge_variant'] || 'default'"
+                                  [value]="row[column.key]"
+                                  [size]="row[column.key + '_badge_size'] || 'default'"
+                                ></bsg-badge>
+                              } @else if (row[column.key + '_label']) {
+                                <!-- Render label if specified -->
+                                <bsg-label [text]="row[column.key]"></bsg-label>
+                              } @else {
+                                <!-- Render plain text otherwise -->
+                                <span>{{ row[column.key] }}</span>
+                              }
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+
+                    <!-- Pagination for this tab -->
+                    @if (tabsPagination && tabsPagination[i]) {
+                      <div class="table-pagination">
+                        <bsg-separator></bsg-separator>
+                        <bsg-pagination
+                          [currentPage]="tabsPagination[i].currentPage"
+                          [totalPages]="tabsPagination[i].totalPages"
+                          [pageSize]="tabsPagination[i].pageSize"
+                          [pageSizeOptions]="tabsPagination[i].pageSizeOptions"
+                          [totalItems]="tabsPagination[i].totalItems"
+                          [rangeLabel]="tabsPagination[i].rangeLabel"
+                          (pageChange)="onTabPageChange(i, $event)"
+                          (pageSizeChange)="onTabPageSizeChange(i, $event)"
+                          (refresh)="onTabRefresh(i)"
+                        ></bsg-pagination>
+                      </div>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: [".table{width:100%;border-radius:12px;border:1px solid #cbd5e1;background:#fff;overflow:hidden;font-family:Inter,-apple-system,Roboto,Helvetica,sans-serif}.table-header{display:flex;align-items:center;gap:14px;padding:20px;background:#dbeafe;border-radius:12px 12px 0 0;position:relative}.table-header-collapsible{padding:16px 20px;gap:12px;justify-content:space-between}.table-header-collapsible .table-title{flex:1}.table-icon{position:relative;width:28px;height:28px;flex-shrink:0}.table-check-icon{position:absolute;left:7px;top:6px}.table-title{flex:1;margin:0;color:#2563eb;font-size:16px;font-weight:600;line-height:normal}.table-header-actions{margin-left:auto;margin-right:16px}.table-collapse-chevron{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0;outline:none;transition:transform .3s ease;flex-shrink:0;color:#2563eb;margin-left:auto;margin-right:0}.table-collapse-chevron:hover{opacity:.8}.table-collapse-chevron:focus-visible{outline:2px solid #7c3aed;outline-offset:-2px;border-radius:4px}.table-chevron-expanded{transform:rotate(180deg)}.table-body,.table-content{padding:0}.table-content-header{display:flex;gap:16px;padding:12px 20px;background:#eff6ff;margin:0;align-items:flex-start}.table-header-cell{color:#2563eb;font-size:14px;font-weight:500;line-height:1.5;flex-shrink:1;word-break:break-word;overflow-wrap:break-word;white-space:normal}.table-actions-header{text-align:center}.table-content-body{padding:0 20px}.table-row{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid #cbd5e1;align-items:flex-start}.table-row:last-child{border-bottom:none}.table-cell{color:#334155;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:flex-start;flex-shrink:1;word-break:break-word;overflow-wrap:break-word;white-space:normal}.table-actions-cell{justify-content:center}.table-actions{display:flex;flex-direction:column;gap:16px;width:100%}.table-action-btn{width:83px;height:26px}.table-pagination{padding:20px}.table-pagination bsg-separator{margin-bottom:20px}.table-list{padding:20px;display:flex;flex-direction:column;gap:24px}.table-list-item{display:flex;align-items:flex-start;gap:17px}.table-list-number{position:relative;width:27px;height:26px;flex-shrink:0}.table-list-number-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:500;line-height:normal}.table-list-text{flex:1;color:#334155;font-size:14px;font-weight:500;line-height:normal}.table-tabs-wrapper{padding:0}.table-tabs-wrapper bsg-tab-navigation{display:block;padding:20px}.table-tabs-wrapper bsg-tab-navigation .tab-navigation{display:flex;gap:8px;flex-wrap:wrap}.table-tab-content{margin-top:0;padding:0}.table-tab-content .table-content{padding:0}.table-tab-content .table-content-header{margin:0;padding:12px 20px;background:#eff6ff}.table-tab-content .table-content-body{margin-top:0;padding:0 20px}.table-tab-content .table-row{padding:20px 0}.table-tab-content .table-pagination{padding:20px}.table-collapsed,.table-collapsed .table-header{border-radius:12px}.table-collapsed .table-body{display:none}@media (max-width: 768px){.table-header{padding:16px}.table-title{font-size:14px}.table-content,.table-list,.table-tabs-wrapper{padding:16px}.table-content-header,.table-row{flex-direction:column;gap:8px}.table-header-cell,.table-cell{width:100%!important}.table-actions{flex-direction:row;justify-content:center}.table-pagination{padding:16px}}.table-action-btn bsg-button{width:100%}.table-actions .table-action-btn:first-child bsg-button{--button-bg: #16a34a;--button-color: #ffffff}.table-actions .table-action-btn:last-child bsg-button{--button-bg: #dc2626;--button-color: #ffffff}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], headerAction: [{
+                type: Input
+            }], isCollapsible: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], disableExpansion: [{
+                type: Input
+            }], tableColumns: [{
+                type: Input
+            }], tableRows: [{
+                type: Input
+            }], tablePagination: [{
+                type: Input
+            }], showActionsColumn: [{
+                type: Input
+            }], actionsColumnLabel: [{
+                type: Input
+            }], actionsColumnWidth: [{
+                type: Input
+            }], listItems: [{
+                type: Input
+            }], tabs: [{
+                type: Input
+            }], activeTabIndex: [{
+                type: Input
+            }], tabsPagination: [{
+                type: Input
+            }], headerActionClick: [{
+                type: Output
+            }], collapseToggle: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }], tablePageChange: [{
+                type: Output
+            }], tablePageSizeChange: [{
+                type: Output
+            }], tableRefresh: [{
+                type: Output
+            }], tabPageChange: [{
+                type: Output
+            }], tabPageSizeChange: [{
+                type: Output
+            }], tabRefresh: [{
+                type: Output
+            }], rowAction: [{
+                type: Output
+            }] } });
+
+// Table components (shadcn-style primitives)
+
 const textareaVariants = cva(clsx(
 // Layout & sizing
 'w-full min-w-0', 'min-h-[80px]', 
@@ -8325,5 +11432,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, ComboboxComponent, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SwitchComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, comboboxDropdownVariants, comboboxEmptyStateVariants, comboboxErrorMessageVariants, comboboxIconVariants, comboboxOptionVariants, comboboxOptionsContainerVariants, comboboxSearchInputVariants, comboboxSearchWrapperVariants, comboboxTriggerVariants, comboboxValueVariants, comboboxWrapperVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
+export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, ComboboxComponent, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabContentDirective, TabNavigationComponent, TableBodyComponent, TableCardComponent, TableCardFooterComponent, TableCardHeaderComponent, TableCellComponent, TableComponent, TableContainerComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonSpinnerVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, comboboxDropdownVariants, comboboxEmptyStateVariants, comboboxErrorMessageVariants, comboboxIconVariants, comboboxOptionVariants, comboboxOptionsContainerVariants, comboboxSearchInputVariants, comboboxSearchWrapperVariants, comboboxTriggerVariants, comboboxValueVariants, comboboxWrapperVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, spinnerVariants, switchRootVariants, switchThumbVariants, tabIconCircleVariants, tabIconContentVariants, tabItemVariants, tabLabelVariants, tabNavigationVariants, tabTextContentVariants, tableBodyVariants, tableCardFooterVariants, tableCardHeaderVariants, tableCellVariants, tableCompactVariants, tableEmptyStateVariants, tableFooterVariants, tableHeadVariants, tableHeaderVariants, tableLoadingVariants, tablePaginationVariants, tableRowVariants, tableStripedVariants, tableVariants, tableWrapperVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
 //# sourceMappingURL=bsginstitute-bsg-integra.mjs.map