@caribeng/ui 22.1.1 → 22.4.0

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 {
@@ -7,13 +8,27 @@ interface CbDockItem {
     url?: string;
     disabled?: boolean;
 }
-/** Compact application launcher with configurable orientation. */
+/**
+ * Compact application launcher with configurable orientation.
+ *
+ * Sigue el patrón WAI-ARIA *toolbar*: un solo elemento entra en el orden de
+ * tabulación y las flechas (según la orientación), Inicio y Fin recorren el resto.
+ */
 declare class CbDock {
+    private readonly host;
+    /** 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>;
+    protected readonly vertical: _angular_core.Signal<boolean>;
+    /** Último elemento enfocado (el que recibe Tab al volver). */
+    protected readonly active: _angular_core.WritableSignal<number>;
+    /** Elemento con `tabindex="0"`: el activo si se puede enfocar, si no el primero habilitado. */
+    protected readonly tabStop: _angular_core.Signal<number>;
     select(item: CbDockItem): void;
+    protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDock, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDock, "cb-dock", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, never, never, true, 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,9 @@ 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>;
+    /** Ancho (izquierda/derecha) o alto (arriba/abajo) del panel, p. ej. `'32rem'`. */
+    readonly size: _angular_core.InputSignal<string>;
     readonly onShow: _angular_core.OutputEmitterRef<void>;
     readonly onHide: _angular_core.OutputEmitterRef<void>;
     protected readonly titleId: string;
@@ -36,7 +41,7 @@ declare class CbDrawer {
     private edgePosition;
     private disposeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDrawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDrawer, "cb-drawer", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissableMask": { "alias": "dismissableMask"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "onShow": "onShow"; "onHide": "onHide"; }, never, ["*", "[cb-drawer-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDrawer, "cb-drawer", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissableMask": { "alias": "dismissableMask"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "onShow": "onShow"; "onHide": "onHide"; }, never, ["*", "[cb-drawer-footer]"], true, never>;
 }
 
 export { CbDrawer };

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

@@ -1,14 +1,104 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken, Type, Injector } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { Observable } from 'rxjs';
 
+/**
+ * Variante declarativa del diálogo dinámico: un `cb-dialog` con título y
+ * texto, para casos simples. Para abrir **componentes** con datos y recibir un
+ * resultado, usa `CbDialogService.open()`.
+ *
+ * @example
+ * ```html
+ * <cb-dynamic-dialog [(visible)]="visible" header="Detalle" content="Tu solicitud fue enviada." />
+ * ```
+ */
 declare class CbDynamicDialog {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Visibilidad (two-way). */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    readonly header: _angular_core.InputSignal<string>;
+    /** Título. Por defecto, "Diálogo" del idioma activo. */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /** Texto del cuerpo (también se puede proyectar contenido). */
     readonly content: _angular_core.InputSignal<string>;
+    /** Se emite al cerrarse. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    protected close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDynamicDialog, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDynamicDialog, "cb-dynamic-dialog", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
-export { CbDynamicDialog };
+/** Opciones de `CbDialogService.open()`. */
+interface CbDynamicDialogConfig<D = unknown> {
+    /** Título del diálogo; si se omite, se usa `ariaLabel` como nombre accesible. */
+    header?: string;
+    /** Datos para el componente abierto (inyéctalos con `CB_DYNAMIC_DIALOG_DATA`). */
+    data?: D;
+    /** Ancho del panel. Por defecto `32rem`. */
+    width?: string;
+    /** Muestra el botón de cerrar. Por defecto `true`. */
+    closable?: boolean;
+    /** Cierra con Escape. Por defecto `true`. */
+    closeOnEscape?: boolean;
+    /** Cierra al hacer clic en el fondo. Por defecto `true`. */
+    dismissableMask?: boolean;
+    /** Nombre accesible cuando no hay `header`. */
+    ariaLabel?: string;
+}
+/** Datos pasados en `config.data`, para inyectar en el componente abierto. */
+declare const CB_DYNAMIC_DIALOG_DATA: InjectionToken<unknown>;
+/**
+ * Referencia a un diálogo abierto con `CbDialogService`. El componente abierto
+ * puede inyectarla para cerrarse devolviendo un resultado.
+ */
+declare class CbDynamicDialogRef<R = unknown> {
+    private readonly dispose;
+    private readonly closed$;
+    private isClosed;
+    /** Emite el resultado (o `undefined` si se cerró sin él) y completa. */
+    readonly onClose: Observable<R | undefined>;
+    /** @internal */
+    constructor(dispose: () => void);
+    /** Cierra el diálogo devolviendo un resultado opcional. */
+    close(result?: R): void;
+}
+/** Contenedor visual del diálogo dinámico (uso interno de CbDialogService). */
+declare class CbDynamicDialogContainer {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly config: CbDynamicDialogConfig<unknown>;
+    protected readonly ref: CbDynamicDialogRef<any>;
+    protected readonly component: Type<unknown>;
+    protected readonly injector: Injector;
+    protected readonly titleId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDynamicDialogContainer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDynamicDialogContainer, "cb-dynamic-dialog-container", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Abre componentes dentro de un diálogo modal (como `DialogService` de PrimeNG):
+ * trampa de foco, cierre con Escape y fondo, y devolución del foco al cerrar.
+ *
+ * @example
+ * ```ts
+ * const ref = inject(CbDialogService).open(EditarCliente, {
+ *   header: 'Editar cliente',
+ *   data: { id: 42 },
+ * });
+ * ref.onClose.subscribe((guardado) => { … });
+ *
+ * // Dentro de EditarCliente:
+ * readonly data = inject<{ id: number }>(CB_DYNAMIC_DIALOG_DATA);
+ * readonly ref = inject(CbDynamicDialogRef);
+ * guardar() { this.ref.close(true); }
+ * ```
+ */
+declare class CbDialogService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly document;
+    open<T, D = unknown, R = unknown>(component: Type<T>, config?: CbDynamicDialogConfig<D>): CbDynamicDialogRef<R>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CbDialogService>;
+}
+
+export { CB_DYNAMIC_DIALOG_DATA, CbDialogService, CbDynamicDialog, CbDynamicDialogContainer, CbDynamicDialogRef };
+export type { CbDynamicDialogConfig };
 //# sourceMappingURL=caribeng-ui-dynamicdialog.d.ts.map