@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-select.mjs

@@ -1,25 +1,38 @@
 import * as i0 from '@angular/core';
-import { input, model, signal, computed, viewChild, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injector, input, model, signal, computed, viewChild, effect, DestroyRef, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
 let nextUid = 0;
+/** Filas extra que se pintan por encima y por debajo de las visibles en modo virtual. */
+const VIRTUAL_BUFFER = 4;
 /**
  * Select (dropdown) de CaribeNG. Listbox accesible sobre CDK Overlay con
- * navegación por teclado, filtro opcional e integración con Angular Forms
+ * navegación por teclado, búsqueda al teclear, filtro opcional, grupos,
+ * scroll virtual para listas grandes e integración con Angular Forms
  * mediante `ControlValueAccessor`.
  *
  * @example
  * ```html
  * <cb-select [options]="ciudades" optionLabel="nombre" optionValue="id"
- *            formControlName="ciudad" placeholder="Elige una ciudad" />
+ *            formControlName="ciudad" placeholder="Elige una ciudad" showClear />
+ *
+ * <!-- Agrupado: [{ label: 'Colombia', items: [...] }, …] -->
+ * <cb-select [options]="paises" group optionLabel="nombre" />
+ *
+ * <!-- 10 000 opciones -->
+ * <cb-select [options]="clientes" virtualScroll [virtualScrollItemSize]="36" filter />
  * ```
  */
 class CbSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.injector = inject(Injector);
         // --- Inputs ----------------------------------------------------------------
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -29,15 +42,33 @@ class CbSelect {
         ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
         this.optionDisabled = input('disabled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('Seleccionar', /* @ts-ignore */
+        /** Las opciones son grupos (`{ label, items }`): se muestran con su título. */
+        this.group = input(false, { ...(ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Propiedad con el título de cada grupo. */
+        this.optionGroupLabel = input('label', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
+        /** Propiedad con las opciones de cada grupo. */
+        this.optionGroupChildren = input('items', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.filterPlaceholder = input('Buscar…', /* @ts-ignore */
+        this.filterPlaceholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('Sin resultados', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Muestra un botón para vaciar la selección. */
+        this.showClear = input(false, { ...(ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Alto máximo de la lista (CSS). En modo virtual es su alto fijo. */
+        this.scrollHeight = input('16rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+        /** Pinta solo las opciones visibles: para listas de miles de elementos. */
+        this.virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Alto fijo de cada fila en modo virtual (px). */
+        this.virtualScrollItemSize = input(36, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Estado de validación: inputs manuales + estado de Angular Forms. */
         this.fieldState = cbFieldState({ invalid: () => this.invalid() });
@@ -62,6 +93,8 @@ class CbSelect {
         ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         this.triggerWidth = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
+        this.scrollTop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
@@ -70,32 +103,63 @@ class CbSelect {
         this.triggerRef = viewChild.required('trigger');
         this.filterInputRef = viewChild('filterInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInputRef" }] : /* istanbul ignore next */ []));
+        this.viewportRef = viewChild('viewport', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
         this.positions = [
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ];
+        // --- Búsqueda al teclear ------------------------------------------------------
+        this.typeahead = '';
         // --- Derivados -------------------------------------------------------------
-        this.filteredOptions = computed(() => {
-            const q = this.filterText().trim().toLowerCase();
-            const opts = this.options();
-            if (!this.filter() || !q)
-                return opts;
-            return opts.filter((o) => this.labelOf(o).toLowerCase().includes(q));
+        /** Todas las opciones (aplanando los grupos). */
+        this.flatOptions = computed(() => this.group() ? this.options().flatMap((g) => this.childrenOf(g)) : this.options(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
+        this.filteredGroups = computed(() => {
+            const q = normalize(this.filterText());
+            const keep = (o) => !this.filter() || !q || normalize(this.labelOf(o)).includes(q);
+            let index = 0;
+            const indexed = (opts) => opts.filter(keep).map((opt) => ({ opt, index: index++ }));
+            if (!this.group())
+                return [{ label: null, options: indexed(this.options()) }];
+            return this.options()
+                .map((g) => ({ label: this.groupLabelOf(g), options: indexed(this.childrenOf(g)) }))
+                .filter((g) => g.options.length > 0);
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = computed(() => this.filteredGroups().flatMap((g) => g.options.map((o) => o.opt)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        /** Filas del modo virtual (cabeceras de grupo + opciones). */
+        this.virtualRows = computed(() => this.filteredGroups().flatMap((g, gi) => [
+            ...(g.label !== null ? [{ kind: 'group', label: g.label, key: `g${gi}` }] : []),
+            ...g.options.map((o) => ({ kind: 'option', ...o })),
+        ]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "virtualRows" }] : /* istanbul ignore next */ []));
+        this.viewportHeight = computed(() => cssToPx(this.scrollHeight()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+        this.windowStart = computed(() => Math.max(0, Math.floor(this.scrollTop() / this.virtualScrollItemSize()) - VIRTUAL_BUFFER), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "windowStart" }] : /* istanbul ignore next */ []));
+        this.windowOffset = computed(() => this.windowStart() * this.virtualScrollItemSize(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "windowOffset" }] : /* istanbul ignore next */ []));
+        this.visibleRows = computed(() => {
+            const size = this.virtualScrollItemSize();
+            const end = Math.ceil((this.scrollTop() + this.viewportHeight()) / size) + VIRTUAL_BUFFER;
+            return this.virtualRows().slice(this.windowStart(), end);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
         this.selectedOption = computed(() => {
             const value = this.value();
-            return this.options().find((o) => this.valueOf(o) === value) ?? null;
+            return this.flatOptions().find((o) => this.valueOf(o) === value) ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
         this.displayLabel = computed(() => {
             const selected = this.selectedOption();
-            return selected ? this.labelOf(selected) : this.placeholder();
+            return selected ? this.labelOf(selected) : (this.placeholder() ?? this.t().select);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
-        this.activeDescendant = computed(() => this.open() && this.activeIndex() >= 0
-            ? this.optionId(this.activeIndex())
-            : null, /* @ts-ignore */
+        this.canClear = computed(() => this.showClear() && this.selectedOption() !== null && !this.isDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
+        this.activeDescendant = computed(() => this.open() && this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         // --- ControlValueAccessor --------------------------------------------------
         this.onChange = () => { };
@@ -112,6 +176,7 @@ class CbSelect {
             if (this.open())
                 this.ensureActiveVisible();
         });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.typeaheadTimer));
     }
     writeValue(value) {
         this.value.set(value ?? null);
@@ -135,9 +200,10 @@ class CbSelect {
         if (this.isDisabled())
             return;
         this.triggerWidth.set(this.triggerRef().nativeElement.offsetWidth);
+        this.scrollTop.set(0);
         this.open.set(true);
         const selectedIdx = this.filteredOptions().indexOf(this.selectedOption());
-        this.activeIndex.set(selectedIdx >= 0 ? selectedIdx : this.firstEnabledIndex());
+        this.setActive(selectedIdx >= 0 ? selectedIdx : this.firstEnabledIndex());
     }
     close() {
         if (!this.open())
@@ -155,6 +221,13 @@ class CbSelect {
         this.onChange(value);
         this.close();
     }
+    /** Vacía la selección (botón de `showClear`) y devuelve el foco al disparador. */
+    clear() {
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
+        this.triggerRef().nativeElement.focus();
+    }
     onBlur() {
         if (!this.open())
             this.onTouched();
@@ -170,6 +243,22 @@ class CbSelect {
     }
     onTriggerKeydown(event) {
         const key = event.key;
+        const inFilter = event.target === this.filterInputRef()?.nativeElement;
+        if (!inFilter && isPrintable(event)) {
+            event.preventDefault();
+            if (!this.open()) {
+                this.openPanel();
+                // Sin selección previa, la búsqueda empieza por la primera opción.
+                if (!this.selectedOption())
+                    this.activeIndex.set(-1);
+            }
+            // Con filtro, lo tecleado empieza la búsqueda; sin él, salta a la opción que coincide.
+            if (this.filter())
+                this.filterText.set(this.filterText() + key);
+            else
+                this.searchByTyping(key);
+            return;
+        }
         if (!this.open()) {
             if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(key)) {
                 event.preventDefault();
@@ -187,12 +276,16 @@ class CbSelect {
                 this.move(-1);
                 break;
             case 'Home':
+                if (inFilter)
+                    break;
                 event.preventDefault();
-                this.activeIndex.set(this.firstEnabledIndex());
+                this.setActive(this.firstEnabledIndex());
                 break;
             case 'End':
+                if (inFilter)
+                    break;
                 event.preventDefault();
-                this.activeIndex.set(this.lastEnabledIndex());
+                this.setActive(this.lastEnabledIndex());
                 break;
             case 'Enter':
                 event.preventDefault();
@@ -232,8 +325,38 @@ class CbSelect {
     optionId(index) {
         return `${this.inputId()}-opt-${index}`;
     }
-    trackOption(opt) {
-        return this.valueOf(opt);
+    groupId(index) {
+        return `${this.inputId()}-group-${index}`;
+    }
+    groupLabelOf(group) {
+        return String(group?.[this.optionGroupLabel()] ?? '');
+    }
+    childrenOf(group) {
+        const items = group?.[this.optionGroupChildren()];
+        return Array.isArray(items) ? items : [];
+    }
+    /** Cambia la opción activa y la desplaza a la vista. */
+    setActive(index) {
+        this.activeIndex.set(index);
+        if (index < 0 || !this.open())
+            return;
+        if (this.virtualScroll()) {
+            const size = this.virtualScrollItemSize();
+            const row = this.virtualRows().findIndex((r) => r.kind === 'option' && r.index === index);
+            const top = row * size;
+            const view = this.viewportHeight();
+            const current = this.scrollTop();
+            const next = top < current ? top : top + size > current + view ? top + size - view : current;
+            if (next !== current) {
+                this.scrollTop.set(next);
+                const viewport = this.viewportRef()?.nativeElement;
+                if (viewport)
+                    viewport.scrollTop = next;
+            }
+        }
+        else {
+            afterNextRender(() => this.viewportRef()?.nativeElement.querySelector(`#${this.optionId(index)}`)?.scrollIntoView?.({ block: 'nearest' }), { injector: this.injector });
+        }
     }
     move(delta) {
         const opts = this.filteredOptions();
@@ -243,7 +366,25 @@ class CbSelect {
         for (let step = 0; step < opts.length; step++) {
             i = (i + delta + opts.length) % opts.length;
             if (!this.isOptionDisabled(opts[i])) {
-                this.activeIndex.set(i);
+                this.setActive(i);
+                return;
+            }
+        }
+    }
+    /** Teclear salta a la siguiente opción que empieza por lo escrito (se reinicia tras 500 ms). */
+    searchByTyping(char) {
+        clearTimeout(this.typeaheadTimer);
+        this.typeahead += normalize(char);
+        this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+        const opts = this.filteredOptions();
+        // Repetir la misma letra recorre las opciones que empiezan por ella ("m", "m"…).
+        const query = [...this.typeahead].every((c) => c === this.typeahead[0]) ? this.typeahead[0] : this.typeahead;
+        // Con una sola letra se avanza a la siguiente coincidencia; con más, se refina desde la actual.
+        const from = query.length === 1 ? this.activeIndex() + 1 : Math.max(0, this.activeIndex());
+        for (let step = 0; step < opts.length; step++) {
+            const i = (from + step) % opts.length;
+            if (!this.isOptionDisabled(opts[i]) && normalize(this.labelOf(opts[i])).startsWith(query)) {
+                this.setActive(i);
                 return;
             }
         }
@@ -266,17 +407,17 @@ class CbSelect {
     }
     ensureActiveVisible() {
         if (this.activeIndex() >= this.filteredOptions().length) {
-            this.activeIndex.set(this.firstEnabledIndex());
+            this.setActive(this.firstEnabledIndex());
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSelect, isStandalone: true, selector: "cb-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "cb-select-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSelect, isStandalone: true, selector: "cb-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.cb-has-clear": "canClear()" }, classAttribute: "cb-select-host" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #trigger
       class="cb-select__trigger"
@@ -292,7 +433,7 @@ class CbSelect {
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-expanded]="open()"
       [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-activedescendant]="filter() ? null : activeDescendant()"
       [attr.aria-disabled]="isDisabled() ? 'true' : null"
       [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
       [attr.aria-required]="fieldState.required() || null"
@@ -300,14 +441,16 @@ class CbSelect {
       (keydown)="onTriggerKeydown($event)"
       (blur)="onBlur()"
     >
-      <span
-        class="cb-select__label"
-        [class.cb-select__label--placeholder]="!selectedOption()"
-      >
+      <span class="cb-select__label" [class.cb-select__label--placeholder]="!selectedOption()">
         {{ displayLabel() }}
       </span>
       <cb-icon class="cb-select__chevron" name="chevron-down" [size]="16" aria-hidden="true" />
     </div>
+    @if (canClear()) {
+      <button type="button" class="cb-select__clear" [attr.aria-label]="t().clear" (click)="clear()">
+        <cb-icon name="x" [size]="14" aria-hidden="true" />
+      </button>
+    }
 
     <ng-template
       cdkConnectedOverlay
@@ -323,47 +466,113 @@ class CbSelect {
       <div class="cb-select__panel" [attr.data-theme]="null">
         @if (filter()) {
           <div class="cb-select__filter">
+            <!-- Con filtro, el foco vive aquí: es el combobox que anuncia la opción activa. -->
             <input
               #filterInput
               type="text"
               class="cb-select__filter-input"
-              [placeholder]="filterPlaceholder()"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded="true"
+              [attr.aria-controls]="listboxId"
+              [attr.aria-activedescendant]="activeDescendant()"
+              [placeholder]="(filterPlaceholder() ?? t().search)"
               [value]="filterText()"
               (input)="onFilter($event)"
               (keydown)="onTriggerKeydown($event)"
-              aria-label="Filtrar opciones"
+              [attr.aria-label]="t().filterOptions"
             />
           </div>
         }
-        <ul class="cb-select__list" role="listbox" [id]="listboxId">
-          @for (opt of filteredOptions(); track trackOption(opt); let i = $index) {
-            <li
-              class="cb-select__option"
-              [class.cb-is-active]="i === activeIndex()"
-              [class.cb-is-selected]="isSelected(opt)"
-              [class.cb-is-disabled]="isOptionDisabled(opt)"
-              role="option"
-              [id]="optionId(i)"
-              [attr.aria-selected]="isSelected(opt)"
-              [attr.aria-disabled]="isOptionDisabled(opt) ? 'true' : null"
-              (click)="selectOption(opt)"
-              (mouseenter)="activeIndex.set(i)"
-            >
-              {{ labelOf(opt) }}
-            </li>
-          } @empty {
-            <li class="cb-select__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
+        @if (virtualScroll()) {
+          <ul
+            #viewport
+            class="cb-select__list cb-select__list--virtual"
+            role="listbox"
+            [id]="listboxId"
+            [style.height.px]="viewportHeight()"
+            (scroll)="scrollTop.set($any($event.target).scrollTop)"
+          >
+            <li role="presentation" class="cb-select__spacer" [style.height.px]="virtualRows().length * virtualScrollItemSize()">
+              <ul role="presentation" class="cb-select__window" [style.transform]="'translateY(' + windowOffset() + 'px)'">
+                @for (row of visibleRows(); track row.kind === 'group' ? row.key : row.index) {
+                  @if (row.kind === 'group') {
+                    <li role="presentation" class="cb-select__group-label" [style.height.px]="virtualScrollItemSize()">
+                      {{ row.label }}
+                    </li>
+                  } @else {
+                    <li
+                      class="cb-select__option"
+                      [class.cb-is-active]="row.index === activeIndex()"
+                      [class.cb-is-selected]="isSelected(row.opt)"
+                      [class.cb-is-disabled]="isOptionDisabled(row.opt)"
+                      role="option"
+                      [id]="optionId(row.index)"
+                      [style.height.px]="virtualScrollItemSize()"
+                      [attr.aria-selected]="isSelected(row.opt)"
+                      [attr.aria-disabled]="isOptionDisabled(row.opt) ? 'true' : null"
+                      [attr.aria-setsize]="filteredOptions().length"
+                      [attr.aria-posinset]="row.index + 1"
+                      (click)="selectOption(row.opt)"
+                      (mouseenter)="activeIndex.set(row.index)"
+                    >
+                      {{ labelOf(row.opt) }}
+                    </li>
+                  }
+                }
+              </ul>
             </li>
-          }
-        </ul>
+            @if (!filteredOptions().length) {
+              <li class="cb-select__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        } @else {
+          <ul #viewport class="cb-select__list" role="listbox" [id]="listboxId" [style.max-height]="scrollHeight()">
+            @for (g of filteredGroups(); track $index; let gi = $index) {
+              @if (g.label !== null) {
+                <li role="presentation">
+                  <ul role="group" class="cb-select__group" [attr.aria-labelledby]="groupId(gi)">
+                    <li role="presentation" class="cb-select__group-label" [id]="groupId(gi)">{{ g.label }}</li>
+                    @for (item of g.options; track item.index) {
+                      <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item }" />
+                    }
+                  </ul>
+                </li>
+              } @else {
+                @for (item of g.options; track item.index) {
+                  <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item }" />
+                }
+              }
+            }
+            @if (!filteredOptions().length) {
+              <li class="cb-select__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.cb-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);box-sizing:border-box;width:100%;font-family:var(--cb-font-sans);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger:hover:not(.cb-is-disabled){border-color:var(--cb-color-text-muted)}.cb-select__trigger:focus-visible,.cb-select__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-select__trigger.cb-is-invalid.cb-is-open,.cb-select__trigger.cb-is-invalid:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-select__trigger.cb-is-disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted);opacity:.8}.cb-select__trigger--sm{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-select__trigger--md{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-select__trigger--lg{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-select__label--placeholder{color:var(--cb-color-text-muted)}.cb-select__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger.cb-is-open .cb-select__chevron{transform:rotate(180deg)}.cb-select__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-select__filter{padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-select__filter-input{box-sizing:border-box;width:100%;padding:var(--cb-space-2) var(--cb-space-3);font-family:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-select__filter-input:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-select__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-select__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-select__option.cb-is-selected{color:var(--cb-color-primary-600);background-color:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);font-weight:var(--cb-font-weight-semibold)}.cb-select__option.cb-is-selected.cb-is-active{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-select__option.cb-is-disabled{color:var(--cb-color-text-muted);cursor:not-allowed;opacity:.6}.cb-select__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"], 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+
+    <ng-template #optionTpl let-item>
+      <li
+        class="cb-select__option"
+        [class.cb-is-active]="item.index === activeIndex()"
+        [class.cb-is-selected]="isSelected(item.opt)"
+        [class.cb-is-disabled]="isOptionDisabled(item.opt)"
+        role="option"
+        [id]="optionId(item.index)"
+        [attr.aria-selected]="isSelected(item.opt)"
+        [attr.aria-disabled]="isOptionDisabled(item.opt) ? 'true' : null"
+        (click)="selectOption(item.opt)"
+        (mouseenter)="activeIndex.set(item.index)"
+      >
+        {{ labelOf(item.opt) }}
+      </li>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.cb-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);box-sizing:border-box;width:100%;font-family:var(--cb-font-sans);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger:hover:not(.cb-is-disabled){border-color:var(--cb-color-text-muted)}.cb-select__trigger:focus-visible,.cb-select__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-select__trigger.cb-is-invalid.cb-is-open,.cb-select__trigger.cb-is-invalid:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-select__trigger.cb-is-disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted);opacity:.8}.cb-select__trigger--sm{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-select__trigger--md{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-select__trigger--lg{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-select__label--placeholder{color:var(--cb-color-text-muted)}.cb-select__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger.cb-is-open .cb-select__chevron{transform:rotate(180deg)}.cb-select__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-select__filter{padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-select__filter-input{box-sizing:border-box;width:100%;padding:var(--cb-space-2) var(--cb-space-3);font-family:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-select__filter-input:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-select__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-select__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-select__option.cb-is-selected{color:var(--cb-color-primary-600);background-color:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);font-weight:var(--cb-font-weight-semibold)}.cb-select__option.cb-is-selected.cb-is-active{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-select__option.cb-is-disabled{color:var(--cb-color-text-muted);cursor:not-allowed;opacity:.6}.cb-select__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-select__group{list-style:none;margin:0;padding:0}.cb-select__group-label{box-sizing:border-box;display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3) var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold);letter-spacing:.02em;text-transform:uppercase;color:var(--cb-color-text-muted);cursor:default}.cb-select__list--virtual{max-height:none}.cb-select__spacer{position:relative;list-style:none}.cb-select__window{list-style:none;margin:0;padding:0}.cb-select__list--virtual .cb-select__option{box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{position:relative}:host(.cb-has-clear) .cb-select__trigger{padding-right:3.25rem}.cb-select__clear{position:absolute;top:50%;right:2.1rem;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);transform:translateY(-50%);cursor:pointer}.cb-select__clear:hover{color:var(--cb-color-text);background-color:var(--cb-color-surface-hover)}.cb-select__clear:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}\n"], 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], host: { class: 'cb-select-host' }, providers: [
+            args: [{ selector: 'cb-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, NgTemplateOutlet, CbIcon], host: { class: 'cb-select-host', '[class.cb-has-clear]': 'canClear()' }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CbSelect),
@@ -385,7 +594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-expanded]="open()"
       [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-activedescendant]="filter() ? null : activeDescendant()"
       [attr.aria-disabled]="isDisabled() ? 'true' : null"
       [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
       [attr.aria-required]="fieldState.required() || null"
@@ -393,14 +602,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (keydown)="onTriggerKeydown($event)"
       (blur)="onBlur()"
     >
-      <span
-        class="cb-select__label"
-        [class.cb-select__label--placeholder]="!selectedOption()"
-      >
+      <span class="cb-select__label" [class.cb-select__label--placeholder]="!selectedOption()">
         {{ displayLabel() }}
       </span>
       <cb-icon class="cb-select__chevron" name="chevron-down" [size]="16" aria-hidden="true" />
     </div>
+    @if (canClear()) {
+      <button type="button" class="cb-select__clear" [attr.aria-label]="t().clear" (click)="clear()">
+        <cb-icon name="x" [size]="14" aria-hidden="true" />
+      </button>
+    }
 
     <ng-template
       cdkConnectedOverlay
@@ -416,47 +627,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div class="cb-select__panel" [attr.data-theme]="null">
         @if (filter()) {
           <div class="cb-select__filter">
+            <!-- Con filtro, el foco vive aquí: es el combobox que anuncia la opción activa. -->
             <input
               #filterInput
               type="text"
               class="cb-select__filter-input"
-              [placeholder]="filterPlaceholder()"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded="true"
+              [attr.aria-controls]="listboxId"
+              [attr.aria-activedescendant]="activeDescendant()"
+              [placeholder]="(filterPlaceholder() ?? t().search)"
               [value]="filterText()"
               (input)="onFilter($event)"
               (keydown)="onTriggerKeydown($event)"
-              aria-label="Filtrar opciones"
+              [attr.aria-label]="t().filterOptions"
             />
           </div>
         }
-        <ul class="cb-select__list" role="listbox" [id]="listboxId">
-          @for (opt of filteredOptions(); track trackOption(opt); let i = $index) {
-            <li
-              class="cb-select__option"
-              [class.cb-is-active]="i === activeIndex()"
-              [class.cb-is-selected]="isSelected(opt)"
-              [class.cb-is-disabled]="isOptionDisabled(opt)"
-              role="option"
-              [id]="optionId(i)"
-              [attr.aria-selected]="isSelected(opt)"
-              [attr.aria-disabled]="isOptionDisabled(opt) ? 'true' : null"
-              (click)="selectOption(opt)"
-              (mouseenter)="activeIndex.set(i)"
-            >
-              {{ labelOf(opt) }}
+        @if (virtualScroll()) {
+          <ul
+            #viewport
+            class="cb-select__list cb-select__list--virtual"
+            role="listbox"
+            [id]="listboxId"
+            [style.height.px]="viewportHeight()"
+            (scroll)="scrollTop.set($any($event.target).scrollTop)"
+          >
+            <li role="presentation" class="cb-select__spacer" [style.height.px]="virtualRows().length * virtualScrollItemSize()">
+              <ul role="presentation" class="cb-select__window" [style.transform]="'translateY(' + windowOffset() + 'px)'">
+                @for (row of visibleRows(); track row.kind === 'group' ? row.key : row.index) {
+                  @if (row.kind === 'group') {
+                    <li role="presentation" class="cb-select__group-label" [style.height.px]="virtualScrollItemSize()">
+                      {{ row.label }}
+                    </li>
+                  } @else {
+                    <li
+                      class="cb-select__option"
+                      [class.cb-is-active]="row.index === activeIndex()"
+                      [class.cb-is-selected]="isSelected(row.opt)"
+                      [class.cb-is-disabled]="isOptionDisabled(row.opt)"
+                      role="option"
+                      [id]="optionId(row.index)"
+                      [style.height.px]="virtualScrollItemSize()"
+                      [attr.aria-selected]="isSelected(row.opt)"
+                      [attr.aria-disabled]="isOptionDisabled(row.opt) ? 'true' : null"
+                      [attr.aria-setsize]="filteredOptions().length"
+                      [attr.aria-posinset]="row.index + 1"
+                      (click)="selectOption(row.opt)"
+                      (mouseenter)="activeIndex.set(row.index)"
+                    >
+                      {{ labelOf(row.opt) }}
+                    </li>
+                  }
+                }
+              </ul>
             </li>
-          } @empty {
-            <li class="cb-select__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
-            </li>
-          }
-        </ul>
+            @if (!filteredOptions().length) {
+              <li class="cb-select__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        } @else {
+          <ul #viewport class="cb-select__list" role="listbox" [id]="listboxId" [style.max-height]="scrollHeight()">
+            @for (g of filteredGroups(); track $index; let gi = $index) {
+              @if (g.label !== null) {
+                <li role="presentation">
+                  <ul role="group" class="cb-select__group" [attr.aria-labelledby]="groupId(gi)">
+                    <li role="presentation" class="cb-select__group-label" [id]="groupId(gi)">{{ g.label }}</li>
+                    @for (item of g.options; track item.index) {
+                      <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item }" />
+                    }
+                  </ul>
+                </li>
+              } @else {
+                @for (item of g.options; track item.index) {
+                  <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item }" />
+                }
+              }
+            }
+            @if (!filteredOptions().length) {
+              <li class="cb-select__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.cb-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);box-sizing:border-box;width:100%;font-family:var(--cb-font-sans);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger:hover:not(.cb-is-disabled){border-color:var(--cb-color-text-muted)}.cb-select__trigger:focus-visible,.cb-select__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-select__trigger.cb-is-invalid.cb-is-open,.cb-select__trigger.cb-is-invalid:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-select__trigger.cb-is-disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted);opacity:.8}.cb-select__trigger--sm{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-select__trigger--md{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-select__trigger--lg{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-select__label--placeholder{color:var(--cb-color-text-muted)}.cb-select__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger.cb-is-open .cb-select__chevron{transform:rotate(180deg)}.cb-select__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-select__filter{padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-select__filter-input{box-sizing:border-box;width:100%;padding:var(--cb-space-2) var(--cb-space-3);font-family:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-select__filter-input:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-select__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-select__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-select__option.cb-is-selected{color:var(--cb-color-primary-600);background-color:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);font-weight:var(--cb-font-weight-semibold)}.cb-select__option.cb-is-selected.cb-is-active{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-select__option.cb-is-disabled{color:var(--cb-color-text-muted);cursor:not-allowed;opacity:.6}.cb-select__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
+
+    <ng-template #optionTpl let-item>
+      <li
+        class="cb-select__option"
+        [class.cb-is-active]="item.index === activeIndex()"
+        [class.cb-is-selected]="isSelected(item.opt)"
+        [class.cb-is-disabled]="isOptionDisabled(item.opt)"
+        role="option"
+        [id]="optionId(item.index)"
+        [attr.aria-selected]="isSelected(item.opt)"
+        [attr.aria-disabled]="isOptionDisabled(item.opt) ? 'true' : null"
+        (click)="selectOption(item.opt)"
+        (mouseenter)="activeIndex.set(item.index)"
+      >
+        {{ labelOf(item.opt) }}
+      </li>
+    </ng-template>
+  `, styles: [":host{display:block}.cb-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);box-sizing:border-box;width:100%;font-family:var(--cb-font-sans);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger:hover:not(.cb-is-disabled){border-color:var(--cb-color-text-muted)}.cb-select__trigger:focus-visible,.cb-select__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-select__trigger.cb-is-invalid.cb-is-open,.cb-select__trigger.cb-is-invalid:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-select__trigger.cb-is-disabled{cursor:not-allowed;background-color:var(--cb-color-surface);color:var(--cb-color-text-muted);opacity:.8}.cb-select__trigger--sm{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-select__trigger--md{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-select__trigger--lg{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-select__label--placeholder{color:var(--cb-color-text-muted)}.cb-select__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-select__trigger.cb-is-open .cb-select__chevron{transform:rotate(180deg)}.cb-select__panel{box-sizing:border-box;width:100%;background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-select__filter{padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-select__filter-input{box-sizing:border-box;width:100%;padding:var(--cb-space-2) var(--cb-space-3);font-family:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-select__filter-input:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-select__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:16rem;overflow-y:auto}.cb-select__option{display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);font-size:var(--cb-text-base);color:var(--cb-color-text);cursor:pointer}.cb-select__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-select__option.cb-is-selected{color:var(--cb-color-primary-600);background-color:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);font-weight:var(--cb-font-weight-semibold)}.cb-select__option.cb-is-selected.cb-is-active{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-select__option.cb-is-disabled{color:var(--cb-color-text-muted);cursor:not-allowed;opacity:.6}.cb-select__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}.cb-select__group{list-style:none;margin:0;padding:0}.cb-select__group-label{box-sizing:border-box;display:flex;align-items:center;padding:var(--cb-space-2) var(--cb-space-3) var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold);letter-spacing:.02em;text-transform:uppercase;color:var(--cb-color-text-muted);cursor:default}.cb-select__list--virtual{max-height:none}.cb-select__spacer{position:relative;list-style:none}.cb-select__window{list-style:none;margin:0;padding:0}.cb-select__list--virtual .cb-select__option{box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{position:relative}:host(.cb-has-clear) .cb-select__trigger{padding-right:3.25rem}.cb-select__clear{position:absolute;top:50%;right:2.1rem;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);transform:translateY(-50%);cursor:pointer}.cb-select__clear:hover{color:var(--cb-color-text);background-color:var(--cb-color-surface-hover)}.cb-select__clear:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }
+/** Minúsculas y sin tildes, para que "medellin" encuentre "Medellín". */
+function normalize(text) {
+    return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLocaleLowerCase().trim();
+}
+/** Tecla imprimible sin modificadores (para la búsqueda al teclear). */
+function isPrintable(event) {
+    return event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+/** Convierte un alto CSS (`px` o `rem`) a píxeles para el modo virtual. */
+function cssToPx(value) {
+    const n = parseFloat(value);
+    if (Number.isNaN(n))
+        return 256;
+    return value.trim().endsWith('rem') ? n * 16 : n;
+}
 
 /*
  * Public API Surface de @caribeng/ui/select