codexly-ui 0.22.0 → 0.23.0

package/fesm2022/codexly-ui.mjs

@@ -5746,6 +5746,8 @@ class ClxSelectComponent {
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Este campo es requerido', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Multiple mode: "Seleccionar todos" / "Quitar todos" on top of the options. */
+    selectAll = input(true, ...(ngDevMode ? [{ debugName: "selectAll" }] : /* istanbul ignore next */ []));
     // ── Async / autocomplete ────────────────────────────────────────────────────
     async = input(false, ...(ngDevMode ? [{ debugName: "async" }] : /* istanbul ignore next */ []));
     loadOptions = input(null, ...(ngDevMode ? [{ debugName: "loadOptions" }] : /* istanbul ignore next */ []));
@@ -5957,6 +5959,21 @@ class ClxSelectComponent {
             this._closePanel();
         }
     }
+    _selectableFiltered = computed(() => this._filteredOptions().filter(o => !o.disabled), ...(ngDevMode ? [{ debugName: "_selectableFiltered" }] : /* istanbul ignore next */ []));
+    _allFilteredSelected = computed(() => {
+        const selected = this._selectedVals();
+        return this._selectableFiltered().every(o => selected.includes(o.value));
+    }, ...(ngDevMode ? [{ debugName: "_allFilteredSelected" }] : /* istanbul ignore next */ []));
+    /** Selects every option the search shows, or removes them all when they already are. */
+    _toggleAll() {
+        const values = this._selectableFiltered().map(o => o.value);
+        const current = this._selectedVals();
+        const next = this._allFilteredSelected()
+            ? current.filter(v => !values.includes(v))
+            : [...current, ...values.filter(v => !current.includes(v))];
+        this._selectedVals.set(next);
+        this._onChange(next);
+    }
     _deselect(value) {
         const next = this._selectedVals().filter(v => v !== value);
         this._selectedVals.set(next);
@@ -6003,7 +6020,7 @@ 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: `
+    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 }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", 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>
     }
@@ -6118,6 +6135,17 @@ class ClxSelectComponent {
           } @else if (_filteredOptions().length === 0) {
             <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
           } @else {
+            <!-- "Seleccionar todos" over the options the search shows (multiple only) -->
+            @if (multiple() && selectAll() && _selectableFiltered().length > 1) {
+              <button
+                type="button"
+                class="w-full flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg text-clx-text-muted hover:bg-clx-surface-2 cursor-pointer"
+                (mousedown)="$event.preventDefault()"
+                (click)="_toggleAll()">
+                <span clx-icon [name]="_allFilteredSelected() ? 'remove_done' : 'done_all'" size="xs" class="shrink-0"></span>
+                <span class="flex-1 text-left">{{ _allFilteredSelected() ? 'Quitar todos' : 'Seleccionar todos' }}</span>
+              </button>
+            }
             @for (opt of _filteredOptions(); track opt.value) {
               <button
                 type="button"
@@ -6269,6 +6297,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           } @else if (_filteredOptions().length === 0) {
             <div class="px-3 py-4 text-center text-sm text-clx-text-subtle">Sin resultados</div>
           } @else {
+            <!-- "Seleccionar todos" over the options the search shows (multiple only) -->
+            @if (multiple() && selectAll() && _selectableFiltered().length > 1) {
+              <button
+                type="button"
+                class="w-full flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg text-clx-text-muted hover:bg-clx-surface-2 cursor-pointer"
+                (mousedown)="$event.preventDefault()"
+                (click)="_toggleAll()">
+                <span clx-icon [name]="_allFilteredSelected() ? 'remove_done' : 'done_all'" size="xs" class="shrink-0"></span>
+                <span class="flex-1 text-left">{{ _allFilteredSelected() ? 'Quitar todos' : 'Seleccionar todos' }}</span>
+              </button>
+            }
             @for (opt of _filteredOptions(); track opt.value) {
               <button
                 type="button"
@@ -6302,7 +6341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex flex-col gap-1.5 w-full' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], async: [{ type: i0.Input, args: [{ isSignal: true, alias: "async", required: false }] }], loadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadOptions", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], onEscape: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], async: [{ type: i0.Input, args: [{ isSignal: true, alias: "async", required: false }] }], loadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadOptions", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['keydown.escape']
             }] } });
@@ -10978,7 +11017,7 @@ class ClxEditorComponent {
     } @else if (hint()) {
       <p [class]="_sizeCfg().hint + ' text-gray-400'">{{ hint() }}</p>
     }
-  `, isInline: true, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\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", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\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", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "selectAll", "async", "loadOptions", "debounceMs", "minChars"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorComponent, decorators: [{
             type: Component,
@@ -14284,7 +14323,7 @@ class ClxPaginationComponent {
       }
 
     </div>
-  `, isInline: true, dependencies: [{ 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: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ 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: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "selectAll", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPaginationComponent, decorators: [{
             type: Component,
@@ -14655,7 +14694,7 @@ class ClxFilterPanelComponent {
       </div>
     }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned", "textColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned", "textColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "selectAll", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
             type: Component,
@@ -17419,6 +17458,10 @@ class ClxProductTagService {
     badgesFor(ctx) {
         const styles = this._styles() ?? [];
         const manual = new Set(ctx.tags);
+        const units = ctx.stockQuantity;
+        const low = styles.find(s => s.kind === 'LOW_STOCK');
+        // "Últimas unidades" replaces "N en stock" — both would say the same.
+        const isLow = !!low && ctx.inStock && units != null && units > 0 && units <= (low.stockThreshold ?? 0);
         const out = [];
         for (const s of styles) {
             let n = null;
@@ -17428,9 +17471,14 @@ class ClxProductTagService {
                         continue;
                     break;
                 case 'STOCK':
-                    if (!ctx.inStock || ctx.stockQuantity == null)
+                    if (!ctx.showStockCount || !ctx.inStock || units == null || isLow)
                         continue;
-                    n = ctx.stockQuantity;
+                    n = units;
+                    break;
+                case 'LOW_STOCK':
+                    if (!isLow)
+                        continue;
+                    n = units;
                     break;
                 case 'OUT_OF_STOCK':
                     if (ctx.inStock)
@@ -17567,7 +17615,9 @@ class ClxProductComponent {
     _badges = computed(() => {
         const p = this.product();
         return p
-            ? this._tagSvc.badgesFor({ tags: p.tags ?? [], inStock: p.in_stock, discountPercent: this._discountPct() })
+            ? this._tagSvc.badgesFor({
+                tags: p.tags ?? [], inStock: p.in_stock, stockQuantity: p.stock_quantity, discountPercent: this._discountPct(),
+            })
             : [];
     }, ...(ngDevMode ? [{ debugName: "_badges" }] : /* istanbul ignore next */ []));
     _disabled = computed(() => !this.product()?.in_stock, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
@@ -18177,6 +18227,7 @@ class ClxProductDetailComponent {
             tags: p.tags ?? [],
             inStock: v.in_stock,
             stockQuantity: v.stock_quantity,
+            showStockCount: true,
             discountPercent: p.has_discount ? this.discount() : 0,
         });
     }, ...(ngDevMode ? [{ debugName: "_badges" }] : /* istanbul ignore next */ []));
@@ -18667,7 +18718,7 @@ class ClxWishlistComponent {
       }
 
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned", "textColor"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "borderColor", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { 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: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned", "textColor"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "borderColor", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { 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: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "selectAll", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWishlistComponent, decorators: [{
             type: Component,
@@ -19681,9 +19732,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 let _clxSearchIdCounter = 0;
 /** Storefront search bar — same color/size/CVA conventions as ClxInputComponent, but styled as
  *  one continuous pill (input fused with a solid search button) rather than a bordered field with
- *  a detached button, matching how e-commerce header search boxes are typically laid out. */
+ *  a detached button, matching how e-commerce header search boxes are typically laid out.
+ *
+ *  Optional autocomplete: the host listens to (queryChange) — the text, debounced, once it has
+ *  `minChars` — and feeds [suggestions] back (product rows with image and price, shortcuts, past
+ *  searches, a "¿Quisiste decir…?" correction, the result total). The panel opens under the bar,
+ *  supports ↑ ↓ Enter Esc, and reports picks through (suggestionSelect); Enter without a picked row,
+ *  the button, the correction and "Ver todos" emit (search). With [openOnFocus] the panel also shows
+ *  for an empty box (e.g. recent searches). */
 class ClxSearchComponent {
     _themeSvc = inject(ClxThemeService);
+    _el = inject((ElementRef));
+    _sso = inject(ScrollStrategyOptions);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     /** Overrides only the search button's text color — see ClxButtonComponent's textColor input. */
@@ -19696,13 +19756,45 @@ class ClxSearchComponent {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Disabled state for standalone use (without FormControl) */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Autocomplete content for the current text; null = no panel. */
+    suggestions = input(null, ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** The host is fetching suggestions. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** (queryChange) waits this long after the last keystroke. */
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /** (queryChange) only from this many characters (0 = also for an empty box). */
+    minChars = input(2, ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+    /** Show the panel when focusing an empty box (recent searches…). */
+    openOnFocus = input(false, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     search = output();
+    /** Debounced text for the host to fetch suggestions for ('' when cleared). */
+    queryChange = output();
+    suggestionSelect = output();
     _inputId = `clx-search-${++_clxSearchIdCounter}`;
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _dismissed = signal(false, ...(ngDevMode ? [{ debugName: "_dismissed" }] : /* istanbul ignore next */ []));
+    _active = signal(null, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _debounce;
     _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6 },
+    ];
+    /** Flat list of the panel's rows, for ↑ ↓. */
+    _rows = computed(() => (this.suggestions()?.groups ?? [])
+        .flatMap(g => g.items.map(item => ({ group: g.key, item }))), ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    _panelOpen = computed(() => {
+        if (!this._focused() || this._dismissed() || this._disabled())
+            return false;
+        const s = this.suggestions();
+        const hasContent = !!s && (!!s.correction || s.groups.some(g => g.items.length > 0));
+        return hasContent && (this._value().trim().length > 0 || this.openOnFocus());
+    }, ...(ngDevMode ? [{ debugName: "_panelOpen" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -19710,6 +19802,9 @@ class ClxSearchComponent {
     }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this._debounce));
+    }
     _sizeConfig = computed(() => INPUT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _buttonSize = computed(() => {
         switch (this._size()) {
@@ -19718,6 +19813,7 @@ class ClxSearchComponent {
             default: return 'md';
         }
     }, ...(ngDevMode ? [{ debugName: "_buttonSize" }] : /* istanbul ignore next */ []));
+    _accentText = computed(() => resolveColor(this._color()).textEmphasis, ...(ngDevMode ? [{ debugName: "_accentText" }] : /* istanbul ignore next */ []));
     _wrapperClass = computed(() => {
         const focusCls = this._disabled() ? '' : resolveColor(this._color()).focusWithin;
         return `relative flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border border-clx-border ${focusCls} overflow-hidden transition-[border-color,box-shadow] duration-200`;
@@ -19746,34 +19842,106 @@ class ClxSearchComponent {
         const val = event.target.value;
         this._value.set(val);
         this._onChange(val);
+        this._dismissed.set(false);
+        this._active.set(null);
+        this._emitQuery(val);
+    }
+    _handleFocus() {
+        this._panelWidth.set(Math.round(this._el.nativeElement.getBoundingClientRect().width));
+        this._focused.set(true);
+        this._dismissed.set(false);
+        if (this.openOnFocus() && !this._value().trim())
+            this.queryChange.emit('');
     }
     _handleBlur() {
         this._onTouched();
+        this._focused.set(false);
+    }
+    _handleKeydown(event) {
+        const rows = this._rows();
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!this._panelOpen() || !rows.length)
+                return;
+            event.preventDefault();
+            const current = this._active();
+            const index = current ? rows.findIndex(r => r.group === current.group && r.item.id === current.id) : -1;
+            const next = event.key === 'ArrowDown'
+                ? (index + 1) % rows.length
+                : (index <= 0 ? rows.length - 1 : index - 1);
+            this._active.set({ group: rows[next].group, id: rows[next].item.id });
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const current = this._active();
+            const row = current && this._panelOpen()
+                ? rows.find(r => r.group === current.group && r.item.id === current.id)
+                : undefined;
+            if (row)
+                this._select(row.group, row.item);
+            else
+                this._handleSubmit();
+        }
+        else if (event.key === 'Escape') {
+            this._close();
+        }
+    }
+    _isActive(group, item) {
+        const a = this._active();
+        return !!a && a.group === group && a.id === item.id;
+    }
+    _activate(group, item) {
+        this._active.set({ group, id: item.id });
+    }
+    _select(group, item) {
+        this._close();
+        this.suggestionSelect.emit({ group, item });
+    }
+    _searchFor(text) {
+        this._value.set(text);
+        this._onChange(text);
+        this._handleSubmit();
+    }
+    _close() {
+        this._dismissed.set(true);
+        this._active.set(null);
     }
     _handleSubmit() {
         if (this._disabled())
             return;
+        this._close();
+        clearTimeout(this._debounce);
         this.search.emit(this._value());
     }
+    _emitQuery(val) {
+        clearTimeout(this._debounce);
+        const text = val.trim();
+        if (text.length > 0 && text.length < this.minChars())
+            return;
+        this._debounce = setTimeout(() => this.queryChange.emit(text), text ? this.debounceMs() : 0);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxSearchComponent, isStandalone: true, selector: "clx-search", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, buttonTextColor: { classPropertyName: "buttonTextColor", publicName: "buttonTextColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search" }, host: { classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSearchComponent, isStandalone: true, selector: "clx-search", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, buttonTextColor: { classPropertyName: "buttonTextColor", publicName: "buttonTextColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", 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 }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", queryChange: "queryChange", suggestionSelect: "suggestionSelect" }, host: { classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxSearchComponent),
                 multi: true,
             },
         ], ngImport: i0, template: `
-    <div [class]="_wrapperClass()">
+    <div [class]="_wrapperClass()" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       <input
         [id]="_inputId"
         type="search"
+        role="combobox"
+        [attr.aria-expanded]="_panelOpen()"
+        [attr.aria-controls]="_inputId + '-panel'"
         [placeholder]="placeholder()"
         [disabled]="_disabled()"
         [value]="_value()"
         [class]="_inputClass()"
         autocomplete="off"
         (input)="_handleInput($event)"
-        (keydown.enter)="_handleSubmit()"
+        (focus)="_handleFocus()"
+        (keydown)="_handleKeydown($event)"
         (blur)="_handleBlur()"
       />
       <button
@@ -19790,14 +19958,77 @@ class ClxSearchComponent {
         {{ buttonLabel() }}
       </button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_panelOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_panelWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()">
+      <div [id]="_inputId + '-panel'" role="listbox"
+           class="w-full max-h-[70vh] overflow-y-auto bg-clx-surface rounded-xl shadow-xl border border-clx-border py-2"
+           (mousedown)="$event.preventDefault()">
+        @if (loading()) {
+          <div class="flex items-center gap-2 px-4 py-2 text-xs text-clx-text-subtle">
+            <clx-spinner size="xs" [color]="_color()" /> Buscando…
+          </div>
+        }
+        @if (suggestions()?.correction; as correction) {
+          <button type="button" class="w-full text-left px-4 py-2 text-sm text-clx-text-muted hover:bg-clx-surface-2"
+                  (click)="_searchFor(correction)">
+            ¿Quisiste decir <span class="font-semibold" [class]="_accentText()">{{ correction }}</span>?
+          </button>
+        }
+        @for (group of suggestions()?.groups ?? []; track group.key) {
+          @if (group.items.length) {
+            <p class="px-4 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-clx-text-subtle">{{ group.title }}</p>
+            @for (item of group.items; track item.id) {
+              <button type="button" role="option"
+                      [attr.aria-selected]="_isActive(group.key, item)"
+                      class="w-full flex items-center gap-3 px-4 py-2 text-left transition-colors"
+                      [class]="_isActive(group.key, item) ? 'bg-clx-surface-2' : 'hover:bg-clx-surface-2'"
+                      (mouseenter)="_activate(group.key, item)"
+                      (click)="_select(group.key, item)">
+                @if (item.image) {
+                  <img [src]="item.image" [alt]="item.label" class="w-10 h-10 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+                } @else if (item.icon) {
+                  <span class="w-8 h-8 rounded-lg bg-clx-surface-2 flex items-center justify-center shrink-0">
+                    <span clx-icon [name]="item.icon" size="sm" class="text-clx-text-muted"></span>
+                  </span>
+                }
+                <span class="flex-1 min-w-0">
+                  <span class="block text-sm text-clx-text-label truncate">{{ item.label }}</span>
+                  @if (item.sublabel) {
+                    <span class="block text-xs text-clx-text-subtle truncate">{{ item.sublabel }}</span>
+                  }
+                </span>
+                @if (item.meta) {
+                  <span class="text-sm font-semibold text-clx-text-label shrink-0">{{ item.meta }}</span>
+                }
+              </button>
+            }
+          }
+        }
+        @if (_value().trim() && suggestions()?.total) {
+          <button type="button" class="w-full text-left px-4 pt-3 pb-1 text-sm font-semibold" [class]="_accentText()"
+                  (click)="_handleSubmit()">
+            Ver los {{ suggestions()!.total }} resultados de “{{ _value().trim() }}”
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, 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: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { 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: ClxSearchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-search',
                     standalone: true,
-                    imports: [ClxButtonComponent],
+                    imports: [OverlayModule, ClxButtonComponent, ClxIconComponent, ClxSpinnerComponent],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -19806,17 +20037,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         },
                     ],
                     template: `
-    <div [class]="_wrapperClass()">
+    <div [class]="_wrapperClass()" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       <input
         [id]="_inputId"
         type="search"
+        role="combobox"
+        [attr.aria-expanded]="_panelOpen()"
+        [attr.aria-controls]="_inputId + '-panel'"
         [placeholder]="placeholder()"
         [disabled]="_disabled()"
         [value]="_value()"
         [class]="_inputClass()"
         autocomplete="off"
         (input)="_handleInput($event)"
-        (keydown.enter)="_handleSubmit()"
+        (focus)="_handleFocus()"
+        (keydown)="_handleKeydown($event)"
         (blur)="_handleBlur()"
       />
       <button
@@ -19833,6 +20068,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         {{ buttonLabel() }}
       </button>
     </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_panelOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_panelWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()">
+      <div [id]="_inputId + '-panel'" role="listbox"
+           class="w-full max-h-[70vh] overflow-y-auto bg-clx-surface rounded-xl shadow-xl border border-clx-border py-2"
+           (mousedown)="$event.preventDefault()">
+        @if (loading()) {
+          <div class="flex items-center gap-2 px-4 py-2 text-xs text-clx-text-subtle">
+            <clx-spinner size="xs" [color]="_color()" /> Buscando…
+          </div>
+        }
+        @if (suggestions()?.correction; as correction) {
+          <button type="button" class="w-full text-left px-4 py-2 text-sm text-clx-text-muted hover:bg-clx-surface-2"
+                  (click)="_searchFor(correction)">
+            ¿Quisiste decir <span class="font-semibold" [class]="_accentText()">{{ correction }}</span>?
+          </button>
+        }
+        @for (group of suggestions()?.groups ?? []; track group.key) {
+          @if (group.items.length) {
+            <p class="px-4 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-clx-text-subtle">{{ group.title }}</p>
+            @for (item of group.items; track item.id) {
+              <button type="button" role="option"
+                      [attr.aria-selected]="_isActive(group.key, item)"
+                      class="w-full flex items-center gap-3 px-4 py-2 text-left transition-colors"
+                      [class]="_isActive(group.key, item) ? 'bg-clx-surface-2' : 'hover:bg-clx-surface-2'"
+                      (mouseenter)="_activate(group.key, item)"
+                      (click)="_select(group.key, item)">
+                @if (item.image) {
+                  <img [src]="item.image" [alt]="item.label" class="w-10 h-10 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+                } @else if (item.icon) {
+                  <span class="w-8 h-8 rounded-lg bg-clx-surface-2 flex items-center justify-center shrink-0">
+                    <span clx-icon [name]="item.icon" size="sm" class="text-clx-text-muted"></span>
+                  </span>
+                }
+                <span class="flex-1 min-w-0">
+                  <span class="block text-sm text-clx-text-label truncate">{{ item.label }}</span>
+                  @if (item.sublabel) {
+                    <span class="block text-xs text-clx-text-subtle truncate">{{ item.sublabel }}</span>
+                  }
+                </span>
+                @if (item.meta) {
+                  <span class="text-sm font-semibold text-clx-text-label shrink-0">{{ item.meta }}</span>
+                }
+              </button>
+            }
+          }
+        }
+        @if (_value().trim() && suggestions()?.total) {
+          <button type="button" class="w-full text-left px-4 pt-3 pb-1 text-sm font-semibold" [class]="_accentText()"
+                  (click)="_handleSubmit()">
+            Ver los {{ suggestions()!.total }} resultados de “{{ _value().trim() }}”
+          </button>
+        }
+      </div>
+    </ng-template>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19840,7 +20138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         class: 'block w-full',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTextColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], search: [{ type: i0.Output, args: ["search"] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTextColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }] } });
 
 class ClxAnimateGroupDirective {
     stagger = input(100, { ...(ngDevMode ? { debugName: "stagger" } : /* istanbul ignore next */ {}), transform: numberAttribute });