codexly-ui 0.5.6 → 0.5.7

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, contentChild, forwardRef, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
@@ -655,6 +655,24 @@ const BADGE_SHAPE_FIXED = {
     circle: 'rounded-full',
 };
 
+// ── Context ───────────────────────────────────────────────────────────────────
+/** Provided by clx-card so nested form controls/buttons can inherit its disabled state. */
+const CLX_CARD_DISABLED_CONTEXT = new InjectionToken('CLX_CARD_DISABLED_CONTEXT');
+const CARD_PADDING_MAP = {
+    none: '',
+    sm: 'p-2',
+    md: 'p-3',
+    lg: 'p-5',
+};
+const CARD_SHADOW_MAP = {
+    none: 'shadow-none',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    '2xl': 'shadow-2xl',
+};
+
 const SPINNER_SIZE_MAP = {
     xxs: 'w-3 h-3   border-2',
     xs: 'w-4 h-4   border-2',
@@ -788,7 +806,8 @@ class ClxButtonComponent {
      *  necessarily painted yet when the constructor runs — otherwise any consumer-supplied
      *  classes (e.g. positioning utilities like `absolute`/`top-1`) would be silently lost. */
     _consumerClass = inject(new HostAttributeToken('class'), { optional: true }) ?? '';
-    _inactive = computed(() => this.loading() || this.disabled(), ...(ngDevMode ? [{ debugName: "_inactive" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _inactive = computed(() => this.loading() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_inactive" }] : /* istanbul ignore next */ []));
     _badgeClass = computed(() => {
         const t = resolveColor(this.badgeColor());
         const size = BADGE_CIRCLE_SIZE_MAP['xs'];
@@ -1208,21 +1227,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 
-const CARD_PADDING_MAP = {
-    none: '',
-    sm: 'p-2',
-    md: 'p-3',
-    lg: 'p-5',
-};
-const CARD_SHADOW_MAP = {
-    none: 'shadow-none',
-    sm: 'shadow-sm',
-    md: 'shadow-md',
-    lg: 'shadow-lg',
-    xl: 'shadow-xl',
-    '2xl': 'shadow-2xl',
-};
-
 class ClxCardHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardHeaderDirective, isStandalone: true, selector: "[clxCardHeader]", ngImport: i0 });
@@ -1234,20 +1238,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 class ClxCardBodyDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardBodyDirective, isStandalone: true, selector: "[clxCardBody]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardBodyDirective, isStandalone: true, selector: "[clxCardBody]", providers: [
+            {
+                provide: CLX_CARD_DISABLED_CONTEXT,
+                useFactory: () => inject(forwardRef(() => ClxCardComponent)).disabled,
+            },
+        ], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardBodyDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[clxCardBody]', standalone: true }]
+            args: [{
+                    selector: '[clxCardBody]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: CLX_CARD_DISABLED_CONTEXT,
+                            useFactory: () => inject(forwardRef(() => ClxCardComponent)).disabled,
+                        },
+                    ],
+                }]
         }] });
 
 class ClxCardFooterDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardFooterDirective, isStandalone: true, selector: "[clxCardFooter]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardFooterDirective, isStandalone: true, selector: "[clxCardFooter]", providers: [
