@kaufmann-lab/ui 0.1.21 → 0.1.22

package/types/kaufmann-lab-ui-core.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit } from '@angular/core';
+import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
@@ -179,10 +179,10 @@ declare class AdminBadge {
 declare class Button {
     readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger" | "surface">;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
-    readonly shape: _angular_core.InputSignal<"circle" | "rect">;
+    readonly shape: _angular_core.InputSignal<"rect" | "circle">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Igual al default nativo: hace submit dentro de un `<form>`. */
-    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     /** Ícono líder, renderizado con `kf-icon` antes del label proyectado. */
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     /** Estira el botón a todo el ancho de su contenedor. */
@@ -205,7 +205,7 @@ declare class Button {
     readonly ariaPressed: _angular_core.InputSignal<boolean | undefined>;
     /** Tipo de elemento emergente que abre el botón (ej. `'dialog'` para un
      * panel de filtros, `'listbox'`) — mismo motivo de reenvío manual. */
-    readonly ariaHaspopup: _angular_core.InputSignal<"dialog" | "menu" | "listbox" | "true" | undefined>;
+    readonly ariaHaspopup: _angular_core.InputSignal<"menu" | "dialog" | "listbox" | "true" | undefined>;
     private readonly nativeButton;
     /** Enfoca el `<button>` interno (mismas opciones que `HTMLElement.focus`). */
     focus(options?: FocusOptions): void;
@@ -218,6 +218,8 @@ declare class Button {
 }
 
 type AlertTone = 'info' | 'ok' | 'warn' | 'error';
+/** Forma del aviso: `card` (default, con borde y esquinas) o `bar` (franja compacta de ancho completo). */
+type AlertVariant = 'card' | 'bar';
 /**
  * Banner contextual que vive dentro del flujo: validaciones, avisos de
  * vencimiento, confirmaciones. Persiste hasta que se descarta o hasta que la
@@ -229,9 +231,21 @@ type AlertTone = 'info' | 'ok' | 'warn' | 'error';
  *
  *   <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
  *   <kf-alert tone="ok" [(open)]="saved" dismissible>Pago registrado.</kf-alert>
+ *
+ * `variant="bar"` es una franja compacta de ancho completo, sin tarjeta: sin
+ * esquinas ni bordes laterales (solo la línea superior e inferior del tono),
+ * ícono, título y mensaje en una sola línea que envuelve si no entra. Mismos
+ * tonos y mismo `role` (`alert` para `error`/`warn`, `status` para el resto)
+ * que la variante `card`. Pensada para el borde de una página o de un panel
+ * (ej. "Estás viendo datos de otro cliente"), donde una tarjeta con margen
+ * sobra.
+ *
+ *   <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
  */
 declare class Alert {
     readonly tone: _angular_core.InputSignal<AlertTone>;
+    /** `card` (default) o `bar` (franja compacta de ancho completo). */
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
     /** Línea en negrita arriba del mensaje. Vacío deja solo el contenido proyectado. */
     readonly title: _angular_core.InputSignal<string>;
     readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -241,10 +255,10 @@ declare class Alert {
      * `alert` interrumpe al lector de pantalla; se reserva para error/warn.
      * Los avisos informativos se anuncian sin cortar lo que se esté leyendo.
      */
-    protected readonly ariaRole: _angular_core.Signal<"status" | "alert">;
+    protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
     protected readonly toneIcon: _angular_core.Signal<IconName>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
 }
 
 type AlertRowTone = 'warn' | 'error';
@@ -313,7 +327,7 @@ declare class Avatar {
  *   <kf-badge tone="warn" dot truncate [title]="q.statusLabel">{{ q.statusLabel }}</kf-badge>
  */
 declare class Badge {
-    readonly tone: _angular_core.InputSignal<"error" | "info" | "neutral" | "ok" | "warn" | "service">;
+    readonly tone: _angular_core.InputSignal<"info" | "neutral" | "ok" | "warn" | "error" | "service">;
     readonly variant: _angular_core.InputSignal<"soft" | "glass">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Corta el texto con elipsis al ancho del contenedor. Ver JSDoc de la clase. */
@@ -546,14 +560,26 @@ declare class Calendar {
  *       <kf-button>Guardar</kf-button>
  *     </div>
  *   </kf-card>
+ *
+ * `loading` (default `false`): cubre el cuerpo con un bloque de carga animado
+ * sin sacar el contenido del layout (queda invisible y fuera del foco y de
+ * lectores de pantalla), así la card conserva exactamente sus dimensiones. Los
+ * slots `[kf-card-media]` y `[kf-card-actions]` también se ocultan. Marca el
+ * host con `aria-busy="true"`. Para una forma más fiel (líneas separadas) usa
+ * `kf-skeleton` dentro de la card, o la card propia del dominio con su
+ * `loading` (`kf-stat-card`, `kf-metric-card`).
+ *
+ *   <kf-card [loading]="isLoading()"><h3>{{ title() }}</h3><p>{{ text() }}</p></kf-card>
  */
 declare class Card {
     /** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
     readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Espacio entre los hijos directos del cuerpo. `md` es el default. */
     readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
+    /** Cubre el cuerpo con un bloque de carga conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
 }
 
 /**
@@ -675,7 +701,7 @@ declare class Checkbox implements ControlValueAccessor {
  * de superficie/borde/texto-muted más cercanos).
  */
 declare class Chip {
-    readonly tone: _angular_core.InputSignal<"error" | "neutral" | "ok" | "warn">;
+    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -769,99 +795,6 @@ declare class ContentSlot {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSlot, "kf-content-slot", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** En qué estado está la sección. */
-type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
-/** Cómo se dibuja `loading`. Default `'skeleton'`. */
-type ContentStateLoad = 'skeleton' | 'spinner';
-/**
- * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
- * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
- * siempre el mismo slot el que va rotando entre los cuatro.
- *
- * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
- * tres dibuja el placeholder correspondiente y el contenido no se instancia.
- * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
- * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
- *
- * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
- * mientras carga, porque no hay nada que reintentar todavía.
- *
- *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
- *                     subtitle="Revisá tu conexión e intentá de nuevo.">
- *     <kf-button actions (click)="retry()">Reintentar</kf-button>
- *     <kf-data-table [columns]="cols" [rows]="rows()" />
- *   </kf-content-state>
- */
-declare class ContentState {
-    readonly state: _angular_core.InputSignal<ContentStateKind>;
-    /** Forma del estado de carga: silueta (default) o spinner. */
-    readonly load: _angular_core.InputSignal<ContentStateLoad>;
-    /** Título de `empty`/`error`. Ignorado mientras carga. */
-    readonly title: _angular_core.InputSignal<string>;
-    readonly subtitle: _angular_core.InputSignal<string>;
-    /** Texto al lado del spinner cuando `load="spinner"`. */
-    readonly loadingLabel: _angular_core.InputSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]"], true, never>;
-}
-
-type ContentViewerType = 'image' | 'video' | 'pdf';
-/**
- * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
- * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
- * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
- * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
- * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
- *
- * `src` acepta lo que venga del backend sin que el consumidor tenga que
- * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
- * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
- * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
- * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
- *
- * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
- * la barra superior, junto al título.
- *
- *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
- *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
- *   </kf-content-viewer>
- */
-declare class ContentViewer {
-    readonly type: _angular_core.InputSignal<ContentViewerType>;
-    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
-    readonly src: _angular_core.InputSignal<string | null>;
-    /** Texto alternativo cuando `type="image"`. */
-    readonly alt: _angular_core.InputSignal<string>;
-    readonly title: _angular_core.InputSignal<string>;
-    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
-    readonly open: _angular_core.ModelSignal<boolean>;
-    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
-    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly titleId: string;
-    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
-     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
-     * — el backend a veces manda una cosa, a veces la otra. */
-    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
-    protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
-    protected readonly fallbackLabel: _angular_core.Signal<string>;
-    private readonly dialog;
-    private readonly document;
-    private readonly sanitizer;
-    constructor();
-    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
-    protected onCancel(event: Event): void;
-    /**
-     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
-     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
-     * comparar contra él — no hace falta cortar la propagación en el panel.
-     */
-    protected onHostClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
-}
-
 /**
  * Zona que ocupa la columna en la vista de cards. La vista de tabla ignora
  * esto (salvo `media`, que igual se rinde como thumbnail en vez de imprimir
@@ -940,7 +873,25 @@ interface DataTableColumn {
     /** Destaca el valor (peso y color de tinta) — ej. el monto. En la vista
      * tarjetas, una columna `meta` con `emphasis` va al final de su fila. */
     emphasis?: boolean;
+    /** Celda interactiva: su contenido (texto, `cellTemplates` o `render`) se
+     * renderiza dentro de un `<button type="button">` real —enfocable con Tab,
+     * con foco visible y activable con Enter o Espacio—, tanto en la vista de
+     * tabla como en la de tarjetas. Al activarla emite `cellClick`
+     * (`{ row, column, index }`) y NO emite `rowClick`. El contenido de un
+     * `cellTemplates` en una columna interactiva debe ser fraseo no interactivo
+     * (texto, íconos, indicadores): un enlace o botón dentro de otro botón es
+     * HTML inválido. El nombre accesible sale del contenido o, si no alcanza
+     * (un indicador sin texto), de `cellAriaLabel`. */
+    interactive?: boolean;
+}
+/** Payload de `cellClick`: la fila, la columna interactiva y el índice de la fila renderizada. */
+interface DataTableCellClick<T = unknown> {
+    row: T;
+    column: DataTableColumn;
+    index: number;
 }
+/** Tope de filas (o tarjetas) esqueleto: con `loading`, una página de 50 no pinta 50. */
+declare const DATA_TABLE_MAX_SKELETON_ROWS = 12;
 /** Vistas disponibles cuando `cardable` está activo. */
 type DataTableView = 'table' | 'cards';
 /** Opciones de "filas por página" estándar del portal — 10 como default
@@ -988,12 +939,21 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  *   <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
  *
  * Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
- * placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
- * `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
+ * placeholder (`kf-skeleton` por celda/card) — `skeletonRows` filas si se
+ * pasa; si no, las de `pageSize`, o 5 si no hay paginación activa. Nunca más
+ * de 12 (`DATA_TABLE_MAX_SKELETON_ROWS`): con una página de 50 no se pintan
+ * 50 placeholders. Ignora `rows()`/el slot
  * `[empty]` mientras dura (no sabemos aún si el resultado real estará
  * vacío), y respeta la vista activa (tabla o cards) para no cambiar el
  * layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
- * el header de columnas siguen visibles — solo el cuerpo se reemplaza:
+ * el header de columnas siguen visibles — solo el cuerpo se reemplaza.
+ *
+ * El placeholder respeta la columna: en la tabla cada celda conserva su
+ * `align`, `width`, `minWidth` y `maxWidth` (una columna numérica lleva una
+ * barra corta alineada al final, una de acciones un cuadrado chico, el resto
+ * barras de anchos distintos) y la fila reserva el alto de una línea de texto.
+ * En tarjetas reproduce la estructura según `cardRole`: encabezado (miniatura,
+ * título y estado), campos con su rótulo, fila de `meta` y pie de acciones:
  *
  *   <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
  *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
@@ -1086,6 +1046,30 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  *   <kf-data-table [columns]="columns" [rows]="quotes" cardable [(view)]="view"
  *     [showViewToggle]="false" cardMinWidth="300px" [rowClickable]="true"
  *     (rowClick)="open($event.row)" />
+ *
+ * Celdas interactivas (modo aditivo, ej. una matriz unidad × etapa donde cada
+ * celda de etapa es un indicador de estado): una columna con
+ * `interactive: true` renderiza su contenido dentro de un `<button>` real
+ * —focusable, con foco visible y activación con Enter o Espacio— en la vista
+ * de tabla y en la de tarjetas, y emite `cellClick` con `{ row, column, index }`.
+ * `cellAriaLabel` da el nombre accesible de cada celda cuando el contenido no
+ * lo aporta por sí solo (un indicador sin texto); en tarjetas conviene incluir
+ * el contexto de la fila, porque no hay encabezado de columna que lo dé:
+ *
+ *   columns = [
+ *     { key: 'unit', label: 'Unidad', cardRole: 'title', sticky: 'left' },
+ *     { key: 'stage1', label: 'Recepción', interactive: true, align: 'center' },
+ *     { key: 'stage2', label: 'Entrega', interactive: true, align: 'center' },
+ *   ];
+ *   <kf-data-table [columns]="columns" [rows]="units" cardable [rowKey]="unitId"
+ *     [cellTemplates]="{ stage1: stageCell, stage2: stageCell }"
+ *     [cellAriaLabel]="stageLabel" (cellClick)="openStage($event.row, $event.column)" />
+ *
+ * Convive con `rowClick`: la fila sigue emitiéndolo desde cualquier punto que
+ * no sea una celda interactiva. En tarjetas, la tarjeta deja de ser un botón
+ * (un botón dentro de un `role="button"` es inválido) salvo que se fuerce con
+ * `[rowClickable]="true"`. `sticky`, `cellTemplates`, `currentRowKey`, la
+ * ordenación y la paginación no cambian.
  */
 declare class DataTable<T = unknown> {
     readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
@@ -1093,6 +1077,10 @@ declare class DataTable<T = unknown> {
     /** Placeholder nativo (`kf-skeleton`) mientras los datos reales cargan —
      * ver el doc-comment de la clase para el detalle. */
     readonly loading: _angular_core.InputSignal<boolean>;
+    /** Filas (o tarjetas) esqueleto mientras `loading` es `true`. Sin valor: el
+     * `pageSize` con paginación activa, o 5. Máximo
+     * {@link DATA_TABLE_MAX_SKELETON_ROWS}. */
+    readonly skeletonRows: _angular_core.InputSignal<number | undefined>;
     private readonly scrollEl;
     private readonly destroyRef;
     /**
@@ -1132,10 +1120,13 @@ declare class DataTable<T = unknown> {
      * real (badges, links, botones) usar `cellTemplates`.
      */
     readonly render: _angular_core.InputSignal<((row: T) => string) | undefined>;
-    /** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. */
+    /** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. El
+     * contexto trae `$implicit` (la fila), `index` y `column` (la columna), así
+     * que un mismo template puede servir a varias columnas. */
     readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
         $implicit: T;
         index: number;
+        column?: DataTableColumn;
     }>> | undefined>;
     /** Densidad de fila — ver `DataTableDensity`. */
     readonly density: _angular_core.InputSignal<DataTableDensity>;
@@ -1146,6 +1137,18 @@ declare class DataTable<T = unknown> {
         row: T;
         index: number;
     }>;
+    /**
+     * Se emite al activar (clic, Enter o Espacio) una celda de una columna
+     * `interactive`. `index` es el de la fila dentro de las filas mostradas
+     * (misma convención que `rowClick`). No emite `rowClick`.
+     */
+    readonly cellClick: _angular_core.OutputEmitterRef<DataTableCellClick<T>>;
+    /**
+     * Nombre accesible (`aria-label`) del botón de cada celda interactiva:
+     * `(row, column, index) => string`. Sin esta función, el botón se nombra
+     * por su contenido. Se usa solo en columnas `interactive`.
+     */
+    readonly cellAriaLabel: _angular_core.InputSignal<((row: T, column: DataTableColumn, index: number) => string) | undefined>;
     /** Nombre accesible del contenedor con scroll horizontal (solo se aplica cuando hay overflow). */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /**
@@ -1191,10 +1194,22 @@ declare class DataTable<T = unknown> {
      * (si `pageSizeOptions` está activo), o el `pageSize` del consumidor. */
     protected readonly effectivePageSize: _angular_core.Signal<number | null>;
     /** Cantidad de filas/cards placeholder mientras `loading` es true — el
-     * `pageSize` efectivo si hay paginación activa (así el placeholder ya
-     * "adivina" cuántas filas reales van a aparecer, sin salto de layout),
-     * o 5 si no hay paginación. */
+     * `skeletonRows` explícito; si no hay, el `pageSize` efectivo con
+     * paginación activa (así el placeholder ya "adivina" cuántas filas reales
+     * van a aparecer, sin salto de layout) o 5 sin paginación. Siempre entre 1 y
+     * {@link DATA_TABLE_MAX_SKELETON_ROWS}: con una página de 50 filas no se
+     * pintan 50 placeholders. */
     protected readonly skeletonRowIndexes: _angular_core.Signal<number[]>;
+    /** Las tarjetas esqueleto llevan encabezado cuando la real lo tendría. */
+    protected readonly skeletonCardHeader: _angular_core.Signal<boolean>;
+    /**
+     * Ancho (%) de la barra de una celda esqueleto: no todas iguales — una
+     * columna numérica (alineada al final) es corta, un identificador
+     * (`mono`) mediano, una de acciones (`hideLabel`) un cuadrado chico, y el
+     * resto alterna entre tres anchos según su posición para que la tabla no
+     * parezca un patrón repetido.
+     */
+    protected skeletonBarWidth(column: DataTableColumn, row: number, index: number): string;
     protected readonly totalPages: _angular_core.Signal<number>;
     /** Texto informativo del footer de paginación interna ("1–5 de 7
      * beneficios") — se recalcula con cada cambio de página/tamaño/dataset,
@@ -1207,8 +1222,8 @@ declare class DataTable<T = unknown> {
      * asc → desc → sin orden; clickear otra columna reinicia el ciclo en esa
      * columna nueva.
      */
-    readonly sort: _angular_core.InputSignal<`${string}:asc` | `${string}:desc` | null>;
-    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:asc` | `${string}:desc` | null>;
+    readonly sort: _angular_core.InputSignal<`${string}:desc` | `${string}:asc` | null>;
+    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:desc` | `${string}:asc` | null>;
     protected readonly sortedRows: _angular_core.Signal<T[]>;
     /** Filas realmente renderizadas: ordenadas y, si `pageSize` está activo,
      * recortadas a la página actual. */
@@ -1278,6 +1293,8 @@ declare class DataTable<T = unknown> {
      * Con columnas `action`, la interacción la manejan esos botones.
      */
     readonly cardInteractive: _angular_core.Signal<boolean>;
+    /** Hay al menos una columna `interactive` (celdas con botón propio). */
+    protected readonly hasInteractiveColumns: _angular_core.Signal<boolean>;
     /**
      * Mismo criterio que `cardInteractive`, para la vista de tabla: la fila
      * entera dispara `rowClick` solo si no hay una columna `action` que ya
@@ -1310,6 +1327,10 @@ declare class DataTable<T = unknown> {
      * `event` es opcional para no romper llamadas programáticas existentes.
      */
     onRowClick(row: T, index: number, event?: Event): void;
+    /** Activación de una celda interactiva (clic, o Enter/Espacio sobre su botón). */
+    protected onCellClick(row: T, column: DataTableColumn, index: number): void;
+    /** `aria-label` del botón de una celda interactiva, o `null` si lo da su contenido. */
+    protected cellLabel(row: T, column: DataTableColumn, index: number): string | null;
     private originatesInInteractiveControl;
     /**
      * Ancho real de cada columna `sticky` — se mide después de cada render
@@ -1321,7 +1342,185 @@ declare class DataTable<T = unknown> {
      */
     protected measureStickyOffsets(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "showViewToggle": { "alias": "showViewToggle"; "required": false; "isSignal": true; }; "cardMinWidth": { "alias": "cardMinWidth"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "currentRowKey": { "alias": "currentRowKey"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "keepPageOnRowsChange": { "alias": "keepPageOnRowsChange"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "page": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "view": "viewChange"; }, never, ["[empty]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "showViewToggle": { "alias": "showViewToggle"; "required": false; "isSignal": true; }; "cardMinWidth": { "alias": "cardMinWidth"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "cellAriaLabel": { "alias": "cellAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "currentRowKey": { "alias": "currentRowKey"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "keepPageOnRowsChange": { "alias": "keepPageOnRowsChange"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "cellClick": "cellClick"; "page": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "view": "viewChange"; }, never, ["[empty]", "[footer]"], true, never>;
+}
+
+/** Forma de contenido que reproduce el preset. */
+type SkeletonPresetVariant = 'kpi-grid' | 'card-grid' | 'form' | 'list' | 'table' | 'timeline' | 'detail-header';
+/** Tope de elementos: un `count` mayor se acota, no tiene sentido pintar más. */
+declare const SKELETON_PRESET_MAX_COUNT = 12;
+/**
+ * Esqueletos listos para usar que reproducen la FORMA del contenido real, para
+ * que al llegar los datos nada se mueva. Cada variante se arma con la misma
+ * geometría que su equivalente cargado (mismos cascarones, alturas, radios y
+ * gaps, todo por tokens):
+ *
+ * | `variant`        | Equivalente cargado          | `count`        | `columns`          |
+ * | ---------------- | ---------------------------- | -------------- | ------------------ |
+ * | `kpi-grid`       | `kf-stat-card`               | tarjetas (4)   | columnas de la grilla |
+ * | `card-grid`      | `kf-card`                    | tarjetas (6)   | columnas de la grilla |
+ * | `form`           | `kf-input` con label         | campos (4)     | `1` o `2`          |
+ * | `list`           | `kf-document-row`            | filas (4)      | —                  |
+ * | `table`          | `kf-data-table`              | filas (5)      | columnas (4)       |
+ * | `timeline`       | `kf-milestone-timeline`      | etapas (4)     | —                  |
+ * | `detail-header`  | `kf-page-header` con ícono   | —              | —                  |
+ *
+ * Sin `columns`, las grillas (`kpi-grid`, `card-grid`) se reparten solas con un
+ * ancho mínimo por tarjeta. `count` se acota a 12.
+ *
+ * El preset es decorativo (`aria-hidden` por dentro) y marca su contenedor con
+ * `aria-busy="true"`. Con `label` agrega un texto visualmente oculto con
+ * `role="status"` que lo anuncia a lectores de pantalla; dentro de
+ * `kf-content-state` no hace falta (ya lo anuncia él).
+ *
+ *   <kf-skeleton-preset variant="kpi-grid" [count]="4" />
+ *   <kf-skeleton-preset variant="form" [count]="3" [columns]="2" label="Cargando formulario" />
+ *   <kf-content-state [state]="state()" loadingPreset="table">…</kf-content-state>
+ */
+declare class SkeletonPreset {
+    readonly variant: _angular_core.InputSignal<SkeletonPresetVariant>;
+    /** Cantidad de elementos. Sin valor, el de la variante. Máximo 12. */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /** Columnas: de la grilla (`kpi-grid`, `card-grid`), del formulario (`1`|`2`) o de la tabla. */
+    readonly columns: _angular_core.InputSignal<number | undefined>;
+    /** Texto accesible (visualmente oculto, `role="status"`). Vacío, no se emite. */
+    readonly label: _angular_core.InputSignal<string>;
+    protected readonly total: _angular_core.Signal<number>;
+    protected readonly items: _angular_core.Signal<number[]>;
+    /** Columnas de la tabla sintética (encabezados en blanco: lo real aún no llegó). */
+    protected readonly tableColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly formColumns: _angular_core.Signal<2 | 1>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonPreset, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonPreset, "kf-skeleton-preset", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** En qué estado está la sección. */
+type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
+/** Cómo se dibuja `loading`. Default `'skeleton'`. */
+type ContentStateLoad = 'skeleton' | 'spinner';
+/**
+ * Marca el `ng-template` que reemplaza el esqueleto genérico de
+ * `kf-content-state` mientras carga (`state="loading"`, `load="skeleton"`).
+ *
+ *   <kf-content-state [state]="state()">
+ *     <ng-template kfContentStateLoading><kf-skeleton-preset variant="kpi-grid" /></ng-template>
+ *     …
+ *   </kf-content-state>
+ */
+declare class ContentStateLoading {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentStateLoading, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ContentStateLoading, "ng-template[kfContentStateLoading]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
+ * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
+ * siempre el mismo slot el que va rotando entre los cuatro.
+ *
+ * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
+ * tres dibuja el placeholder correspondiente y el contenido no se instancia.
+ * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
+ * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
+ *
+ * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
+ * mientras carga, porque no hay nada que reintentar todavía.
+ *
+ *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
+ *                     subtitle="Revisá tu conexión e intentá de nuevo.">
+ *     <kf-button actions (click)="retry()">Reintentar</kf-button>
+ *     <kf-data-table [columns]="cols" [rows]="rows()" />
+ *   </kf-content-state>
+ *
+ * Esqueleto de carga: por defecto son tres líneas genéricas. Para que la
+ * carga se parezca a lo que va a aparecer, hay tres vías (de la más corta a la
+ * más libre): `loadingPreset` (una variante de `kf-skeleton-preset`), el input
+ * `loadingTemplate` (un `TemplateRef`) o un `ng-template` marcado con
+ * `kfContentStateLoading` dentro del contenido. Si hay más de una, gana la
+ * plantilla proyectada, luego `loadingTemplate` y por último `loadingPreset`.
+ *
+ *   <kf-content-state [state]="state()" loadingPreset="kpi-grid">…</kf-content-state>
+ *
+ * Accesibilidad: en modo skeleton el contenedor lleva `aria-busy="true"` y un
+ * texto visualmente oculto con `role="status"` (`loadingLabel`, "Cargando…" por
+ * defecto) que anuncia el estado una vez. Con `load="spinner"` el texto es el
+ * del propio `kf-spinner`. El contenedor reserva un ancho mínimo, así que el
+ * esqueleto no colapsa a 0 dentro de un padre que se ajusta a su contenido.
+ */
+declare class ContentState {
+    readonly state: _angular_core.InputSignal<ContentStateKind>;
+    /** Forma del estado de carga: silueta (default) o spinner. */
+    readonly load: _angular_core.InputSignal<ContentStateLoad>;
+    /** Título de `empty`/`error`. Ignorado mientras carga. */
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Texto de carga: al lado del spinner con `load="spinner"` y, en modo skeleton,
+     * texto visualmente oculto con `role="status"` para lectores de pantalla. */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    /** Plantilla propia del esqueleto (reemplaza las tres líneas genéricas). */
+    readonly loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    /** Variante de `kf-skeleton-preset` como esqueleto de carga. */
+    readonly loadingPreset: _angular_core.InputSignal<SkeletonPresetVariant | null>;
+    /** `ng-template[kfContentStateLoading]` proyectado como contenido. */
+    protected readonly projectedLoading: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly customLoading: _angular_core.Signal<TemplateRef<any> | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "loadingPreset": { "alias": "loadingPreset"; "required": false; "isSignal": true; }; }, {}, ["projectedLoading"], ["*", "[actions]"], true, never>;
+}
+
+type ContentViewerType = 'image' | 'video' | 'pdf';
+/**
+ * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
+ * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
+ * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
+ * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
+ * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
+ *
+ * `src` acepta lo que venga del backend sin que el consumidor tenga que
+ * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
+ * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
+ * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
+ * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
+ *
+ * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
+ * la barra superior, junto al título.
+ *
+ *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
+ *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
+ *   </kf-content-viewer>
+ */
+declare class ContentViewer {
+    readonly type: _angular_core.InputSignal<ContentViewerType>;
+    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
+    readonly src: _angular_core.InputSignal<string | null>;
+    /** Texto alternativo cuando `type="image"`. */
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly titleId: string;
+    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
+     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
+     * — el backend a veces manda una cosa, a veces la otra. */
+    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
+    protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
+    protected readonly fallbackLabel: _angular_core.Signal<string>;
+    private readonly dialog;
+    private readonly document;
+    private readonly sanitizer;
+    constructor();
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    protected onCancel(event: Event): void;
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     */
+    protected onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
 }
 
 /**
@@ -1367,6 +1566,14 @@ type DocumentRowTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
  * título, metadata y la acción de descarga al final. Sin `href` rinde
  * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
  * la metadata y la acción, como slot para un `kf-badge` de estado.
+ *
+ * `loading` (default `false`): dibuja el esqueleto de la fila — chip, título,
+ * metadata y acción como bloques del alto real de cada texto — con el mismo
+ * cascarón, así que al llegar los datos no hay salto de layout. Pasa los
+ * mismos inputs que usarás cargada (`meta` incluido, para reservar su línea).
+ * Marca el host con `aria-busy="true"` y oculta el contenido proyectado.
+ *
+ *   <kf-document-row title="Factura" meta="PDF · 120 KB" [loading]="isLoading()" />
  */
 declare class DocumentRow {
     readonly icon: _angular_core.InputSignal<IconName>;
@@ -1382,8 +1589,10 @@ declare class DocumentRow {
     readonly downloadLabel: _angular_core.InputSignal<string>;
     /** Qué se dice cuando no hay `href`. */
     readonly pendingLabel: _angular_core.InputSignal<string>;
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DocumentRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentRow, "kf-document-row", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentRow, "kf-document-row", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
 }
 
 /** Borde de anclaje del panel. `bottom` es una hoja inferior (bottom sheet). */
@@ -1447,8 +1656,9 @@ type DrawerRole = 'navigation' | 'dialog';
  * redondeadas, alto máximo 80vh) — pensado para un resumen en mobile.
  *
  * Escape cierra el panel salvo que un control interno ya haya consumido la
- * tecla (`event.defaultPrevented`, ej. un `kf-select` abierto dentro del
- * drawer cierra solo su propio panel).
+ * tecla (`event.defaultPrevented`): un `kf-select`, `kf-multi-select` o
+ * `kf-dropdown` abierto dentro del drawer cierra primero su propio panel y
+ * un segundo Escape cierra el drawer.
  *
  * Nombres por defecto: con `role="navigation"` el panel se llama "Menú" y
  * el cierre "Cerrar menú" (comportamiento histórico). Con `role="dialog"`
@@ -1456,12 +1666,25 @@ type DrawerRole = 'navigation' | 'dialog';
  * avisa por consola si no hay `title` ni `ariaLabel`: un diálogo sin nombre
  * propio no le dice nada al lector de pantalla.
  *
- * Limitación conocida: NO colocar un `kf-select` (ni otro control con panel
- * flotante del CDK) dentro de un drawer `role="dialog"`. Su listbox se
- * monta en `.cdk-overlay-container`, fuera del diálogo con `aria-modal`: un
- * lector de pantalla puede tratarlo como contenido inerte y la trampa de
- * foco no lo incluye. Para elegir una opción dentro del panel usar
- * `kf-option-list`.
+ * ## Selectores y otros paneles flotantes dentro del drawer
+ *
+ * `kf-select`, `kf-multi-select` y `kf-dropdown` funcionan
+ * dentro de un drawer (incluido el pie `[kf-drawer-footer]`): sus paneles
+ * quedan por encima del drawer, se abren hacia arriba si abajo no hay lugar
+ * y no se cortan con el borde del panel ni con el scroll del cuerpo. Con
+ * `role="dialog"` el contenedor de overlays de CDK se reubica dentro del
+ * panel mientras está abierto: el listbox queda dentro del diálogo
+ * `aria-modal`, no fuera de él, y el atrapado de foco lo incluye. Al cerrar
+ * el drawer vuelve a `<body>`. Escape cierra primero el panel flotante
+ * (devolviendo el foco a su disparador) y el siguiente cierra el drawer.
+ *
+ *   <kf-drawer [(open)]="open" role="dialog" side="right" title="Unidad VIN-1003">
+ *     ...
+ *     <div kf-drawer-footer>
+ *       <kf-select label="Saltar a otra unidad" width="full"
+ *                  [options]="units" [value]="unit()" (valueChange)="unit.set($event)" />
+ *     </div>
+ *   </kf-drawer>
  *
  * Al cerrar, el foco vuelve al elemento que lo tenía al abrir solo si sigue
  * en el documento (`isConnected`); si fue desmontado mientras el drawer
@@ -1494,6 +1717,8 @@ declare class Drawer {
     private readonly panelRef;
     private readonly focusTrapFactory;
     private readonly document;
+    private readonly overlayContainer;
+    private registeredPanel;
     private focusTrap;
     private lastFocusedElement;
     constructor();
@@ -1549,9 +1774,12 @@ declare class Dropdown {
      * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
      * ve teclas con el foco DENTRO del panel. Si el foco queda en el botón
      * disparador (caso común), `keydownEvents()` nunca dispara — este
-     * listener a nivel de documento cubre ese caso.
+     * listener a nivel de documento cubre ese caso. Va en fase de captura
+     * (ver `listenEscapeCapture`) y consume la tecla solo si había un menú
+     * abierto, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
      */
-    onDocumentEscape(): void;
+    onDocumentEscape(): boolean;
     private attach;
     /**
      * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
@@ -1671,7 +1899,7 @@ declare class EmptyState {
     /** `neutral` (default): cero resultados. `error`: fallo real de carga. `warn`/`info`: tiñen el chip del ícono. */
     readonly tone: _angular_core.InputSignal<EmptyStateTone>;
     /** `inline` (default, histórico) o `card` (tarjeta centrada). Ver JSDoc de la clase. */
-    readonly variant: _angular_core.InputSignal<"inline" | "card">;
+    readonly variant: _angular_core.InputSignal<"card" | "inline">;
     /** Título destacado sobre el contenido. Opcional en ambas variantes. */
     readonly title: _angular_core.InputSignal<string | undefined>;
     protected readonly iconSize: _angular_core.Signal<IconSize>;
@@ -1791,6 +2019,128 @@ declare class FieldLabel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Por qué se descartó un archivo: formato fuera de `accept` o más grande que `maxSize`. */
+type FileRejectionReason = 'type' | 'size';
+/** Un archivo descartado y el motivo. */
+interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+/** Tamaño en bytes como texto (`5 MB`, `120 KB`), base 1024. */
+declare function formatFileSize(bytes: number): string;
+/**
+ * Selector de archivo accesible, con la misma apariencia y contrato de campo
+ * que `kf-input`: label arriba, ayuda y error debajo, `invalid`.
+ *
+ * El control real es un `<input type="file">` nativo, visualmente oculto pero
+ * enfocable: se llega con Tab, se abre con Enter o Espacio y el anillo de foco
+ * se dibuja sobre el botón visible. Su nombre accesible es el `label` (o
+ * `ariaLabel`); la ayuda, el archivo elegido y el error lo describen
+ * (`aria-describedby`).
+ *
+ * **Ayuda antes de elegir.** `hint` es texto libre; si no se pasa, se arma sola
+ * con los formatos de `accept` y el tamaño de `maxSize` (`PDF, JPG · máx. 5 MB`),
+ * para que el usuario sepa qué sirve ANTES de abrir el selector.
+ *
+ * **Validación.** Cada archivo se revisa contra `accept` (extensiones `.pdf`,
+ * tipos `image/png` o comodines `image/*`) y `maxSize` (bytes). Los válidos
+ * quedan elegidos y se emiten en `fileChange` (siempre `File[]`, vacío al
+ * quitar); los descartados se emiten uno a uno en `fileRejected` con su
+ * motivo (`'type'` o `'size'`) y se muestran como error bajo el campo
+ * (`rejectedTypeText` / `rejectedSizeText`); la ayuda sigue visible bajo ese
+ * mensaje, para que se vea qué sí sirve. Un `error` del consumidor tiene
+ * prioridad sobre ese mensaje y reemplaza a la ayuda, igual que `errorMessage`
+ * sobre `hint` en `kf-input`. La validación del navegador no reemplaza la del servidor.
+ *
+ * **Archivo elegido.** Su nombre y tamaño aparecen UNA vez, con un botón para
+ * quitarlo (`removeLabel`, con el nombre del archivo en su `aria-label`); el
+ * nombre del `<input>` nativo queda oculto. Con `multiple` se listan todos y
+ * cada uno se quita por separado. Elegir de nuevo reemplaza la selección.
+ *
+ * `dropzone` agrega arrastrar y soltar sobre el área; el botón y el teclado
+ * siguen siendo la vía principal.
+ *
+ * Es un `ControlValueAccessor`: con `[(ngModel)]`/`formControl` el valor es
+ * `File | null` (o `File[]` con `multiple`); `writeValue(null)` limpia.
+ *
+ *   <kf-file-input label="Comprobante" accept=".pdf,.jpg,.png" [maxSize]="5242880"
+ *                  (fileChange)="onFiles($event)" (fileRejected)="onRejected($event)" />
+ *   <kf-file-input label="Fotos" accept="image/*" multiple dropzone formControlName="photos" />
+ *   <kf-file-input label="Contrato" error="Adjunta el contrato firmado." formControlName="contract" />
+ */
+declare class FileInput implements ControlValueAccessor {
+    private readonly nativeInput;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Texto de ayuda. Sin valor, se arma con `accept` y `maxSize`. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Formatos admitidos, como el `accept` nativo: `.pdf,.jpg`, `image/png`, `image/*`. */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /** Tamaño máximo por archivo, en bytes. Sin valor, sin límite. */
+    readonly maxSize: _angular_core.InputSignal<number | undefined>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Agrega arrastrar y soltar sobre el área del control. */
+    readonly dropzone: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Borde rojo y `aria-invalid`. Se activa solo con `error`; úsalo para marcar un error sin mensaje. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error del consumidor (`role="alert"`); reemplaza a la ayuda y al motivo de rechazo, como `errorMessage` en `kf-input`. */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible cuando no hay `label` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Texto del botón cuando no hay archivo elegido. */
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    /** Texto del botón con `multiple` o cuando ya hay un archivo (cambiar). */
+    readonly changeLabel: _angular_core.InputSignal<string>;
+    /** Nombre accesible del botón de quitar; se le agrega el nombre del archivo. */
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /** Texto de arrastrar y soltar (solo con `dropzone`). */
+    readonly dropzoneText: _angular_core.InputSignal<string>;
+    readonly rejectedTypeText: _angular_core.InputSignal<string>;
+    readonly rejectedSizeText: _angular_core.InputSignal<string>;
+    /** Selección vigente (`File[]`, vacío al quitar todo). */
+    readonly fileChange: _angular_core.OutputEmitterRef<File[]>;
+    /** Un archivo descartado y su motivo. */
+    readonly fileRejected: _angular_core.OutputEmitterRef<FileRejection>;
+    protected readonly inputId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly filesId: string;
+    protected readonly files: _angular_core.WritableSignal<File[]>;
+    protected readonly rejection: _angular_core.WritableSignal<FileRejectionReason | null>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    private readonly disabledByForm;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    /** Mensaje visible: el del consumidor, o el motivo del último rechazo. */
+    protected readonly message: _angular_core.Signal<string | null>;
+    /** Ayuda efectiva: la del consumidor o la armada con formatos y tamaño. */
+    protected readonly effectiveHint: _angular_core.Signal<string>;
+    protected readonly isInvalid: _angular_core.Signal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly triggerText: _angular_core.Signal<string>;
+    /** Enfoca el `<input>` nativo. */
+    focus(options?: FocusOptions): void;
+    writeValue(value: File | File[] | null): void;
+    registerOnChange(fn: (value: File | File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onPick(event: Event): void;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(): void;
+    protected onDrop(event: DragEvent): void;
+    protected remove(index: number): void;
+    protected formatSize(file: File): string;
+    /** Valida lo recibido, emite los rechazos y reemplaza la selección si hay algo válido. */
+    private receive;
+    private reject;
+    private matchesAccept;
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInput, "kf-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "dropzone": { "alias": "dropzone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "dropzoneText": { "alias": "dropzoneText"; "required": false; "isSignal": true; }; "rejectedTypeText": { "alias": "rejectedTypeText"; "required": false; "isSignal": true; }; "rejectedSizeText": { "alias": "rejectedSizeText"; "required": false; "isSignal": true; }; }, { "fileChange": "fileChange"; "fileRejected": "fileRejected"; }, never, never, true, never>;
+}
+
 interface MultiSelectOption {
     value: string;
     label: string;
@@ -1884,7 +2234,13 @@ declare class MultiSelect {
     /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
     moveActive(delta: number): void;
     toggleActive(): void;
-    onEscape(): void;
+    /**
+     * Escape con el panel abierto, en fase de captura sobre `document` (ver
+     * `listenEscapeCapture`): consume la tecla solo si había un panel que
+     * cerrar, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
+     */
+    onEscape(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
 }
@@ -2035,6 +2391,8 @@ declare class Footer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "kf-footer", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": true; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Valor de `min`/`max`/`step`: número, o texto cuando el tipo lo pide (una fecha `'2026-01-31'`, un mes, una hora). */
+type InputBound = string | number | null | undefined;
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
  * fondo gris que pasa a blanco con anillo de foco azul al enfocar.
@@ -2098,6 +2456,20 @@ declare class Footer {
  *
  *   <kf-input label="RUT" autocomplete="username" name="rut" inputmode="text" formControlName="rut" />
  *   <kf-input type="password" label="Contraseña" toggleable autocomplete="current-password" name="password" formControlName="password" />
+ *
+ * `min`, `max`, `step` y `maxlength` se reenvían al `<input>` nativo (mismo
+ * motivo: un atributo en el host no llega adentro) y sin valor no se
+ * renderiza ningún atributo. `min`/`max`/`step` aceptan número o texto según
+ * el `type` (`number`, `range`, `date`, `time`, `month`…): con `type="date"` el
+ * límite es una fecha ISO. `maxlength` es un entero positivo y aplica a los
+ * tipos de texto (`text`, `search`, `email`, `tel`, `url`, `password`). El
+ * navegador usa los límites para la validación nativa (`:invalid`,
+ * `validity.rangeUnderflow`) y para el selector de fechas; no reemplazan la
+ * validación del formulario ni el `errorMessage`.
+ *
+ *   <kf-input type="date" label="Fecha de entrega" min="2026-01-01" max="2026-12-31" />
+ *   <kf-input type="number" label="Cantidad" [min]="1" [max]="20" [step]="1" />
+ *   <kf-input label="Placa" [maxlength]="7" />
  */
 declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
@@ -2136,6 +2508,14 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     /** Sugiere el teclado virtual (`numeric`, `email`, `tel`, etc.) sin cambiar
      * el `type`. Sin valor, el atributo no se renderiza. */
     readonly inputmode: _angular_core.InputSignal<string | null | undefined>;
+    /** Límite inferior del control (`min` nativo): número, o texto para fechas/horas (`'2026-01-01'`). */
+    readonly min: _angular_core.InputSignalWithTransform<string | number | null, InputBound>;
+    /** Límite superior del control (`max` nativo). Ver `min`. */
+    readonly max: _angular_core.InputSignalWithTransform<string | number | null, InputBound>;
+    /** Paso del control (`step` nativo): número o `'any'`. */
+    readonly step: _angular_core.InputSignalWithTransform<string | number | null, InputBound>;
+    /** Largo máximo del texto (`maxlength` nativo), entero positivo. Solo aplica a tipos de texto. */
+    readonly maxlength: _angular_core.InputSignalWithTransform<number | null, string | number | null | undefined>;
     /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
     readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Nombre accesible del `<input>` cuando no hay `label` visible. Ignorado
@@ -2195,7 +2575,7 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
      */
     protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "cleared": "cleared"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "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; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "cleared": "cleared"; }, never, never, true, never>;
 }
 
 type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
@@ -2508,6 +2888,14 @@ declare class ListToolbar {
  *   <kf-metric-card label="Saldo Pendiente" value="$45,000">
  *     <kf-button actions variant="primary" size="sm">Pagar Ahora</kf-button>
  *   </kf-metric-card>
+ *
+ * `loading` (default `false`): dibuja el esqueleto de la card — etiqueta,
+ * ícono, valor y `foot` como bloques del alto real de cada línea — dentro del
+ * mismo `kf-card`, y reserva (sin mostrar) el espacio de las acciones, así que
+ * al llegar los datos no hay salto de layout. Pasa los mismos inputs que
+ * usarás cargada. Marca el host con `aria-busy="true"`.
+ *
+ *   <kf-metric-card label="Tickets abiertos" value="11" foot="+2 hoy" [loading]="isLoading()" />
  */
 declare class MetricCard {
     readonly label: _angular_core.InputSignal<string>;
@@ -2520,8 +2908,132 @@ declare class MetricCard {
     readonly valueColor: _angular_core.InputSignal<string | undefined>;
     /** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
     readonly badge: _angular_core.InputSignal<string | undefined>;
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/** Estado de avance de una etapa o hito; nunca se comunica solo con color. */
+type ProgressStatus = 'done' | 'current' | 'pending';
+declare const PROGRESS_STATUS: {
+    readonly DONE: "done";
+    readonly CURRENT: "current";
+    readonly PENDING: "pending";
+};
+/**
+ * Texto por defecto (español) de cada estado: el estado nunca se comunica solo
+ * con color. Los componentes que lo muestran aceptan sus propios textos.
+ */
+declare const PROGRESS_STATUS_LABEL: {
+    readonly done: "Completado";
+    readonly current: "En curso";
+    readonly pending: "Pendiente";
+};
+
+/**
+ * Hito de una etapa. `date` llega ya formateada; `exception` excluye el hito
+ * del avance (se muestra en un bloque aparte y solo si ocurrió).
+ */
+interface MilestoneItem {
+    id: string;
+    label: string;
+    done: boolean;
+    date?: string;
+    exception?: boolean;
+}
+/**
+ * Etapa expandible de la línea de tiempo. `date` llega ya formateada y solo
+ * aplica si la etapa está completada. Una etapa sin `items` no es expandible.
+ */
+interface MilestoneGroup {
+    id: string;
+    label: string;
+    status: ProgressStatus;
+    icon: IconName;
+    date?: string;
+    items: readonly MilestoneItem[];
+}
+/** Textos de `kf-milestone-timeline`; todos tienen valor por defecto en español. */
+interface MilestoneTimelineLabels {
+    heading: string;
+    expandAll: string;
+    collapseAll: string;
+    statusDone: string;
+    statusPending: string;
+    /** Texto de una etapa en curso; recibe los hitos completados y el total que cuenta en el avance. */
+    currentMeta: (done: number, total: number) => string;
+    /** Insignia del hito destacado como el siguiente a completar. */
+    next: string;
+    exceptionsTitle: string;
+    noExceptions: string;
+    /** Texto solo para lectores de pantalla tras un hito completado. */
+    itemDone: string;
+    /** Texto solo para lectores de pantalla tras un hito pendiente. */
+    itemPending: string;
+}
+declare const DEFAULT_MILESTONE_TIMELINE_LABELS: MilestoneTimelineLabels;
+
+/**
+ * Línea de tiempo de etapas con hitos. Cada etapa es un encabezado expandible
+ * (`aria-expanded`/`aria-controls`) con un panel de hitos y, si la etapa tiene
+ * hitos de excepción, un bloque aparte que no cuenta en el avance. Una etapa
+ * sin hitos es solo informativa (no es un botón).
+ *
+ * El estado nunca se comunica solo con color: cada etapa y cada hito llevan su
+ * estado en texto (visible o solo para lectores de pantalla) y los nodos y
+ * marcas lo dibujan también con la forma. Todos los textos salen de `labels`
+ * (español por defecto) y las fechas llegan ya formateadas.
+ *
+ * El conector entre etapas se deriva del tamaño del nodo
+ * (`--kf-status-node-size`, default `2.125rem`) y de la separación del
+ * encabezado: cambiar el tamaño del nodo mueve la línea con él.
+ *
+ *   <kf-milestone-timeline
+ *     [groups]="stages()"
+ *     [(expandedIds)]="expanded"
+ *     nextItemId="stage2-docs"
+ *     ariaLabel="Avance de la entrega"
+ *     [labels]="{ heading: 'Progress', expandAll: 'Expand all' }"
+ *   />
+ */
+declare class MilestoneTimeline {
+    private readonly host;
+    private readonly instanceId;
+    readonly groups: _angular_core.InputSignal<readonly MilestoneGroup[]>;
+    /** Ids de las etapas expandidas, two-way: `[(expandedIds)]`. El padre controla el estado inicial. */
+    readonly expandedIds: _angular_core.ModelSignal<readonly string[]>;
+    /** Id del hito que se destaca como el siguiente a completar. */
+    readonly nextItemId: _angular_core.InputSignal<string | undefined>;
+    /** Textos; los que no se pasen usan el español por defecto. */
+    readonly labels: _angular_core.InputSignal<Partial<MilestoneTimelineLabels>>;
+    /** Nombre accesible de la lista de etapas. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Nivel (2-6) del título "Avance por etapa", para respetar el esquema de títulos de la página. */
+    readonly headingLevel: _angular_core.InputSignal<2 | 3 | 4 | 5 | 6>;
+    protected readonly text: _angular_core.Signal<MilestoneTimelineLabels>;
+    protected readonly rows: _angular_core.Signal<{
+        group: MilestoneGroup;
+        main: MilestoneItem[];
+        exceptions: MilestoneItem[];
+        happened: MilestoneItem[];
+        expandable: boolean;
+        meta: string;
+    }[]>;
+    private readonly expandableIds;
+    protected readonly hasExpandable: _angular_core.Signal<boolean>;
+    protected readonly allExpanded: _angular_core.Signal<boolean>;
+    protected isExpanded(groupId: string): boolean;
+    protected headId(groupId: string): string;
+    protected panelId(groupId: string): string;
+    protected itemStatus(item: MilestoneItem): 'done' | 'pending';
+    protected toggle(groupId: string): void;
+    protected toggleAll(): void;
+    /** Lleva el foco al encabezado de una etapa expandible; devuelve el elemento, o `null` si no existe o no es expandible. */
+    focusGroup(groupId: string): HTMLElement | null;
+    private metaOf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MilestoneTimeline, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MilestoneTimeline, "kf-milestone-timeline", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "nextItemId": { "alias": "nextItemId"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, { "expandedIds": "expandedIdsChange"; }, never, never, true, never>;
 }
 
 /**
@@ -2918,6 +3430,140 @@ declare class Panel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
 
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Popover de contenido enriquecido anclado a un elemento — la contraparte de
+ * `kfTooltip` para cuando el texto plano no alcanza (varias líneas, énfasis,
+ * un desglose, enlaces). Mismo mecanismo de `@angular/cdk/overlay`. El host
+ * sigue siendo el elemento que recibe el foco: la directiva no lo hace
+ * focusable, así que va sobre un `<button>`, un `<a>` o un elemento con
+ * `tabindex="0"`.
+ *
+ *   <button [kfPopover]="detail" kfPopoverPlacement="top">Etapa</button>
+ *   <ng-template #detail><strong>Recepción</strong><p>Completada el 12/05.</p></ng-template>
+ *
+ * Apertura: puntero (hover, tras `kfPopoverShowDelay` ms; NO se abre con puntero
+ * táctil) y foco de teclado (al instante, solo si el foco es visible: un
+ * clic con el mouse no lo abre). Cierre: Escape (descarta el panel hasta que
+ * el puntero y el foco salgan y vuelvan), salida del puntero tras
+ * `kfPopoverHideDelay` ms, pérdida de foco, scroll de cualquier contenedor y
+ * redimensionado de la ventana. El panel se reposiciona dentro del viewport
+ * (invierte el lado si no cabe).
+ *
+ * Con `kfPopoverInteractive`, el puntero puede entrar al panel sin cerrarlo y
+ * el panel es un `dialog` no modal: Tab desde el anfitrión entra al primer
+ * control del panel y Mayús+Tab desde ese control vuelve al anfitrión. Sin
+ * `kfPopoverInteractive` (default), el panel es un `tooltip` que no captura
+ * el puntero y no debe contener controles.
+ *
+ * Si el anfitrión no es interactivo pero vive dentro de un control (un botón,
+ * un enlace, un elemento con `tabindex`), los eventos de puntero, foco y
+ * teclado se escuchan en ese control y el panel se ancla al anfitrión. Es el
+ * caso de un indicador dentro de una celda interactiva de `kf-data-table`:
+ *
+ *   <ng-template #stageCell let-row>
+ *     <span [kfPopover]="detail"><kf-status-mark [status]="row.status" /></span>
+ *   </ng-template>
+ *
+ * Accesibilidad: mientras está abierto, el elemento que recibe el foco
+ * referencia el panel con `aria-describedby` (se conserva cualquier valor
+ * previo).
+ */
+declare class PopoverDirective implements OnDestroy {
+    /** Contenido del popover (un `ng-template`). `null`/`undefined` = no se abre. */
+    readonly kfPopover: _angular_core.InputSignal<TemplateRef<unknown> | null | undefined>;
+    /** Lado preferido; si no cabe en el viewport, se invierte. Default `bottom`. */
+    readonly kfPopoverPlacement: _angular_core.InputSignal<PopoverPlacement>;
+    /** Retardo (ms) antes de abrir con el puntero. El foco de teclado abre sin retardo. */
+    readonly kfPopoverShowDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Retardo (ms) antes de cerrar al salir el puntero. */
+    readonly kfPopoverHideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Desactiva el popover (y lo cierra si estaba abierto). */
+    readonly kfPopoverDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Permite que el puntero entre al panel sin cerrarlo y que el teclado llegue a sus controles. */
+    readonly kfPopoverInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre accesible del panel cuando es `interactive` (rol `dialog`). */
+    readonly kfPopoverLabel: _angular_core.InputSignal<string | null>;
+    /** Emite `true` al abrirse y `false` al cerrarse. */
+    readonly kfPopoverOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly host;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly panelId;
+    private readonly openState;
+    /** `true` mientras el panel está abierto. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /**
+     * Elemento que recibe los eventos de puntero, foco y teclado: el propio
+     * anfitrión o, si este no es interactivo pero vive dentro de un control
+     * (botón, enlace, `tabindex`), ese control. `aria-describedby` va en él.
+     */
+    private trigger;
+    private overlayRef;
+    private panelElement;
+    private showTimer;
+    private hideTimer;
+    private openedAt;
+    private teardownGlobalListeners;
+    private destroyed;
+    private pointerOnHost;
+    private pointerOnPanel;
+    private focusOnHost;
+    private focusOnPanel;
+    /** Escape lo descartó: no reabre hasta que puntero y foco hayan salido. */
+    private dismissed;
+    constructor();
+    ngOnDestroy(): void;
+    /** Cierra el panel de inmediato, sin retardo. */
+    close(): void;
+    private readonly onHostPointerEnter;
+    private readonly onHostPointerLeave;
+    private readonly onHostFocusIn;
+    private readonly onHostFocusOut;
+    private readonly onHostKeydown;
+    private get wanted();
+    /** Abre o cierra según los cuatro orígenes (puntero/foco × anfitrión/panel). */
+    private reevaluate;
+    private scheduleOpen;
+    private scheduleClose;
+    private open;
+    private dispose;
+    private onPanelFocusOut;
+    /** Mayús+Tab desde el primer control del panel devuelve el foco al anfitrión. */
+    private readonly onPanelKeydown;
+    private focusHost;
+    /**
+     * Escape, scroll y resize mientras el panel está abierto. En fase de captura
+     * y sobre `document`: `scroll` no burbujea (hay que capturarlo para ver el
+     * de cualquier contenedor) y Escape debe cerrar primero el popover sin
+     * llegar al modal o drawer que lo contenga.
+     */
+    private listenGlobal;
+    private resolveTrigger;
+    /** Foco de teclado (`:focus-visible`); sin soporte del selector, se asume teclado. */
+    private isKeyboardFocus;
+    private addDescribedBy;
+    private removeDescribedBy;
+    private describedByTokens;
+    private clearShowTimer;
+    private clearHideTimer;
+    private clearTimers;
+    /**
+     * Posiciones en orden de preferencia: el lado pedido (centrado, luego
+     * alineado al inicio y al final del anfitrión), el lado opuesto con las
+     * mismas tres alineaciones y, por último, los dos lados perpendiculares.
+     * Así un anfitrión pegado a una esquina encuentra una posición que cabe
+     * entera en vez de depender solo del empuje al viewport.
+     */
+    private positionsFor;
+    private positionFor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[kfPopover]", ["kfPopover"], { "kfPopover": { "alias": "kfPopover"; "required": true; "isSignal": true; }; "kfPopoverPlacement": { "alias": "kfPopoverPlacement"; "required": false; "isSignal": true; }; "kfPopoverShowDelay": { "alias": "kfPopoverShowDelay"; "required": false; "isSignal": true; }; "kfPopoverHideDelay": { "alias": "kfPopoverHideDelay"; "required": false; "isSignal": true; }; "kfPopoverDisabled": { "alias": "kfPopoverDisabled"; "required": false; "isSignal": true; }; "kfPopoverInteractive": { "alias": "kfPopoverInteractive"; "required": false; "isSignal": true; }; "kfPopoverLabel": { "alias": "kfPopoverLabel"; "required": false; "isSignal": true; }; }, { "kfPopoverOpenChange": "kfPopoverOpenChange"; }, never, never, true, never>;
+}
+
 /** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
  * usa en el drawer mobile (columna, ver template) — el `<nav>` horizontal de
  * escritorio se mantiene solo texto, sin ícono ni chevron. */
@@ -3052,9 +3698,12 @@ declare class PortalHeader {
  * que no aplican a un valor de progreso): `neutral` es el color de marca
  * por defecto (sin implicar buen/mal estado), `primary` es el color
  * primario para un avance de proceso (ej. una carga), y `ok`/`warn`/`error`
- * sí comunican severidad. La librería no conoce el dominio que produce ese
+ * sí comunican severidad. `purple` es el acento morado de marca, igual al tono
+ * `purple` de `kf-stat-card`. La librería no conoce el dominio que produce ese
  * valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
-type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error';
+type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error' | 'purple';
+/** Grosor de la pista: `sm` 4px (el histórico), `md` 8px, `lg` 12px. */
+type ProgressSize = 'sm' | 'md' | 'lg';
 /**
  * Barra de progreso de un solo valor (0-100%) con color por severidad —
  * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
@@ -3065,16 +3714,24 @@ type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error';
  *
  * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
  * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
- * ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
+ * ancho de la barra. `size` cambia el grosor de la pista (`sm` 4px, `md` 8px,
+ * `lg` 12px; sin él, 4px como siempre); el `role="progressbar"` y sus valores
+ * accesibles no cambian. `label` es texto libre opcional sobre la barra (ej.
  * "80%"); sin él, no se renderiza ningún texto, solo la barra.
  */
 declare class Progress {
     readonly value: _angular_core.InputSignal<number>;
     readonly tone: _angular_core.InputSignal<ProgressTone>;
+    /** Grosor de la pista. Default `sm` (4px). */
+    readonly size: _angular_core.InputSignal<ProgressSize>;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible de la barra (`aria-label`). Sin él, el `progressbar`
+     * queda sin nombre: dalo siempre que el contexto no lo nombre ya (por
+     * ejemplo con un `label` visible asociado). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     protected readonly clampedValue: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -3402,7 +4059,7 @@ declare class Select {
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Mensaje de error con `role="alert"`, debajo del trigger. */
     readonly errorMessage: _angular_core.InputSignal<string | undefined>;
-    readonly variant: _angular_core.InputSignal<"compact" | "field">;
+    readonly variant: _angular_core.InputSignal<"field" | "compact">;
     /**
      * Ancho del control. 'md' (240px) es el default histórico y preserva el
      * comportamiento actual sin cambios para consumidores existentes.
@@ -3468,12 +4125,16 @@ declare class Select {
     private readonly overlay;
     constructor();
     /**
-     * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo ve
-     * teclas presionadas con el foco DENTRO del pane del overlay. Si el foco
-     * sigue en el trigger (o en cualquier otro lado de la página) mientras el
-     * panel está abierto, `keydownEvents()` nunca dispara.
+     * Escape con el panel abierto, escuchado en fase de captura sobre
+     * `document` (ver `listenEscapeCapture`). Respaldo de
+     * `overlayRef.keydownEvents()`: ese observable del CDK solo ve teclas
+     * presionadas con el foco DENTRO del pane del overlay; si el foco sigue en
+     * el trigger (o en cualquier otro lado) mientras el panel está abierto,
+     * nunca dispara. Consume la tecla (`preventDefault`) solo si había un
+     * panel que cerrar, así un `kf-drawer`/`kf-modal` que contenga al select
+     * no se cierra con el mismo Escape. Devuelve si cerró algo.
      */
-    onDocumentEscape(): void;
+    onDocumentEscape(): boolean;
     toggle(): void;
     /** Abre el panel con la opción seleccionada como activa (o la primera). */
     open(): void;
@@ -3714,7 +4375,7 @@ declare class Spinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "kf-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onDark": { "alias": "onDark"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
+type StatCardTone = 'primary' | 'success' | 'error' | 'purple' | 'warn' | 'info' | 'neutral';
 /**
  * Card de estadística horizontal: ícono circular grande a la izquierda,
  * valor + label + nota apilados al centro, chevron opcional al final si es
@@ -3723,6 +4384,31 @@ type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
  * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
  *
  *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
+ *
+ * Extensiones opcionales (la card sin ellas se ve y se comporta como siempre):
+ * - `tone`: además de `primary|success|error|purple`, `warn`, `info` y `neutral`.
+ * - `bar` (0-100): barra de progreso accesible (`kf-progress`, `role="progressbar"`
+ *   con `aria-valuenow`/`min`/`max` y el `label` como nombre) bajo la nota. Se
+ *   acota a [0, 100]; `null`/`undefined` no la dibuja. Es un refuerzo visual:
+ *   el valor exacto conviene darlo también en texto (`hint`), porque el relleno
+ *   de algunos tonos de `kf-progress` tiene poco contraste con su pista.
+ * - `hint`: texto secundario bajo la barra (ej. "12 de 20 completadas").
+ * - `pressed` (`boolean | null`): con `clickable`, la card es un botón de
+ *   alternancia (`aria-pressed`), útil como filtro. `null` (default) = no
+ *   aplica y no emite el atributo. Sin `clickable` no tiene efecto.
+ *
+ *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
+ *     clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
+ *
+ * `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
+ * en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
+ * y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
+ * nota, barra y `hint` —, así que al llegar los datos no hay salto de
+ * layout. Pasa los mismos inputs que usarás cargada para que el esqueleto
+ * reserve las mismas líneas. Marca la card con `aria-busy="true"`, no es
+ * clicable ni expone su texto a lectores de pantalla mientras carga.
+ *
+ *   <kf-stat-card icon="clock" value="7" label="Por vencer" note="Esta semana" [loading]="isLoading()" />
  */
 declare class StatCard {
     readonly icon: _angular_core.InputSignal<IconName>;
@@ -3730,11 +4416,24 @@ declare class StatCard {
     readonly value: _angular_core.InputSignal<string | number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly note: _angular_core.InputSignal<string | undefined>;
+    /** Avance 0-100 (barra de progreso accesible); `null`/`undefined` = sin barra. */
+    readonly bar: _angular_core.InputSignal<number | null | undefined>;
+    /** Texto secundario bajo la barra (o bajo la nota si no hay barra). */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Estado de alternancia (`aria-pressed`) cuando la card es `clickable`.
+     * `null` (default) = no aplica: el atributo no se emite.
+     */
+    readonly pressed: _angular_core.InputSignal<boolean | null>;
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
     readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    protected readonly barTone: _angular_core.Signal<ProgressTone>;
+    protected readonly hasBar: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
 /** Vocabulario semántico único de tono, compartido con `TextTone`. */
@@ -3792,6 +4491,57 @@ declare class StatTile {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["[valueContent]"], true, never>;
 }
 
+/**
+ * Marca pequeña de estado para leyendas y listas de hitos: círculo relleno
+ * con check (completado), anillo con punto (en curso) o anillo vacío
+ * (pendiente). La forma comunica el estado y el color solo lo refuerza.
+ * `exception` la pinta con borde discontinuo y tono de aviso.
+ *
+ * Es decorativa por defecto (`aria-hidden`): el texto del estado va en el
+ * contexto que la usa. Para usarla suelta (ej. una leyenda sin texto al lado),
+ * `label` la expone como imagen con ese nombre.
+ *
+ *   <kf-status-mark status="done" small />
+ *   <kf-status-mark status="current" label="En curso" />
+ *
+ * Tamaño: variables CSS `--kf-status-mark-size` y `--kf-status-mark-size-sm`.
+ */
+declare class StatusMark {
+    readonly status: _angular_core.InputSignal<ProgressStatus>;
+    /** Versión reducida, para listas de hitos. */
+    readonly small: _angular_core.InputSignal<boolean>;
+    /** Hito de excepción: borde discontinuo y tono de aviso. */
+    readonly exception: _angular_core.InputSignal<boolean>;
+    /** Nombre accesible; sin él la marca es decorativa. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusMark, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusMark, "kf-status-mark", never, { "status": { "alias": "status"; "required": true; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "exception": { "alias": "exception"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Nodo circular de una etapa: ícono de la etapa más una insignia de estado.
+ * La forma comunica el estado (relleno con check, anillo con punto, anillo
+ * vacío) y el color solo lo refuerza.
+ *
+ * Es decorativo por defecto (`aria-hidden`): el texto del estado debe estar en
+ * el contexto que lo usa. Para usarlo suelto, `label` lo expone como imagen
+ * con ese nombre.
+ *
+ *   <kf-status-node status="current" icon="truck" />
+ *   <kf-status-node status="done" icon="check" size="sm" label="Entrega completada" />
+ *
+ * Tamaño: variables CSS `--kf-status-node-size` y `--kf-status-node-size-sm`.
+ */
+declare class StatusNode {
+    readonly status: _angular_core.InputSignal<ProgressStatus>;
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** Nombre accesible; sin él el nodo es decorativo. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusNode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusNode, "kf-status-node", never, { "status": { "alias": "status"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
  * de estado únicos y prominentes (ej. "ESTADO TÉCNICO"). El fondo es siempre
@@ -3801,7 +4551,7 @@ declare class StatTile {
  *   <kf-status-pill tone="error" dot>Fuera de servicio</kf-status-pill>
  */
 declare class StatusPill {
-    readonly tone: _angular_core.InputSignal<"error" | "ok" | "warn" | "blue">;
+    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "blue">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusPill, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusPill, "kf-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -4065,7 +4815,12 @@ interface ToastAction {
 interface ToastOptions {
     /** Color tone. Defaults to `'info'`. */
     tone?: ToastTone;
-    /** Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. Defaults to `2800`. */
+    /**
+     * Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. When
+     * omitted it depends on the tone (see {@link TOAST_DEFAULT_DURATION_MS}):
+     * `2800` for `success`/`info`, `5000` for `warning`, `8000` for `error`. An
+     * explicit value always wins over the per-tone default.
+     */
     duration?: number;
     /** Botón de acción opcional, ej. ir al registro sobre el que avisa el toast. */
     action?: ToastAction;
@@ -4085,6 +4840,13 @@ interface ToastState {
     leaving: boolean;
     action?: ToastAction;
 }
+/**
+ * Auto-dismiss time per tone when the caller doesn't pass `duration`. Errors and
+ * warnings stay longer than confirmations: they carry something to read and
+ * act on, while a success only has to be noticed. `success`/`info` keep the
+ * historical 2800ms. `loading` never auto-dismisses.
+ */
+declare const TOAST_DEFAULT_DURATION_MS: Readonly<Record<Exclude<ToastTone, 'loading'>, number>>;
 /** What's currently holding the auto-dismiss timer paused. Tracked as a set so hover and
  * focus can overlap (e.g. mouse leaves while focus is still on the action button) without
  * resuming the timer early. */
@@ -4093,6 +4855,11 @@ type ToastPauseSource = 'hover' | 'focus';
  * Shows one toast at a time — a new `show()` call replaces whatever is
  * currently up (this mirrors a global status line, not a notification stack).
  *
+ * Duration by tone (when `duration` isn't passed): `success`/`info` 2800ms,
+ * `warning` 5000ms, `error` 8000ms (`TOAST_DEFAULT_DURATION_MS`); an explicit
+ * `duration` always wins. The countdown pauses while the pointer or focus is
+ * on the toast. Error toasts also get a larger, always-opaque close button.
+ *
  * Angular has no global function that can mount UI on its own, so the
  * imperative `showToast(...)` of the reference design system becomes a
  * root-provided service holding signal state: `ToastService.show(...)` sets
@@ -4271,5 +5038,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "tableLabel": { "alias": "tableLabel"; "required": false; "isSignal": true; }; "cardsLabel": { "alias": "cardsLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, Modal, MultiSelect, NoteBlock, OptionList, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, resolveListToolbarMode };
-export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, ListToolbarMode, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
+export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };