@caribeng/ui 22.1.1 → 22.4.0

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

@@ -0,0 +1,167 @@
+import * as _caribeng_ui_sidebar from '@caribeng/ui/sidebar';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+
+/** Enlace o acción del menú lateral. */
+interface CbSidebarItem {
+    /** Identificador para `active`. Por defecto, la `url` o el `label`. */
+    id?: string;
+    label: string;
+    icon?: string;
+    url?: string;
+    target?: string;
+    /** Contador o etiqueta a la derecha ("3", "Nuevo"). */
+    badge?: string | number;
+    disabled?: boolean;
+    /** Subelementos (un nivel): el item se convierte en un grupo desplegable. */
+    children?: readonly CbSidebarItem[];
+    /** Acción al elegirlo (además del evento `itemSelect`). */
+    command?: (event: CbSidebarSelectEvent) => void;
+}
+/** Sección del menú lateral con título opcional. */
+interface CbSidebarGroup {
+    label?: string;
+    items: readonly CbSidebarItem[];
+}
+interface CbSidebarSelectEvent {
+    readonly item: CbSidebarItem;
+    readonly originalEvent: Event;
+}
+/** Clave de un item para `active`. */
+declare function cbSidebarKey(item: CbSidebarItem): string;
+/** Estado del `cb-app-shell` compartido con el sidebar y los botones `cbSidebarToggle`. */
+interface CbAppShellState {
+    /** Ancho por debajo del punto de corte: el sidebar es un panel deslizante. */
+    readonly mobile: Signal<boolean>;
+    /** Panel abierto (solo en móvil). */
+    readonly sidebarOpen: Signal<boolean>;
+    /** Sidebar contraído a iconos (solo en escritorio). */
+    readonly collapsed: Signal<boolean>;
+    readonly sidebarId: string;
+    /** En móvil abre o cierra el panel; en escritorio contrae o expande. */
+    toggle(): void;
+    setCollapsed(collapsed: boolean): void;
+    /** Cierra el panel móvil (p. ej. al navegar). */
+    closeSidebar(): void;
+}
+declare const CB_APP_SHELL: InjectionToken<CbAppShellState>;
+
+/**
+ * Menú lateral de CaribeNG: secciones con título, enlaces con icono y badge,
+ * grupos desplegables de un nivel y modo contraído a iconos (con tooltip).
+ * Dentro de `cb-app-shell` se convierte en panel deslizante en móvil.
+ *
+ * @example
+ * ```html
+ * <cb-sidebar [groups]="menu" [(active)]="seccion" [navigate]="navigate">
+ *   <img cb-sidebar-header src="logo.svg" alt="Mi banco" />
+ * </cb-sidebar>
+ * ```
+ */
+declare class CbSidebar {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** `cb-app-shell` que lo contiene, si hay. */
+    protected readonly shell: _caribeng_ui_sidebar.CbAppShellState | null;
+    protected readonly uid: string;
+    readonly groups: _angular_core.InputSignal<readonly CbSidebarGroup[]>;
+    /** Clave del item activo (`id`, `url` o `label`); se marca con `aria-current="page"`. */
+    readonly active: _angular_core.ModelSignal<string | null>;
+    /** Contraído a iconos. Dentro de `cb-app-shell` lo controla el shell. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Muestra el botón de contraer/expandir en el pie. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre de la navegación. Por defecto, "Navegación principal". */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Navegación SPA: si se indica, los enlaces internos (sin `target` ni teclas
+     * modificadoras) la llaman en lugar de recargar la página.
+     * Ej.: `navigate = (url: string) => this.router.navigateByUrl(url)`.
+     */
+    readonly navigate: _angular_core.InputSignal<((url: string) => unknown) | null>;
+    /** Item elegido. */
+    readonly itemSelect: _angular_core.OutputEmitterRef<CbSidebarSelectEvent>;
+    private readonly expanded;
+    protected readonly isCollapsed: _angular_core.Signal<boolean>;
+    constructor();
+    protected key(item: CbSidebarItem): string;
+    protected isActive(item: CbSidebarItem): boolean;
+    protected hasActiveChild(item: CbSidebarItem): boolean;
+    protected isExpanded(item: CbSidebarItem): boolean;
+    protected toggleGroup(item: CbSidebarItem): void;
+    protected toggleCollapsed(): void;
+    private setCollapsed;
+    /** Marca el item como activo, ejecuta su `command`, emite `itemSelect` y navega. */
+    select(item: CbSidebarItem, event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbSidebar, "cb-sidebar", never, { "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "collapsed": "collapsedChange"; "itemSelect": "itemSelect"; }, never, ["[cb-sidebar-header]", "[cb-sidebar-footer]"], true, never>;
+}
+
+/**
+ * Esqueleto de aplicación de CaribeNG: menú lateral, cabecera y contenido.
+ * En escritorio el sidebar es una columna que se puede contraer; por debajo de
+ * `breakpoint` (medido en el propio shell) pasa a ser un panel deslizante con
+ * fondo, cierre con Escape y foco atrapado mientras está abierto.
+ *
+ * @example
+ * ```html
+ * <cb-app-shell style="height: 100vh">
+ *   <cb-sidebar [groups]="menu" />
+ *   <header cb-app-shell-header>
+ *     <button type="button" cbSidebarToggle><cb-icon name="menu" /></button>
+ *   </header>
+ *   <router-outlet />
+ * </cb-app-shell>
+ * ```
+ */
+declare class CbAppShell implements CbAppShellState {
+    private readonly host;
+    private readonly document;
+    private readonly injector;
+    private readonly destroyRef;
+    private previouslyFocused;
+    readonly sidebarId: string;
+    /** Ancho (px) del shell por debajo del cual el sidebar es un panel deslizante. */
+    readonly breakpoint: _angular_core.InputSignal<number>;
+    /** Panel abierto en móvil. */
+    readonly sidebarOpen: _angular_core.ModelSignal<boolean>;
+    /** Sidebar contraído a iconos en escritorio. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Fuerza el modo móvil (útil en pruebas o vistas embebidas). */
+    readonly forceMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly width;
+    readonly mobile: _angular_core.Signal<boolean>;
+    constructor();
+    toggle(): void;
+    setCollapsed(collapsed: boolean): void;
+    closeSidebar(): void;
+    protected onEscape(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbAppShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbAppShell, "cb-app-shell", never, { "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "forceMobile": { "alias": "forceMobile"; "required": false; "isSignal": true; }; }, { "sidebarOpen": "sidebarOpenChange"; "collapsed": "collapsedChange"; }, never, ["cb-sidebar, [cb-app-shell-sidebar]", "[cb-app-shell-header]", "*"], true, never>;
+}
+
+/**
+ * Convierte cualquier botón en el control del sidebar de `cb-app-shell`: en
+ * móvil abre o cierra el panel; en escritorio contrae o expande. Gestiona
+ * `aria-controls`, `aria-expanded` y un nombre accesible por defecto.
+ *
+ * @example
+ * ```html
+ * <button type="button" cbSidebarToggle><cb-icon name="menu" aria-hidden="true" /></button>
+ * ```
+ */
+declare class CbSidebarToggle {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly shell: _caribeng_ui_sidebar.CbAppShellState | null;
+    /** Nombre accesible. Por defecto, "Abrir menú" (móvil) o "Contraer/Expandir menú lateral". */
+    readonly cbSidebarToggle: _angular_core.InputSignal<string>;
+    protected readonly expanded: _angular_core.Signal<boolean | null>;
+    protected readonly label: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSidebarToggle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbSidebarToggle, "[cbSidebarToggle]", never, { "cbSidebarToggle": { "alias": "cbSidebarToggle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CB_APP_SHELL, CbAppShell, CbSidebar, CbSidebarToggle, cbSidebarKey };
+export type { CbAppShellState, CbSidebarGroup, CbSidebarItem, CbSidebarSelectEvent };
+//# sourceMappingURL=caribeng-ui-sidebar.d.ts.map

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

@@ -1,50 +1,103 @@
+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';
 
+/** Rango del slider: `[mínimo, máximo]`. */
+type CbSliderRange = readonly [number, number];
+/** Formato del valor: opciones de `Intl.NumberFormat` o una función propia. */
+type CbSliderValueFormat = Intl.NumberFormatOptions | ((value: number) => string);
 /**
  * Control deslizante (slider) de CaribeNG, integrado con Angular Forms vía
- * `ControlValueAccessor`. Soporta arrastre con puntero y navegación por teclado.
+ * `ControlValueAccessor`. Soporta arrastre con puntero, teclado y un modo de
+ * rango con dos tiradores (patrón WAI-ARIA *multi-thumb slider*).
+ *
+ * - Un valor: `[(value)]` (número).
+ * - Rango: `range` + `[(rangeValue)]` (`[mínimo, máximo]`). Con Angular Forms,
+ *   el control recibe el número o el par según el modo.
  *
  * @example
  * ```html
- * <cb-slider formControlName="volumen" [min]="0" [max]="100" [step]="5" />
+ * <cb-slider formControlName="volumen" [min]="0" [max]="100" [step]="5" ariaLabel="Volumen" />
+ * <cb-slider range [(rangeValue)]="precio" [min]="0" [max]="2000000" [step]="50000"
+ *            [valueFormat]="{ style: 'currency', currency: 'COP', maximumFractionDigits: 0 }" showValue ariaLabel="Precio" />
  * ```
  */
 declare class CbSlider implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Valor en modo de un tirador. */
     readonly value: _angular_core.ModelSignal<number>;
+    /** Valor en modo `range`: `[mínimo, máximo]`. */
+    readonly rangeValue: _angular_core.ModelSignal<CbSliderRange>;
     readonly min: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
     readonly step: _angular_core.InputSignal<number>;
     readonly size: _angular_core.InputSignal<CbSize>;
+    /** Dos tiradores para elegir un rango (`[(rangeValue)]`). */
+    readonly range: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el valor encima de cada tirador. */
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Formato del valor (texto visible y `aria-valuetext`). */
+    readonly valueFormat: _angular_core.InputSignal<CbSliderValueFormat | undefined>;
+    /** Locale BCP 47 del formato (por defecto, el del navegador). */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Estado de validación: inputs manuales + estado de Angular Forms. */
     protected readonly fieldState: _caribeng_ui.CbFieldState;
+    /** Nombre accesible; en modo rango se completa con "Mínimo" / "Máximo". */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly inputId: _angular_core.InputSignal<string>;
+    /** Valor nuevo (número o rango) cada vez que cambia. */
     readonly changed: _angular_core.OutputEmitterRef<number>;
+    readonly rangeChanged: _angular_core.OutputEmitterRef<CbSliderRange>;
     private readonly track;
-    private dragging;
+    /** Tirador que se arrastra o se movió por última vez (0 = mínimo, 1 = máximo). */
+    protected readonly activeThumb: _angular_core.WritableSignal<0 | 1>;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
-    protected readonly percent: _angular_core.Signal<number>;
+    private readonly formatter;
+    protected readonly lowPercent: _angular_core.Signal<number>;
+    protected readonly highPercent: _angular_core.Signal<number>;
+    /** Datos de cada tirador: en rango, los límites de uno dependen del otro (no se cruzan). */
+    protected readonly thumbs: _angular_core.Signal<({
+        index: 0;
+        value: number;
+        min: number;
+        max: number;
+        percent: number;
+        text: string;
+        label: string;
+    } | {
+        index: 1;
+        value: number;
+        min: number;
+        max: number;
+        percent: number;
+        text: string;
+        label: string;
+    })[]>;
     private onChange;
     protected onTouched: () => void;
-    writeValue(value: number | null): void;
-    registerOnChange(fn: (value: number) => void): void;
+    writeValue(value: number | CbSliderRange | null): void;
+    registerOnChange(fn: (value: number | CbSliderRange) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     protected onPointerDown(event: PointerEvent): void;
+    private valueAtClientX;
+    private nearestThumb;
     private updateFromClientX;
-    protected onKeydown(event: KeyboardEvent): void;
+    protected onKeydown(event: KeyboardEvent, thumb: 0 | 1): void;
+    private percentOf;
     private clampSnap;
-    private commit;
+    /** Mueve un tirador sin cruzar el otro y avisa del cambio. */
+    private setThumb;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbSlider, "cb-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbSlider, "cb-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "rangeValue": { "alias": "rangeValue"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "rangeValue": "rangeValueChange"; "changed": "changed"; "rangeChanged": "rangeChanged"; }, never, never, true, never>;
 }
 
 export { CbSlider };
+export type { CbSliderRange, CbSliderValueFormat };
 //# sourceMappingURL=caribeng-ui-slider.d.ts.map

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 type CbSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
 interface CbSpeedDialItem {
@@ -7,12 +8,14 @@ interface CbSpeedDialItem {
     disabled?: boolean;
 }
 declare class CbSpeedDial {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly items: _angular_core.InputSignal<readonly CbSpeedDialItem[]>;
     readonly direction: _angular_core.InputSignal<CbSpeedDialDirection>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly closeIcon: _angular_core.InputSignal<string>;
-    readonly openLabel: _angular_core.InputSignal<string>;
-    readonly closeLabel: _angular_core.InputSignal<string>;
+    readonly openLabel: _angular_core.InputSignal<string | undefined>;
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbSpeedDialItem>;
     protected select(item: CbSpeedDialItem): void;

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 import { CbSeverity } from '@caribeng/ui';
 
 /**
@@ -11,6 +12,8 @@ import { CbSeverity } from '@caribeng/ui';
  * ```
  */
 declare class CbSpinner {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     /** Tamaño en píxeles. */
     readonly size: _angular_core.InputSignal<number>;
     /** Grosor del trazo. */

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

@@ -0,0 +1,49 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbSeverity, CbSize } from '@caribeng/ui';
+import { CbButtonVariant } from '@caribeng/ui/button';
+import { CbMenuItem } from '@caribeng/ui/menu';
+
+/**
+ * SplitButton de CaribeNG: una acción principal y un menú con acciones
+ * secundarias ("Guardar ▾"). La flecha abre el menú (también con Flecha abajo)
+ * y anuncia `aria-haspopup="menu"` / `aria-expanded`.
+ *
+ * @example
+ * ```html
+ * <cb-split-button label="Guardar" icon="check" [items]="masOpciones"
+ *                  (primaryClick)="guardar()" (itemSelect)="onOpcion($event)" />
+ * ```
+ */
+declare class CbSplitButton {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly host;
+    private readonly menu;
+    /** Texto de la acción principal (también nombra el grupo). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Icono de la acción principal. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Acciones secundarias del menú. */
+    readonly items: _angular_core.InputSignal<readonly CbMenuItem[]>;
+    readonly severity: _angular_core.InputSignal<CbSeverity>;
+    readonly variant: _angular_core.InputSignal<CbButtonVariant>;
+    readonly size: _angular_core.InputSignal<CbSize>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre del botón de la flecha y del menú. Por defecto, "Más acciones" del idioma activo. */
+    readonly menuAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Clic en la acción principal. */
+    readonly primaryClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Acción secundaria elegida en el menú. */
+    readonly itemSelect: _angular_core.OutputEmitterRef<CbMenuItem>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    /** Abre o cierra el menú anclado (y devuelve el foco) al botón real de la flecha. */
+    toggleMenu(): void;
+    protected openFromKeyboard(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSplitButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbSplitButton, "cb-split-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; }, { "primaryClick": "primaryClick"; "itemSelect": "itemSelect"; }, never, ["*"], true, never>;
+}
+
+export { CbSplitButton };
+//# sourceMappingURL=caribeng-ui-splitbutton.d.ts.map

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 type CbSplitterLayout = 'horizontal' | 'vertical';
 interface CbSplitterResizeEndEvent {
@@ -17,6 +18,8 @@ interface CbSplitterResizeEndEvent {
  * ```
  */
 declare class CbSplitter {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     protected readonly Math: Math;
     private readonly hostRef;
     /** Orientación de la división: `'horizontal'` (lado a lado) o `'vertical'` (apilados). */

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

@@ -0,0 +1,65 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+
+/** Tendencia de una cifra: sube o baja. */
+type CbStatisticTrend = 'up' | 'down';
+/**
+ * Statistic de CaribeNG: cifra destacada para dashboards, con título, prefijo,
+ * sufijo, formato con `Intl.NumberFormat` y tendencia opcional.
+ *
+ * @example
+ * ```html
+ * <cb-statistic title="Saldo disponible" [value]="12450000" locale="es-CO"
+ *               [format]="{ style: 'currency', currency: 'COP', maximumFractionDigits: 0 }" />
+ * <cb-statistic title="Gastos del mes" [value]="8.4" suffix="%" trend="down" trendLabel="vs. septiembre" />
+ * ```
+ */
+declare class CbStatistic {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<string | number | null>;
+    readonly prefix: _angular_core.InputSignal<string>;
+    readonly suffix: _angular_core.InputSignal<string>;
+    /** Opciones de `Intl.NumberFormat` (moneda, porcentaje, decimales…). */
+    readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    /** Locale BCP 47 del formato (por defecto, el del navegador). */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** Tendencia: añade flecha, color y el texto "aumenta" / "disminuye". */
+    readonly trend: _angular_core.InputSignal<CbStatisticTrend | null>;
+    /** Texto junto a la tendencia (p. ej. "+12 % vs. septiembre"). */
+    readonly trendLabel: _angular_core.InputSignal<string>;
+    protected readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbStatistic, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbStatistic, "cb-statistic", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendLabel": { "alias": "trendLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Countdown de CaribeNG: cuenta regresiva hasta una fecha (vencimientos,
+ * códigos OTP, ofertas). Emite `finished` al llegar a cero.
+ *
+ * @example
+ * ```html
+ * <cb-countdown title="Tu código vence en" [target]="vence" (finished)="pedirOtro()" />
+ * ```
+ */
+declare class CbCountdown {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Momento final (fecha o milisegundos desde 1970). */
+    readonly target: _angular_core.InputSignal<number | Date>;
+    /** Mostrar los días aunque sean 0. Por defecto solo cuando quedan días. */
+    readonly showDays: _angular_core.InputSignal<boolean>;
+    /** Se emite una vez al llegar a cero. */
+    readonly finished: _angular_core.OutputEmitterRef<void>;
+    private readonly now;
+    private finishedFor;
+    /** Milisegundos restantes (nunca negativos). */
+    protected readonly remaining: _angular_core.Signal<number>;
+    protected readonly display: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbCountdown, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbCountdown, "cb-countdown", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "showDays": { "alias": "showDays"; "required": false; "isSignal": true; }; }, { "finished": "finished"; }, never, never, true, never>;
+}
+
+export { CbCountdown, CbStatistic };
+export type { CbStatisticTrend };
+//# sourceMappingURL=caribeng-ui-statistic.d.ts.map

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 /**
  * Stepper de CaribeNG: asistente por pasos. Coloca varios `<cb-step>` dentro de
@@ -14,12 +15,16 @@ import * as _angular_core from '@angular/core';
  * ```
  */
 declare class CbStepper {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly steps: _angular_core.Signal<readonly CbStep[]>;
     /** Muestra los botones Atrás/Siguiente integrados. */
     readonly showNav: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
     isActive(step: CbStep): boolean;
     isComplete(step: CbStep): boolean;
+    /** Nombre del botón del paso: "Paso 2 de 3: Envío" (y ", completado" si ya pasó). */
+    protected stepName(step: CbStep, index: number): string;
     goTo(index: number): void;
     next(): void;
     prev(): void;

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 interface CbStepItem {
     label: string;
@@ -7,9 +8,11 @@ interface CbStepItem {
 }
 /** Clickable progress navigation for a multi-step flow. */
 declare class CbSteps {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     readonly steps: _angular_core.InputSignal<readonly CbStepItem[]>;
     readonly activeIndex: _angular_core.ModelSignal<number>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly activeChange: _angular_core.OutputEmitterRef<number>;
     select(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbSteps, never>;