+            {
+                provide: CLX_CARD_DISABLED_CONTEXT,
+                useFactory: () => inject(forwardRef(() => ClxCardComponent)).disabled,
+            },
+        ], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardFooterDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[clxCardFooter]', standalone: true }]
+            args: [{
+                    selector: '[clxCardFooter]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: CLX_CARD_DISABLED_CONTEXT,
+                            useFactory: () => inject(forwardRef(() => ClxCardComponent)).disabled,
+                        },
+                    ],
+                }]
         }] });
 
 class ClxCardComponent {
@@ -1257,6 +1289,7 @@ class ClxCardComponent {
     padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _bodySlot = contentChild(ClxCardBodyDirective, ...(ngDevMode ? [{ debugName: "_bodySlot" }] : /* istanbul ignore next */ []));
@@ -1286,10 +1319,11 @@ class ClxCardComponent {
             const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
             variantClass = `bg-clx-surface-2 border border-transparent ${shadowClass}`;
         }
-        return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover}`.trim();
+        const disabledCls = this.disabled() ? 'opacity-50 pointer-events-none' : '';
+        return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover} ${disabledCls}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <ng-content select="[clxCardHeader]" />
@@ -1318,7 +1352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': '_hostClass()' },
+                    host: {
+                        '[class]': '_hostClass()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                    },
                     template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
@@ -1340,7 +1377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
@@ -2623,7 +2660,8 @@ class ClxInputComponent {
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -2972,8 +3010,9 @@ class ClxTextareaComponent {
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _themeSvc = inject(ClxThemeService);
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -3239,8 +3278,9 @@ class ClxNumberComponent {
     // ── Internal state ───────────────────────────────────────────────────────
     _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -3611,6 +3651,7 @@ class ClxSelectComponent {
     _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
     _selectedVals = signal([], ...(ngDevMode ? [{ debugName: "_selectedVals" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     // ── DI ─────────────────────────────────────────────────────────────────────
     _themeSvc = inject(ClxThemeService);
     _ngControl = inject(NgControl, { optional: true, self: true });
@@ -3654,7 +3695,7 @@ class ClxSelectComponent {
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
     ];
     // ── Computed ───────────────────────────────────────────────────────────────
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => SELECT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _hasValue = computed(() => this._selectedVals().length > 0, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
     _isInvalid = computed(() => this._wasTouched() && (this._ngControl?.control?.invalid ?? false), ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
@@ -3821,147 +3862,147 @@ 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
-            type="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
-          type="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
+            type="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
+          type="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.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.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: [{
@@ -3970,147 +4011,147 @@ 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
-            type="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
-          type="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
+            type="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
+          type="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,
@@ -4141,8 +4182,9 @@ class ClxCheckboxComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     _checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -4288,8 +4330,9 @@ class ClxRadioGroupComponent {
     /** Current selected value — readable by child clx-radio via injection */
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     /** Merged disabled state (input + CVA) — readable by child clx-radio */
-    isDisabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
     select(value) {
@@ -4476,8 +4519,9 @@ class ClxSwitchComponent {
     changed = output();
     _checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -4624,11 +4668,12 @@ class ClxSliderComponent {
     // ── Internal state ───────────────────────────────────────────────────────────
     _currentValue = signal(0, ...(ngDevMode ? [{ debugName: "_currentValue" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : /* istanbul ignore next */ []));
     _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
     _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
     // ── Computed ─────────────────────────────────────────────────────────────────
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => SLIDER_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _colorTokens = computed(() => resolveColor(this._isInvalid() ? 'red' : this._activeColor()), ...(ngDevMode ? [{ debugName: "_colorTokens" }] : /* istanbul ignore next */ []));
     _pct = computed(() => {
@@ -4982,6 +5027,7 @@ class ClxUploadComponent {
     _ngControl = inject(NgControl, { optional: true, self: true });
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _onChange = () => { };
     _onTouched = () => { };
     // ── Template refs ──────────────────────────────────────────────────────────
@@ -4991,7 +5037,7 @@ class ClxUploadComponent {
             this._ngControl.valueAccessor = this;
     }
     // ── Computed ───────────────────────────────────────────────────────────────
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => UPLOAD_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _isError = computed(() => this._errorKey() !== null, ...(ngDevMode ? [{ debugName: "_isError" }] : /* istanbul ignore next */ []));
     _thumbClass = computed(() => `relative group flex flex-col ${resolveRadius(this._themeSvc.config().borderRadius)} border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
@@ -5650,6 +5696,7 @@ class ClxColorPickerComponent {
     _sso = inject(ScrollStrategyOptions);
     _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _scrollStrategy = this._sso.reposition();
     _onChange = () => { };
     _onTouched = () => { };
@@ -5673,7 +5720,7 @@ class ClxColorPickerComponent {
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
     ];
     // ── Computed ───────────────────────────────────────────────────────────────
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => COLOR_PICKER_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _hasValue = computed(() => this._hasColor(), ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
     _isInvalid = computed(() => this._wasTouched() && (this._ngControl?.control?.invalid ?? false), ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
@@ -6255,8 +6302,9 @@ class ClxDatepickerComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _cursorYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "_cursorYear" }] : /* istanbul ignore next */ []));
     _cursorMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "_cursorMonth" }] : /* istanbul ignore next */ []));
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
@@ -6681,13 +6729,14 @@ class ClxTimepickerComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
             untracked(() => { this._value.set(v); });
     }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     _hours = HOURS;
     _minutes = MINUTES;
@@ -7033,7 +7082,8 @@ class ClxDateRangePickerComponent {
     _presets = DATE_PRESETS;
     _dayLabels = DAY_LABELS;
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     // Cursor: left calendar month
     _cursorYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "_cursorYear" }] : /* istanbul ignore next */ []));
@@ -8076,7 +8126,8 @@ class ClxEditorComponent {
     _headingCtrl = new FormControl('p');
     // ── State ─────────────────────────────────────────────────────────────────
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
-    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : /* istanbul ignore next */ []));
     _sourceMode = signal(false, ...(ngDevMode ? [{ debugName: "_sourceMode" }] : /* istanbul ignore next */ []));
     _sourceValue = signal('', ...(ngDevMode ? [{ debugName: "_sourceValue" }] : /* istanbul ignore next */ []));