@caribeng/ui 22.1.1 → 22.2.0

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

@@ -1,16 +1,48 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
+/**
+ * Confirmación breve de CaribeNG. Ábrela anclada al botón que la dispara con
+ * `confirm($event)` (como PrimeNG), o en línea con `[(visible)]`. Escape o un
+ * clic fuera la cancelan; el foco vuelve al disparador al cerrarse.
+ *
+ * @example
+ * ```html
+ * <cb-button severity="danger" (click)="borrar.confirm($event)">Eliminar</cb-button>
+ * <cb-confirm-popup #borrar message="¿Eliminar este archivo?" (accepted)="eliminar()" />
+ * ```
+ */
 declare class CbConfirmPopup {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly injector;
+    protected readonly messageId: string;
+    /** Visibilidad (two-way). Con `[(visible)]` se muestra en línea. */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    readonly message: _angular_core.InputSignal<string>;
-    readonly acceptLabel: _angular_core.InputSignal<string>;
-    readonly rejectLabel: _angular_core.InputSignal<string>;
+    /** Pregunta a confirmar. Por defecto, la del idioma activo. */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    readonly acceptLabel: _angular_core.InputSignal<string | undefined>;
+    readonly rejectLabel: _angular_core.InputSignal<string | undefined>;
+    /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+    readonly acceptSeverity: _angular_core.InputSignal<"primary" | "danger" | "success" | "warning">;
     readonly accepted: _angular_core.OutputEmitterRef<void>;
     readonly rejected: _angular_core.OutputEmitterRef<void>;
-    protected confirm(): void;
+    private readonly panel;
+    /** Abierta como overlay anclado a un disparador. */
+    protected readonly anchored: _angular_core.WritableSignal<boolean>;
+    private overlayRef;
+    private trigger;
+    private readonly positions;
+    /** Abre la confirmación anclada al elemento que recibió el evento. */
+    confirm(event: Event): void;
+    /** Abre la confirmación anclada a `target`. */
+    show(target: HTMLElement): void;
+    protected accept(): void;
     protected reject(): void;
+    private close;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbConfirmPopup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbConfirmPopup, "cb-confirm-popup", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; "isSignal": true; }; "rejectLabel": { "alias": "rejectLabel"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbConfirmPopup, "cb-confirm-popup", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; "isSignal": true; }; "rejectLabel": { "alias": "rejectLabel"; "required": false; "isSignal": true; }; "acceptSeverity": { "alias": "acceptSeverity"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
 export { CbConfirmPopup };

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 interface CbContextMenuItem {
     label: string;
@@ -8,11 +9,13 @@ interface CbContextMenuItem {
 }
 /** Context menu that opens at the pointer position on right click. */
 declare class CbContextMenu {
+    /** 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 CbContextMenuItem[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbContextMenuItem>;
     private readonly content;
     private overlayRef;

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

@@ -1,19 +1,77 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
+/** Elemento con la forma de la presentación por defecto (título, categoría y descripción). */
 interface CbDataViewItem {
     id: string | number;
     title: string;
     description?: string;
     category?: string;
 }
+type CbDataViewLayout = 'grid' | 'list';
+/** Contexto de `<ng-template cbDataViewItem let-item let-layout="layout" let-index="index">`. */
+interface CbDataViewItemContext<T = any> {
+    $implicit: T;
+    layout: CbDataViewLayout;
+    index: number;
+}
+/** Plantilla de cada elemento de un `<cb-dataview>`. */
+declare class CbDataViewItemTemplate {
+    readonly template: TemplateRef<CbDataViewItemContext<any>>;
+    static ngTemplateContextGuard(_dir: CbDataViewItemTemplate, ctx: unknown): ctx is CbDataViewItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataViewItemTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbDataViewItemTemplate, "ng-template[cbDataViewItem]", never, {}, {}, never, never, true, never>;
+}
+/** Contenido de la cabecera de un `<cb-dataview>` (título, filtros, acciones…). */
+declare class CbDataViewHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataViewHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbDataViewHeader, "[cbDataViewHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * DataView de CaribeNG: muestra una colección en lista o cuadrícula con la
+ * plantilla que definas, paginación opcional y botones para cambiar la vista.
+ * Sin plantilla, usa una tarjeta con título, categoría, descripción y botón
+ * de selección.
+ *
+ * @example
+ * ```html
+ * <cb-dataview [value]="productos" [(layout)]="vista" [rows]="6" showLayoutToggle>
+ *   <h3 cbDataViewHeader>Productos</h3>
+ *   <ng-template cbDataViewItem let-producto let-layout="layout">
+ *     <app-producto [producto]="producto" [compacto]="layout === 'list'" />
+ *   </ng-template>
+ * </cb-dataview>
+ * ```
+ */
 declare class CbDataView {
-    readonly value: _angular_core.InputSignal<readonly CbDataViewItem[]>;
-    readonly layout: _angular_core.ModelSignal<"grid" | "list">;
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Colección a mostrar. */
+    readonly value: _angular_core.InputSignal<readonly unknown[]>;
+    /** Vista: cuadrícula o lista (two-way). */
+    readonly layout: _angular_core.ModelSignal<CbDataViewLayout>;
+    /** Muestra los botones para cambiar entre lista y cuadrícula. */
+    readonly showLayoutToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Elementos por página; 0 (por defecto) muestra todos sin paginador. */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Propiedad que identifica cada elemento (para el seguimiento y la selección). */
+    readonly dataKey: _angular_core.InputSignal<string>;
+    /** Elemento seleccionado con la presentación por defecto (two-way). */
     readonly selection: _angular_core.ModelSignal<CbDataViewItem | null>;
-    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Mensaje cuando no hay elementos. Por defecto, el del idioma activo. */
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
+    protected readonly itemTemplate: _angular_core.Signal<CbDataViewItemTemplate | undefined>;
+    protected readonly header: _angular_core.Signal<CbDataViewHeader | undefined>;
+    /** Índice del primer elemento de la página actual; vuelve a 0 si cambia la colección. */
+    protected readonly first: _angular_core.WritableSignal<number>;
+    protected readonly page: _angular_core.Signal<readonly unknown[]>;
+    protected trackKey(item: unknown, index: number): unknown;
+    protected isSelected(item: unknown): boolean;
+    protected asItem(item: unknown): CbDataViewItem;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataView, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDataView, "cb-dataview", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selection": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDataView, "cb-dataview", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showLayoutToggle": { "alias": "showLayoutToggle"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selection": "selectionChange"; }, ["itemTemplate", "header"], ["[cbDataViewHeader]"], true, never>;
 }
 
-export { CbDataView };
+export { CbDataView, CbDataViewHeader, CbDataViewItemTemplate };
+export type { CbDataViewItem, CbDataViewItemContext, CbDataViewLayout };
 //# sourceMappingURL=caribeng-ui-dataview.d.ts.map

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

@@ -4,29 +4,76 @@ import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 
+/** Rango de fechas `[inicio, fin]`; `fin` es `null` mientras se elige. */
+type CbDateRange = readonly [Date, Date | null];
+/** Valor que la DatePicker entrega a Angular Forms: una fecha, un rango (`selectionMode="range"`) o `null`. */
+type CbDatepickerValue = Date | CbDateRange | null;
+/** Qué se elige: un día, un mes (día 1) o un año (1 de enero). */
+type CbDatepickerView = 'date' | 'month' | 'year';
+/** Atajos predefinidos (con textos traducidos): rangos relativos a hoy. */
+type CbDatePresetKey = 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'thisMonth' | 'lastMonth' | 'thisYear' | 'lastYear';
+/** Atajo propio: un texto y una fecha o un rango (o una función que los calcula al abrir). */
+interface CbDatePreset {
+    label: string;
+    value: Date | CbDateRange | (() => Date | CbDateRange);
+}
 interface DayCell {
     date: Date;
     day: number;
+    label: string;
     otherMonth: boolean;
+    /** Día de otro mes en un calendario de varios meses: la celda queda vacía. */
+    hidden: boolean;
     today: boolean;
     selected: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    inRange: boolean;
+    disabled: boolean;
+    active: boolean;
+}
+/** Celda de la vista de meses o de años. */
+interface UnitCell {
+    date: Date;
+    text: string;
+    label: string;
+    /** Año fuera de la década mostrada (primero y último de la cuadrícula). */
+    outside: boolean;
+    current: boolean;
+    selected: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    inRange: boolean;
     disabled: boolean;
     active: boolean;
 }
+type TimeTarget = 'single' | 'start' | 'end';
 /**
- * Selector de fecha de CaribeNG. Campo de solo lectura que abre un calendario
- * sobre CDK Overlay, con navegación por teclado y rango min/max. Integrado con
- * Angular Forms vía `ControlValueAccessor`. El modelo es `Date | null`.
+ * Selector de fecha de CaribeNG. Abre un calendario sobre CDK Overlay, con
+ * navegación por teclado (patrón WAI-ARIA *date picker dialog*), rango
+ * min/max, selección de rangos, hora y vistas de mes y año. Integrado con
+ * Angular Forms vía `ControlValueAccessor`.
+ *
+ * - `selectionMode="single"` (por defecto): `[(value)]` es `Date | null`.
+ * - `selectionMode="range"`: `[(range)]` es `[inicio, fin] | null`; muestra dos meses (`numberOfMonths`).
+ * - `view="month"` / `view="year"`: se elige un mes (día 1) o un año (1 de enero).
+ * - `showTime`: añade horas y minutos (`hourFormat` 24 o 12), también en rangos.
+ * - `dateFormat`: formato con la sintaxis de PrimeNG (`dd/mm/yy`, `d 'de' MM`…); `editable` permite escribir la fecha.
  *
  * @example
  * ```html
- * <cb-datepicker formControlName="fecha" locale="es-CO"
- *                [minDate]="hoy" placeholder="Elige una fecha" />
+ * <cb-datepicker formControlName="fecha" locale="es-CO" [minDate]="hoy" />
+ * <cb-datepicker selectionMode="range" [(range)]="viaje" />
+ * <cb-datepicker showTime hourFormat="12" [(value)]="cita" />
+ * <cb-datepicker view="month" dateFormat="mm/yy" [(value)]="vencimiento" />
+ * <cb-datepicker editable dateFormat="dd/mm/yy" [(value)]="nacimiento" />
  * ```
  */
 declare class CbDatepicker implements ControlValueAccessor {
-    /** Fecha seleccionada (two-way opcional fuera de Angular Forms). */
+    /** Fecha seleccionada en modo `single` (two-way opcional fuera de Angular Forms). */
     readonly value: _angular_core.ModelSignal<Date | null>;
+    /** Rango seleccionado en modo `range` (two-way opcional fuera de Angular Forms). */
+    readonly range: _angular_core.ModelSignal<CbDateRange | null>;
     readonly label: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly error: _angular_core.InputSignal<string>;
@@ -34,64 +81,182 @@ declare class CbDatepicker implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<CbSize>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Indicador de obligatoriedad de este campo; si se omite usa el global de `provideCaribeNG()`. */
+    /** Cómo se marca un campo obligatorio u opcional; por defecto el global de `provideCaribeNG`. */
     readonly requiredIndicator: _angular_core.InputSignal<CbRequiredIndicator | undefined>;
-    /** Estado de validación: inputs manuales + estado de Angular Forms. */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly injector;
     protected readonly fieldState: _caribeng_ui.CbFieldState;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly inputId: _angular_core.InputSignal<string>;
     /** Locale BCP 47 para nombres y formato (por defecto el del navegador). */
     readonly locale: _angular_core.InputSignal<string | undefined>;
-    /** Primer día de la semana: 0 = domingo (por defecto), 1 = lunes. */
+    /** Primer día de la semana: 0 = domingo, 1 = lunes. */
     readonly firstDayOfWeek: _angular_core.InputSignal<number>;
-    /** Fecha mínima seleccionable. */
+    /** Fecha mínima elegible (incluida). */
     readonly minDate: _angular_core.InputSignal<Date | null>;
-    /** Fecha máxima seleccionable. */
+    /** Fecha máxima elegible (incluida). */
     readonly maxDate: _angular_core.InputSignal<Date | null>;
+    /** `single` (una fecha) o `range` (inicio y fin). */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "range">;
+    /** Qué se elige: un día (`date`), un mes (`month`, día 1) o un año (`year`, 1 de enero). */
+    readonly view: _angular_core.InputSignal<CbDatepickerView>;
+    /** Meses visibles a la vez (vista de días). Por defecto 2 en rangos y 1 en fecha simple. */
+    readonly numberOfMonths: _angular_core.InputSignal<number | undefined>;
+    /** Añade horas y minutos (en rangos, del inicio y del fin). Solo con `view="date"`. */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Formato de la hora: 24 h o 12 h (AM/PM). */
+    readonly hourFormat: _angular_core.InputSignal<"24" | "12">;
+    /** Paso de los minutos (p. ej. 15). */
+    readonly stepMinute: _angular_core.InputSignal<number>;
+    /**
+     * Formato de la fecha con la sintaxis de PrimeNG: `d`, `dd`, `o`, `oo`, `D`, `DD`,
+     * `m`, `mm`, `M`, `MM`, `y`, `yy`, `@`, `!` y `'texto'`. Sin él, el campo usa el
+     * formato largo del `locale` (o el numérico si es `editable`).
+     */
+    readonly dateFormat: _angular_core.InputSignal<string | undefined>;
+    /** Permite escribir la fecha en el campo con `dateFormat` (Enter o al salir del campo la aplica). */
+    readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Atajos junto al calendario: claves predefinidas (`'last7Days'`, `'thisMonth'`…)
+     * u objetos `{ label, value }`. En fecha simple, un atajo de rango elige su inicio.
+     */
+    readonly presets: _angular_core.InputSignal<readonly (CbDatePresetKey | CbDatePreset)[]>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
-    /** Primer día del mes mostrado. */
+    /** Día (o mes, o año) bajo el puntero: previsualiza el rango mientras se elige el final. */
+    protected readonly hoverDate: _angular_core.WritableSignal<Date | null>;
+    /** Primer mes mostrado (vista de días) o fecha de referencia del año / la década. */
     private readonly viewDate;
-    /** Día con foco dentro del calendario. */
+    /** Día, mes o año con foco dentro del calendario. */
     private readonly activeDate;
-    private readonly triggerRef;
+    /** Vista del panel: puede pasar a meses o años para navegar aunque se elija un día. */
+    protected readonly panelView: _angular_core.WritableSignal<CbDatepickerView>;
+    /** Texto escrito en el campo (`editable`) que aún no se ha aplicado. */
+    protected readonly draft: _angular_core.WritableSignal<string | null>;
+    /** El texto escrito no es una fecha válida (o elegible). */
+    protected readonly typedInvalid: _angular_core.WritableSignal<boolean>;
+    /** Día del mes que se conserva al navegar por meses y años para volver a los días. */
+    private navDay;
     private readonly fieldRef;
     private readonly panelRef;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly isRange: _angular_core.Signal<boolean>;
+    /** La hora solo tiene sentido al elegir días. */
+    private readonly withTime;
+    protected readonly monthCount: _angular_core.Signal<number>;
+    protected readonly fieldInvalid: _angular_core.Signal<boolean>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly hintId: _angular_core.Signal<string>;
     protected readonly describedBy: _angular_core.Signal<string | null>;
     protected readonly positions: ConnectedPosition[];
+    /** La fecha (modo simple) o `null`. */
+    private readonly single;
+    /** El rango (modo rango) o `null`. */
+    private readonly activeRange;
+    /** Hay fecha inicial y falta la final. */
+    protected readonly choosingEnd: _angular_core.Signal<boolean>;
+    /** Hay algo elegido (para mostrar "Limpiar"). */
+    protected readonly hasValue: _angular_core.Signal<boolean>;
+    private readonly names;
+    /** Formato con el que se escribe y se lee el campo (si hay `dateFormat` o es editable). */
+    private readonly pattern;
+    /** Ayuda del formato para el placeholder y el error (`dd/mm/yyyy`, con la hora si la hay). */
+    protected readonly formatHint: _angular_core.Signal<string>;
+    protected readonly invalidMessage: _angular_core.Signal<string>;
+    private formatOne;
+    private timeText;
     protected readonly display: _angular_core.Signal<string>;
-    protected readonly monthYearLabel: _angular_core.Signal<string>;
+    protected readonly fieldText: _angular_core.Signal<string>;
+    private monthTitle;
+    protected readonly panelLabel: _angular_core.Signal<string>;
     protected readonly weekdays: _angular_core.Signal<{
         index: number;
         short: string;
         long: string;
     }[]>;
-    protected readonly weeks: _angular_core.Signal<DayCell[][]>;
+    /** Inicio y fin del rango (o del rango en curso hasta el puntero), ordenados y en la unidad `unit`. */
+    private rangeBounds;
+    protected readonly months: _angular_core.Signal<{
+        date: Date;
+        title: string;
+        weeks: DayCell[][];
+    }[]>;
+    /** Título de la vista de meses (el año) o de años (la década). */
+    protected readonly unitTitle: _angular_core.Signal<string>;
+    protected readonly unitRows: _angular_core.Signal<UnitCell[][]>;
+    protected readonly presetItems: _angular_core.Signal<{
+        label: string;
+        value: Date | CbDateRange;
+        selected: boolean;
+        disabled: boolean;
+    }[]>;
+    private presetLabel;
+    /** Ajusta el atajo al modo (fecha o rango), a la unidad de `view` y, con hora, al día completo. */
+    private presetValue;
+    /** Aplica un atajo y cierra (con hora, el panel sigue abierto para ajustarla). */
+    protected applyPreset(value: Date | CbDateRange): void;
+    protected readonly timeRows: _angular_core.Signal<{
+        target: TimeTarget;
+        label: string;
+        caption: string;
+        enabled: boolean;
+    }[]>;
+    private dateOf;
+    /** Hora y minutos de la fecha (o 00:00). */
+    protected timeOf(target: TimeTarget): {
+        hours: number;
+        minutes: number;
+    };
+    protected displayHour(target: TimeTarget): string;
     constructor();
     private onChange;
     private onTouched;
-    writeValue(value: Date | null): void;
-    registerOnChange(fn: (value: Date | null) => void): void;
+    writeValue(value: CbDatepickerValue): void;
+    registerOnChange(fn: (value: CbDatepickerValue) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     protected toggle(): void;
+    protected onFieldClick(): void;
     private openPanel;
     protected close(): void;
     protected onBlur(): void;
+    /** Elige un valor en la unidad de `view` (día, mes o año), en modo simple o rango. */
+    private pick;
     protected selectDate(date: Date): void;
+    /** Clic en un mes o un año: lo elige (si es la unidad de `view`) o baja a la vista siguiente. */
+    protected selectUnit(date: Date): void;
+    /** Del título de un mes a la vista de meses de su año. */
+    protected showMonths(month: Date): void;
+    protected showYears(): void;
+    private isSameMonthShown;
     protected goToday(): void;
     protected clear(): void;
     protected shiftMonth(delta: number): void;
+    /** Año anterior / siguiente (vista de meses) o década (vista de años). */
+    protected shiftPage(delta: number): void;
+    protected setHour(target: TimeTarget, raw: string): void;
+    protected setMinute(target: TimeTarget, raw: string): void;
+    protected togglePeriod(target: TimeTarget): void;
+    private setTime;
+    protected pad(n: number): string;
+    /** Aplica lo escrito: fecha válida y elegible → valor; vacío → `null`; si no, marca el error. */
+    private applyDraft;
+    /** Lee una fecha (y la hora, si `showTime`) con el formato del campo. */
+    private parseOne;
     protected onFieldKeydown(event: KeyboardEvent): void;
     protected onPanelKeydown(event: KeyboardEvent): void;
-    private focusActiveDay;
-    private isDisabledDate;
+    /** Flechas en la cuadrícula de meses o años (3 columnas). */
+    private onUnitKeydown;
+    /** Enfoca el elemento activo tras el render: el panel vive en un overlay que se pinta en el ciclo siguiente. */
+    private focusActive;
+    /** Guarda en el modelo del modo activo y avisa a Angular Forms. */
+    private commit;
+    /** El día, mes o año queda entero fuera de [minDate, maxDate]. */
+    private isDisabledIn;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDatepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDatepicker, "cb-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDatepicker, "cb-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "range": "rangeChange"; }, never, never, true, never>;
 }
 
 export { CbDatepicker };
+export type { CbDatePreset, CbDatePresetKey, CbDateRange, CbDatepickerValue, CbDatepickerView };
 //# sourceMappingURL=caribeng-ui-datepicker.d.ts.map

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

@@ -0,0 +1,63 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/** Un par etiqueta / valor. */
+interface CbDescriptionItem {
+    label: string;
+    value?: string | number | null;
+    /** Identificador para una plantilla `cbDescriptionsValue="key"`. */
+    key?: string;
+    /** Columnas que ocupa (1 por defecto). */
+    span?: number;
+}
+interface CbDescriptionsValueContext<T = any> {
+    /** Valor del elemento. */
+    $implicit: T;
+    item: CbDescriptionItem;
+}
+/** Plantilla del valor de un elemento: `<ng-template cbDescriptionsValue="estado" let-valor>`. */
+declare class CbDescriptionsValue {
+    readonly cbDescriptionsValue: _angular_core.InputSignal<string>;
+    readonly template: TemplateRef<CbDescriptionsValueContext<any>>;
+    static ngTemplateContextGuard(_dir: CbDescriptionsValue, ctx: unknown): ctx is CbDescriptionsValueContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDescriptionsValue, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbDescriptionsValue, "ng-template[cbDescriptionsValue]", never, { "cbDescriptionsValue": { "alias": "cbDescriptionsValue"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Descriptions de CaribeNG: lista de pares etiqueta / valor (detalle de un
+ * cliente, de una transacción…) en una o varias columnas, sobre una lista de
+ * descripción (`<dl>`) nativa.
+ *
+ * @example
+ * ```html
+ * <cb-descriptions title="Detalle de la transferencia" [columns]="2" [items]="[
+ *   { label: 'Origen', value: 'Ahorros **** 1234' },
+ *   { label: 'Valor', value: '$ 250.000' },
+ *   { label: 'Estado', key: 'estado', value: 'Aprobada' },
+ * ]">
+ *   <ng-template cbDescriptionsValue="estado" let-estado><cb-tag [value]="estado" severity="success" /></ng-template>
+ * </cb-descriptions>
+ * ```
+ */
+declare class CbDescriptions {
+    private readonly valueTemplates;
+    protected readonly titleId: string;
+    readonly items: _angular_core.InputSignal<readonly CbDescriptionItem[]>;
+    /** Título del bloque (se anuncia como encabezado). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Nivel del encabezado del título (por defecto 3). */
+    readonly headingLevel: _angular_core.InputSignal<number>;
+    /** Columnas en pantallas anchas (en móvil siempre 1). */
+    readonly columns: _angular_core.InputSignal<number>;
+    /** Etiqueta encima del valor (`vertical`) o a su lado (`horizontal`). */
+    readonly layout: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Bordes entre elementos. */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected valueTemplate(item: CbDescriptionItem): CbDescriptionsValue | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDescriptions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDescriptions, "cb-descriptions", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, ["valueTemplates"], never, true, never>;
+}
+
+export { CbDescriptions, CbDescriptionsValue };
+export type { CbDescriptionItem, CbDescriptionsValueContext };
+//# sourceMappingURL=caribeng-ui-descriptions.d.ts.map

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 /**
  * Dialog (modal) de CaribeNG sobre CDK Overlay con trampa de foco (FocusTrap),
@@ -17,6 +18,8 @@ import * as _angular_core from '@angular/core';
  * ```
  */
 declare class CbDialog {
+    /** 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 document;
@@ -33,7 +36,7 @@ declare class CbDialog {
     /** Ancho del panel. */
     readonly width: _angular_core.InputSignal<string>;
     /** Nombre accesible cuando no hay `header`. */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Se emite cuando el diálogo se cierra. */
     readonly onHide: _angular_core.OutputEmitterRef<void>;
     /** Se emite cuando el diálogo se abre. */

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 type CbDockPosition = 'top' | 'right' | 'bottom' | 'left';
 interface CbDockItem {
@@ -9,9 +10,11 @@ interface CbDockItem {
 }
 /** Compact application launcher with configurable orientation. */
 declare class CbDock {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly items: _angular_core.InputSignal<readonly CbDockItem[]>;
     readonly position: _angular_core.InputSignal<CbDockPosition>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbDockItem>;
     select(item: CbDockItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDock, never>;

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 type CbDrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 /**
@@ -14,6 +15,8 @@ type CbDrawerPosition = 'left' | 'right' | 'top' | 'bottom';
  * ```
  */
 declare class CbDrawer {
+    /** 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 document;
@@ -23,7 +26,7 @@ declare class CbDrawer {
     readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dismissableMask: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly onShow: _angular_core.OutputEmitterRef<void>;
     readonly onHide: _angular_core.OutputEmitterRef<void>;
     protected readonly titleId: string;