@bsginstitute/bsg-integra 0.0.3 → 0.0.4

package/fesm2022/bsginstitute-bsg-integra.mjs

@@ -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,62 +1167,22 @@ 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]',
-        },
-        {
-            shape: 'icon-only',
-            size: 'md',
-            class: 'w-[35px] h-[35px] min-w-[35px] min-h-[35px]',
-        },
-        {
-            shape: 'icon-only',
-            size: 'lg',
-            class: 'w-[43px] h-[43px] min-w-[43px] min-h-[43px]',
-        },
-        // Icon-only + outline variant
+        { shape: 'icon-only', size: 'sm', 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] p-0' },
+        { shape: 'icon-only', size: 'lg', class: 'w-[43px] h-[43px] min-w-[43px] min-h-[43px] p-0' },
         {
             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',
-            class: 'bg-red-600 text-white border border-red-600',
-        },
+        { shape: 'icon-only', variant: 'default', class: 'bg-violet-600 text-white border border-violet-600' },
+        { shape: 'icon-only', variant: 'secondary', class: 'bg-blue-600 text-white border border-blue-600' },
+        { shape: 'icon-only', variant: 'ghost', class: 'bg-violet-100 text-slate-800 border border-violet-100' },
+        { shape: 'icon-only', variant: 'link', class: 'bg-transparent text-blue-600 border border-transparent' },
+        { shape: 'icon-only', variant: 'destructive', class: 'bg-red-600 text-white border border-red-600' },
     ],
     defaultVariants: {
         size: 'md',
@@ -1251,14 +1191,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 +1203,112 @@ 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-label]="
-        shape() === 'icon-only' ? label() || 'Icon button' : null
-      "
+      [attr.aria-busy]="spinner() ? 'true' : null"
+      [attr.aria-label]="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
-          [class]="iconClasses('left')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+      <!-- Icon-only / Icon button content -->
+      @if (isIconButton()) {
+        <span
+          [class]="iconOnlyClasses()"
+          [style.fontSize.px]="iconFontPx()"
+          [style.lineHeight]="1"
+          [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></ng-content>
+        </span>
+      } @else {
+        <span class="bsg-btn-icon" [class]="iconClasses('left')" [style.opacity]="spinner() ? 0 : 1">
+          <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
-          [class]="iconClasses('right')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <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>
+        <span class="bsg-btn-icon" [class]="iconClasses('right')" [style.opacity]="spinner() ? 0 : 1">
+          <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 +1319,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       [class]="buttonClasses()"
       [disabled]="isDisabled()"
       [attr.aria-disabled]="isDisabled()"
-      [attr.aria-label]="
-        shape() === 'icon-only' ? label() || 'Icon button' : null
-      "
+      [attr.aria-busy]="spinner() ? 'true' : null"
+      [attr.aria-label]="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
-          [class]="iconClasses('left')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+      <!-- Icon-only / Icon button content -->
+      @if (isIconButton()) {
+        <span
+          [class]="iconOnlyClasses()"
+          [style.fontSize.px]="iconFontPx()"
+          [style.lineHeight]="1"
+          [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></ng-content>
+        </span>
+      } @else {
+        <span class="bsg-btn-icon" [class]="iconClasses('left')" [style.opacity]="spinner() ? 0 : 1">
+          <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
-          [class]="iconClasses('right')"
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <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>
+        <span class="bsg-btn-icon" [class]="iconClasses('right')" [style.opacity]="spinner() ? 0 : 1">
+          <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 +1380,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 +1423,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 +1453,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 +1475,7 @@ const cardHelperVariants = cva(clsx(
 // Layout
 'shrink-0', 
 // Default color (green for positive)
-'text-green-600'));
+'text-success'));
 /**
  * Card helper description variants
  *
@@ -1635,7 +1485,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 +1497,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 +1509,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 +1521,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 +1533,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 +1545,7 @@ const cardCurrencyLabelVariants = cva(clsx(
 // Typography
 'text-sm font-medium leading-normal', 
 // Color
-'text-slate-700'));
+'text-foreground'));
 /**
  * Card currency content variants
  *
@@ -1727,7 +1577,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 +1912,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 +1929,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 +3193,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 +3216,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 +3228,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 +3242,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 +3557,7 @@ const labelVariants = cva(clsx(
 // Typography
 'text-sm', 'font-inherit', 
 // Color
-'text-slate-800'));
+'text-foreground'));
 
 /**
  * Label Component
@@ -6472,6 +6322,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
  *
@@ -8325,5 +8292,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, 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, 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