@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-multiselect.mjs

@@ -1,25 +1,37 @@
 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 { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
+/** Filas extra que se pintan por encima y por debajo de las visibles en modo virtual. */
+const VIRTUAL_BUFFER = 4;
 /**
  * Selección múltiple (multiselect) de CaribeNG. Listbox accesible sobre CDK
- * Overlay con casillas, filtro y seleccionar-todo. Integrado con Angular Forms
- * vía `ControlValueAccessor`; el modelo es un array de valores.
+ * Overlay con casillas, filtro, seleccionar-todo, grupos, búsqueda al teclear
+ * y scroll virtual. Integrado con Angular Forms vía `ControlValueAccessor`;
+ * el modelo es un array de valores.
  *
  * @example
  * ```html
  * <cb-multiselect [options]="ciudades" optionLabel="nombre" optionValue="id"
  *                 formControlName="ciudades" placeholder="Elige ciudades" />
+ *
+ * <!-- Agrupado: [{ label: 'Colombia', items: [...] }, …] -->
+ * <cb-multiselect [options]="paises" group filter />
  * ```
  */
 class CbMultiSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.optionLabel = input('label', /* @ts-ignore */
@@ -28,19 +40,35 @@ class CbMultiSelect {
         ...(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 */ []));
         this.showToggleAll = input(true, { ...(ngDevMode ? { debugName: "showToggleAll" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Nº máx. de etiquetas antes de mostrar "N seleccionados". */
         this.maxSelectedLabels = input(3, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxSelectedLabels" }] : /* istanbul ignore next */ []));
+        /** Alto máximo de la lista (CSS). En modo virtual es su alto fijo. */
+        this.scrollHeight = input('15rem', /* @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() });
@@ -63,6 +91,8 @@ class CbMultiSelect {
         ...(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 */
@@ -71,34 +101,67 @@ class CbMultiSelect {
         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 },
         ];
-        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));
+        // --- Búsqueda al teclear ------------------------------------------------------
+        this.typeahead = '';
+        /** 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 */ []));
-        this.selected = computed(() => this.options().filter((o) => this.value().includes(this.valueOf(o))), /* @ts-ignore */
+        /** 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.selected = computed(() => this.flatOptions().filter((o) => this.value().includes(this.valueOf(o))), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.displayLabel = computed(() => {
             const sel = this.selected();
             if (!sel.length)
-                return this.placeholder();
+                return (this.placeholder() ?? this.t().select);
             if (sel.length > this.maxSelectedLabels())
-                return `${sel.length} seleccionados`;
+                return cbFormat(this.t().selectedCount, sel.length);
             return sel.map((o) => this.labelOf(o)).join(', ');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
         this.allSelected = computed(() => {
-            const enabled = this.options().filter((o) => !this.isOptionDisabled(o));
+            const enabled = this.flatOptions().filter((o) => !this.isOptionDisabled(o));
             return enabled.length > 0 && enabled.every((o) => this.value().includes(this.valueOf(o)));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+        this.activeDescendant = computed(() => this.open() && this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
         effect(() => {
@@ -106,6 +169,13 @@ class CbMultiSelect {
                 queueMicrotask(() => this.filterInputRef()?.nativeElement.focus());
             }
         });
+        // Mantiene el índice activo dentro de la lista filtrada.
+        effect(() => {
+            const length = this.filteredOptions().length;
+            if (this.open() && this.activeIndex() >= length)
+                this.setActive(this.firstEnabledIndex());
+        });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.typeaheadTimer));
     }
     // --- ControlValueAccessor --------------------------------------------------
     writeValue(value) {
@@ -130,8 +200,9 @@ class CbMultiSelect {
         if (this.isDisabled())
             return;
         this.triggerWidth.set(this.triggerRef().nativeElement.offsetWidth);
+        this.scrollTop.set(0);
         this.open.set(true);
-        this.activeIndex.set(this.firstEnabledIndex());
+        this.setActive(this.firstEnabledIndex());
     }
     close() {
         if (!this.open())
@@ -150,7 +221,7 @@ class CbMultiSelect {
         this.commit(next);
     }
     toggleAll() {
-        const enabled = this.options().filter((o) => !this.isOptionDisabled(o));
+        const enabled = this.flatOptions().filter((o) => !this.isOptionDisabled(o));
         this.commit(this.allSelected() ? [] : enabled.map((o) => this.valueOf(o)));
     }
     onBlur() {
@@ -168,6 +239,20 @@ class CbMultiSelect {
     }
     onTriggerKeydown(event) {
         const key = event.key;
+        // En el filtro, Espacio, Inicio y Fin escriben o mueven el cursor del texto.
+        const inFilter = event.target === this.filterInputRef()?.nativeElement;
+        if (!inFilter && isPrintable(event)) {
+            event.preventDefault();
+            if (!this.open()) {
+                this.openPanel();
+                this.activeIndex.set(-1);
+            }
+            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();
@@ -185,22 +270,25 @@ class CbMultiSelect {
                 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.filteredOptions().length - 1);
+                this.setActive(this.lastEnabledIndex());
+                break;
+            case ' ':
+                if (inFilter)
+                    break;
+                this.toggleActive(event);
                 break;
             case 'Enter':
-            case ' ': {
-                const opt = this.filteredOptions()[this.activeIndex()];
-                if (opt !== undefined) {
-                    event.preventDefault();
-                    this.toggleOption(opt);
-                }
+                this.toggleActive(event);
                 break;
-            }
             case 'Escape':
                 event.preventDefault();
                 this.close();
@@ -235,12 +323,57 @@ class CbMultiSelect {
     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 : [];
+    }
+    toggleActive(event) {
+        const opt = this.filteredOptions()[this.activeIndex()];
+        if (opt === undefined)
+            return;
+        event.preventDefault();
+        this.toggleOption(opt);
+    }
+    /** 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 });
+        }
     }
     firstEnabledIndex() {
         return this.filteredOptions().findIndex((o) => !this.isOptionDisabled(o));
     }
+    lastEnabledIndex() {
+        const opts = this.filteredOptions();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            if (!this.isOptionDisabled(opts[i]))
+                return i;
+        }
+        return -1;
+    }
     move(delta) {
         const opts = this.filteredOptions();
         if (!opts.length)
@@ -249,7 +382,25 @@ class CbMultiSelect {
         for (let s = 0; s < opts.length; s++) {
             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;
             }
         }
@@ -259,13 +410,13 @@ class CbMultiSelect {
         this.onChange(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMultiSelect, isStandalone: true, selector: "cb-multiselect", 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 }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", 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-multiselect-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMultiSelect, isStandalone: true, selector: "cb-multiselect", 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 }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", 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: { classAttribute: "cb-multiselect-host" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbMultiSelect),
                 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-multiselect__trigger"
@@ -281,6 +432,7 @@ class CbMultiSelect {
       aria-haspopup="listbox"
       [attr.aria-expanded]="open()"
       [attr.aria-controls]="listboxId"
+      [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"
@@ -309,59 +461,126 @@ class CbMultiSelect {
         @if (filter() || showToggleAll()) {
           <div class="cb-multiselect__header">
             @if (showToggleAll()) {
-              <button type="button" class="cb-multiselect__all" (click)="toggleAll()">
-                <span class="cb-multiselect__check" [class.cb-is-checked]="allSelected()">
-                  @if (allSelected()) { <cb-icon name="check" [size]="14" aria-hidden="true" /> }
+              <button type="button" class="cb-multiselect__all" [attr.aria-pressed]="allSelected()" (click)="toggleAll()">
+                <span class="cb-multiselect__check" [class.cb-is-checked]="allSelected()" aria-hidden="true">
+                  @if (allSelected()) {
+                    <cb-icon name="check" [size]="14" />
+                  }
                 </span>
-                Todos
+                {{ t().selectAll }}
               </button>
             }
             @if (filter()) {
+              <!-- Con filtro, el foco vive aquí: es el combobox que anuncia la opción activa. -->
               <input
                 #filterInput
                 type="text"
                 class="cb-multiselect__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-multiselect__list" role="listbox" aria-multiselectable="true" [id]="listboxId">
-          @for (opt of filteredOptions(); track trackOption(opt); let i = $index) {
-            <li
-              class="cb-multiselect__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)="toggleOption(opt)"
-              (mouseenter)="activeIndex.set(i)"
-            >
-              <span class="cb-multiselect__check" [class.cb-is-checked]="isSelected(opt)">
-                @if (isSelected(opt)) { <cb-icon name="check" [size]="14" aria-hidden="true" /> }
-              </span>
-              {{ labelOf(opt) }}
-            </li>
-          } @empty {
-            <li class="cb-multiselect__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
+        @if (virtualScroll()) {
+          <ul
+            #viewport
+            class="cb-multiselect__list cb-multiselect__list--virtual"
+            role="listbox"
+            aria-multiselectable="true"
+            [id]="listboxId"
+            [style.height.px]="viewportHeight()"
+            (scroll)="scrollTop.set($any($event.target).scrollTop)"
+          >
+            <li role="presentation" class="cb-multiselect__spacer" [style.height.px]="virtualRows().length * virtualScrollItemSize()">
+              <ul role="presentation" class="cb-multiselect__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-multiselect__group-label" [style.height.px]="virtualScrollItemSize()">
+                      {{ row.label }}
+                    </li>
+                  } @else {
+                    <ng-container
+                      *ngTemplateOutlet="optionTpl; context: { $implicit: row, height: virtualScrollItemSize(), virtual: true }"
+                    />
+                  }
+                }
+              </ul>
             </li>
-          }
-        </ul>
+            @if (!filteredOptions().length) {
+              <li class="cb-multiselect__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        } @else {
+          <ul
+            #viewport
+            class="cb-multiselect__list"
+            role="listbox"
+            aria-multiselectable="true"
+            [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-multiselect__group" [attr.aria-labelledby]="groupId(gi)">
+                    <li role="presentation" class="cb-multiselect__group-label" [id]="groupId(gi)">{{ g.label }}</li>
+                    @for (item of g.options; track item.index) {
+                      <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item, height: null, virtual: false }" />
+                    }
+                  </ul>
+                </li>
+              } @else {
+                @for (item of g.options; track item.index) {
+                  <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item, height: null, virtual: false }" />
+                }
+              }
+            }
+            @if (!filteredOptions().length) {
+              <li class="cb-multiselect__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.cb-multiselect__trigger{display:flex;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:0 var(--cb-space-3);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-multiselect__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-multiselect__trigger:focus-visible,.cb-multiselect__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-multiselect__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-multiselect__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface-100)}.cb-multiselect__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.cb-multiselect__label--placeholder{color:var(--cb-color-text-muted)}.cb-multiselect__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger.cb-is-open .cb-multiselect__chevron{transform:rotate(180deg)}.cb-multiselect__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-multiselect__header{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-multiselect__all{display:inline-flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-1) var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-sm);cursor:pointer;font:inherit;white-space:nowrap}.cb-multiselect__all:hover{background-color:var(--cb-color-surface-100)}.cb-multiselect__filter-input{flex:1 1 auto;min-width:0;padding:var(--cb-space-1) var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-multiselect__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-multiselect__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto}.cb-multiselect__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);cursor:pointer;color:var(--cb-color-text)}.cb-multiselect__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-700)}.cb-multiselect__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-multiselect__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-multiselect__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-multiselect__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-200)}\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 let-height="height" let-virtual="virtual">
+      <li
+        class="cb-multiselect__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)"
+        [style.height.px]="height"
+        [attr.aria-selected]="isSelected(item.opt)"
+        [attr.aria-disabled]="isOptionDisabled(item.opt) ? 'true' : null"
+        [attr.aria-setsize]="virtual ? filteredOptions().length : null"
+        [attr.aria-posinset]="virtual ? item.index + 1 : null"
+        (click)="toggleOption(item.opt)"
+        (mouseenter)="activeIndex.set(item.index)"
+      >
+        <span class="cb-multiselect__check" [class.cb-is-checked]="isSelected(item.opt)" aria-hidden="true">
+          @if (isSelected(item.opt)) {
+            <cb-icon name="check" [size]="14" />
+          }
+        </span>
+        {{ labelOf(item.opt) }}
+      </li>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.cb-multiselect__trigger{display:flex;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:0 var(--cb-space-3);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-multiselect__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-multiselect__trigger:focus-visible,.cb-multiselect__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-multiselect__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-multiselect__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface)}.cb-multiselect__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.cb-multiselect__label--placeholder{color:var(--cb-color-text-muted)}.cb-multiselect__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger.cb-is-open .cb-multiselect__chevron{transform:rotate(180deg)}.cb-multiselect__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-multiselect__header{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-multiselect__all{display:inline-flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-1) var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-sm);cursor:pointer;font:inherit;white-space:nowrap}.cb-multiselect__all:hover{background-color:var(--cb-color-surface-hover)}.cb-multiselect__filter-input{flex:1 1 auto;min-width:0;padding:var(--cb-space-1) var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-multiselect__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-multiselect__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto}.cb-multiselect__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);cursor:pointer;color:var(--cb-color-text)}.cb-multiselect__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-700)}.cb-multiselect__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-multiselect__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-multiselect__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-multiselect__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-200)}.cb-multiselect__group{list-style:none;margin:0;padding:0}.cb-multiselect__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-multiselect__list--virtual{max-height:none}.cb-multiselect__spacer{position:relative;list-style:none}.cb-multiselect__window{list-style:none;margin:0;padding:0}.cb-multiselect__list--virtual .cb-multiselect__option{box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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: CbMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], host: { class: 'cb-multiselect-host' }, providers: [
+            args: [{ selector: 'cb-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, NgTemplateOutlet, CbIcon], host: { class: 'cb-multiselect-host' }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CbMultiSelect),
@@ -383,6 +602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       aria-haspopup="listbox"
       [attr.aria-expanded]="open()"
       [attr.aria-controls]="listboxId"
+      [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"
@@ -411,59 +631,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         @if (filter() || showToggleAll()) {
           <div class="cb-multiselect__header">
             @if (showToggleAll()) {
-              <button type="button" class="cb-multiselect__all" (click)="toggleAll()">
-                <span class="cb-multiselect__check" [class.cb-is-checked]="allSelected()">
-                  @if (allSelected()) { <cb-icon name="check" [size]="14" aria-hidden="true" /> }
+              <button type="button" class="cb-multiselect__all" [attr.aria-pressed]="allSelected()" (click)="toggleAll()">
+                <span class="cb-multiselect__check" [class.cb-is-checked]="allSelected()" aria-hidden="true">
+                  @if (allSelected()) {
+                    <cb-icon name="check" [size]="14" />
+                  }
                 </span>
-                Todos
+                {{ t().selectAll }}
               </button>
             }
             @if (filter()) {
+              <!-- Con filtro, el foco vive aquí: es el combobox que anuncia la opción activa. -->
               <input
                 #filterInput
                 type="text"
                 class="cb-multiselect__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-multiselect__list" role="listbox" aria-multiselectable="true" [id]="listboxId">
-          @for (opt of filteredOptions(); track trackOption(opt); let i = $index) {
-            <li
-              class="cb-multiselect__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)="toggleOption(opt)"
-              (mouseenter)="activeIndex.set(i)"
-            >
-              <span class="cb-multiselect__check" [class.cb-is-checked]="isSelected(opt)">
-                @if (isSelected(opt)) { <cb-icon name="check" [size]="14" aria-hidden="true" /> }
-              </span>
-              {{ labelOf(opt) }}
-            </li>
-          } @empty {
-            <li class="cb-multiselect__empty" role="option" aria-disabled="true">
-              {{ emptyMessage() }}
+        @if (virtualScroll()) {
+          <ul
+            #viewport
+            class="cb-multiselect__list cb-multiselect__list--virtual"
+            role="listbox"
+            aria-multiselectable="true"
+            [id]="listboxId"
+            [style.height.px]="viewportHeight()"
+            (scroll)="scrollTop.set($any($event.target).scrollTop)"
+          >
+            <li role="presentation" class="cb-multiselect__spacer" [style.height.px]="virtualRows().length * virtualScrollItemSize()">
+              <ul role="presentation" class="cb-multiselect__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-multiselect__group-label" [style.height.px]="virtualScrollItemSize()">
+                      {{ row.label }}
+                    </li>
+                  } @else {
+                    <ng-container
+                      *ngTemplateOutlet="optionTpl; context: { $implicit: row, height: virtualScrollItemSize(), virtual: true }"
+                    />
+                  }
+                }
+              </ul>
             </li>
-          }
-        </ul>
+            @if (!filteredOptions().length) {
+              <li class="cb-multiselect__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        } @else {
+          <ul
+            #viewport
+            class="cb-multiselect__list"
+            role="listbox"
+            aria-multiselectable="true"
+            [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-multiselect__group" [attr.aria-labelledby]="groupId(gi)">
+                    <li role="presentation" class="cb-multiselect__group-label" [id]="groupId(gi)">{{ g.label }}</li>
+                    @for (item of g.options; track item.index) {
+                      <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item, height: null, virtual: false }" />
+                    }
+                  </ul>
+                </li>
+              } @else {
+                @for (item of g.options; track item.index) {
+                  <ng-container *ngTemplateOutlet="optionTpl; context: { $implicit: item, height: null, virtual: false }" />
+                }
+              }
+            }
+            @if (!filteredOptions().length) {
+              <li class="cb-multiselect__empty" role="option" aria-disabled="true">{{ (emptyMessage() ?? t().noResults) }}</li>
+            }
+          </ul>
+        }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.cb-multiselect__trigger{display:flex;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:0 var(--cb-space-3);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-multiselect__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-multiselect__trigger:focus-visible,.cb-multiselect__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-multiselect__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-multiselect__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface-100)}.cb-multiselect__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.cb-multiselect__label--placeholder{color:var(--cb-color-text-muted)}.cb-multiselect__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger.cb-is-open .cb-multiselect__chevron{transform:rotate(180deg)}.cb-multiselect__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-multiselect__header{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-multiselect__all{display:inline-flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-1) var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-sm);cursor:pointer;font:inherit;white-space:nowrap}.cb-multiselect__all:hover{background-color:var(--cb-color-surface-100)}.cb-multiselect__filter-input{flex:1 1 auto;min-width:0;padding:var(--cb-space-1) var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-multiselect__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-multiselect__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto}.cb-multiselect__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);cursor:pointer;color:var(--cb-color-text)}.cb-multiselect__option.cb-is-active{background-color:var(--cb-color-surface-100)}.cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-700)}.cb-multiselect__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-multiselect__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-multiselect__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-multiselect__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-200)}\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 }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", 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 let-height="height" let-virtual="virtual">
+      <li
+        class="cb-multiselect__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)"
+        [style.height.px]="height"
+        [attr.aria-selected]="isSelected(item.opt)"
+        [attr.aria-disabled]="isOptionDisabled(item.opt) ? 'true' : null"
+        [attr.aria-setsize]="virtual ? filteredOptions().length : null"
+        [attr.aria-posinset]="virtual ? item.index + 1 : null"
+        (click)="toggleOption(item.opt)"
+        (mouseenter)="activeIndex.set(item.index)"
+      >
+        <span class="cb-multiselect__check" [class.cb-is-checked]="isSelected(item.opt)" aria-hidden="true">
+          @if (isSelected(item.opt)) {
+            <cb-icon name="check" [size]="14" />
+          }
+        </span>
+        {{ labelOf(item.opt) }}
+      </li>
+    </ng-template>
+  `, styles: [":host{display:block}.cb-multiselect__trigger{display:flex;align-items:center;gap:var(--cb-space-2);width:100%;min-height:2.5rem;padding:0 var(--cb-space-3);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-multiselect__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-multiselect__trigger:focus-visible,.cb-multiselect__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-multiselect__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-multiselect__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default;background-color:var(--cb-color-surface)}.cb-multiselect__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.cb-multiselect__label--placeholder{color:var(--cb-color-text-muted)}.cb-multiselect__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast) var(--cb-ease)}.cb-multiselect__trigger.cb-is-open .cb-multiselect__chevron{transform:rotate(180deg)}.cb-multiselect__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-multiselect__header{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2);border-bottom:1px solid var(--cb-color-border)}.cb-multiselect__all{display:inline-flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-1) var(--cb-space-2);border:none;background:transparent;color:var(--cb-color-text);border-radius:var(--cb-radius-sm);cursor:pointer;font:inherit;white-space:nowrap}.cb-multiselect__all:hover{background-color:var(--cb-color-surface-hover)}.cb-multiselect__filter-input{flex:1 1 auto;min-width:0;padding:var(--cb-space-1) var(--cb-space-2);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;outline:none}.cb-multiselect__filter-input:focus{border-color:var(--cb-color-primary-500)}.cb-multiselect__list{list-style:none;margin:0;padding:var(--cb-space-1);max-height:15rem;overflow-y:auto}.cb-multiselect__option{display:flex;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-radius:var(--cb-radius-sm);cursor:pointer;color:var(--cb-color-text)}.cb-multiselect__option.cb-is-active{background-color:var(--cb-color-surface-hover)}.cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-700)}.cb-multiselect__option.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-multiselect__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast)}.cb-multiselect__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-multiselect__empty{padding:var(--cb-space-3);color:var(--cb-color-text-muted);text-align:center}:host-context([data-theme=\"dark\"]) .cb-multiselect__option.cb-is-selected{color:var(--cb-color-primary-200)}.cb-multiselect__group{list-style:none;margin:0;padding:0}.cb-multiselect__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-multiselect__list--virtual{max-height:none}.cb-multiselect__spacer{position:relative;list-style:none}.cb-multiselect__window{list-style:none;margin:0;padding:0}.cb-multiselect__list--virtual .cb-multiselect__option{box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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 }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", 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/multiselect