@bsginstitute/bsg-integra 0.0.1 → 0.0.3

package/fesm2022/bsginstitute-bsg-integra.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, signal, computed, Component, inject, output, contentChildren, viewChild, effect, HostListener, linkedSignal, forwardRef, HostBinding, Directive, ElementRef, Injectable, PLATFORM_ID, model, 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, ViewChild } from '@angular/core';
 import { clsx } from 'clsx';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/platform-browser';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 
 /**
  * Accordion container variants
@@ -1156,7 +1157,9 @@ const buttonVariants = cva(clsx(
 // Whitespace
 'whitespace-nowrap', 
 // Border reset
-'border-0'), {
+'border-0', 
+// Focus outline reset (prevent focus ring on click)
+'outline-none'), {
     variants: {
         size: {
             sm: 'h-[27px] py-2 px-4',
@@ -1164,18 +1167,18 @@ const buttonVariants = cva(clsx(
             lg: 'h-[43px] py-4 px-8',
         },
         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:bg-violet-900 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
-            secondary: clsx('bg-blue-600 text-white', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus:bg-blue-700 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
-            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:border-violet-900 focus:text-violet-900 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
-            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:bg-violet-200 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
-            link: clsx('bg-transparent text-blue-600', 'hover:opacity-90', 'active:underline', 'focus:text-blue-700 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
-            destructive: clsx('bg-red-600 text-white', 'hover:opacity-90', 'active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.12)]', 'focus:bg-red-700 focus:ring-[3px] focus:ring-white focus:ring-offset-1 focus:ring-offset-violet-950'),
+            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'),
+            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'),
         },
         shape: {
-            rectangular: '',
+            rectangular: 'rounded-md',
             pill: 'rounded-full',
-            icon: 'rounded',
-            'icon-text': '',
+            icon: 'rounded-md',
+            'icon-text': 'rounded-md',
             'icon-only': 'rounded-full p-0',
         },
         disabled: {
@@ -1184,14 +1187,6 @@ const buttonVariants = cva(clsx(
         },
     },
     compoundVariants: [
-        // Rectangular shape + size = border radius
-        { shape: 'rectangular', size: 'sm', class: 'rounded-sm' },
-        { shape: 'rectangular', size: 'md', class: 'rounded' },
-        { shape: 'rectangular', size: 'lg', class: 'rounded-md' },
-        // Icon-text shape + size = border radius
-        { shape: 'icon-text', size: 'sm', class: 'rounded-sm' },
-        { shape: 'icon-text', size: 'md', class: 'rounded' },
-        { shape: 'icon-text', size: 'lg', class: 'rounded-md' },
         // 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' },
@@ -1216,7 +1211,7 @@ const buttonVariants = cva(clsx(
         {
             shape: 'icon-only',
             variant: 'outline',
-            class: 'bg-transparent border border-slate-300 text-purple-600 hover:opacity-90 active:border-purple-600 focus:border-slate-500 focus:text-purple-800 focus:ring-1 focus:ring-purple-900',
+            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
         {
@@ -2840,84 +2835,535 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
 /**
- * Dialog overlay variants
+ * Combobox wrapper variants
  *
- * Controls the backdrop/overlay layer
+ * Controls the overall combobox container layout
  */
