@caribeng/ui 22.1.1 → 22.4.0

package/types/caribeng-ui-kbd.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/** Plataforma para la que se muestran las teclas. `auto` la detecta en el navegador. */
+type CbKbdPlatform = 'auto' | 'mac' | 'other';
+interface KeyLabel {
+    /** Texto visible. */
+    text: string;
+    /** Nombre leído por el lector de pantalla cuando el visible es un símbolo. */
+    spoken?: string;
+}
+/**
+ * Tecla o atajo de teclado de CaribeNG. Con contenido muestra una tecla; con
+ * `keys` muestra la combinación (⌘ K en Mac, Ctrl + K en el resto).
+ *
+ * @example
+ * ```html
+ * <cb-kbd>Esc</cb-kbd>
+ * <cb-kbd [keys]="['mod', 'K']" />
+ * ```
+ */
+declare class CbKbd {
+    private readonly doc;
+    /** Teclas de la combinación: nombres (`mod`, `shift`, `alt`, `enter`, `up`…) o texto libre (`K`, `F2`). */
+    readonly keys: _angular_core.InputSignal<readonly string[]>;
+    /** Plataforma a mostrar. `auto` la detecta (⌘ en Mac). */
+    readonly platform: _angular_core.InputSignal<CbKbdPlatform>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    protected readonly isMac: _angular_core.Signal<boolean>;
+    protected readonly labels: _angular_core.Signal<KeyLabel[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbKbd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbKbd, "cb-kbd", never, { "keys": { "alias": "keys"; "required": false; "isSignal": true; }; "platform": { "alias": "platform"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CbKbd };
+export type { CbKbdPlatform };
+//# sourceMappingURL=caribeng-ui-kbd.d.ts.map

package/types/caribeng-ui-keyfilter.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+
+/** Filtros predefinidos (como el KeyFilter de PrimeNG). */
+type CbKeyFilterPreset = 'int' | 'pint' | 'num' | 'pnum' | 'money' | 'alpha' | 'alphanum' | 'hex' | 'email';
+/**
+ * KeyFilter de CaribeNG: limita los caracteres que se pueden escribir en un
+ * `input` o `textarea`. Usa el evento `beforeinput`, así filtra lo tecleado,
+ * lo pegado y lo autocompletado (no solo las teclas).
+ *
+ * Solo restringe la entrada: valida el formato final con Validators en el formulario.
+ *
+ * @example
+ * ```html
+ * <input cbKeyFilter="pint" inputmode="numeric" aria-label="Número de cédula" />
+ * <input [cbKeyFilter]="/[A-Z0-9]/" aria-label="Placa" />
+ * ```
+ */
+declare class CbKeyFilter {
+    /** Filtro predefinido o expresión que debe cumplir cada carácter. */
+    readonly cbKeyFilter: i0.InputSignal<RegExp | CbKeyFilterPreset>;
+    /** ¿Se acepta este texto? (cada carácter debe cumplir el filtro). */
+    allows(text: string): boolean;
+    protected onBeforeInput(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CbKeyFilter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CbKeyFilter, "input[cbKeyFilter], textarea[cbKeyFilter]", never, { "cbKeyFilter": { "alias": "cbKeyFilter"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CbKeyFilter };
+export type { CbKeyFilterPreset };
+//# sourceMappingURL=caribeng-ui-keyfilter.d.ts.map

package/types/caribeng-ui-listbox.d.ts

@@ -1,5 +1,5 @@
-import * as _caribeng_ui from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -14,14 +14,16 @@ import { ControlValueAccessor } from '@angular/forms';
  * ```
  */
 declare class CbListBox implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly options: _angular_core.InputSignal<readonly unknown[]>;
     readonly optionLabel: _angular_core.InputSignal<string>;
     readonly optionValue: _angular_core.InputSignal<string | null>;
     readonly optionDisabled: _angular_core.InputSignal<string>;
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly filterPlaceholder: _angular_core.InputSignal<string>;
-    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;

package/types/caribeng-ui-megamenu.d.ts

@@ -1,31 +1,66 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMegaMenuLink {
     label: string;
     url?: string;
     icon?: string;
     disabled?: boolean;
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbMegaMenuLink>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 interface CbMegaMenuGroup {
     label: string;
     items: readonly CbMegaMenuLink[];
+    /** `false` oculta el elemento. */
+    visible?: boolean;
 }
 interface CbMegaMenuItem {
     label: string;
     icon?: string;
     groups: readonly CbMegaMenuGroup[];
+    /** `false` oculta el elemento. */
+    visible?: boolean;
 }
-/** Horizontal category menu with multi-column panels. */
+/**
+ * Menú de categorías con paneles de varias columnas (patrón *disclosure
+ * navigation* de WAI-ARIA). Teclado: ←/→ entre categorías, ↓ abre el panel y
+ * entra al primer enlace, ↑/↓ recorre los enlaces y Escape cierra devolviendo
+ * el foco a la categoría.
+ *
+ * @example
+ * ```html
+ * <cb-megamenu [items]="categorias" (itemSelect)="navegar($event)" />
+ * ```
+ */
 declare class CbMegaMenu {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly host;
+    private readonly injector;
+    protected readonly panelId: string;
+    /** Categorías con sus grupos de enlaces. */
     readonly items: _angular_core.InputSignal<readonly CbMegaMenuItem[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMegaMenuItem[]>;
+    /** Nombre accesible de la navegación. Por defecto, "Categorías" del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Se emite al elegir un enlace. */
     readonly itemSelect: _angular_core.OutputEmitterRef<CbMegaMenuLink>;
     protected readonly openIndex: _angular_core.WritableSignal<number | null>;
     toggle(index: number): void;
     select(link: CbMegaMenuLink): void;
     close(): void;
     onDocumentClick(event: MouseEvent): void;
+    /** Al salir el foco del componente (p. ej. con Tab), se cierra el panel. */
+    onFocusOut(event: FocusEvent): void;
+    protected onTriggerKeydown(event: KeyboardEvent, index: number): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    /** Enlaces navegables del panel abierto, en orden de lectura. */
+    private links;
+    private focusTrigger;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMegaMenu, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMegaMenu, "cb-megamenu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, never>;
 }

package/types/caribeng-ui-mentions.d.ts

@@ -0,0 +1,127 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbRequiredIndicator } from '@caribeng/ui';
+import { ControlValueAccessor } from '@angular/forms';
+
+/** Persona, etiqueta o elemento que se puede mencionar. */
+interface CbMentionItem {
+    readonly id: string;
+    /** Texto que se inserta tras el disparador (`@Laura Gómez`). */
+    readonly label: string;
+    /** Texto secundario en la lista (cargo, correo…). */
+    readonly description?: string;
+    /** Imagen del avatar en la lista. */
+    readonly avatar?: string;
+    /** Disparador al que pertenece (`@` por defecto, `#` para etiquetas…). */
+    readonly trigger?: string;
+}
+/** Mención presente en el texto. */
+interface CbMention {
+    readonly id: string;
+    readonly label: string;
+    readonly trigger: string;
+}
+/** Búsqueda en curso (para pedir sugerencias al servidor). */
+interface CbMentionSearch {
+    readonly trigger: string;
+    readonly query: string;
+}
+/**
+ * Campo de texto con menciones de CaribeNG: al escribir `@` (u otro
+ * disparador como `#`) muestra sugerencias junto al cursor, que se filtran
+ * sin tildes y se eligen con el teclado o el ratón. Funciona con Angular Forms
+ * (el valor es el texto) y emite las menciones presentes con su `id`.
+ *
+ * @example
+ * ```html
+ * <cb-mentions label="Comentario" [suggestions]="equipo" formControlName="comentario" (mentionsChange)="menciones = $event" />
+ * ```
+ */
+declare class CbMentions implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly injector;
+    private readonly fieldEl;
+    private readonly panelTpl;
+    private overlayRef;
+    protected readonly inputId: string;
+    protected readonly listId: string;
+    /** Texto (bidireccional y con Angular Forms). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Elementos mencionables. Cada uno puede indicar su `trigger`. */
+    readonly suggestions: _angular_core.InputSignal<readonly CbMentionItem[]>;
+    /** Caracteres que abren las sugerencias. */
+    readonly triggers: _angular_core.InputSignal<readonly string[]>;
+    /** Filtra `suggestions` con lo escrito. Desactívalo si llegan ya filtradas del servidor. */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Máximo de sugerencias visibles. */
+    readonly maxResults: _angular_core.InputSignal<number>;
+    /** Muestra "Cargando" mientras no hay sugerencias. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Nombre accesible sin `label` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly requiredIndicator: _angular_core.InputSignal<CbRequiredIndicator | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Lo escrito tras el disparador (para pedir sugerencias). */
+    readonly search: _angular_core.OutputEmitterRef<CbMentionSearch>;
+    /** Menciones presentes en el texto, cada vez que cambian. */
+    readonly mentionsChange: _angular_core.OutputEmitterRef<CbMention[]>;
+    protected readonly fieldState: _caribeng_ui.CbFieldState;
+    private readonly cvaDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private readonly query;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    /** Menciones elegidas (se conservan mientras su texto siga en el campo). */
+    private chosen;
+    private lastMentions;
+    protected readonly results: _angular_core.Signal<CbMentionItem[]>;
+    protected readonly activeId: _angular_core.Signal<string | null>;
+    private onChange;
+    private onTouched;
+    protected initials(item: CbMentionItem): string;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    /** Busca un disparador justo antes del cursor y abre (o cierra) las sugerencias. */
+    detect(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    /** Inserta la mención elegida en lugar de lo escrito tras el disparador. */
+    protected choose(item: CbMentionItem): void;
+    /** Quita las menciones cuyo texto ya no está y avisa si cambió la lista. */
+    private syncMentions;
+    private openPanel;
+    private position;
+    /** Cierra las sugerencias. */
+    close(): void;
+    private scrollActiveIntoView;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMentions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMentions, "cb-mentions", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "triggers": { "alias": "triggers"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "requiredIndicator": { "alias": "requiredIndicator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "mentionsChange": "mentionsChange"; }, never, never, true, never>;
+}
+
+/**
+ * Posición (px, relativa al campo) del carácter `index` de un textarea o
+ * input, con un div espejo invisible que copia su tipografía y su ancho.
+ * Sirve para abrir el panel de sugerencias justo bajo lo que se escribe.
+ */
+declare function cbCaretCoordinates(field: HTMLTextAreaElement | HTMLInputElement, index: number): {
+    top: number;
+    left: number;
+    height: number;
+};
+
+export { CbMentions, cbCaretCoordinates };
+export type { CbMention, CbMentionItem, CbMentionSearch };
+//# sourceMappingURL=caribeng-ui-mentions.d.ts.map

package/types/caribeng-ui-menu.d.ts

@@ -1,4 +1,6 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMenuItem {
     label: string;
@@ -7,15 +9,25 @@ interface CbMenuItem {
     target?: string;
     disabled?: boolean;
     separator?: boolean;
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbMenuItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Popup menu anchored to any trigger element. */
 declare class CbMenu {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly overlay;
     private readonly vcr;
     private readonly destroyRef;
     readonly items: _angular_core.InputSignal<readonly CbMenuItem[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMenuItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbMenuItem>;
+    /** Se emite al cerrarse el menú (clic fuera, Escape o al elegir una opción). */
+    readonly hidden: _angular_core.OutputEmitterRef<void>;
     private readonly content;
     private overlayRef;
     private trigger;
@@ -29,7 +41,7 @@ declare class CbMenu {
     onPanelClick(event: MouseEvent): void;
     private onKeydown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMenu, "cb-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMenu, "cb-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; "hidden": "hidden"; }, never, never, true, never>;
 }
 
 export { CbMenu };

package/types/caribeng-ui-menubar.d.ts

@@ -1,4 +1,6 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMenubarItem {
     label: string;
@@ -7,12 +9,21 @@ interface CbMenubarItem {
     target?: string;
     disabled?: boolean;
     items?: readonly CbMenubarItem[];
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbMenubarItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Horizontal navigation bar with optional one-level dropdown menus. */
 declare class CbMenubar {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly host;
+    private readonly injector;
     readonly items: _angular_core.InputSignal<readonly CbMenubarItem[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMenubarItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbMenubarItem>;
     protected readonly openIndex: _angular_core.WritableSignal<number | null>;
     toggle(index: number): void;

package/types/caribeng-ui-message.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 import { CbSeverity } from '@caribeng/ui';
 
 /**
@@ -11,6 +12,8 @@ import { CbSeverity } from '@caribeng/ui';
  * ```
  */
 declare class CbMessage {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly severity: _angular_core.InputSignal<CbSeverity>;
     /** Muestra el botón de cerrar. */
     readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -18,6 +21,8 @@ declare class CbMessage {
     readonly icon: _angular_core.InputSignal<string | null>;
     /** Visibilidad (two-way). */
     readonly visible: _angular_core.ModelSignal<boolean>;
+    /** danger y warning se anuncian al momento (`alert`); el resto, sin interrumpir (`status`). */
+    protected readonly urgent: _angular_core.Signal<boolean>;
     /** Se emite al cerrar. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     protected readonly iconName: _angular_core.Signal<string>;

package/types/caribeng-ui-metergroup.d.ts

@@ -12,11 +12,19 @@ interface CbMeterItem {
 declare class CbMeterGroup {
     readonly values: _angular_core.InputSignal<CbMeterItem[]>;
     readonly max: _angular_core.InputSignal<number>;
+    /** Nombre accesible del medidor (p. ej. "Almacenamiento"). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Suma de los valores (valor actual del `role="meter"`). */
+    protected readonly total: _angular_core.Signal<number>;
+    /** Desglose legible para el lector de pantalla ("Apps 16 %, Fotos 8 %"). */
+    protected readonly valueText: _angular_core.Signal<string>;
     private readonly palette;
     protected percent(val: number): number;
+    /** Porcentaje respecto a `max`, redondeado a un decimal. */
+    protected format(val: number): number;
     protected defaultColor(idx: number): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMeterGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMeterGroup, "cb-meter-group", never, { "values": { "alias": "values"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMeterGroup, "cb-meter-group", never, { "values": { "alias": "values"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { CbMeterGroup };

package/types/caribeng-ui-multiselect.d.ts

@@ -1,33 +1,72 @@
-import * as _caribeng_ui from '@caribeng/ui';
-import { CbSize } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat, CbSize } from '@caribeng/ui';
 import { ControlValueAccessor } from '@angular/forms';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 
+/** Opción con su posición en la lista filtrada (la que usan teclado y `aria-activedescendant`). */
+interface IndexedOption {
+    opt: unknown;
+    index: number;
+}
+/** Grupo de opciones ya filtrado; `label` es `null` cuando no se agrupa. */
+interface OptionGroup {
+    label: string | null;
+    options: IndexedOption[];
+}
+/** Fila del modo virtual: cabecera de grupo u opción, todas de la misma altura. */
+type VirtualRow = {
+    kind: 'group';
+    label: string;
+    key: string;
+} | ({
+    kind: 'option';
+} & IndexedOption);
 /**
  * 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 />
  * ```
  */
 declare class CbMultiSelect implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Rellena `{0}`, `{1}`… de un texto traducido. */
+    protected readonly fmt: typeof cbFormat;
+    private readonly injector;
     readonly options: _angular_core.InputSignal<readonly unknown[]>;
     readonly optionLabel: _angular_core.InputSignal<string>;
     readonly optionValue: _angular_core.InputSignal<string | null>;
     readonly optionDisabled: _angular_core.InputSignal<string>;
-    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Las opciones son grupos (`{ label, items }`): se muestran con su título. */
+    readonly group: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Propiedad con el título de cada grupo. */
+    readonly optionGroupLabel: _angular_core.InputSignal<string>;
+    /** Propiedad con las opciones de cada grupo. */
+    readonly optionGroupChildren: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly size: _angular_core.InputSignal<CbSize>;
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly filterPlaceholder: _angular_core.InputSignal<string>;
-    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
     readonly showToggleAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Nº máx. de etiquetas antes de mostrar "N seleccionados". */
     readonly maxSelectedLabels: _angular_core.InputSignal<number>;
+    /** Alto máximo de la lista (CSS). En modo virtual es su alto fijo. */
+    readonly scrollHeight: _angular_core.InputSignal<string>;
+    /** Pinta solo las opciones visibles: para listas de miles de elementos. */
+    readonly virtualScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Alto fijo de cada fila en modo virtual (px). */
+    readonly virtualScrollItemSize: _angular_core.InputSignal<number>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Estado de validación: inputs manuales + estado de Angular Forms. */
     protected readonly fieldState: _caribeng_ui.CbFieldState;
@@ -42,16 +81,30 @@ declare class CbMultiSelect implements ControlValueAccessor {
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly filterText: _angular_core.WritableSignal<string>;
     protected readonly triggerWidth: _angular_core.WritableSignal<number>;
+    protected readonly scrollTop: _angular_core.WritableSignal<number>;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly listboxId: string;
     private readonly triggerRef;
     private readonly filterInputRef;
+    private readonly viewportRef;
     protected readonly positions: ConnectedPosition[];
-    protected readonly filteredOptions: _angular_core.Signal<readonly unknown[]>;
+    private typeahead;
+    private typeaheadTimer;
+    /** Todas las opciones (aplanando los grupos). */
+    protected readonly flatOptions: _angular_core.Signal<readonly unknown[]>;
+    protected readonly filteredGroups: _angular_core.Signal<OptionGroup[]>;
+    protected readonly filteredOptions: _angular_core.Signal<unknown[]>;
+    /** Filas del modo virtual (cabeceras de grupo + opciones). */
+    protected readonly virtualRows: _angular_core.Signal<VirtualRow[]>;
+    protected readonly viewportHeight: _angular_core.Signal<number>;
+    private readonly windowStart;
+    protected readonly windowOffset: _angular_core.Signal<number>;
+    protected readonly visibleRows: _angular_core.Signal<VirtualRow[]>;
     protected readonly selected: _angular_core.Signal<unknown[]>;
     protected readonly displayLabel: _angular_core.Signal<string>;
     protected readonly allSelected: _angular_core.Signal<boolean>;
+    protected readonly activeDescendant: _angular_core.Signal<string | null>;
     constructor();
     private onChange;
     private onTouched;
@@ -73,12 +126,20 @@ declare class CbMultiSelect implements ControlValueAccessor {
     protected isOptionDisabled(opt: unknown): boolean;
     protected isSelected(opt: unknown): boolean;
     protected optionId(index: number): string;
-    protected trackOption(opt: unknown): unknown;
+    protected groupId(index: number): string;
+    private groupLabelOf;
+    private childrenOf;
+    private toggleActive;
+    /** Cambia la opción activa y la desplaza a la vista. */
+    private setActive;
     private firstEnabledIndex;
+    private lastEnabledIndex;
     private move;
+    /** Teclear salta a la siguiente opción que empieza por lo escrito (se reinicia tras 500 ms). */
+    private searchByTyping;
     private commit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMultiSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMultiSelect, "cb-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMultiSelect, "cb-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "optionGroupLabel": { "alias": "optionGroupLabel"; "required": false; "isSignal": true; }; "optionGroupChildren": { "alias": "optionGroupChildren"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { CbMultiSelect };

package/types/caribeng-ui-orderlist.d.ts

@@ -1,14 +1,66 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
+/** Contexto de `<ng-template cbOrderListItem let-item let-index="index">`. */
+interface CbOrderListItemContext<T = any> {
+    $implicit: T;
+    index: number;
+}
+/** Plantilla de cada elemento de un `<cb-orderlist>`. */
+declare class CbOrderListItemTemplate {
+    readonly template: TemplateRef<CbOrderListItemContext<any>>;
+    static ngTemplateContextGuard(_dir: CbOrderListItemTemplate, ctx: unknown): ctx is CbOrderListItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbOrderListItemTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbOrderListItemTemplate, "ng-template[cbOrderListItem]", never, {}, {}, never, never, true, never>;
+}
+/** Evento de reordenación. */
+interface CbOrderListReorderEvent {
+    from: number;
+    to: number;
+    value: readonly unknown[];
+}
+/**
+ * Lista reordenable de CaribeNG. Selecciona un elemento y muévelo con los
+ * botones o con Alt + ↑/↓.
+ *
+ * @example
+ * ```html
+ * <cb-orderlist [(value)]="pasos" header="Orden de aprobación">
+ *   <ng-template cbOrderListItem let-paso>{{ paso.nombre }}</ng-template>
+ * </cb-orderlist>
+ * ```
+ */
 declare class CbOrderList {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly host;
+    private readonly injector;
+    protected readonly headerId: string;
+    /** Elementos, en orden (two-way). */
     readonly value: _angular_core.ModelSignal<readonly unknown[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly selected: _angular_core.WritableSignal<unknown>;
-    protected index(): number;
-    protected move(direction: number): void;
+    /** Título visible de la lista (también la nombra para el lector de pantalla). */
+    readonly header: _angular_core.InputSignal<string>;
+    /** Nombre accesible cuando no hay `header`. Por defecto, el del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Se emite tras mover un elemento. */
+    readonly reorder: _angular_core.OutputEmitterRef<CbOrderListReorderEvent>;
+    protected readonly itemTemplate: _angular_core.Signal<CbOrderListItemTemplate | undefined>;
+    /** Índice seleccionado (se guarda por posición: admite elementos repetidos). */
+    protected readonly selectedIndex: _angular_core.WritableSignal<number>;
+    protected readonly focusedIndex: _angular_core.WritableSignal<number>;
+    protected readonly tabbableIndex: _angular_core.Signal<number>;
+    protected readonly listLabel: _angular_core.Signal<string>;
+    protected readonly canMoveUp: _angular_core.Signal<boolean>;
+    protected readonly canMoveDown: _angular_core.Signal<boolean>;
+    protected select(index: number): void;
+    protected moveBy(delta: number): void;
+    protected moveTo(to: number): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private focusItem;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbOrderList, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbOrderList, "cb-orderlist", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbOrderList, "cb-orderlist", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "reorder": "reorder"; }, ["itemTemplate"], never, true, never>;
 }
 
-export { CbOrderList };
+export { CbOrderList, CbOrderListItemTemplate };
+export type { CbOrderListItemContext, CbOrderListReorderEvent };
 //# sourceMappingURL=caribeng-ui-orderlist.d.ts.map