@caribeng/ui 22.1.1 → 22.4.0

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

@@ -1,11 +1,21 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 /** Ciclo de facturación del selector de precios. */
 type CbPricingBilling = 'monthly' | 'annual';
-/** Una característica de un plan. Puede ser texto o un objeto con estado. */
+/**
+ * Disposición de los planes:
+ * - `grid`: tarjetas que se reparten en varias filas según el ancho.
+ * - `horizontal`: todas las tarjetas en una sola fila (con scroll si no caben),
+ *   selector de facturación a la derecha del título y precio anual expresado por mes.
+ * - `list`: cada plan es una fila (cabecera, características y CTA).
+ */
+type CbPricingLayout = 'grid' | 'horizontal' | 'list';
+/** Una característica de un plan. Puede ser texto o un objeto con estado e icono. */
 type CbPricingFeature = string | {
     label: string;
     included?: boolean;
+    icon?: string;
 };
 /** Definición de un plan de precios. */
 interface CbPricingPlan {
@@ -25,6 +35,8 @@ interface CbPricingPlan {
     features?: CbPricingFeature[];
     /** Resalta el plan (destacado). */
     featured?: boolean;
+    /** Etiqueta junto al nombre. En el plan destacado vale "Recomendado" si se omite; `''` la oculta. */
+    badge?: string;
     /** Texto del botón (por defecto "Elegir {name}"). */
     ctaLabel?: string;
 }
@@ -39,34 +51,62 @@ interface CbPricingPlan {
  * ```
  */
 declare class CbPricing {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly host;
     /** Planes a mostrar. */
     readonly plans: _angular_core.InputSignal<readonly CbPricingPlan[]>;
     /** Ciclo activo (two-way). */
     readonly billing: _angular_core.ModelSignal<CbPricingBilling>;
     /** Muestra el selector Mensual/Anual. */
     readonly showToggle: _angular_core.InputSignal<boolean>;
-    /** Disposición de los planes: 'grid' (tarjetas) u 'horizontal' (filas). */
-    readonly layout: _angular_core.InputSignal<"grid" | "horizontal">;
+    /** Disposición de los planes (ver {@link CbPricingLayout}). */
+    readonly layout: _angular_core.InputSignal<CbPricingLayout>;
     /** Título opcional sobre la tabla. */
     readonly title: _angular_core.InputSignal<string>;
+    /** Texto de ayuda bajo el título (solo en `horizontal`). */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Etiqueta junto a la opción anual (p. ej. "25% OFF"; solo en `horizontal`). */
+    readonly annualBadge: _angular_core.InputSignal<string>;
+    /**
+     * Cómo se muestra el precio anual: `total` (importe del año, "/año") o `monthly`
+     * (equivalente mensual, "/mes", con el total facturado y el ahorro debajo).
+     * Por defecto `monthly` en `horizontal` y `total` en el resto.
+     */
+    readonly annualDisplay: _angular_core.InputSignal<"monthly" | "total" | undefined>;
     /** Símbolo de moneda. */
     readonly currency: _angular_core.InputSignal<string>;
     /** Etiquetas configurables. */
-    readonly monthlyLabel: _angular_core.InputSignal<string>;
-    readonly annualLabel: _angular_core.InputSignal<string>;
-    readonly perMonthLabel: _angular_core.InputSignal<string>;
-    readonly perYearLabel: _angular_core.InputSignal<string>;
+    readonly monthlyLabel: _angular_core.InputSignal<string | undefined>;
+    readonly annualLabel: _angular_core.InputSignal<string | undefined>;
+    readonly perMonthLabel: _angular_core.InputSignal<string | undefined>;
+    readonly perYearLabel: _angular_core.InputSignal<string | undefined>;
     /** Prefijo del CTA cuando el plan no define `ctaLabel`. */
-    readonly ctaLabel: _angular_core.InputSignal<string>;
+    readonly ctaLabel: _angular_core.InputSignal<string | undefined>;
     /** Emite el plan elegido. */
     readonly planSelect: _angular_core.OutputEmitterRef<CbPricingPlan>;
+    protected readonly choices: readonly CbPricingBilling[];
+    protected readonly horizontal: _angular_core.Signal<boolean>;
     protected readonly annual: _angular_core.Signal<boolean>;
+    private readonly annualMonthly;
+    /** El precio visible es mensual (ciclo mensual, o anual expresado por mes). */
+    protected readonly perMonthShown: _angular_core.Signal<boolean>;
+    private readonly numberFormat;
+    protected num(n: number): string;
+    private annualOf;
     protected priceOf(p: CbPricingPlan): number;
     protected oldPriceOf(p: CbPricingPlan): number | undefined;
+    protected billedOf(p: CbPricingPlan): string;
+    protected savingOf(p: CbPricingPlan): number;
+    protected savingLabel(p: CbPricingPlan): string;
+    protected badgeOf(p: CbPricingPlan): string;
     protected labelOf(f: CbPricingFeature): string;
     protected includedOf(f: CbPricingFeature): boolean;
+    protected iconOf(f: CbPricingFeature): string;
+    /** Flechas dentro del grupo de opciones de facturación (patrón radiogroup). */
+    protected onChoiceKey(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbPricing, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbPricing, "cb-pricing", never, { "plans": { "alias": "plans"; "required": false; "isSignal": true; }; "billing": { "alias": "billing"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "monthlyLabel": { "alias": "monthlyLabel"; "required": false; "isSignal": true; }; "annualLabel": { "alias": "annualLabel"; "required": false; "isSignal": true; }; "perMonthLabel": { "alias": "perMonthLabel"; "required": false; "isSignal": true; }; "perYearLabel": { "alias": "perYearLabel"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; }, { "billing": "billingChange"; "planSelect": "planSelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbPricing, "cb-pricing", never, { "plans": { "alias": "plans"; "required": false; "isSignal": true; }; "billing": { "alias": "billing"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "annualBadge": { "alias": "annualBadge"; "required": false; "isSignal": true; }; "annualDisplay": { "alias": "annualDisplay"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "monthlyLabel": { "alias": "monthlyLabel"; "required": false; "isSignal": true; }; "annualLabel": { "alias": "annualLabel"; "required": false; "isSignal": true; }; "perMonthLabel": { "alias": "perMonthLabel"; "required": false; "isSignal": true; }; "perYearLabel": { "alias": "perYearLabel"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; }, { "billing": "billingChange"; "planSelect": "planSelect"; }, never, never, true, never>;
 }
 
 export { CbPricing };

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

@@ -0,0 +1,88 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+
+/** Nivel de corrección de errores: recupera ~7 % (L), 15 % (M), 25 % (Q) o 30 % (H) del código. */
+type CbQrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
+/** Matriz QR: `modules[y][x]` es `true` en los módulos oscuros. */
+interface CbQrMatrix {
+    /** Versión elegida (1–40). */
+    readonly version: number;
+    /** Módulos por lado (17 + 4 × versión). */
+    readonly size: number;
+    readonly errorCorrection: CbQrErrorCorrection;
+    /** Máscara aplicada (0–7). */
+    readonly mask: number;
+    readonly modules: readonly (readonly boolean[])[];
+}
+interface CbQrEncodeOptions {
+    /** Por defecto `M`. */
+    errorCorrection?: CbQrErrorCorrection;
+    /** Versión mínima (1–40). Por defecto 1. */
+    minVersion?: number;
+}
+/** Codewords de corrección de `data` (resto de la división por el generador). */
+declare function cbQrReedSolomon(data: readonly number[], degree: number): number[];
+/** 15 bits de formato (nivel + máscara), ya con la máscara XOR del estándar. */
+declare function cbQrFormatBits(ec: CbQrErrorCorrection, mask: number): number;
+/**
+ * Codifica `text` como matriz QR. Elige el modo más compacto, la versión más
+ * pequeña que lo contiene y la máscara con menor penalización.
+ *
+ * @throws RangeError si el texto no cabe en la versión 40 con ese nivel.
+ */
+declare function cbQrEncode(text: string, options?: CbQrEncodeOptions): CbQrMatrix;
+/** Niveles ordenados de menor a mayor corrección. */
+declare const CB_QR_ERROR_CORRECTION_LEVELS: readonly CbQrErrorCorrection[];
+
+/**
+ * Código QR de CaribeNG, generado en SVG con un codificador propio (sin
+ * dependencias). Elige solo la versión y la máscara; admite color, fondo,
+ * margen y un logo centrado.
+ *
+ * @example
+ * ```html
+ * <cb-qrcode value="https://caribeng.dev" [size]="180" />
+ * <cb-qrcode [value]="pago" errorCorrection="H" image="assets/logo.svg" />
+ * ```
+ */
+declare class CbQrcode {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Texto o URL a codificar. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Lado en píxeles. */
+    readonly size: _angular_core.InputSignal<number>;
+    /** Corrección de errores. Usa `H` si pones un logo encima. */
+    readonly errorCorrection: _angular_core.InputSignal<CbQrErrorCorrection>;
+    /** Color de los módulos (cualquier color CSS). */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Color de fondo. Mantén buen contraste con `color` para que se pueda leer. */
+    readonly background: _angular_core.InputSignal<string>;
+    /** Margen claro alrededor, en módulos (el estándar pide 4). */
+    readonly margin: _angular_core.InputSignal<number>;
+    /** Logo centrado (URL). Ocupa ~20 % del lado; combínalo con `errorCorrection="H"`. */
+    readonly image: _angular_core.InputSignal<string>;
+    /** Nombre accesible. Por defecto, "Código QR" del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Matriz codificada, o `null` si el valor está vacío o no cabe en un QR. */
+    readonly matrix: _angular_core.Signal<CbQrMatrix | null>;
+    protected readonly extent: _angular_core.Signal<number>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected readonly label: _angular_core.Signal<string>;
+    /** Módulos oscuros como un único path; une los consecutivos de cada fila. */
+    protected readonly path: _angular_core.Signal<string>;
+    /** Caja del logo (en módulos), centrada y alineada a la rejilla. */
+    protected readonly logo: _angular_core.Signal<{
+        box: number;
+        pad: number;
+        inset: number;
+    } | null>;
+    /** Marcado SVG del QR, p. ej. para descargarlo (`new Blob([qr.toSvg()], { type: 'image/svg+xml' })`). */
+    toSvg(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbQrcode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbQrcode, "cb-qrcode", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "errorCorrection": { "alias": "errorCorrection"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CB_QR_ERROR_CORRECTION_LEVELS, CbQrcode, cbQrEncode, cbQrFormatBits, cbQrReedSolomon };
+export type { CbQrEncodeOptions, CbQrErrorCorrection, CbQrMatrix };
+//# sourceMappingURL=caribeng-ui-qrcode.d.ts.map

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

@@ -1,6 +1,6 @@
-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';
 
 /**
@@ -13,6 +13,10 @@ import { ControlValueAccessor } from '@angular/forms';
  * ```
  */
 declare class CbRating 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;
     /** Valor seleccionado (two-way opcional fuera de Angular Forms). */
     readonly value: _angular_core.ModelSignal<number>;
     /** Número de estrellas. */

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

@@ -0,0 +1,79 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
+import { AbstractControl, FormArray } from '@angular/forms';
+
+interface CbRepeaterItemContext<T extends AbstractControl = any> {
+    /** Control del elemento (normalmente un FormGroup). */
+    $implicit: T;
+    index: number;
+    /** Nombre del elemento ("Beneficiario 2"). */
+    label: string;
+}
+/** Plantilla de cada elemento: `<ng-template cbRepeaterItem let-grupo let-i="index">`. */
+declare class CbRepeaterItem {
+    readonly template: TemplateRef<CbRepeaterItemContext<any>>;
+    static ngTemplateContextGuard(_dir: CbRepeaterItem, ctx: unknown): ctx is CbRepeaterItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbRepeaterItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbRepeaterItem, "ng-template[cbRepeaterItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Repeater de CaribeNG: lista repetible de campos sobre un `FormArray`
+ * ("Agregar beneficiario"). Cada elemento es un grupo nombrado con su botón de
+ * quitar; respeta `min` y `max`, mueve el foco al agregar y quitar, y anuncia
+ * los cambios al lector de pantalla.
+ *
+ * @example
+ * ```html
+ * <cb-repeater [formArray]="beneficiarios" [createItem]="nuevoBeneficiario" itemLabel="Beneficiario" [max]="5">
+ *   <ng-template cbRepeaterItem let-grupo>
+ *     <ng-container [formGroup]="grupo">
+ *       <cb-input label="Nombre" formControlName="nombre" />
+ *     </ng-container>
+ *   </ng-template>
+ * </cb-repeater>
+ * ```
+ */
+declare class CbRepeater {
+    /** 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 host;
+    private readonly injector;
+    protected readonly itemTemplate: _angular_core.Signal<CbRepeaterItem | undefined>;
+    /** FormArray con un control por elemento. */
+    readonly formArray: _angular_core.InputSignal<FormArray<any>>;
+    /** Crea el control de un elemento nuevo (p. ej. `() => fb.group({ nombre: [''] })`). */
+    readonly createItem: _angular_core.InputSignal<() => AbstractControl>;
+    /** Nombre de cada elemento ("Beneficiario" → "Beneficiario 1", "Beneficiario 2"…). Por defecto, "Elemento" del idioma activo. */
+    readonly itemLabel: _angular_core.InputSignal<string | undefined>;
+    /** Texto del botón de agregar. Por defecto, "Agregar beneficiario". */
+    readonly addLabel: _angular_core.InputSignal<string | undefined>;
+    /** Mínimo de elementos (no se puede quitar por debajo). */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Máximo de elementos (el botón de agregar se deshabilita). */
+    readonly max: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly itemAdd: _angular_core.OutputEmitterRef<number>;
+    readonly itemRemove: _angular_core.OutputEmitterRef<number>;
+    /** Controles del FormArray (se actualiza también si el FormArray cambia desde fuera). */
+    protected readonly controls: _angular_core.WritableSignal<readonly AbstractControl<any, any, any>[]>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    protected readonly canAdd: _angular_core.Signal<boolean>;
+    protected readonly addText: _angular_core.Signal<string>;
+    constructor();
+    protected labelFor(index: number): string;
+    /** Agrega un elemento al final y lleva el foco a su primer campo. */
+    add(): void;
+    /** Quita un elemento y deja el foco en el anterior (o en el botón de agregar). */
+    remove(index: number): void;
+    private focusAfterRender;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbRepeater, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbRepeater, "cb-repeater", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; "createItem": { "alias": "createItem"; "required": true; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "addLabel": { "alias": "addLabel"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemAdd": "itemAdd"; "itemRemove": "itemRemove"; }, ["itemTemplate"], never, true, never>;
+}
+
+export { CbRepeater, CbRepeaterItem };
+export type { CbRepeaterItemContext };
+//# sourceMappingURL=caribeng-ui-repeater.d.ts.map

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

@@ -0,0 +1,35 @@
+import * as _angular_core from '@angular/core';
+
+type CbResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+/**
+ * Result de CaribeNG: pantalla de resultado (operación exitosa, error,
+ * aviso) o de error HTTP (404, 403, 500) con título, subtítulo, contenido extra
+ * y acciones proyectadas.
+ *
+ * @example
+ * ```html
+ * <cb-result status="success" title="Transferencia enviada" subtitle="Comprobante #48213">
+ *   <cb-button>Volver al inicio</cb-button>
+ * </cb-result>
+ * ```
+ */
+declare class CbResult {
+    /** Tipo de resultado: define el icono y el color. */
+    readonly status: _angular_core.InputSignal<CbResultStatus>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Icono propio (en lugar del del estado). */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Nivel del encabezado del título (por defecto 2). */
+    readonly headingLevel: _angular_core.InputSignal<number>;
+    protected readonly isHttp: _angular_core.Signal<boolean>;
+    protected readonly defaultIcon: _angular_core.Signal<string>;
+    /** Los errores HTTP usan el color neutro; los demás, el de su estado. */
+    protected readonly statusClass: _angular_core.Signal<CbResultStatus | "http">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbResult, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbResult, "cb-result", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CbResult };
+export type { CbResultStatus };
+//# sourceMappingURL=caribeng-ui-result.d.ts.map

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 /**
  * ScrollPanel de CaribeNG: contenedor de desplazamiento con barras estilizadas
@@ -12,12 +13,14 @@ import * as _angular_core from '@angular/core';
  * ```
  */
 declare class CbScrollPanel {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     /** Ancho CSS del contenedor (ej. `'100%'`, `'320px'`). */
     readonly width: _angular_core.InputSignal<string>;
     /** Alto CSS del contenedor (ej. `'200px'`). */
     readonly height: _angular_core.InputSignal<string>;
     /** Etiqueta accesible para la región con scroll. */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     private readonly viewportRef;
     /** Desplaza el contenido a la posición indicada. */
     scrollTop(top: number): void;

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 type CbScrollTopTarget = 'window' | 'parent';
 /**
@@ -16,6 +17,8 @@ type CbScrollTopTarget = 'window' | 'parent';
  * ```
  */
 declare class CbScrollTop {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly doc;
     private readonly hostRef;
     private readonly destroyRef;
@@ -28,7 +31,7 @@ declare class CbScrollTop {
     /** Nombre del icono de `<cb-icon>`. */
     readonly icon: _angular_core.InputSignal<string>;
     /** Etiqueta accesible para el botón. */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly visible: _angular_core.WritableSignal<boolean>;
     private cleanupFn;
     constructor();

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

@@ -1,30 +1,72 @@
+import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
 import { CbSize } from '@caribeng/ui';
-import * as _angular_core from '@angular/core';
 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);
 /**
  * Select (dropdown) de CaribeNG. Listbox accesible sobre CDK Overlay con
- * navegación por teclado, filtro opcional e integración con Angular Forms
+ * navegación por teclado, búsqueda al teclear, filtro opcional, grupos,
+ * scroll virtual para listas grandes e integración con Angular Forms
  * mediante `ControlValueAccessor`.
  *
  * @example
  * ```html
  * <cb-select [options]="ciudades" optionLabel="nombre" optionValue="id"
- *            formControlName="ciudad" placeholder="Elige una ciudad" />
+ *            formControlName="ciudad" placeholder="Elige una ciudad" showClear />
+ *
+ * <!-- Agrupado: [{ label: 'Colombia', items: [...] }, …] -->
+ * <cb-select [options]="paises" group optionLabel="nombre" />
+ *
+ * <!-- 10 000 opciones -->
+ * <cb-select [options]="clientes" virtualScroll [virtualScrollItemSize]="36" filter />
  * ```
  */
 declare class CbSelect implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    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>;
+    /** Muestra un botón para vaciar la selección. */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** 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;
@@ -40,15 +82,29 @@ declare class CbSelect 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 selectedOption: _angular_core.Signal<{} | null>;
     protected readonly displayLabel: _angular_core.Signal<string>;
+    protected readonly canClear: _angular_core.Signal<boolean>;
     protected readonly activeDescendant: _angular_core.Signal<string | null>;
     constructor();
     private onChange;
@@ -61,6 +117,8 @@ declare class CbSelect implements ControlValueAccessor {
     protected openPanel(): void;
     protected close(): void;
     protected selectOption(opt: unknown): void;
+    /** Vacía la selección (botón de `showClear`) y devuelve el foco al disparador. */
+    clear(): void;
     protected onBlur(): void;
     protected onFilter(event: Event): void;
     protected onOverlayKeydown(event: KeyboardEvent): void;
@@ -70,14 +128,20 @@ declare class CbSelect 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;
+    /** Cambia la opción activa y la desplaza a la vista. */
+    private setActive;
     private move;
+    /** Teclear salta a la siguiente opción que empieza por lo escrito (se reinicia tras 500 ms). */
+    private searchByTyping;
     private selectActive;
     private firstEnabledIndex;
     private lastEnabledIndex;
     private ensureActiveVisible;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbSelect, "cb-select", 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; }; "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<CbSelect, "cb-select", 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; }; "showClear": { "alias": "showClear"; "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 { CbSelect };