-const dialogOverlayVariants = cva(clsx(
-// Position
-'fixed inset-0', 
-// Z-index
-'z-[9999]', 
+const comboboxWrapperVariants = cva(clsx(
 // Layout
-'flex items-center justify-center', 
+'relative', 'inline-block'), {
+    variants: {
+        size: {
+            sm: 'min-w-[133px]',
+            md: 'min-w-[132px]',
+            lg: 'min-w-[133px]',
+        },
+    },
+    defaultVariants: {
+        size: 'sm',
+    },
+});
+/**
+ * Combobox trigger variants
+ *
+ * Controls the clickable trigger button
+ */
+const comboboxTriggerVariants = cva(clsx(
+// Layout
+'flex items-center justify-center w-full', 
+// Gap
+'gap-3', 
+// Border
+'rounded-md border', 
 // Background
-'bg-black/50', 
-// Padding - responsive
-'p-4 md:p-3', 
-// Box sizing
-'box-border', 
-// Animation
-'animate-in fade-in duration-200', 
-// User select
-'select-none'));
+'bg-transparent', 
+// Typography
+'text-base font-normal leading-6 tracking-[0.05px]', 
+// Cursor
+'cursor-pointer', 
+// Transition
+'transition-all duration-200', 
+// Focus
+'focus:outline-none', 
+// Hover (only when not disabled)
+'hover:not-disabled:opacity-90'), {
+    variants: {
+        size: {
+            sm: 'h-8 py-1 px-3',
+            md: 'h-10 py-1 px-3',
+            lg: 'h-12 py-1 px-3',
+        },
+        state: {
+            default: 'border-border text-foreground',
+            hover: 'border-border text-foreground opacity-90',
+            focus: 'border-primary text-foreground',
+            disabled: 'border-border text-foreground opacity-40 cursor-not-allowed pointer-events-none',
+            error: 'border-destructive text-destructive',
+        },
+        open: {
+            true: 'border-primary',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        size: 'sm',
+        state: 'default',
+        open: false,
+    },
+});
 /**
- * Dialog content variants
+ * Combobox dropdown variants
  *
- * Controls the main dialog container
+ * Controls the dropdown menu container
  */
-const dialogContentVariants = cva(clsx(
+const comboboxDropdownVariants = cva(clsx(
 // Position
-'relative', 
-// Layout
-'flex flex-col', 
+'absolute top-full mt-1 left-0', 
+// Z-index
+'z-50', 
+// Border
+'rounded-md border border-border', 
 // Background
-'bg-white', 
-// Border radius
-'rounded-xl', 
+'bg-background', 
 // Shadow
-'shadow-xl', 
-// Max height - responsive
-'max-h-[90vh] md:max-h-[95vh]', 
-// Width
-'w-full', 
-// Box sizing
-'box-border', 
-// Animation
-'animate-in zoom-in-95 duration-200', 
-// User select
-'select-text', 
-// Focus
-'focus:outline-none'), {
+'shadow-lg', 
+// Overflow
+'overflow-hidden'), {
     variants: {
         size: {
-            sm: 'max-w-[460px] md:max-w-full',
-            md: 'max-w-[670px] md:max-w-full',
-            lg: 'max-w-[1153px] md:max-w-full',
+            sm: 'min-w-[133px]',
+            md: 'min-w-[132px]',
+            lg: 'min-w-[133px]',
         },
     },
     defaultVariants: {
-        size: 'md',
+        size: 'sm',
     },
 });
 /**
- * Dialog header variants
+ * Combobox search wrapper variants
+ *
+ * Controls the search input container
+ */
+const comboboxSearchWrapperVariants = cva(clsx(
+// Padding
+'p-2', 
+// Border
+'border-b border-muted'));
+/**
+ * Combobox search input variants
  *
- * Controls the header section with tone variants
+ * Controls the search input field
  */
-const dialogHeaderVariants = cva(clsx(
+const comboboxSearchInputVariants = cva(clsx(
+// Layout
+'w-full', 
+// Padding
+'py-1.5 px-2.5', 
+// Border
+'rounded border border-border', 
+// Background
+'bg-background', 
+// Typography
+'text-sm font-normal leading-5 text-foreground', 
+// Placeholder
+'placeholder:text-muted-foreground', 
+// Transition
+'transition-all duration-200', 
+// Focus
+'focus:outline-none focus:border-primary', 
+// Disabled
+'disabled:opacity-40 disabled:cursor-not-allowed'));
+/**
+ * Combobox options container variants
+ *
+ * Controls the scrollable options list
+ */
+const comboboxOptionsContainerVariants = cva(clsx(
+// Max height and scroll
+'max-h-[200px] overflow-y-auto'));
+/**
+ * Combobox option variants
+ *
+ * Controls individual dropdown options
+ */
+const comboboxOptionVariants = cva(clsx(
 // Layout
 'flex items-center', 
-// Min height
-'min-h-[57px]', 
-// Padding - responsive
-'px-[17px] py-5 md:px-3.5 md:py-4', 
-// Border radius
-'rounded-t-xl', 
-// Box sizing
-'box-border', 
+// Size
+'min-h-8', 
+// Padding
+'py-1 px-3', 
+// Typography
+'text-base font-normal leading-6 tracking-[0.05px] text-foreground', 
+// Cursor
+'cursor-pointer', 
+// Transition
+'transition-colors duration-200', 
+// Hover
+'hover:bg-muted/50'), {
+    variants: {
+        selected: {
+            true: 'bg-muted hover:bg-muted',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        selected: false,
+    },
+});
+/**
+ * Combobox empty state variants
+ *
+ * Controls the empty state message
+ */
+const comboboxEmptyStateVariants = cva(clsx(
+// Padding
+'py-4 px-3', 
 // Typography
-'font-sans text-base font-semibold leading-normal', 'md:text-sm'), {
+'text-sm font-normal text-muted-foreground text-center'));
+/**
+ * Combobox error message variants
+ *
+ * Controls the error message display
+ */
+const comboboxErrorMessageVariants = cva(clsx(
+// Margin
+'mt-1.5', 
+// Typography
+'text-xs font-normal leading-[1.4] text-destructive'));
+/**
+ * Combobox value text variants
+ *
+ * Controls the selected value display
+ */
+const comboboxValueVariants = cva(clsx(
+// Layout
+'flex-1 text-left'));
+/**
+ * Combobox icon variants
+ *
+ * Controls the chevron icon
+ */
+const comboboxIconVariants = cva(clsx(
+// Size
+'shrink-0 w-3.5 h-2'));
+
+/**
+ * Combobox Component - Searchable dropdown select
+ *
+ * Following shadcn/ui pattern:
+ * ```html
+ * <bsg-combobox
+ *   [options]="options"
+ *   [placeholder]="'Select...'"
+ *   [size]="'md'"
+ *   (valueChange)="onValueChange($event)"
+ * />
+ * ```
+ */
+class ComboboxComponent {
+    /** Size of the combobox */
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Current state */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** List of options */
+    options = input([
+        { value: '1', label: 'Opcion 1' },
+        { value: '2', label: 'Opcion 2' },
+        { value: '3', label: 'Opcion 3' },
+        { value: '4', label: 'Opcion 4' },
+    ], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Currently selected value (two-way binding supported) */
+    selectedValue = model('', ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    /** Placeholder text */
+    placeholder = input('Selecciona', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Dropdown open state (two-way binding supported) */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Error message (shown when state is 'error') */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    /** Additional CSS classes */
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+    /** Value change event */
+    valueChange = output();
+    /** Selection change event */
+    selectionChange = output();
+    /** Open state change event */
+    openChange = output();
+    /** Internal open state */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Search text for filtering */
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    constructor() {
+        // Sync isOpen with open input
+        effect(() => {
+            this.isOpen.set(this.open());
+        });
+    }
+    // Computed classes
+    wrapperClasses = computed(() => clsx(comboboxWrapperVariants({
+        size: this.size(),
+    }), this.className()), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    triggerClasses = computed(() => clsx(comboboxTriggerVariants({
+        size: this.size(),
+        state: this.state(),
+        open: this.isOpen(),
+    })), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    dropdownClasses = computed(() => clsx(comboboxDropdownVariants({
+        size: this.size(),
+    })), ...(ngDevMode ? [{ debugName: "dropdownClasses" }] : []));
+    searchWrapperClasses = computed(() => clsx(comboboxSearchWrapperVariants()), ...(ngDevMode ? [{ debugName: "searchWrapperClasses" }] : []));
+    searchInputClasses = computed(() => clsx(comboboxSearchInputVariants()), ...(ngDevMode ? [{ debugName: "searchInputClasses" }] : []));
+    optionsContainerClasses = computed(() => clsx(comboboxOptionsContainerVariants()), ...(ngDevMode ? [{ debugName: "optionsContainerClasses" }] : []));
+    emptyStateClasses = computed(() => clsx(comboboxEmptyStateVariants()), ...(ngDevMode ? [{ debugName: "emptyStateClasses" }] : []));
+    errorMessageClasses = computed(() => clsx(comboboxErrorMessageVariants()), ...(ngDevMode ? [{ debugName: "errorMessageClasses" }] : []));
+    valueClasses = computed(() => clsx(comboboxValueVariants()), ...(ngDevMode ? [{ debugName: "valueClasses" }] : []));
+    iconClasses = computed(() => clsx(comboboxIconVariants()), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    selectedLabel = computed(() => {
+        const value = this.selectedValue();
+        if (!value) {
+            return this.placeholder();
+        }
+        const selected = this.options().find((opt) => opt.value === value);
+        return selected ? selected.label : this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
+    iconColor = computed(() => {
+        if (this.state() === 'error') {
+            return 'currentColor';
+        }
+        return '#64748B'; // neutral-500
+    }, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    filteredOptions = computed(() => {
+        const term = this.searchText().trim().toLowerCase();
+        if (!term)
+            return this.options();
+        return this.options().filter((option) => option.label.toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    getOptionClasses(value) {
+        return clsx(comboboxOptionVariants({
+            selected: this.selectedValue() === value,
+        }));
+    }
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.state() === 'disabled') {
+            return;
+        }
+        const newState = !this.isOpen();
+        this.isOpen.set(newState);
+        this.open.set(newState);
+        if (newState) {
+            this.searchText.set('');
+        }
+        this.openChange.emit(newState);
+    }
+    closeDropdown() {
+        this.isOpen.set(false);
+        this.open.set(false);
+        this.searchText.set('');
+        this.openChange.emit(false);
+    }
+    selectOption(event, option) {
+        event.stopPropagation();
+        if (this.state() === 'disabled') {
+            return;
+        }
+        // Update internal state
+        this.selectedValue.set(option.value);
+        this.isOpen.set(false);
+        this.open.set(false);
+        this.searchText.set('');
+        // Emit events
+        this.valueChange.emit(option.value);
+        this.selectionChange.emit(option);
+        this.openChange.emit(false);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        const hostElement = event.currentTarget.querySelector('bsg-combobox');
+        // Check if click is outside the combobox
+        if (hostElement && !hostElement.contains(target) && this.isOpen()) {
+            this.closeDropdown();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ComboboxComponent, isStandalone: true, selector: "bsg-combobox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", open: "openChange", valueChange: "valueChange", selectionChange: "selectionChange", openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
+    <div [class]="wrapperClasses()">
+      <!-- Combobox trigger -->
+      <button
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="state() === 'disabled'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-disabled]="state() === 'disabled'"
+        (click)="toggleDropdown($event)"
+      >
+        <span [class]="valueClasses()">{{ selectedLabel() }}</span>
+        <svg
+          [class]="iconClasses()"
+          width="14"
+          height="8"
+          viewBox="0 0 14 8"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.2929 0.292893C12.6834 -0.0976311 13.3164 -0.0976311 13.707 0.292893C14.0975 0.683417 14.0975 1.31643 13.707 1.70696L7.70696 7.70696C7.31643 8.09748 6.68342 8.09748 6.29289 7.70696L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683417 0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L6.99992 5.58586L12.2929 0.292893Z"
+            [attr.fill]="iconColor()"
+          />
+        </svg>
+      </button>
+
+      <!-- Dropdown menu with search -->
+      @if (isOpen()) {
+        <div [class]="dropdownClasses()" role="listbox">
+          <!-- Search input -->
+          <div [class]="searchWrapperClasses()">
+            <input
+              type="text"
+              [class]="searchInputClasses()"
+              [disabled]="state() === 'disabled'"
+              placeholder="Buscar..."
+              [ngModel]="searchText()"
+              (ngModelChange)="searchText.set($event)"
+              (keydown.escape)="closeDropdown()"
+              (click)="$event.stopPropagation()"
+              aria-label="Search options"
+            />
+          </div>
+
+          <!-- Options list -->
+          <div [class]="optionsContainerClasses()">
+            @for (option of filteredOptions(); track option.value) {
+              <div
+                [class]="getOptionClasses(option.value)"
+                role="option"
+                [attr.aria-selected]="selectedValue() === option.value"
+                (click)="selectOption($event, option)"
+              >
+                {{ option.label }}
+              </div>
+            }
+
+            <!-- Empty state -->
+            @if (filteredOptions().length === 0) {
+              <div [class]="emptyStateClasses()">Sin resultados</div>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Error message -->
+      @if (state() === 'error' && errorMessage()) {
+        <div [class]="errorMessageClasses()">
+          {{ errorMessage() }}
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsg-combobox', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div [class]="wrapperClasses()">
+      <!-- Combobox trigger -->
+      <button
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="state() === 'disabled'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-disabled]="state() === 'disabled'"
+        (click)="toggleDropdown($event)"
+      >
+        <span [class]="valueClasses()">{{ selectedLabel() }}</span>
+        <svg
+          [class]="iconClasses()"
+          width="14"
+          height="8"
+          viewBox="0 0 14 8"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.2929 0.292893C12.6834 -0.0976311 13.3164 -0.0976311 13.707 0.292893C14.0975 0.683417 14.0975 1.31643 13.707 1.70696L7.70696 7.70696C7.31643 8.09748 6.68342 8.09748 6.29289 7.70696L0.292893 1.70696C-0.0976311 1.31643 -0.0976311 0.683417 0.292893 0.292893C0.683418 -0.0976311 1.31643 -0.0976311 1.70696 0.292893L6.99992 5.58586L12.2929 0.292893Z"
+            [attr.fill]="iconColor()"
+          />
+        </svg>
+      </button>
+
+      <!-- Dropdown menu with search -->
+      @if (isOpen()) {
+        <div [class]="dropdownClasses()" role="listbox">
+          <!-- Search input -->
+          <div [class]="searchWrapperClasses()">
+            <input
+              type="text"
+              [class]="searchInputClasses()"
+              [disabled]="state() === 'disabled'"
+              placeholder="Buscar..."
+              [ngModel]="searchText()"
+              (ngModelChange)="searchText.set($event)"
+              (keydown.escape)="closeDropdown()"
+              (click)="$event.stopPropagation()"
+              aria-label="Search options"
+            />
+          </div>
+
+          <!-- Options list -->
+          <div [class]="optionsContainerClasses()">
+            @for (option of filteredOptions(); track option.value) {
+              <div
+                [class]="getOptionClasses(option.value)"
+                role="option"
+                [attr.aria-selected]="selectedValue() === option.value"
+                (click)="selectOption($event, option)"
+              >
+                {{ option.label }}
+              </div>
+            }
+
+            <!-- Empty state -->
+            @if (filteredOptions().length === 0) {
+              <div [class]="emptyStateClasses()">Sin resultados</div>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Error message -->
+      @if (state() === 'error' && errorMessage()) {
+        <div [class]="errorMessageClasses()">
+          {{ errorMessage() }}
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// projects/bsg-integra/src/lib/components/dialog/dialog.variants.ts
+/**
+ * Dialog overlay variants
+ */
+const dialogOverlayVariants = cva(clsx('fixed inset-0', 'z-[9999]', 'flex justify-center', 'items-start sm:items-center', 'overflow-y-auto', 'bg-black/50', 'p-4 md:p-3', 'box-border', 'animate-in fade-in duration-200', 'select-none'));
+/**
+ * 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'), {
+    variants: {
+        size: {
+            sm: 'max-w-sm',
+            md: 'max-w-md',
+            lg: 'max-w-lg',
+            xl: 'max-w-xl',
+            '2xl': 'max-w-2xl',
+            '3xl': 'max-w-3xl',
+            '4xl': 'max-w-4xl',
+            full: 'max-w-[calc(100vw-2rem)]',
+        },
+    },
+    defaultVariants: {
+        size: 'lg',
+    },
+});
+/**
+ * Dialog header variants
+ */
+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',
@@ -2931,20 +3377,8 @@ const dialogHeaderVariants = cva(clsx(
 });
 /**
  * Dialog body variants
- *
- * Controls the body/content section
  */
-const dialogBodyVariants = cva(clsx(
-// Flex
-'flex-1', 
-// Padding - responsive
-'px-[23px] py-5 md:px-3.5 md:py-4', 
-// Box sizing
-'box-border', 
-// Typography
-'font-sans text-sm font-medium leading-normal', 'md:text-[13px]', 
-// Color
-'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-slate-500'), {
     variants: {
         scrollable: {
             true: 'overflow-y-auto max-h-[calc(90vh-200px)] md:max-h-[calc(95vh-180px)]',
@@ -2957,45 +3391,15 @@ const dialogBodyVariants = cva(clsx(
 });
 /**
  * Dialog footer variants
- *
- * Controls the footer section with actions
  */
-const dialogFooterVariants = cva(clsx(
-// Layout
-'flex items-center justify-end flex-nowrap', 
-// Gap - responsive
-'gap-8 md:gap-5', 
-// Padding - responsive
-'px-[23px] py-5 md:px-3.5 md:py-4', 
-// Border
-'border-t border-slate-200', 
-// Box sizing
-'box-border', 
-// Width
-'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-slate-200', 'box-border', 'w-full'));
 
-/**
- * Dialog Component
- *
- * A modal dialog component with multiple sizes and header tones.
- *
- * Usage:
- * ```html
- * <bsg-dialog [open]="isOpen" size="md" headerTone="brand" (closeDialog)="onClose()">
- *   <div dialog-header>Dialog Title</div>
- *   <div dialog-body>Dialog content goes here</div>
- *   <div dialog-footer>
- *     <button>Cancel</button>
- *     <button>Confirm</button>
- *   </div>
- * </bsg-dialog>
- * ```
- */
+// projects/bsg-integra/src/lib/components/dialog/dialog.component.ts
 class DialogComponent {
     /** Controls dialog visibility */
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /** Dialog size */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /** Header tone/theme */
     headerTone = input('brand', ...(ngDevMode ? [{ debugName: "headerTone" }] : []));
     /** Enable scrollable body */
@@ -3014,22 +3418,33 @@ class DialogComponent {
     headerClasses = computed(() => clsx(dialogHeaderVariants({ tone: this.headerTone() })), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
     bodyClasses = computed(() => clsx(dialogBodyVariants({ scrollable: this.scrollable() })), ...(ngDevMode ? [{ debugName: "bodyClasses" }] : []));
     footerClasses = computed(() => clsx(dialogFooterVariants()), ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
+    // Fallback sizing (prevents min-content collapse in some Storybook setups)
+    contentMaxWidth = computed(() => {
+        const map = {
+            sm: '384px',
+            md: '448px',
+            lg: '512px',
+            xl: '576px',
+            '2xl': '672px',
+            '3xl': '768px',
+            '4xl': '896px',
+            full: 'calc(100vw - 2rem)',
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "contentMaxWidth" }] : []));
     onOverlayClick() {
-        if (this.dismissible()) {
+        if (this.dismissible())
             this.close();
-        }
     }
     close() {
         this.closeDialog.emit();
     }
-    onEscapeKey(event) {
-        if (this.open() && this.dismissible()) {
-            event.preventDefault();
+    onEscapeKey() {
+        if (this.open() && this.dismissible())
             this.close();
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogComponent, isStandalone: true, selector: "bsg-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerTone: { classPropertyName: "headerTone", publicName: "headerTone", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeDialog: "closeDialog" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogComponent, isStandalone: true, selector: "bsg-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerTone: { classPropertyName: "headerTone", publicName: "headerTone", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeDialog: "closeDialog" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: `
     @if (open()) {
       <!-- Dialog Overlay -->
       <div [class]="overlayClasses()" (click)="onOverlayClick()">
@@ -3040,6 +3455,11 @@ class DialogComponent {
           role="dialog"
           [attr.aria-modal]="true"
           aria-labelledby="dialog-title"
+          [style.width]="'100%'"
+          [style.maxWidth]="contentMaxWidth()"
+          [style.minWidth]="'280px'"
+          [style.margin]="'24px auto'"
+          [style.flex]="'0 0 auto'"
         >
           <!-- Dialog Header -->
           <div [class]="headerClasses()">
@@ -3078,6 +3498,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           role="dialog"
           [attr.aria-modal]="true"
           aria-labelledby="dialog-title"
+          [style.width]="'100%'"
+          [style.maxWidth]="contentMaxWidth()"
+          [style.minWidth]="'280px'"
+          [style.margin]="'24px auto'"
+          [style.flex]="'0 0 auto'"
         >
           <!-- Dialog Header -->
           <div [class]="headerClasses()">
@@ -3102,7 +3527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headerTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTone", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], closeDialog: [{ type: i0.Output, args: ["closeDialog"] }], onEscapeKey: [{
                 type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+                args: ['document:keydown.escape']
             }] } });
 
 const inputVariants = cva(clsx(
@@ -3487,35 +3912,23 @@ class RadioComponent {
     focusRingSize = computed(() => {
         return this.size() === 'sm' ? 22 : 26;
     }, ...(ngDevMode ? [{ debugName: "focusRingSize" }] : []));
-    // Outer stroke color based on state
-    outerStrokeColor = computed(() => {
+    // Outer circle classes based on state (using semantic tokens)
+    outerCircleClasses = computed(() => {
         const current = this.currentState();
         if (current === 'disabled') {
-            return '#64748B'; // neutral-500
+            return 'stroke-muted-foreground fill-muted-foreground';
         }
         if (current === 'hover') {
-            return '#8B5CF6'; // Violet-500
+            return 'stroke-primary/70 fill-none';
         }
         if (current === 'checked') {
-            return '#7C3AED'; // Violet-600
+            return 'stroke-primary fill-none';
         }
         if (current === 'focus') {
-            return '#64748B'; // neutral-500
+            return 'stroke-muted-foreground fill-none';
         }
-        return '#64748B'; // neutral-500 (default)
-    }, ...(ngDevMode ? [{ debugName: "outerStrokeColor" }] : []));
-    // Outer fill color
-    outerFillColor = computed(() => {
-        const current = this.currentState();
-        if (current === 'disabled') {
-            return '#64748B'; // neutral-500 with opacity applied via CSS
-        }
-        return 'none';
-    }, ...(ngDevMode ? [{ debugName: "outerFillColor" }] : []));
-    // Focus ring color
-    focusRingColor = computed(() => {
-        return this.size() === 'sm' ? '#7C3AED' : '#9333EA'; // Violet-600 for sm, Purple-600 for md
-    }, ...(ngDevMode ? [{ debugName: "focusRingColor" }] : []));
+        return 'stroke-muted-foreground fill-none'; // default
+    }, ...(ngDevMode ? [{ debugName: "outerCircleClasses" }] : []));
     // Handle click events
     handleClick() {
         if (this.currentState() === 'disabled') {
@@ -3555,7 +3968,7 @@ class RadioComponent {
           [attr.cx]="focusRingSize() / 2"
           [attr.cy]="focusRingSize() / 2"
           [attr.r]="focusRingSize() / 2 - 0.5"
-          [attr.stroke]="focusRingColor()"
+          class="stroke-primary"
           stroke-width="1"
         />
       </svg>
@@ -3573,8 +3986,7 @@ class RadioComponent {
           [attr.cx]="outerSize() / 2"
           [attr.cy]="outerSize() / 2"
           [attr.r]="outerSize() / 2 - 0.5"
-          [attr.stroke]="outerStrokeColor()"
-          [attr.fill]="outerFillColor()"
+          [class]="outerCircleClasses()"
           stroke-width="1"
         />
       </svg>
@@ -3593,13 +4005,12 @@ class RadioComponent {
           [attr.cx]="innerSize() / 2"
           [attr.cy]="innerSize() / 2"
           [attr.r]="innerSize() / 2 - 0.5"
-          fill="#7C3AED"
-          stroke="#7C3AED"
+          class="fill-primary stroke-primary"
           stroke-width="1"
         />
       </svg>
     </div>
-  `, isInline: true, styles: [":host{display:inline-block}.radio-wrapper:focus-visible{outline:none}.radio-wrapper:focus-visible svg circle[stroke]{stroke:#7c3aed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{display:inline-block}.radio-wrapper:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -3626,7 +4037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           [attr.cx]="focusRingSize() / 2"
           [attr.cy]="focusRingSize() / 2"
           [attr.r]="focusRingSize() / 2 - 0.5"
-          [attr.stroke]="focusRingColor()"
+          class="stroke-primary"
           stroke-width="1"
         />
       </svg>
@@ -3644,8 +4055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           [attr.cx]="outerSize() / 2"
           [attr.cy]="outerSize() / 2"
           [attr.r]="outerSize() / 2 - 0.5"
-          [attr.stroke]="outerStrokeColor()"
-          [attr.fill]="outerFillColor()"
+          [class]="outerCircleClasses()"
           stroke-width="1"
         />
       </svg>
@@ -3664,13 +4074,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           [attr.cx]="innerSize() / 2"
           [attr.cy]="innerSize() / 2"
           [attr.r]="innerSize() / 2 - 0.5"
-          fill="#7C3AED"
-          stroke="#7C3AED"
+          class="fill-primary stroke-primary"
           stroke-width="1"
         />
       </svg>
     </div>
-  `, styles: [":host{display:inline-block}.radio-wrapper:focus-visible{outline:none}.radio-wrapper:focus-visible svg circle[stroke]{stroke:#7c3aed}\n"] }]
+  `, styles: [":host{display:inline-block}.radio-wrapper:focus-visible{outline:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -3758,14 +4167,16 @@ const radioOptionVariants = cva(clsx(
  */
 const radioLabelVariants = cva(clsx(
 // Typography
-'font-normal', 'tracking-[0.05px]', 'text-[#202020]'), {
+'font-normal', 'tracking-[0.05px]', 
+// Color (semantic token)
+'text-foreground'), {
     variants: {
         size: {
             sm: 'text-sm leading-[21px]', // 14px / 21px
             md: 'text-base leading-6', // 16px / 24px
         },
         disabled: {
-            true: 'text-slate-500 opacity-60',
+            true: 'text-muted-foreground opacity-60',
             false: '',
         },
     },
@@ -3869,7 +4280,7 @@ class RadioGroupComponent {
         <span [class]="getLabelClasses(option)">{{ option.label }}</span>
       </label>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioComponent, selector: "bsg-radio", inputs: ["size", "state", "checked", "className"], outputs: ["stateChange", "checkedChange", "valueChange"] }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioComponent, selector: "bsg-radio", inputs: ["size", "state", "checked", "className"], outputs: ["stateChange", "checkedChange", "valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -4002,10 +4413,12 @@ const selectDropdownVariants = cva(clsx(
 'absolute top-[calc(100%+4px)] left-0 z-50', 
 // Border
 'rounded-md border border-border', 
-// Background
+// Background (semantic token)
 'bg-popover', 
-// Shadow
-'shadow-md', 
+// Text color (semantic token)
+'text-popover-foreground', 
+// Shadow (semantic token)
+'shadow-(--shadow-dropdown)', 
 // Layout
 'overflow-hidden box-border'), {
     variants: {
@@ -5986,8 +6399,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Skeleton variants
  */
 const skeletonVariants = cva(clsx(
-// Base
-'block bg-slate-200 border-none shrink-0', 
+// Base (semantic token for skeleton background)
+'block bg-muted border-none shrink-0', 
+// Animation
+'animate-pulse', 
 // Non-interactive
 'pointer-events-none select-none'), {
     variants: {
@@ -6070,13 +6485,13 @@ const switchRootVariants = cva(clsx(
 'h-5 w-9', 
 // Border & Shape
 'rounded-full border border-transparent', 
-// Shadow
-'shadow-xs', 
+// Shadow (semantic token)
+'shadow-(--shadow-xs)', 
 // Cursor
 'cursor-pointer', 
 // Transition
 'transition-all duration-200', 
-// Focus
+// Focus (semantic tokens)
 'outline-none', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 
 // Remove tap highlight on mobile
 '[&]:tap-highlight-transparent'), {
@@ -6109,10 +6524,10 @@ const switchRootVariants = cva(clsx(
 const switchThumbVariants = cva(clsx(
 // Layout
 'pointer-events-none block rounded-full', 
-// Background
+// Background (semantic token)
 'bg-background', 
-// Shadow
-'shadow-lg', 
+// Shadow (semantic token)
+'shadow-(--shadow-lg)', 
 // Ring
 'ring-0', 
 // Transition
@@ -6123,7 +6538,7 @@ const switchThumbVariants = cva(clsx(
             false: 'translate-x-0',
         },
         size: {
-            sm: 'size-3 data-[checked=true]:translate-x-3',
+            sm: 'size-3 data-[checked=true]:translate-x-5',
             default: 'size-4 data-[checked=true]:translate-x-4',
             lg: 'size-5 data-[checked=true]:translate-x-5',
         },
@@ -6433,7 +6848,9 @@ const timepickerWrapperVariants = cva(clsx(
 // Transition
 'transition-all duration-200', 
 // Width
-'w-full'), {
+'w-full', 
+// Background
+'bg-background'), {
     variants: {
         size: {
             sm: 'h-8 py-1 px-2 pr-2 pl-3',
@@ -6441,11 +6858,11 @@ const timepickerWrapperVariants = cva(clsx(
             lg: 'h-12 py-1 px-2 pr-2 pl-3',
         },
         state: {
-            default: 'border-slate-300 bg-transparent hover:border-slate-400',
-            hover: 'border-slate-400 bg-transparent',
-            focus: 'border-slate-500 bg-transparent ring-2 ring-offset-2 ring-violet-600',
-            disabled: 'border-slate-300 bg-transparent opacity-40 cursor-not-allowed pointer-events-none',
-            error: 'border-red-600 bg-transparent',
+            default: 'border-input hover:border-ring/50',
+            hover: 'border-ring/50',
+            focus: 'border-ring ring-2 ring-offset-2 ring-ring',
+            disabled: 'border-input opacity-40 cursor-not-allowed pointer-events-none',
+            error: 'border-destructive',
         },
     },
     defaultVariants: {
@@ -6463,10 +6880,10 @@ const timepickerInputVariants = cva(clsx(
 'border-none outline-none bg-transparent', 
 // Typography
 'text-base font-normal leading-6 tracking-tight', 
-// Color
-'text-slate-800', 
-// Placeholder
-'placeholder:text-slate-500', 
+// Color (semantic token)
+'text-foreground', 
+// Placeholder (semantic token)
+'placeholder:text-muted-foreground', 
 // Cursor
 'cursor-pointer', 
 // Disabled
@@ -6475,9 +6892,9 @@ const timepickerInputVariants = cva(clsx(
         state: {
             default: '',
             hover: '',
-            focus: 'text-slate-800',
+            focus: 'text-foreground',
             disabled: 'cursor-not-allowed',
-            error: 'text-red-600 placeholder:text-red-600',
+            error: 'text-destructive placeholder:text-destructive',
         },
     },
     defaultVariants: {
@@ -6489,19 +6906,19 @@ const timepickerInputVariants = cva(clsx(
  */
 const timepickerIconButtonVariants = cva(clsx(
 // Size
-'shrink-0 w-6 h-6 mr-1', 
+'shrink-0 size-6 mr-1', 
 // Layout
 'flex items-center justify-center', 
 // Reset
 'bg-transparent border-none p-0', 
 // Cursor
 'cursor-pointer', 
-// Color
-'text-current', 
+// Color (semantic token)
+'text-muted-foreground', 
 // Transition
 'transition-opacity duration-200', 
 // Hover
-'hover:opacity-70', 
+'hover:opacity-70 hover:text-foreground', 
 // Disabled
 'disabled:cursor-not-allowed disabled:opacity-40'));
 /**
@@ -6512,12 +6929,14 @@ const timepickerDropdownVariants = cva(clsx(
 'absolute top-[calc(100%+4px)] left-0 z-[10000]', 
 // Shape
 'rounded-md', 
-// Border
-'border border-slate-300', 
-// Background
-'bg-white', 
-// Shadow
-'shadow-md', 
+// Border (semantic token)
+'border border-border', 
+// Background (semantic token)
+'bg-popover', 
+// Text color (semantic token)
+'text-popover-foreground', 
+// Shadow (semantic token)
+'shadow-(--shadow-dropdown)', 
 // Layout
 'flex flex-col overflow-hidden'), {
     variants: {
@@ -6539,8 +6958,8 @@ const timepickerSelectionAreaVariants = cva(clsx(
 'flex items-center justify-center gap-2', 
 // Spacing
 'p-2', 
-// Border
-'border-b border-slate-200'));
+// Border (semantic token)
+'border-b border-border'));
 /**
  * TimePicker column variants
  */
@@ -6553,8 +6972,8 @@ const timepickerColumnVariants = cva(clsx(
 const timepickerColumnHeaderVariants = cva(clsx(
 // Typography
 'text-xs font-semibold uppercase tracking-wide', 
-// Color
-'text-slate-500', 
+// Color (semantic token)
+'text-muted-foreground', 
 // Alignment
 'text-center', 
 // Spacing
@@ -6571,8 +6990,8 @@ const timepickerListVariants = cva(clsx(
 'flex flex-col gap-0.5', 
 // Spacing
 'py-1', 
-// Scrollbar (Tailwind custom scrollbar classes)
-'scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-transparent'));
+// Scrollbar (semantic token for thumb color)
+'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'));
 /**
  * TimePicker option variants
  */
@@ -6581,8 +7000,8 @@ const timepickerOptionVariants = cva(clsx(
 'p-2', 
 // Typography
 'text-sm font-normal leading-5', 
-// Color
-'text-slate-700', 
+// Color (semantic token)
+'text-foreground', 
 // Alignment
 'text-center', 
 // Cursor
@@ -6597,11 +7016,11 @@ const timepickerOptionVariants = cva(clsx(
 'transition-all duration-150'), {
     variants: {
         selected: {
-            true: 'bg-violet-600 text-white font-medium hover:bg-violet-700',
-            false: 'hover:bg-slate-100',
+            true: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
+            false: 'hover:bg-accent',
         },
         disabled: {
-            true: 'opacity-40 cursor-not-allowed text-slate-400 hover:bg-transparent',
+            true: 'opacity-40 cursor-not-allowed text-muted-foreground hover:bg-transparent',
             false: '',
         },
     },
@@ -6616,8 +7035,8 @@ const timepickerOptionVariants = cva(clsx(
 const timepickerSeparatorVariants = cva(clsx(
 // Typography
 'text-xl font-medium', 
-// Color
-'text-slate-500', 
+// Color (semantic token)
+'text-muted-foreground', 
 // Position
 'mt-5'));
 /**
@@ -6628,8 +7047,8 @@ const timepickerActionsVariants = cva(clsx(
 'flex gap-2', 
 // Spacing
 'p-2', 
-// Border
-'border-t border-slate-200'));
+// Border (semantic token)
+'border-t border-border'));
 /**
  * TimePicker action button variants
  */
@@ -6640,24 +7059,24 @@ const timepickerActionButtonVariants = cva(clsx(
 'py-2 px-3', 
 // Typography
 'text-[13px] font-medium leading-[18px]', 
-// Border
-'border border-slate-300', 
+// Border (semantic token)
+'border border-input', 
 // Shape
 'rounded', 
 // Background
 'bg-transparent', 
-// Color
-'text-slate-700', 
+// Color (semantic token)
+'text-foreground', 
 // Cursor
 'cursor-pointer', 
 // Transition
 'transition-all duration-150', 
 // Alignment
 'text-center', 
-// Hover
-'hover:bg-slate-50 hover:border-slate-400', 
-// Active
-'active:bg-slate-100', 
+// Hover (semantic tokens)
+'hover:bg-accent hover:border-ring/50', 
+// Active (semantic token)
+'active:bg-accent', 
 // Disabled
 'disabled:opacity-40 disabled:cursor-not-allowed'));
 /**
@@ -6666,8 +7085,8 @@ const timepickerActionButtonVariants = cva(clsx(
 const timepickerErrorMessageVariants = cva(clsx(
 // Typography
 'text-xs font-normal leading-4', 
-// Color
-'text-red-600', 
+// Color (semantic token)
+'text-destructive', 
 // Spacing
 'mt-1'));
 
@@ -6763,7 +7182,7 @@ class TimePickerComponent {
         state: this.displayState(),
     }), this.className()), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
     inputClasses = computed(() => clsx(timepickerInputVariants({ state: this.displayState() })), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
-    iconButtonClasses = computed(() => clsx(timepickerIconButtonVariants()), ...(ngDevMode ? [{ debugName: "iconButtonClasses" }] : []));
+    iconButtonClasses = computed(() => clsx(timepickerIconButtonVariants(), this.state() === 'error' && 'text-destructive'), ...(ngDevMode ? [{ debugName: "iconButtonClasses" }] : []));
     dropdownClasses = computed(() => clsx(timepickerDropdownVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "dropdownClasses" }] : []));
     selectionAreaClasses = computed(() => clsx(timepickerSelectionAreaVariants()), ...(ngDevMode ? [{ debugName: "selectionAreaClasses" }] : []));
     columnClasses = computed(() => clsx(timepickerColumnVariants()), ...(ngDevMode ? [{ debugName: "columnClasses" }] : []));
@@ -6773,7 +7192,7 @@ class TimePickerComponent {
     actionsClasses = computed(() => clsx(timepickerActionsVariants()), ...(ngDevMode ? [{ debugName: "actionsClasses" }] : []));
     actionButtonClasses = computed(() => clsx(timepickerActionButtonVariants()), ...(ngDevMode ? [{ debugName: "actionButtonClasses" }] : []));
     errorMessageClasses = computed(() => clsx(timepickerErrorMessageVariants()), ...(ngDevMode ? [{ debugName: "errorMessageClasses" }] : []));
-    iconColor = computed(() => this.state() === 'error' ? '#DC2626' : '#64748B', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    iconColor = computed(() => this.state() === 'error' ? 'currentColor' : 'currentColor', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
     getOptionClasses(selected, disabled) {
         return clsx(timepickerOptionVariants({ selected, disabled }));
     }
@@ -6844,6 +7263,35 @@ class TimePickerComponent {
         this.selectedHour.set(hour);
         this.selectedMinute.set(Math.min(snappedMinute, 59));
         this.updateTimeValue();
+        // Scroll to show selected values
+        this.scrollToSelected();
+    }
+    /** Scroll both lists to show the selected values centered */
+    scrollToSelected() {
+        // Use setTimeout to allow Angular to render the changes first
+        setTimeout(() => {
+            this.scrollToElement(this.hoursList, this.selectedHour());
+            this.scrollToElement(this.minutesList, this.selectedMinute());
+        }, 0);
+    }
+    /** Scroll a list to center the element with the given value */
+    scrollToElement(listRef, value) {
+        if (!listRef?.nativeElement)
+            return;
+        const listElement = listRef.nativeElement;
+        const optionElement = listElement.querySelector(`[data-value="${value}"]`);
+        if (optionElement) {
+            // Calculate scroll position to center the element
+            const listHeight = listElement.clientHeight;
+            const optionTop = optionElement.offsetTop;
+            const optionHeight = optionElement.offsetHeight;
+            // Scroll to center the option in the list
+            const scrollTop = optionTop - listHeight / 2 + optionHeight / 2;
+            listElement.scrollTo({
+                top: Math.max(0, scrollTop),
+                behavior: 'smooth',
+            });
+        }
     }
     clearTime() {
         if (this.state() === 'disabled')
@@ -6866,8 +7314,13 @@ class TimePickerComponent {
     toggleDropdown() {
         if (this.state() === 'disabled')
             return;
+        const wasOpen = this.isOpen();
         this.isOpen.update((v) => !v);
         this.openChange.emit(this.isOpen());
+        // Scroll to selected values when opening
+        if (!wasOpen && this.internalValue()) {
+            this.scrollToSelected();
+        }
     }
     openDropdown() {
         if (this.state() === 'disabled')
@@ -6875,6 +7328,10 @@ class TimePickerComponent {
         if (!this.isOpen()) {
             this.isOpen.set(true);
             this.openChange.emit(true);
+            // Scroll to selected values when opening
+            if (this.internalValue()) {
+                this.scrollToSelected();
+            }
         }
     }
     closeDropdown() {
@@ -7633,18 +8090,18 @@ const tooltipTriggerVariants = cva(clsx(
 const tooltipContentVariants = cva(clsx(
 // Position
 'absolute z-50', 
-// Colors
-'bg-primary text-primary-foreground', 
-// Shape
-'rounded-md', 
+// Colors (semantic tokens)
+'bg-tooltip text-tooltip-foreground', 
+// Shape (using border token)
+'rounded-(--border-tooltip-radius)', 
 // Spacing
 'px-3 py-1.5', 
 // Typography
 'text-xs font-medium leading-normal', 
 // Behavior
 'whitespace-nowrap pointer-events-none select-none', 
-// Shadow
-'shadow-md', 
+// Shadow (semantic token)
+'shadow-(--shadow-tooltip)', 
 // Animation
 'animate-in fade-in-0 zoom-in-95'), {
     variants: {
@@ -7668,11 +8125,11 @@ const tooltipArrowVariants = cva(clsx(
 // Position
 'absolute', 
 // Size
-'w-2 h-2', 
-// Color (inherits from parent)
-'bg-primary', 
+'size-2', 
+// Color (semantic token - matches tooltip background)
+'bg-tooltip', 
 // Shape
-'rounded-[1px] rotate-45'), {
+'rounded-px rotate-45'), {
     variants: {
         placement: {
             top: '-bottom-1 left-1/2 -translate-x-1/2',
@@ -7868,5 +8325,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, 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, 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, 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 };
 //# sourceMappingURL=bsginstitute-bsg-integra.mjs.map