codexly-ui 0.1.21 → 0.1.23

package/fesm2022/codexly-ui.mjs

@@ -7,7 +7,7 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -4761,145 +4761,145 @@ class ClxSelectComponent {
         this._cvaDisabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSelectComponent, isStandalone: true, selector: "clx-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
-    @if (label()) {
-      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
-    }
-
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <div
-      #origin="cdkOverlayOrigin"
-      cdkOverlayOrigin
-      [class]="_triggerClass()"
-      [attr.tabindex]="_disabled() ? null : '0'"
-      role="combobox"
-      [attr.aria-labelledby]="label() ? _labelId : null"
-      [attr.aria-expanded]="_isOpen()"
-      aria-haspopup="listbox"
-      (click)="!_disabled() && _togglePanel()"
-      (keydown)="_onTriggerKeydown($event)">
-
-      <!-- Multi mode: tag chips -->
-      @if (multiple()) {
-        <div [class]="_tagContainerClass()">
-          @for (opt of _selectedOptions(); track opt.value) {
-            <span
-              clx-tag
-              variant="soft"
-              [color]="_activeColor()"
-              [size]="_sizeConfig().tagSize"
-              (onRemove)="_deselect(opt.value)">
-              {{ opt.label }}
-            </span>
-          }
-          @if (!_selectedOptions().length) {
-            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
-          }
-        </div>
-
-      <!-- Single mode: display value -->
-      } @else {
-        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
-      }
-
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
-        @if (_hasValue() && !_disabled() && multiple()) {
-          <button
-            clx-button
-            variant="ghost"
-            [color]="_activeColor()"
-            shape="circle"
-            [size]="_sizeConfig().btnSize"
-            icon="close"
-            [iconOnly]="true"
-            (mousedown)="$event.preventDefault()"
-            (click)="$event.stopPropagation(); _clearAll()">
-          </button>
-        }
-        <button
-          clx-button
-          variant="ghost"
-          [color]="_activeColor()"
-          shape="circle"
-          [size]="_sizeConfig().btnSize"
-          icon="keyboard_arrow_down"
-          [iconOnly]="true"
-          [class]="_chevronBtnClass()"
-          (mousedown)="$event.preventDefault()">
-        </button>
-      </div>
-    </div>
-
-    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
-      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
-      [cdkConnectedOverlayWidth]="_overlayWidth()"
-      [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="_closePanel()"
-      (overlayKeydown)="_onOverlayKeydown($event)">
-
-      <div [class]="_panelClass()" role="listbox">
-
-        <!-- Search / Autocomplete input -->
-        @if (searchable() || async()) {
-          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
-            <clx-input
-              [formControl]="_searchControl"
-              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
-              [color]="_activeColor()"
-              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
-              size="sm">
-            </clx-input>
-          </div>
-        }
-
-        <!-- Options list -->
-        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
-          @if (async() && _asyncLoading()) {
-            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
-              <clx-spinner size="sm" [color]="_activeColor()" />
-              Buscando...
-            </div>
-          } @else if (_showAsyncPlaceholder()) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
-              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
-            </div>
-          } @else if (_filteredOptions().length === 0) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
-          } @else {
-            @for (opt of _filteredOptions(); track opt.value) {
-              <button
-                type="button"
-                [class]="_optionClass(opt)"
-                [disabled]="opt.disabled ?? false"
-                (mousedown)="$event.preventDefault()"
-                (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
-                @if (_isSelected(opt.value)) {
-                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
-                }
-              </button>
-            }
-          }
-        </div>
-
-      </div>
-    </ng-template>
-
-    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
-    @if (_isInvalid()) {
-      <p class="text-xs text-red-500 flex items-center gap-1">
-        <span clx-icon name="error" size="xs"></span>
-        {{ errorMessage() }}
-      </p>
-    } @else if (hint()) {
-      <p [class]="_hintClass()">{{ hint() }}</p>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSelectComponent, isStandalone: true, selector: "clx-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      [attr.tabindex]="_disabled() ? null : '0'"
+      role="combobox"
+      [attr.aria-labelledby]="label() ? _labelId : null"
+      [attr.aria-expanded]="_isOpen()"
+      aria-haspopup="listbox"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown)="_onTriggerKeydown($event)">
+
+      <!-- Multi mode: tag chips -->
+      @if (multiple()) {
+        <div [class]="_tagContainerClass()">
+          @for (opt of _selectedOptions(); track opt.value) {
+            <span
+              clx-tag
+              variant="soft"
+              [color]="_activeColor()"
+              [size]="_sizeConfig().tagSize"
+              (onRemove)="_deselect(opt.value)">
+              {{ opt.label }}
+            </span>
+          }
+          @if (!_selectedOptions().length) {
+            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
+          }
+        </div>
+
+      <!-- Single mode: display value -->
+      } @else {
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
+      }
+
+      <!-- Right controls: clear + chevron -->
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+        @if (_hasValue() && !_disabled() && multiple()) {
+          <button
+            clx-button
+            variant="ghost"
+            [color]="_activeColor()"
+            shape="circle"
+            [size]="_sizeConfig().btnSize"
+            icon="close"
+            [iconOnly]="true"
+            (mousedown)="$event.preventDefault()"
+            (click)="$event.stopPropagation(); _clearAll()">
+          </button>
+        }
+        <button
+          clx-button
+          variant="ghost"
+          [color]="_activeColor()"
+          shape="circle"
+          [size]="_sizeConfig().btnSize"
+          icon="keyboard_arrow_down"
+          [iconOnly]="true"
+          [class]="_chevronBtnClass()"
+          (mousedown)="$event.preventDefault()">
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="listbox">
+
+        <!-- Search / Autocomplete input -->
+        @if (searchable() || async()) {
+          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
+            <clx-input
+              [formControl]="_searchControl"
+              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
+              [color]="_activeColor()"
+              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
+              size="sm">
+            </clx-input>
+          </div>
+        }
+
+        <!-- Options list -->
+        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
+          @if (async() && _asyncLoading()) {
+            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
+              <clx-spinner size="sm" [color]="_activeColor()" />
+              Buscando...
+            </div>
+          } @else if (_showAsyncPlaceholder()) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
+              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
+            </div>
+          } @else if (_filteredOptions().length === 0) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
+          } @else {
+            @for (opt of _filteredOptions(); track opt.value) {
+              <button
+                type="button"
+                [class]="_optionClass(opt)"
+                [disabled]="opt.disabled ?? false"
+                (mousedown)="$event.preventDefault()"
+                (click)="_selectOption(opt)">
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
+                @if (_isSelected(opt.value)) {
+                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
+                }
+              </button>
+            }
+          }
+        </div>
+
+      </div>
+    </ng-template>
+
+    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
+    @if (_isInvalid()) {
+      <p class="text-xs text-red-500 flex items-center gap-1">
+        <span clx-icon name="error" size="xs"></span>
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ClxTagComponent, selector: "span[clx-tag]", inputs: ["variant", "color", "size", "shape"], outputs: ["onRemove"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSelectComponent, decorators: [{
@@ -4908,145 +4908,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-select',
                     standalone: true,
                     imports: [OverlayModule, ReactiveFormsModule, ClxTagComponent, ClxIconComponent, ClxButtonComponent, ClxInputComponent, ClxSpinnerComponent],
-                    template: `
-    @if (label()) {
-      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
-    }
-
-    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
-    <div
-      #origin="cdkOverlayOrigin"
-      cdkOverlayOrigin
-      [class]="_triggerClass()"
-      [attr.tabindex]="_disabled() ? null : '0'"
-      role="combobox"
-      [attr.aria-labelledby]="label() ? _labelId : null"
-      [attr.aria-expanded]="_isOpen()"
-      aria-haspopup="listbox"
-      (click)="!_disabled() && _togglePanel()"
-      (keydown)="_onTriggerKeydown($event)">
-
-      <!-- Multi mode: tag chips -->
-      @if (multiple()) {
-        <div [class]="_tagContainerClass()">
-          @for (opt of _selectedOptions(); track opt.value) {
-            <span
-              clx-tag
-              variant="soft"
-              [color]="_activeColor()"
-              [size]="_sizeConfig().tagSize"
-              (onRemove)="_deselect(opt.value)">
-              {{ opt.label }}
-            </span>
-          }
-          @if (!_selectedOptions().length) {
-            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
-          }
-        </div>
-
-      <!-- Single mode: display value -->
-      } @else {
-        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
-      }
-
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
-        @if (_hasValue() && !_disabled() && multiple()) {
-          <button
-            clx-button
-            variant="ghost"
-            [color]="_activeColor()"
-            shape="circle"
-            [size]="_sizeConfig().btnSize"
-            icon="close"
-            [iconOnly]="true"
-            (mousedown)="$event.preventDefault()"
-            (click)="$event.stopPropagation(); _clearAll()">
-          </button>
-        }
-        <button
-          clx-button
-          variant="ghost"
-          [color]="_activeColor()"
-          shape="circle"
-          [size]="_sizeConfig().btnSize"
-          icon="keyboard_arrow_down"
-          [iconOnly]="true"
-          [class]="_chevronBtnClass()"
-          (mousedown)="$event.preventDefault()">
-        </button>
-      </div>
-    </div>
-
-    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions"
-      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
-      [cdkConnectedOverlayWidth]="_overlayWidth()"
-      [cdkConnectedOverlayPush]="true"
-      (overlayOutsideClick)="_closePanel()"
-      (overlayKeydown)="_onOverlayKeydown($event)">
-
-      <div [class]="_panelClass()" role="listbox">
-
-        <!-- Search / Autocomplete input -->
-        @if (searchable() || async()) {
-          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
-            <clx-input
-              [formControl]="_searchControl"
-              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
-              [color]="_activeColor()"
-              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
-              size="sm">
-            </clx-input>
-          </div>
-        }
-
-        <!-- Options list -->
-        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
-          @if (async() && _asyncLoading()) {
-            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
-              <clx-spinner size="sm" [color]="_activeColor()" />
-              Buscando...
-            </div>
-          } @else if (_showAsyncPlaceholder()) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
-              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
-            </div>
-          } @else if (_filteredOptions().length === 0) {
-            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
-          } @else {
-            @for (opt of _filteredOptions(); track opt.value) {
-              <button
-                type="button"
-                [class]="_optionClass(opt)"
-                [disabled]="opt.disabled ?? false"
-                (mousedown)="$event.preventDefault()"
-                (click)="_selectOption(opt)">
-                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
-                @if (_isSelected(opt.value)) {
-                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
-                }
-              </button>
-            }
-          }
-        </div>
-
-      </div>
-    </ng-template>
-
-    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
-    @if (_isInvalid()) {
-      <p class="text-xs text-red-500 flex items-center gap-1">
-        <span clx-icon name="error" size="xs"></span>
-        {{ errorMessage() }}
-      </p>
-    } @else if (hint()) {
-      <p [class]="_hintClass()">{{ hint() }}</p>
-    }
+                    template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      [attr.tabindex]="_disabled() ? null : '0'"
+      role="combobox"
+      [attr.aria-labelledby]="label() ? _labelId : null"
+      [attr.aria-expanded]="_isOpen()"
+      aria-haspopup="listbox"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown)="_onTriggerKeydown($event)">
+
+      <!-- Multi mode: tag chips -->
+      @if (multiple()) {
+        <div [class]="_tagContainerClass()">
+          @for (opt of _selectedOptions(); track opt.value) {
+            <span
+              clx-tag
+              variant="soft"
+              [color]="_activeColor()"
+              [size]="_sizeConfig().tagSize"
+              (onRemove)="_deselect(opt.value)">
+              {{ opt.label }}
+            </span>
+          }
+          @if (!_selectedOptions().length) {
+            <span [class]="_placeholderClass()">{{ placeholder() }}</span>
+          }
+        </div>
+
+      <!-- Single mode: display value -->
+      } @else {
+        <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
+      }
+
+      <!-- Right controls: clear + chevron -->
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+        @if (_hasValue() && !_disabled() && multiple()) {
+          <button
+            clx-button
+            variant="ghost"
+            [color]="_activeColor()"
+            shape="circle"
+            [size]="_sizeConfig().btnSize"
+            icon="close"
+            [iconOnly]="true"
+            (mousedown)="$event.preventDefault()"
+            (click)="$event.stopPropagation(); _clearAll()">
+          </button>
+        }
+        <button
+          clx-button
+          variant="ghost"
+          [color]="_activeColor()"
+          shape="circle"
+          [size]="_sizeConfig().btnSize"
+          icon="keyboard_arrow_down"
+          [iconOnly]="true"
+          [class]="_chevronBtnClass()"
+          (mousedown)="$event.preventDefault()">
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Overlay panel ───────────────────────────────────────────────────── -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="listbox">
+
+        <!-- Search / Autocomplete input -->
+        @if (searchable() || async()) {
+          <div class="p-2 border-b border-clx-border-soft" (click)="$event.stopPropagation()">
+            <clx-input
+              [formControl]="_searchControl"
+              [placeholder]="async() ? 'Buscar...' : searchPlaceholder()"
+              [color]="_activeColor()"
+              [suffixIcon]="async() && _asyncLoading() ? '' : 'search'"
+              size="sm">
+            </clx-input>
+          </div>
+        }
+
+        <!-- Options list -->
+        <div class="overflow-y-auto max-h-60 p-1 space-y-0.5">
+          @if (async() && _asyncLoading()) {
+            <div class="flex items-center justify-center py-6 gap-2 text-sm text-clx-text-subtle">
+              <clx-spinner size="sm" [color]="_activeColor()" />
+              Buscando...
+            </div>
+          } @else if (_showAsyncPlaceholder()) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">
+              Escribe {{ minChars() === 1 ? 'al menos 1 carácter' : 'al menos ' + minChars() + ' caracteres' }}
+            </div>
+          } @else if (_filteredOptions().length === 0) {
+            <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
+          } @else {
+            @for (opt of _filteredOptions(); track opt.value) {
+              <button
+                type="button"
+                [class]="_optionClass(opt)"
+                [disabled]="opt.disabled ?? false"
+                (mousedown)="$event.preventDefault()"
+                (click)="_selectOption(opt)">
+                <span class="flex-1 text-left truncate" [style.font-family]="opt.previewFontFamily ?? null">{{ opt.label }}</span>
+                @if (_isSelected(opt.value)) {
+                  <span clx-icon name="check" size="xs" class="shrink-0"></span>
+                }
+              </button>
+            }
+          }
+        </div>
+
+      </div>
+    </ng-template>
+
+    <!-- ── Bottom message ─────────────────────────────────────────────────── -->
+    @if (_isInvalid()) {
+      <p class="text-xs text-red-500 flex items-center gap-1">
+        <span clx-icon name="error" size="xs"></span>
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5575,142 +5575,142 @@ class ClxAlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAlertComponent, isStandalone: true, selector: "clx-alert", ngImport: i0, template: `
-    <!-- Dialog card -->
-    <div
-      #card
-      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
-    >
-      <!-- Icon circle -->
-      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
-           [class]="_iconBg()">
-        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
-      </div>
-
-      <!-- Title -->
-      @if (_title()) {
-        <h2
-          class="text-lg font-bold text-clx-text-label leading-snug"
-          [innerHTML]="_title()">
-        </h2>
-      }
-
-      <!-- Message -->
-      @if (_message()) {
-        <p
-          class="text-sm text-clx-text-subtle leading-relaxed"
-          [innerHTML]="_message()">
-        </p>
-      }
-
-      <!-- Buttons -->
-      <div class="flex items-center justify-center gap-3 w-full mt-1">
-
-        @if (_showCancel()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="dismiss()"
-          >
-            {{ _cancelText() }}
-          </button>
-        }
-
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          variant="solid"
-          size="md"
-          (click)="confirm()"
-        >
-          {{ _confirmText() }}
-        </button>
-
-      </div>
-
-      <!-- Timer progress bar -->
-      @if (_timerTotal() > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
-          <div
-            class="h-full transition-none rounded-b-3xl"
-            [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
-          </div>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAlertComponent, isStandalone: true, selector: "clx-alert", ngImport: i0, template: `
+    <!-- Dialog card -->
+    <div
+      #card
+      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
+    >
+      <!-- Icon circle -->
+      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
+           [class]="_iconBg()">
+        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
+      </div>
+
+      <!-- Title -->
+      @if (_title()) {
+        <h2
+          class="text-lg font-bold text-clx-text-label leading-snug"
+          [innerHTML]="_title()">
+        </h2>
+      }
+
+      <!-- Message -->
+      @if (_message()) {
+        <p
+          class="text-sm text-clx-text-subtle leading-relaxed"
+          [innerHTML]="_message()">
+        </p>
+      }
+
+      <!-- Buttons -->
+      <div class="flex items-center justify-center gap-3 w-full mt-1">
+
+        @if (_showCancel()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="dismiss()"
+          >
+            {{ _cancelText() }}
+          </button>
+        }
+
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          variant="solid"
+          size="md"
+          (click)="confirm()"
+        >
+          {{ _confirmText() }}
+        </button>
+
+      </div>
+
+      <!-- Timer progress bar -->
+      @if (_timerTotal() > 0) {
+        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
+          <div
+            class="h-full transition-none rounded-b-3xl"
+            [class]="_progressColor()"
+            [ngStyle]="{ width: _progressPct() + '%' }">
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <!-- Dialog card -->
-    <div
-      #card
-      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
-    >
-      <!-- Icon circle -->
-      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
-           [class]="_iconBg()">
-        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
-      </div>
-
-      <!-- Title -->
-      @if (_title()) {
-        <h2
-          class="text-lg font-bold text-clx-text-label leading-snug"
-          [innerHTML]="_title()">
-        </h2>
-      }
-
-      <!-- Message -->
-      @if (_message()) {
-        <p
-          class="text-sm text-clx-text-subtle leading-relaxed"
-          [innerHTML]="_message()">
-        </p>
-      }
-
-      <!-- Buttons -->
-      <div class="flex items-center justify-center gap-3 w-full mt-1">
-
-        @if (_showCancel()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="dismiss()"
-          >
-            {{ _cancelText() }}
-          </button>
-        }
-
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          variant="solid"
-          size="md"
-          (click)="confirm()"
-        >
-          {{ _confirmText() }}
-        </button>
-
-      </div>
-
-      <!-- Timer progress bar -->
-      @if (_timerTotal() > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
-          <div
-            class="h-full transition-none rounded-b-3xl"
-            [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Dialog card -->
+    <div
+      #card
+      class="clx-alert-card relative w-full max-w-sm mx-auto bg-clx-surface rounded-3xl shadow-2xl overflow-hidden flex flex-col items-center text-center px-8 pt-8 pb-6 gap-4"
+    >
+      <!-- Icon circle -->
+      <div class="w-20 h-20 rounded-full flex items-center justify-center shrink-0"
+           [class]="_iconBg()">
+        <span clx-icon [name]="_icon()" size="xl" [class]="_iconColor()"></span>
+      </div>
+
+      <!-- Title -->
+      @if (_title()) {
+        <h2
+          class="text-lg font-bold text-clx-text-label leading-snug"
+          [innerHTML]="_title()">
+        </h2>
+      }
+
+      <!-- Message -->
+      @if (_message()) {
+        <p
+          class="text-sm text-clx-text-subtle leading-relaxed"
+          [innerHTML]="_message()">
+        </p>
+      }
+
+      <!-- Buttons -->
+      <div class="flex items-center justify-center gap-3 w-full mt-1">
+
+        @if (_showCancel()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="dismiss()"
+          >
+            {{ _cancelText() }}
+          </button>
+        }
+
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          variant="solid"
+          size="md"
+          (click)="confirm()"
+        >
+          {{ _confirmText() }}
+        </button>
+
+      </div>
+
+      <!-- Timer progress bar -->
+      @if (_timerTotal() > 0) {
+        <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
+          <div
+            class="h-full transition-none rounded-b-3xl"
+            [class]="_progressColor()"
+            [ngStyle]="{ width: _progressPct() + '%' }">
+          </div>
+        </div>
+      }
+    </div>
   `, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -5771,57 +5771,57 @@ class ClxDrawerComponent {
         this._modalRef?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDrawerComponent, isStandalone: true, selector: "clx-drawer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
-    <!-- Header -->
-    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
-        <ng-content select="[clx-drawer-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="sm"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div class="flex-1 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
-      @if (_hasBuiltInButtons()) {
-        @if (showCancelButton()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-drawer-footer]" />
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDrawerComponent, isStandalone: true, selector: "clx-drawer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
+    <!-- Header -->
+    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
+      <div class="flex-1 min-w-0">
+        <ng-content select="[clx-drawer-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="sm"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-drawer-footer]" />
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerComponent, decorators: [{
@@ -5830,57 +5830,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-drawer',
                     standalone: true,
                     imports: [ClxButtonComponent],
-                    template: `
-    <!-- Header -->
-    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0">
-        <ng-content select="[clx-drawer-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="sm"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div class="flex-1 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
-      @if (_hasBuiltInButtons()) {
-        @if (showCancelButton()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-drawer-footer]" />
-      }
-    </div>
+                    template: `
+    <!-- Header -->
+    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
+      <div class="flex-1 min-w-0">
+        <ng-content select="[clx-drawer-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="sm"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-drawer-footer]" />
+      }
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5903,66 +5903,66 @@ class ClxModalComponent {
     _hostClass = computed(() => `${MODAL_CONTAINER_CLASS} ${MODAL_SIZE_MAP[this._resolvedSize()]} max-h-[90vh]`, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _hasBuiltInButtons = computed(() => !!this.confirmButton(), ...(ngDevMode ? [{ debugName: "_hasBuiltInButtons" }] : /* istanbul ignore next */ []));
     _confirmText = computed(() => this.confirmButton()?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = computed(() => this.confirmButton()?.color ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
-    _confirmVariant = computed(() => this.confirmButton()?.variant ?? 'solid', ...(ngDevMode ? [{ debugName: "_confirmVariant" }] : /* istanbul ignore next */ []));
-    _cancelText = computed(() => this.cancelButton()?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = computed(() => this.cancelButton()?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
-    _cancelVariant = computed(() => this.cancelButton()?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
-    _close() {
-        this._modalRef?.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
-    <!-- Header -->
-    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0 text-clx-text-label">
-        <ng-content select="[clx-modal-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="md"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
-      @if (_hasBuiltInButtons()) {
-        @if (showCancelButton()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-modal-footer]" />
-      }
-    </div>
+    _confirmColor = computed(() => this.confirmButton()?.color ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmVariant = computed(() => this.confirmButton()?.variant ?? 'solid', ...(ngDevMode ? [{ debugName: "_confirmVariant" }] : /* istanbul ignore next */ []));
+    _cancelText = computed(() => this.cancelButton()?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
+    _cancelColor = computed(() => this.cancelButton()?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelVariant = computed(() => this.cancelButton()?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
+    _close() {
+        this._modalRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
+    <!-- Header -->
+    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
+        <ng-content select="[clx-modal-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="md"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-modal-footer]" />
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, decorators: [{
@@ -5971,57 +5971,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-modal',
                     standalone: true,
                     imports: [ClxButtonComponent, ScrollingModule],
-                    template: `
-    <!-- Header -->
-    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
-      <div class="flex-1 min-w-0 text-clx-text-label">
-        <ng-content select="[clx-modal-title]" />
-      </div>
-      @if (showClose()) {
-        <button
-          clx-button
-          variant="ghost"
-          color="zinc"
-          shape="circle"
-          size="md"
-          icon="close"
-          [iconOnly]="true"
-          class="shrink-0 -mr-1"
-          (click)="_close()">
-        </button>
-      }
-    </div>
-
-    <!-- Body -->
-    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
-      <ng-content />
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
-      @if (_hasBuiltInButtons()) {
-        @if (showCancelButton()) {
-          <button
-            clx-button
-            [color]="_cancelColor()"
-            [variant]="_cancelVariant()"
-            size="md"
-            (click)="cancelClick.emit()">
-            {{ _cancelText() }}
-          </button>
-        }
-        <button
-          clx-button
-          [color]="_confirmColor()"
-          [variant]="_confirmVariant()"
-          size="md"
-          (click)="confirmClick.emit()">
-          {{ _confirmText() }}
-        </button>
-      } @else {
-        <ng-content select="[clx-modal-footer]" />
-      }
-    </div>
+                    template: `
+    <!-- Header -->
+    <div class="flex items-center gap-3 px-6 py-4 border-b border-clx-border-soft shrink-0">
+      <div class="flex-1 min-w-0 text-clx-text-label">
+        <ng-content select="[clx-modal-title]" />
+      </div>
+      @if (showClose()) {
+        <button
+          clx-button
+          variant="ghost"
+          color="zinc"
+          shape="circle"
+          size="md"
+          icon="close"
+          [iconOnly]="true"
+          class="shrink-0 -mr-1"
+          (click)="_close()">
+        </button>
+      }
+    </div>
+
+    <!-- Body -->
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-clx-border-soft shrink-0">
+      @if (_hasBuiltInButtons()) {
+        @if (showCancelButton()) {
+          <button
+            clx-button
+            [color]="_cancelColor()"
+            [variant]="_cancelVariant()"
+            size="md"
+            (click)="cancelClick.emit()">
+            {{ _cancelText() }}
+          </button>
+        }
+        <button
+          clx-button
+          [color]="_confirmColor()"
+          [variant]="_confirmVariant()"
+          size="md"
+          (click)="confirmClick.emit()">
+          {{ _confirmText() }}
+        </button>
+      } @else {
+        <ng-content select="[clx-modal-footer]" />
+      }
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11778,9 +11778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 class ClxAppLayoutComponent {
-    _zone = inject(NgZone);
-    _document = inject(DOCUMENT);
-    _el = inject(ElementRef);
+    _zone;
+    _document;
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : /* istanbul ignore next */ []));
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
@@ -11788,41 +11787,42 @@ class ClxAppLayoutComponent {
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
     collapsedChange = output();
     expandedChange = output();
+    constructor() {
+        const zone = inject(NgZone, { optional: true });
+        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
+        this._document = inject(DOCUMENT);
+    }
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : /* istanbul ignore next */ []));
     _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _sidebarCls = computed(() => {
-        const mobile = this._isMobile();
-        const open = this._sidebarOpen();
-        const collapsed = this.collapsed();
+        const isDesktopCollapsed = this.collapsed() && !this._isMobile();
         const hovered = this._hovered();
-        const base = 'flex flex-col bg-clx-surface border-r border-clx-border overflow-hidden shrink-0';
-        if (mobile) {
-            // Mobile: fixed overlay, slides in/out — no width transition needed
-            const visible = open ? 'translate-x-0' : '-translate-x-full';
-            return `fixed inset-y-0 left-0 z-30 w-72 ${base} transition-transform duration-300 ease-in-out ${visible}`;
-        }
-        // Desktop: in-flow (relative), width-only transition — no fixed, no transform
-        const width = collapsed && !hovered ? 'w-20' : 'w-72';
-        const shadow = collapsed && hovered ? 'shadow-2xl' : '';
-        return `relative z-30 ${width} ${base} transition-[width] duration-300 ease-in-out ${shadow}`;
+        let width;
+        if (isDesktopCollapsed && hovered) {
+            width = 'w-72';
+        }
+        else if (isDesktopCollapsed) {
+            width = 'w-20';
+        }
+        else {
+            width = 'w-72';
+        }
+        const isOverlay = isDesktopCollapsed && hovered;
+        return [
+            `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
+            'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
+            'transition-[width,transform] duration-300 ease-in-out',
+            isOverlay ? 'shadow-2xl' : '',
+            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
+        ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
-    _nativeSetTimeout;
-    _nativeClearTimeout;
     _mql;
     _mqlListener;
-    _resizeTimer = null;
-    _resizeListener;
-    _mouseEnterFn;
-    _mouseLeaveFn;
-    _sidebarEl = null;
     ngOnInit() {
         const win = this._document.defaultView;
         if (!win)
             return;
-        // Use native (non-Zone-patched) timers so the resize debounce
-        // does not trigger Angular change detection cycles
-        this._nativeSetTimeout = win.__zone_symbol__setTimeout ?? win.setTimeout.bind(win);
-        this._nativeClearTimeout = win.__zone_symbol__clearTimeout ?? win.clearTimeout.bind(win);
         this._mql = win.matchMedia('(min-width: 1024px)');
         this._isMobile.set(!this._mql.matches);
         if (this._mql.matches)
@@ -11841,58 +11841,9 @@ class ClxAppLayoutComponent {
             });
         };
         this._mql.addEventListener('change', this._mqlListener);
-        this._zone.runOutsideAngular(() => {
-            // Suppress all transitions during resize using native (non-Zone-patched) timer
-            this._resizeListener = () => {
-                this._document.documentElement.classList.add('clx-resizing');
-                if (this._resizeTimer !== null)
-                    this._nativeClearTimeout(this._resizeTimer);
-                this._resizeTimer = this._nativeSetTimeout(() => {
-                    this._document.documentElement.classList.remove('clx-resizing');
-                    this._resizeTimer = null;
-                }, 150);
-            };
-            win.addEventListener('resize', this._resizeListener, { passive: true });
-            // Sidebar hover outside NgZone — only enters zone when state actually changes
-            this._mouseEnterFn = () => {
-                if (!this.collapsed() || this._isMobile())
-                    return;
-                if (!this._hovered()) {
-                    this._zone.run(() => {
-                        this._hovered.set(true);
-                        this.expandedChange.emit(true);
-                    });
-                }
-            };
-            this._mouseLeaveFn = () => {
-                if (this._hovered()) {
-                    this._zone.run(() => {
-                        this._hovered.set(false);
-                        this.expandedChange.emit(false);
-                    });
-                }
-            };
-            // Attach after a tick so the aside is rendered (native timer — no CD)
-            this._nativeSetTimeout(() => {
-                const host = this._el.nativeElement;
-                this._sidebarEl = host.querySelector('aside');
-                if (this._sidebarEl) {
-                    this._sidebarEl.addEventListener('mouseenter', this._mouseEnterFn, { passive: true });
-                    this._sidebarEl.addEventListener('mouseleave', this._mouseLeaveFn, { passive: true });
-                }
-            }, 0);
-        });
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
-        const win = this._document.defaultView;
-        win?.removeEventListener('resize', this._resizeListener);
-        if (this._resizeTimer !== null)
-            this._nativeClearTimeout?.(this._resizeTimer);
-        if (this._sidebarEl) {
-            this._sidebarEl.removeEventListener('mouseenter', this._mouseEnterFn);
-            this._sidebarEl.removeEventListener('mouseleave', this._mouseLeaveFn);
-        }
     }
     _toggleCollapsed() {
         const next = !this.collapsed();
@@ -11900,122 +11851,144 @@ class ClxAppLayoutComponent {
         this._hovered.set(false);
         this.collapsedChange.emit(next);
     }
+    _onSidebarEnter() {
+        if (this.collapsed() && !this._isMobile()) {
+            this._hovered.set(true);
+            this.expandedChange.emit(true);
+        }
+    }
+    _onSidebarLeave() {
+        if (this._hovered()) {
+            this._hovered.set(false);
+            this.expandedChange.emit(false);
+        }
+    }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }
     openSidebar() { this._sidebarOpen.set(true); }
     closeSidebar() { this._sidebarOpen.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
-    <!-- Mobile backdrop -->
-    @if (_showBackdrop()) {
-      <div
-        class="fixed inset-0 z-20 bg-slate-900/60"
-        aria-hidden="true"
-        (click)="closeSidebar()">
-      </div>
-    }
-
-    <!-- Sidebar -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
-
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
-        <ng-content select="clx-brand"></ng-content>
-      </div>
-
-      <div class="flex flex-col flex-1 min-h-0 overflow-y-auto">
-        <ng-content select="[clx-sidebar]"></ng-content>
-      </div>
-    </aside>
-
-    <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
-
-      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <button
-          type="button"
-          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="_toggleCollapsed()">
-          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
-        </button>
-        <button
-          type="button"
-          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="toggleSidebar()">
-          <span clx-icon name="menu" size="sm"></span>
-        </button>
-
-        <ng-content select="[clx-header]"></ng-content>
-      </header>
-
-      <main class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
-        <ng-content></ng-content>
-      </main>
-
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
+      <div
+        class="fixed inset-0 z-20 bg-slate-900/60"
+        aria-hidden="true"
+        (click)="closeSidebar()">
+      </div>
+    }
+
+    <!-- Sidebar -->
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex flex-col flex-1 min-h-0">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
+    </aside>
+
+    <!-- Right panel -->
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+
+      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
+        <ng-content select="[clx-header]"></ng-content>
+      </header>
+
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+        <ng-content></ng-content>
+      </main>
+
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-app-layout',
                     standalone: true,
-                    imports: [ClxIconComponent],
-                    template: `
-    <!-- Mobile backdrop -->
-    @if (_showBackdrop()) {
-      <div
-        class="fixed inset-0 z-20 bg-slate-900/60"
-        aria-hidden="true"
-        (click)="closeSidebar()">
-      </div>
-    }
-
-    <!-- Sidebar -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
-
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
-        <ng-content select="clx-brand"></ng-content>
-      </div>
-
-      <div class="flex flex-col flex-1 min-h-0 overflow-y-auto">
-        <ng-content select="[clx-sidebar]"></ng-content>
-      </div>
-    </aside>
-
-    <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
-
-      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <button
-          type="button"
-          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="_toggleCollapsed()">
-          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
-        </button>
-        <button
-          type="button"
-          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
-          (click)="toggleSidebar()">
-          <span clx-icon name="menu" size="sm"></span>
-        </button>
-
-        <ng-content select="[clx-header]"></ng-content>
-      </header>
-
-      <main class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
-        <ng-content></ng-content>
-      </main>
-
-    </div>
+                    imports: [ClxIconComponent, CdkScrollable],
+                    template: `
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
+      <div
+        class="fixed inset-0 z-20 bg-slate-900/60"
+        aria-hidden="true"
+        (click)="closeSidebar()">
+      </div>
+    }
+
+    <!-- Sidebar -->
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
+
+      <!-- Brand slot -->
+      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+        <ng-content select="clx-brand"></ng-content>
+      </div>
+
+      <div class="flex flex-col flex-1 min-h-0">
+        <ng-content select="[clx-sidebar]"></ng-content>
+      </div>
+    </aside>
+
+    <!-- Right panel -->
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+
+      <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
+        <ng-content select="[clx-header]"></ng-content>
+      </header>
+
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+        <ng-content></ng-content>
+      </main>
+
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex h-screen overflow-hidden' },
                 }]
-        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class ClxBrandComponent {
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
@@ -12101,36 +12074,36 @@ class ClxMenuItemComponent {
         return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="rla.isActive ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="active() ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''"
-        (click)="itemClick.emit()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </button>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="rla.isActive ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="active() ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''"
+        (click)="itemClick.emit()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+        }
+      </button>
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, decorators: [{
@@ -12139,36 +12112,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-menu-item',
                     standalone: true,
                     imports: [ClxIconComponent, RouterLink, RouterLinkActive],
-                    template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="rla.isActive ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="active() ? _activeCls() : _idleCls()"
-        [title]="collapsed() ? label() : ''"
-        (click)="itemClick.emit()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-        }
-      </button>
-    }
+                    template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="rla.isActive ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="active() ? _activeCls() : _idleCls()"
+        [title]="collapsed() ? label() : ''"
+        (click)="itemClick.emit()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+        }
+      </button>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12224,61 +12197,61 @@ class ClxMenuComponent {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="_buttonCls(rla.isActive)"
-        [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="_buttonCls(active())"
-        [title]="collapsed() ? label() : ''"
-        (click)="!collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </button>
-    }
-
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="_buttonCls(rla.isActive)"
+        [title]="collapsed() ? label() : ''"
+        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="_buttonCls(active())"
+        [title]="collapsed() ? label() : ''"
+        (click)="!collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </button>
+    }
+
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, decorators: [{
@@ -12287,61 +12260,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     selector: 'clx-menu',
                     standalone: true,
                     imports: [ClxIconComponent, RouterLink, RouterLinkActive],
-                    template: `
-    @if (routerLink()) {
-      <a
-        [routerLink]="routerLink()"
-        routerLinkActive
-        #rla="routerLinkActive"
-        [routerLinkActiveOptions]="routerLinkActiveOptions()"
-        [class]="_buttonCls(rla.isActive)"
-        [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </a>
-    } @else {
-      <button
-        type="button"
-        [class]="_buttonCls(active())"
-        [title]="collapsed() ? label() : ''"
-        (click)="!collapsed() && _toggle()">
-        @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
-        }
-        @if (!collapsed()) {
-          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            class="shrink-0 transition-transform duration-300"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
-        }
-      </button>
-    }
-
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+                    template: `
+    @if (routerLink()) {
+      <a
+        [routerLink]="routerLink()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+        [class]="_buttonCls(rla.isActive)"
+        [title]="collapsed() ? label() : ''"
+        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [class]="_buttonCls(active())"
+        [title]="collapsed() ? label() : ''"
+        (click)="!collapsed() && _toggle()">
+        @if (icon()) {
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
+        }
+        @if (!collapsed()) {
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
+          <span
+            clx-icon
+            name="expand_more"
+            size="sm"
+            class="shrink-0 transition-transform duration-300"
+            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+          </span>
+        }
+      </button>
+    }
+
+    <div
+      [class]="NAV_CHILDREN_WRAPPER"
+      [style.grid-template-rows]="(!collapsed() && _isExpanded()) ? '1fr' : '0fr'">
+      <div [class]="NAV_CHILDREN_INNER">
+        <div [class]="NAV_CHILDREN_LIST">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12361,14 +12334,14 @@ class ClxNavGroupComponent {
         return c ? resolveColor(c).textSubtle : 'text-clx-text-subtle';
     }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
-    } @else {
-      <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
-      </span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (!collapsed()) {
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
+    } @else {
+      <span class="flex items-center justify-center w-full py-3">
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
+      </span>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, decorators: [{
@@ -12376,14 +12349,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-nav-group',
                     standalone: true,
-                    template: `
-    @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
-    } @else {
-      <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
-      </span>
-    }
+                    template: `
+    @if (!collapsed()) {
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
+    } @else {
+      <span class="flex items-center justify-center w-full py-3">
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
+      </span>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12870,25 +12843,20 @@ class ClxTableComponent {
     _isSelected(item) {
         return this.selectedItems().some(s => s === item);
     }
-    _headerCellClassMap = computed(() => {
-        const map = new Map();
-        for (const col of this.columns()) {
-            const align = TABLE_ALIGN_MAP[col.align || 'left'];
-            const cursor = col.sortable ? 'cursor-pointer select-none' : '';
-            const extra = col.headerClass || '';
-            map.set(col.key, `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim());
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_headerCellClassMap" }] : /* istanbul ignore next */ []));
-    _dataCellClassMap = computed(() => {
-        const map = new Map();
-        for (const col of this.columns()) {
-            const align = TABLE_ALIGN_MAP[col.align || 'left'];
-            const extra = col.cellClass || '';
-            map.set(col.key, `${TABLE_CELL_CLASS} ${align} ${extra}`.trim());
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_dataCellClassMap" }] : /* istanbul ignore next */ []));
+    _getAlignClass(align) {
+        return TABLE_ALIGN_MAP[align];
+    }
+    _getHeaderCellClass(col) {
+        const align = this._getAlignClass(col.align || 'left');
+        const cursor = col.sortable ? 'cursor-pointer select-none' : '';
+        const extra = col.headerClass || '';
+        return `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim();
+    }
+    _getDataCellClass(col) {
+        const align = this._getAlignClass(col.align || 'left');
+        const extra = col.cellClass || '';
+        return `${TABLE_CELL_CLASS} ${align} ${extra}`.trim();
+    }
     _getCellValue(item, key) {
         return item[key];
     }
@@ -12930,143 +12898,143 @@ class ClxTableComponent {
         this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
-    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading() && _filteredData().length > 0) {
-      <div class="mb-3 max-w-80 min-w-40">
-        <clx-input
-          placeholder="Buscar..."
-          size="sm"
-          suffixIcon="search"
-          [color]="_color()"
-          [(ngModel)]="searchQuery">
-        </clx-input>
-      </div>
-    }
-
-    @if (loading()) {
-      <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="space-y-3">
-        @for (row of [1, 2, 3, 4, 5]; track row) {
-          <div class="flex items-center gap-4">
-            @if (selectable()) {
-              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
-            }
-            @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
-            }
-          </div>
-        }
-      </div>
-    } @else if (_filteredData().length === 0) {
-      <!-- ── Empty State ─────────────────────────────────────────────────── -->
-      <div class="py-10">
-        <clx-page-empty
-          size="sm"
-          [icon]="emptyIcon()"
-          [title]="_emptyTitle()"
-          [description]="_emptyDescription()" />
-      </div>
-    } @else {
-      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
-        <table [class]="_tableClass()">
-          <thead>
-            <tr [class]="_headerClass()">
-              @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
-                  @if (!singleSelect()) {
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_allSelected()"
-                      (ngModelChange)="_handleSelectAll($event)">
-                    </clx-checkbox>
-                  }
-                </th>
-              }
-
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
-                <th
-                  [class]="_headerCellClassMap().get(col.key)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
-                  [style.width]="col.width"
-                  (click)="col.sortable && _handleSort(col.key)">
-                  <div class="flex items-center gap-1.5"
-                       [class.justify-end]="col.align === 'right'"
-                       [class.justify-center]="col.align === 'center'">
-                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
-                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-                    } @else {
-                      <span>{{ col.header || col.key }}</span>
-                    }
-                    @if (col.sortable) {
-                      <span class="opacity-50">
-                        @if (sortKey() === col.key && sortDir() === 'asc') {
-                          <span clx-icon name="arrow_upward" size="xs"></span>
-                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
-                          <span clx-icon name="arrow_downward" size="xs"></span>
-                        } @else {
-                          <span clx-icon name="swap_vert" size="xs"></span>
-                        }
-                      </span>
-                    }
-                  </div>
-                </th>
-              }
-            </tr>
-          </thead>
-
-          <tbody>
-            @for (item of _paginatedData(); track i; let i = $index) {
-              <tr [class]="_rowClass()">
-                @if (selectable()) {
-                  <td [class]="_cellClass()" class="text-center">
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_isSelected(item)"
-                      (ngModelChange)="_handleSelectItem(item, $event)">
-                    </clx-checkbox>
-                  </td>
-                }
-
-                @for (col of columns(); track col.key) {
-                  <td [class]="_dataCellClassMap().get(col.key)">
-                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
-                      </ng-container>
-                    } @else {
-                      {{ _getCellValue(item, col.key) }}
-                    }
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-
-      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
-      @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
-          <clx-pagination
-            size="sm"
-            [totalItems]="_totalItems()"
-            [color]="_color()"
-            [(currentPage)]="_currentPage"
-            [(pageSize)]="pageSize"
-            (pageChange)="_onPaginationPageChange($event.page)">
-          </clx-pagination>
-      </div>
-      }
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
+    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
+    @if (searchable() && !loading() && _filteredData().length > 0) {
+      <div class="mb-3 max-w-80 min-w-40">
+        <clx-input
+          placeholder="Buscar..."
+          size="sm"
+          suffixIcon="search"
+          [color]="_color()"
+          [(ngModel)]="searchQuery">
+        </clx-input>
+      </div>
+    }
+
+    @if (loading()) {
+      <!-- ── Loading State ───────────────────────────────────────────────── -->
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
+          <div class="flex items-center gap-4">
+            @if (selectable()) {
+              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
+            }
+            @for (col of columns(); track col.key) {
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
+            }
+          </div>
+        }
+      </div>
+    } @else if (_filteredData().length === 0) {
+      <!-- ── Empty State ─────────────────────────────────────────────────── -->
+      <div class="py-10">
+        <clx-page-empty
+          size="sm"
+          [icon]="emptyIcon()"
+          [title]="_emptyTitle()"
+          [description]="_emptyDescription()" />
+      </div>
+    } @else {
+      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
+      <div class="overflow-x-auto">
+        <table [class]="_tableClass()">
+          <thead>
+            <tr [class]="_headerClass()">
+              @if (selectable()) {
+                <th [class]="_headerCellClass()"
+                    [class.rounded-tl-lg]="true"
+                    [class.rounded-bl-lg]="true"
+                    class="w-10 text-center">
+                  @if (!singleSelect()) {
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_allSelected()"
+                      (ngModelChange)="_handleSelectAll($event)">
+                    </clx-checkbox>
+                  }
+                </th>
+              }
+
+              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+                <th
+                  [class]="_getHeaderCellClass(col)"
+                  [class.rounded-tl-lg]="first && !selectable()"
+                  [class.rounded-bl-lg]="first && !selectable()"
+                  [class.rounded-tr-lg]="last"
+                  [class.rounded-br-lg]="last"
+                  [style.width]="col.width"
+                  (click)="col.sortable && _handleSort(col.key)">
+                  <div class="flex items-center gap-1.5"
+                       [class.justify-end]="col.align === 'right'"
+                       [class.justify-center]="col.align === 'center'">
+                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+                    } @else {
+                      <span>{{ col.header || col.key }}</span>
+                    }
+                    @if (col.sortable) {
+                      <span class="opacity-50">
+                        @if (sortKey() === col.key && sortDir() === 'asc') {
+                          <span clx-icon name="arrow_upward" size="xs"></span>
+                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
+                          <span clx-icon name="arrow_downward" size="xs"></span>
+                        } @else {
+                          <span clx-icon name="swap_vert" size="xs"></span>
+                        }
+                      </span>
+                    }
+                  </div>
+                </th>
+              }
+            </tr>
+          </thead>
+
+          <tbody>
+            @for (item of _paginatedData(); track i; let i = $index) {
+              <tr [class]="_rowClass()">
+                @if (selectable()) {
+                  <td [class]="_cellClass()" class="text-center">
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_isSelected(item)"
+                      (ngModelChange)="_handleSelectItem(item, $event)">
+                    </clx-checkbox>
+                  </td>
+                }
+
+                @for (col of columns(); track col.key) {
+                  <td [class]="_getDataCellClass(col)">
+                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                      </ng-container>
+                    } @else {
+                      {{ _getCellValue(item, col.key) }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
+      @if (pagination()) {
+        <div class="border-t border-clx-border-soft pt-3">
+          <clx-pagination
+            size="sm"
+            [totalItems]="_totalItems()"
+            [color]="_color()"
+            [(currentPage)]="_currentPage"
+            [(pageSize)]="pageSize"
+            (pageChange)="_onPaginationPageChange($event.page)">
+          </clx-pagination>
+      </div>
+      }
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor", "size"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, decorators: [{
@@ -13084,143 +13052,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxPaginationComponent,
                         ClxPageEmptyComponent,
                     ],
-                    template: `
-    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading() && _filteredData().length > 0) {
-      <div class="mb-3 max-w-80 min-w-40">
-        <clx-input
-          placeholder="Buscar..."
-          size="sm"
-          suffixIcon="search"
-          [color]="_color()"
-          [(ngModel)]="searchQuery">
-        </clx-input>
-      </div>
-    }
-
-    @if (loading()) {
-      <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="space-y-3">
-        @for (row of [1, 2, 3, 4, 5]; track row) {
-          <div class="flex items-center gap-4">
-            @if (selectable()) {
-              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
-            }
-            @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
-            }
-          </div>
-        }
-      </div>
-    } @else if (_filteredData().length === 0) {
-      <!-- ── Empty State ─────────────────────────────────────────────────── -->
-      <div class="py-10">
-        <clx-page-empty
-          size="sm"
-          [icon]="emptyIcon()"
-          [title]="_emptyTitle()"
-          [description]="_emptyDescription()" />
-      </div>
-    } @else {
-      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
-        <table [class]="_tableClass()">
-          <thead>
-            <tr [class]="_headerClass()">
-              @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
-                  @if (!singleSelect()) {
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_allSelected()"
-                      (ngModelChange)="_handleSelectAll($event)">
-                    </clx-checkbox>
-                  }
-                </th>
-              }
-
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
-                <th
-                  [class]="_headerCellClassMap().get(col.key)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
-                  [style.width]="col.width"
-                  (click)="col.sortable && _handleSort(col.key)">
-                  <div class="flex items-center gap-1.5"
-                       [class.justify-end]="col.align === 'right'"
-                       [class.justify-center]="col.align === 'center'">
-                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
-                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-                    } @else {
-                      <span>{{ col.header || col.key }}</span>
-                    }
-                    @if (col.sortable) {
-                      <span class="opacity-50">
-                        @if (sortKey() === col.key && sortDir() === 'asc') {
-                          <span clx-icon name="arrow_upward" size="xs"></span>
-                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
-                          <span clx-icon name="arrow_downward" size="xs"></span>
-                        } @else {
-                          <span clx-icon name="swap_vert" size="xs"></span>
-                        }
-                      </span>
-                    }
-                  </div>
-                </th>
-              }
-            </tr>
-          </thead>
-
-          <tbody>
-            @for (item of _paginatedData(); track i; let i = $index) {
-              <tr [class]="_rowClass()">
-                @if (selectable()) {
-                  <td [class]="_cellClass()" class="text-center">
-                    <clx-checkbox
-                      [color]="_color()"
-                      [ngModel]="_isSelected(item)"
-                      (ngModelChange)="_handleSelectItem(item, $event)">
-                    </clx-checkbox>
-                  </td>
-                }
-
-                @for (col of columns(); track col.key) {
-                  <td [class]="_dataCellClassMap().get(col.key)">
-                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
-                      </ng-container>
-                    } @else {
-                      {{ _getCellValue(item, col.key) }}
-                    }
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-
-      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
-      @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
-          <clx-pagination
-            size="sm"
-            [totalItems]="_totalItems()"
-            [color]="_color()"
-            [(currentPage)]="_currentPage"
-            [(pageSize)]="pageSize"
-            (pageChange)="_onPaginationPageChange($event.page)">
-          </clx-pagination>
-      </div>
-      }
-    }
+                    template: `
+    <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
+    @if (searchable() && !loading() && _filteredData().length > 0) {
+      <div class="mb-3 max-w-80 min-w-40">
+        <clx-input
+          placeholder="Buscar..."
+          size="sm"
+          suffixIcon="search"
+          [color]="_color()"
+          [(ngModel)]="searchQuery">
+        </clx-input>
+      </div>
+    }
+
+    @if (loading()) {
+      <!-- ── Loading State ───────────────────────────────────────────────── -->
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
+          <div class="flex items-center gap-4">
+            @if (selectable()) {
+              <clx-skeleton variant="circular" size="xs"></clx-skeleton>
+            }
+            @for (col of columns(); track col.key) {
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
+            }
+          </div>
+        }
+      </div>
+    } @else if (_filteredData().length === 0) {
+      <!-- ── Empty State ─────────────────────────────────────────────────── -->
+      <div class="py-10">
+        <clx-page-empty
+          size="sm"
+          [icon]="emptyIcon()"
+          [title]="_emptyTitle()"
+          [description]="_emptyDescription()" />
+      </div>
+    } @else {
+      <!-- ── Tabla ───────────────────────────────────────────────────────── -->
+      <div class="overflow-x-auto">
+        <table [class]="_tableClass()">
+          <thead>
+            <tr [class]="_headerClass()">
+              @if (selectable()) {
+                <th [class]="_headerCellClass()"
+                    [class.rounded-tl-lg]="true"
+                    [class.rounded-bl-lg]="true"
+                    class="w-10 text-center">
+                  @if (!singleSelect()) {
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_allSelected()"
+                      (ngModelChange)="_handleSelectAll($event)">
+                    </clx-checkbox>
+                  }
+                </th>
+              }
+
+              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+                <th
+                  [class]="_getHeaderCellClass(col)"
+                  [class.rounded-tl-lg]="first && !selectable()"
+                  [class.rounded-bl-lg]="first && !selectable()"
+                  [class.rounded-tr-lg]="last"
+                  [class.rounded-br-lg]="last"
+                  [style.width]="col.width"
+                  (click)="col.sortable && _handleSort(col.key)">
+                  <div class="flex items-center gap-1.5"
+                       [class.justify-end]="col.align === 'right'"
+                       [class.justify-center]="col.align === 'center'">
+                    @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+                    } @else {
+                      <span>{{ col.header || col.key }}</span>
+                    }
+                    @if (col.sortable) {
+                      <span class="opacity-50">
+                        @if (sortKey() === col.key && sortDir() === 'asc') {
+                          <span clx-icon name="arrow_upward" size="xs"></span>
+                        } @else if (sortKey() === col.key && sortDir() === 'desc') {
+                          <span clx-icon name="arrow_downward" size="xs"></span>
+                        } @else {
+                          <span clx-icon name="swap_vert" size="xs"></span>
+                        }
+                      </span>
+                    }
+                  </div>
+                </th>
+              }
+            </tr>
+          </thead>
+
+          <tbody>
+            @for (item of _paginatedData(); track i; let i = $index) {
+              <tr [class]="_rowClass()">
+                @if (selectable()) {
+                  <td [class]="_cellClass()" class="text-center">
+                    <clx-checkbox
+                      [color]="_color()"
+                      [ngModel]="_isSelected(item)"
+                      (ngModelChange)="_handleSelectItem(item, $event)">
+                    </clx-checkbox>
+                  </td>
+                }
+
+                @for (col of columns(); track col.key) {
+                  <td [class]="_getDataCellClass(col)">
+                    @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                      </ng-container>
+                    } @else {
+                      {{ _getCellValue(item, col.key) }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
+      @if (pagination()) {
+        <div class="border-t border-clx-border-soft pt-3">
+          <clx-pagination
+            size="sm"
+            [totalItems]="_totalItems()"
+            [color]="_color()"
+            [(currentPage)]="_currentPage"
+            [(pageSize)]="pageSize"
+            (pageChange)="_onPaginationPageChange($event.page)">
+          </clx-pagination>
+      </div>
+      }
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,