@kaufmann-lab/ui 0.1.21 → 0.1.24

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,13 +255,13 @@ 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';
+type AlertRowTone = 'warn' | 'error' | 'neutral';
 /**
  * Fila clickeable de una lista de pendientes/alertas: ícono circular con
  * tono semántico, texto de una línea, chevron al final. Pensada para
@@ -255,14 +269,43 @@ type AlertRowTone = 'warn' | 'error';
  * dashboard) — no incluye el contenedor en sí.
  *
  *   <kf-alert-row icon="file" tone="warn" text="2 cotizaciones esperan tu aprobación" (rowClick)="onNavigate('cotizaciones')" />
+ *
+ * Extensiones opcionales (la fila sin ellas se ve y se comporta como siempre):
+ * - `tone="neutral"`: ícono gris, para una fila sin urgencia ni alerta.
+ * - `value`: cifra alineada a la derecha, antes del chevron (ej. el conteo de
+ *   pendientes). Admite `'—'` cuando no hay dato; en ese caso conviene pasar
+ *   `valueLabel` con el texto que debe leer un lector de pantalla
+ *   («Sin datos»), porque la raya sola no dice nada.
+ * - `valueLabel`: texto solo para lectores de pantalla que reemplaza a `value`
+ *   en el árbol de accesibilidad; visualmente se sigue viendo `value`.
+ * - `tag`: etiqueta neutra pequeña junto al texto (ej. «Próximamente»).
+ * - `disabled`: la fila no es accionable — no emite `rowClick`, no entra en el
+ *   orden de tabulación, no cambia al pasar el mouse, su chevron se oculta (conserva el
+ *   espacio para alinear las cifras con las filas activas) y el
+ *   texto y la cifra se atenúan (sin bajar el contraste de lectura). Expone
+ *   `disabled` y `aria-disabled="true"`, así que un lector de pantalla la
+ *   anuncia como no disponible en vez de omitirla.
+ *
+ *   <kf-alert-row icon="file" tone="neutral" text="Documentos por firmar" tag="Próximamente" value="—" valueLabel="Sin datos todavía" disabled />
  */
 declare class AlertRow {
     readonly icon: _angular_core.InputSignal<IconName>;
     readonly tone: _angular_core.InputSignal<AlertRowTone>;
     readonly text: _angular_core.InputSignal<string>;
+    /** Cifra o texto corto alineado a la derecha (ej. `3`, `'—'`). */
+    readonly value: _angular_core.InputSignal<string | number | undefined>;
+    /** Texto solo para lectores de pantalla que reemplaza a `value` en el árbol de accesibilidad. */
+    readonly valueLabel: _angular_core.InputSignal<string | undefined>;
+    /** Etiqueta neutra junto al texto (ej. «Próximamente»). */
+    readonly tag: _angular_core.InputSignal<string | undefined>;
+    /** La fila no es accionable: sin clic, sin foco ni hover. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly rowClick: _angular_core.OutputEmitterRef<void>;
+    /** Emite `rowClick` salvo que la fila esté deshabilitada (también ante clics sintéticos). */
+    protected activate(): void;
+    protected hasValue(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
 }
 
 /**
@@ -313,7 +356,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 +589,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 +730,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 +824,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 +902,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 +968,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>
@@ -1025,7 +1014,8 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  * el selector, y `pageSizeChange` avisa cuando el usuario lo cambia.
  *
  * Ordenamiento por columna: cada `DataTableColumn` con `sortable: true`
- * vuelve su header clickeable, con el mismo formato `key:direction` que
+ * vuelve su header un botón (Tab, Enter y Espacio) que expone el estado con
+ * `aria-sort` (`ascending`/`descending`/`none`), con el mismo formato `key:direction` que
  * usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
  * consumidor decide si persiste el valor o lo descarta al desmontar):
  *
@@ -1086,6 +1076,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 +1107,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,20 +1150,45 @@ 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>;
     /** Fuerza si la fila entera dispara `rowClick` en la vista de tabla —
      * ver `rowInteractive` para el cálculo automático cuando no se define. */
     readonly rowClickable: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Con `false`, las filas interactivas de la vista de tabla dejan de ser
+     * paradas de Tab (sin `tabindex`): útil cuando la fila es clickeable con el
+     * mouse pero la acción accesible por teclado es un enlace o botón real
+     * dentro de una celda — así una página de N filas no suma N paradas de Tab
+     * sin rol. El clic con mouse sigue emitiendo `rowClick`. Default `true`
+     * (comportamiento histórico). No afecta a las tarjetas, que son
+     * `role="button"`.
+     */
+    readonly rowFocusable: _angular_core.InputSignal<boolean>;
     readonly rowClick: _angular_core.OutputEmitterRef<{
         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 +1234,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,13 +1262,15 @@ 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. */
     protected readonly displayedRows: _angular_core.Signal<T[]>;
     protected sortDirectionFor(column: DataTableColumn): 'asc' | 'desc' | null;
+    /** Valor de `aria-sort` del header de una columna ordenable. */
+    protected ariaSortFor(column: DataTableColumn): 'ascending' | 'descending' | 'none';
     /** Ciclo asc → desc → sin orden, disparado al clickear un header `sortable`. */
     protected toggleSort(column: DataTableColumn): void;
     protected goToPage(target: number): void;
@@ -1278,6 +1335,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
@@ -1287,6 +1346,13 @@ declare class DataTable<T = unknown> {
      * consumidor lo necesita.
      */
     readonly rowInteractive: _angular_core.Signal<boolean>;
+    /**
+     * La fila de la vista de tabla es parada de Tab solo si es interactiva,
+     * `rowFocusable` lo permite y NO hay columnas `interactive`: con botones
+     * propios por celda, la fila además de ellos duplicaría las paradas de Tab
+     * (el clic de la fila sigue emitiendo `rowClick` con el mouse).
+     */
+    protected readonly rowTabStop: _angular_core.Signal<boolean>;
     setView(next: DataTableView): void;
     trackRow(row: T, index: number): string | number;
     /** Alineada al final: `align: 'end'` o el histórico `right: true`. */
@@ -1310,6 +1376,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 +1391,234 @@ 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; }; "rowFocusable": { "alias": "rowFocusable"; "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.
+ *
+ * Anuncios para lectores de pantalla: al cargar con silueta, `loadingLabel`
+ * se anuncia en una región `status` (con `load="spinner"` ya lo anuncia el
+ * propio `kf-spinner`); un error entra como `role="alert"` (interrumpe) y el
+ * estado vacío como `role="status"` (cortés). `icon` dibuja el glifo de
+ * `kf-empty-state` en esos dos estados.
+ *
+ *   <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>;
+    /** Glifo de `empty`/`error` (el mismo input de `kf-empty-state`). Sin valor, no se dibuja ícono. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** Texto de carga: visible 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; }; "icon": { "alias": "icon"; "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>;
+}
+
+/**
+ * Paginador «Anterior / Siguiente» para listas con cursor: no conoce el
+ * número de página, solo si hay una anterior o una siguiente y un resumen ya
+ * armado. Complementa a `kf-pagination`, que exige número de página y total.
+ *
+ * `summary` ("Mostrando 25 de 96") se anuncia en una región `status`. Los
+ * botones usan `aria-disabled` y no `disabled`, para que el foco no se pierda
+ * al llegar a un extremo (un botón `disabled` deja de ser enfocable y el foco
+ * cae al `body`); pulsarlos en ese estado no emite nada.
+ *
+ * Con `pageSizeOptions` agrega el selector "Filas por página"; vacío lo oculta.
+ *
+ *   <kf-cursor-pager summary="Mostrando 25 de 96" [hasPrevious]="!!prev()" [hasNext]="!!next()"
+ *     [pageSizeOptions]="[25, 50, 100]" [pageSize]="size()"
+ *     (previous)="load(prev())" (next)="load(next())" (pageSizeChange)="size.set($event)" />
+ */
+declare class CursorPager {
+    /** Texto anunciado y mostrado a la izquierda, p. ej. «Mostrando 25 de 96». */
+    readonly summary: _angular_core.InputSignal<string>;
+    readonly hasPrevious: _angular_core.InputSignal<boolean>;
+    readonly hasNext: _angular_core.InputSignal<boolean>;
+    /** Opciones del selector de filas por página. Vacío oculta el selector. */
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    readonly pageSize: _angular_core.InputSignal<number | undefined>;
+    /** Nombre accesible de la navegación. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly previous: _angular_core.OutputEmitterRef<void>;
+    readonly next: _angular_core.OutputEmitterRef<void>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    protected readonly sizeOptions: _angular_core.Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    protected readonly sizeValue: _angular_core.Signal<string>;
+    protected onPrevious(): void;
+    protected onNext(): void;
+    protected onPageSize(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CursorPager, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CursorPager, "kf-cursor-pager", never, { "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "hasPrevious": { "alias": "hasPrevious"; "required": false; "isSignal": true; }; "hasNext": { "alias": "hasNext"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "previous": "previous"; "next": "next"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1367,6 +1664,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 +1687,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 +1754,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 +1764,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 +1815,8 @@ declare class Drawer {
     private readonly panelRef;
     private readonly focusTrapFactory;
     private readonly document;
+    private readonly overlayContainer;
+    private registeredPanel;
     private focusTrap;
     private lastFocusedElement;
     constructor();
@@ -1517,6 +1840,19 @@ declare class Drawer {
  * de anclaje visual del panel.
  *
  *   <kf-dropdown [(open)]="menuOpen"><kf-dropdown-panel>...</kf-dropdown-panel></kf-dropdown>
+ *
+ * Accesibilidad. Disparador: el primer control enfocable del `anchor` (o del
+ * propio host) recibe `aria-haspopup` (`menu` o `dialog`, según el `role` del
+ * panel), `aria-expanded` y, con el panel abierto, `aria-controls`; un atributo
+ * que el consumidor ya declaró nunca se pisa. Foco: el panel vive en un overlay
+ * al final del `body`, así que al abrir el foco pasa al primer elemento
+ * enfocable del panel (`autoFocus`, default `true`; solo si el foco estaba en
+ * el disparador, para no robarlo cuando algo abre el panel por código), y al
+ * cerrar vuelve al disparador si estaba dentro del panel (Escape, elegir una
+ * acción, aplicar). Un clic afuera no devuelve el foco: ya se fue a donde se
+ * hizo clic. Con `role="menu"` las flechas, Home y End recorren los ítems. Tab
+ * desde el último (o Shift+Tab desde el primero) cierra el panel y continúa la
+ * tabulación desde el disparador.
  */
 declare class Dropdown {
     /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
@@ -1529,11 +1865,20 @@ declare class Dropdown {
      * (ej. el avatar de sesión dentro de `PortalHeader`).
      */
     readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * Mueve el foco al primer elemento enfocable del panel al abrirlo. Poner
+     * `false` si el contenido ya gestiona su propio foco inicial.
+     */
+    readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly panel;
     private readonly overlayService;
     private readonly host;
     private readonly viewContainerRef;
     private readonly destroyRef;
+    private readonly injector;
+    private readonly document;
+    /** Atributos ARIA que este componente puso en el disparador (y por tanto retira él). */
+    private readonly ownedTriggerAttributes;
     private overlayRef;
     /**
      * Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
@@ -1549,10 +1894,28 @@ 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;
+    /** Flechas/Home/End entre ítems (solo `role="menu"`) y salida con Tab en los extremos. */
+    private onPanelKeydown;
+    private focusFirstInPanel;
+    private focusableIn;
+    private isFocusOnTrigger;
+    /**
+     * Control que abre el panel: el propio `anchor`/host si ya es enfocable, o
+     * su primer descendiente enfocable (ej. el `<button>` dentro de `kf-button`).
+     */
+    private triggerElement;
+    private syncTriggerAria;
+    /** Escribe el atributo solo si no es del consumidor (ausente, o ya puesto por este componente). */
+    private setOwnedAttribute;
+    private removeOwnedAttribute;
+    private releaseTriggerAria;
     /**
      * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
      * ver comentario de la clase) vive FUERA del overlay a propósito: el
@@ -1566,7 +1929,7 @@ declare class Dropdown {
     private detach;
     private getOrCreateOverlayRef;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
 }
 
 type DropdownItemTone = 'neutral' | 'error';
@@ -1594,6 +1957,8 @@ declare class DropdownItem {
 }
 
 type DropdownPanelVariant = 'solid' | 'dark';
+/** Rol del contenedor del panel: `menu` (ítems de acción) o `dialog` (contenido de formulario o informativo). */
+type DropdownPanelRole = 'menu' | 'dialog';
 /**
  * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
  * (`<ng-template>`, capturada vía `TemplateRef`) — `Dropdown` la conecta al
@@ -1609,12 +1974,24 @@ type DropdownPanelVariant = 'solid' | 'dark';
  * reposiciona el panel según dónde entra en el viewport y puede terminar
  * cayendo sobre fondo blanco en vez de sobre el rail oscuro — un color
  * sólido se ve intencional sin importar dónde lo posicione el CDK.
+ *
+ * `role`: `'menu'` (default) cuando el contenido son `kf-dropdown-item`;
+ * `'dialog'` cuando lleva campos de formulario, selects, casillas o texto
+ * libre — un `role="menu"` solo admite ítems de menú como hijos. Un panel
+ * `dialog` necesita nombre: pasar `ariaLabel`.
+ *
+ *   <kf-dropdown-panel role="dialog" ariaLabel="Filtros">…</kf-dropdown-panel>
  */
 declare class DropdownPanel {
     readonly variant: _angular_core.InputSignal<DropdownPanelVariant>;
+    readonly role: _angular_core.InputSignal<DropdownPanelRole>;
+    /** Nombre accesible del panel (obligatorio en la práctica con `role="dialog"`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** `id` del contenedor con el rol; el disparador lo referencia con `aria-controls`. */
+    readonly panelId: string;
     readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Tono del estado. `warn`/`info` solo cambian el chip del ícono. */
@@ -1671,7 +2048,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>;
@@ -1781,14 +2158,141 @@ declare class Field {
  *
  *   <kf-field-label [for]="inputId">Patente o VIN</kf-field-label>
  *   <kf-field-label [for]="inputId" required>Correo electrónico</kf-field-label>
+ *
+ * `visuallyHidden` deja el texto solo para lectores de pantalla: el `<label
+ * for>` sigue nombrando el control sin ocupar espacio.
  */
 declare class FieldLabel {
     /** `id` del control asociado — se refleja como `for` en el `<label>` interno. */
     readonly for: _angular_core.InputSignal<string | undefined>;
     /** Muestra un asterisco visual indicando que el campo es obligatorio. */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Oculta el texto a la vista pero lo conserva como nombre accesible del control. */
+    readonly visuallyHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
-    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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "visuallyHidden": { "alias": "visuallyHidden"; "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 {
@@ -1884,7 +2388,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 +2545,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,11 +2610,27 @@ 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;
     private readonly nativeInput;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Oculta el `label` a la vista y lo deja como nombre accesible (`<label for>`), sin ocultarlo con CSS desde afuera. */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca el label con un asterisco visual y aplica `required` al `<input>`
      * nativo — el atributo HTML ya expone el estado obligatorio a lectores de
      * pantalla (mapeo implícito a `aria-required`), sin necesidad de un
@@ -2136,6 +2664,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,9 +2731,13 @@ 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; }; "hideLabel": { "alias": "hideLabel"; "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 ResolvedJourneyStep = JourneyStep & {
+    status: JourneyStepStatus;
+    progressValue: number | null;
+};
 type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
 type JourneyStepperSurface = 'dark' | 'card';
 /**
@@ -2211,32 +2751,71 @@ type JourneyStepperSurface = 'dark' | 'card';
  *   Para cuando cada paso comunica su propio estado puntual.
  */
 type JourneyStepperColorScheme = 'brand' | 'semantic';
+/** `'auto'` elige horizontal o vertical según el ancho del propio componente. */
+type JourneyStepperOrientation = 'horizontal' | 'vertical' | 'auto';
 interface JourneyStep {
     key: string;
     label: string;
     icon: IconName;
-    /** Solo con `orientation="vertical"` — en horizontal el status se calcula desde `currentStep`. */
+    /**
+     * Estado explícito del paso. Si AL MENOS un paso lo define, todos los
+     * estados salen de acá (un paso sin `status` queda `pending`), también en
+     * horizontal y permitiendo varios pasos `current` o estados no
+     * consecutivos. Si ningún paso lo define, horizontal lo deriva de
+     * `currentStep`. Con `orientation="vertical"` siempre se usa el explícito.
+     */
     status?: JourneyStepStatus;
-    /** Texto bajo el label — solo con `orientation="vertical"`. */
+    /** Texto bajo el label, junto al label en horizontal sin `caption` (compatibilidad). */
     date?: string;
+    /**
+     * Texto secundario del paso, distinto de `date` (ej. «16 de 18 completaron»).
+     * Se muestra bajo el label en ambas orientaciones.
+     */
+    caption?: string;
+    /**
+     * Avance 0-100 del paso, como barra fina bajo el texto. Se acota a [0, 100];
+     * un valor no finito no dibuja la barra. Si el paso tiene `caption`, la
+     * barra es decorativa (`aria-hidden`) y el `caption` debe comunicar el avance;
+     * sin `caption` expone `role="progressbar"` con el `label` como nombre.
+     */
+    progress?: number;
+    /**
+     * Texto visible del estado (ej. «Completado», «En curso», «Pendiente»), para
+     * que el estado no dependa solo del color y la forma del punto.
+     */
+    statusLabel?: string;
 }
 /**
  * Progreso de un flujo de N pasos.
  *
- * - `orientation` (`'horizontal'` default | `'vertical'`): horizontal
- *   deriva done/current/pending de `currentStep`; vertical usa
- *   `steps[].status` explícito, con `delayed` como cuarto estado.
+ * - `orientation` (`'horizontal'` default | `'vertical'` | `'auto'`): horizontal
+ *   deriva done/current/pending de `currentStep` (salvo que algún paso defina
+ *   `status`); vertical usa `steps[].status` explícito, con `delayed` como
+ *   cuarto estado. `'auto'` es horizontal cuando el propio componente mide al
+ *   menos `autoBreakpoint` px (820 por defecto) y vertical si no; en vertical,
+ *   con `caption`/`progress`/`statusLabel` y desde 520 px de ancho, el texto de
+ *   cada paso pasa a filas «etiqueta | estado y conteo | barra». En `'auto'`
+ *   los puntos son clickeables solo mientras el layout es horizontal.
  * - `surface` (`'dark'` default | `'card'`): fondo sólido oscuro de marca,
  *   o superficie clara con borde+sombra.
  * - `colorScheme` (`'brand'` default | `'semantic'`): ver `JourneyStepperColorScheme`.
+ * - `ariaLabel`: nombre de la lista de pasos (lectores de pantalla).
+ *
+ * Los pasos se exponen como lista (`role="list"`/`listitem`) y el paso con
+ * `status === 'current'` lleva `aria-current="step"`.
  *
  *   <kf-journey-stepper surface="card" [steps]="steps" [currentStep]="4" (stepClick)="onNavigate($event)" />
  *   <kf-journey-stepper orientation="vertical" [steps]="unitSteps" />
  *   <kf-journey-stepper orientation="vertical" colorScheme="semantic" [steps]="unitStepsWithDelays" />
+ *   <kf-journey-stepper orientation="auto" surface="card" ariaLabel="Avance por etapa" [steps]="stages" />
  */
 declare class JourneyStepper {
     readonly steps: _angular_core.InputSignal<JourneyStep[]>;
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<JourneyStepperOrientation>;
+    /** Ancho mínimo (px) del componente para ser horizontal con `orientation="auto"`. */
+    readonly autoBreakpoint: _angular_core.InputSignal<number>;
+    /** Nombre accesible de la lista de pasos. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly surface: _angular_core.InputSignal<JourneyStepperSurface>;
     readonly colorScheme: _angular_core.InputSignal<JourneyStepperColorScheme>;
     /** Índice del paso actual — solo con `orientation="horizontal"`. */
@@ -2247,15 +2826,26 @@ declare class JourneyStepper {
     private readonly destroyRef;
     /** `true` cuando el contenido desborda el ancho visible — controla el fade de los bordes. */
     protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
+    /** Ancho medido del componente; `null` hasta la primera medición. */
+    private readonly trackWidth;
+    /**
+     * Orientación efectiva: la de `orientation`, o —con `'auto'`— horizontal si el
+     * componente mide al menos `autoBreakpoint` px. Antes de medir (o con ancho
+     * 0) es vertical, que siempre cabe.
+     */
+    protected readonly effectiveOrientation: _angular_core.Signal<"horizontal" | "vertical">;
+    protected readonly vertical: _angular_core.Signal<boolean>;
     protected readonly clickable: _angular_core.Signal<boolean>;
+    /** `true` si algún paso usa `caption`, `progress` o `statusLabel` (layout enriquecido). */
+    protected readonly rich: _angular_core.Signal<boolean>;
     constructor();
     private measureOverflow;
-    protected readonly resolvedSteps: _angular_core.Signal<(JourneyStep & {
-        status: JourneyStepStatus;
-    })[]>;
+    /** Progreso acotado a [0, 100]; `null` si no hay valor finito. */
+    private static progressOf;
+    protected readonly resolvedSteps: _angular_core.Signal<ResolvedJourneyStep[]>;
     protected dotIcon(status: JourneyStepStatus, stepIcon: IconName): IconName;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JourneyStepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "autoBreakpoint": { "alias": "autoBreakpoint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
 }
 
 type LinkVariant = 'default' | 'muted';
@@ -2508,6 +3098,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 +3118,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 +3640,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 +3908,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 +3924,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>;
 }
 
 /**
@@ -3390,10 +4257,27 @@ interface SelectOption {
  * buscador, si está visible). En el panel, flechas y Home/End mueven el
  * foco, Enter/Espacio eligen, Escape cierra y devuelve el foco al trigger,
  * y Tab cierra el panel y continúa la tabulación desde el trigger. Las
- * opciones nunca son paradas de Tab (`tabindex="-1"`).
+ * opciones nunca son paradas de Tab (`tabindex="-1"`). Home/End sobre el
+ * trigger cerrado lo abren en la primera/última opción, y teclear letras
+ * (con el panel abierto o cerrado, sin buscador) salta a la opción cuyo
+ * label empieza con lo tecleado; repetir la misma letra recorre las que
+ * empiezan igual.
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Oculta el `label` a la vista y lo deja como nombre accesible (`<label
+     * for>`): para un control cuyo valor se explica solo (ej. un rango de
+     * fechas), sin tener que ocultar la etiqueta con CSS desde afuera.
+     */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Texto corto visible dentro del trigger, antes del valor (ej. `Rango:
+     * Últimos 30 días`), para un select compacto que no lleva etiqueta
+     * encima. Forma parte del nombre accesible del botón: no combinarlo con
+     * `label`/`ariaLabel`, que reemplazarían ese nombre.
+     */
+    readonly prefix: _angular_core.InputSignal<string | undefined>;
     readonly options: _angular_core.InputSignal<readonly (string | SelectOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -3402,7 +4286,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.
@@ -3465,15 +4349,21 @@ declare class Select {
     private readonly searchInputRef;
     private readonly panelRef;
     private readonly document;
+    private typeaheadBuffer;
+    private typeaheadTimer;
     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;
@@ -3484,7 +4374,11 @@ declare class Select {
      * click afuera no lo restaura: el foco ya se fue a donde se hizo click.
      */
     close(restoreFocus?: boolean): void;
-    /** ArrowDown/ArrowUp con el panel cerrado lo abren (patrón listbox). */
+    /**
+     * Con el panel cerrado: ArrowDown/ArrowUp lo abren en la opción activa,
+     * Home/End en la primera/última, y una letra lo abre en la opción que
+     * empieza con ella (patrón listbox).
+     */
     onTriggerKeydown(event: KeyboardEvent): void;
     /**
      * Teclado con el foco en una opción del panel. Las flechas parten SIEMPRE
@@ -3493,6 +4387,15 @@ declare class Select {
      * foco en la opción 1 y el mouse sobre la 4, ArrowDown saltaría a la 5.
      */
     onOptionKeydown(event: KeyboardEvent, option: SelectOption, index: number): void;
+    /** Un carácter imprimible sin modificadores, y solo cuando no hay buscador (ahí la tecla filtra). */
+    private isTypeaheadKey;
+    /**
+     * Índice de la opción cuyo label empieza con lo tecleado, o -1. Una sola
+     * letra (o la misma repetida) busca desde la opción SIGUIENTE a `from`, para
+     * recorrer las que empiezan igual; un prefijo más largo busca desde `from`
+     * inclusive, para que la opción actual se conserve mientras siga coincidiendo.
+     */
+    private findTypeaheadMatch;
     /** Teclas de salida del buscador: Escape y Tab, igual que desde una opción. */
     onSearchKeydown(event: KeyboardEvent): void;
     /**
@@ -3527,7 +4430,7 @@ declare class Select {
     private scrollActiveIntoView;
     selectActive(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "panelTitle": { "alias": "panelTitle"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "panelTitle": { "alias": "panelTitle"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 interface SelectableCardOption {
@@ -3714,7 +4617,9 @@ 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';
+/** Densidad de la card: `'compact'` reduce el padding, el ícono y el valor. */
+type StatCardDensity = 'default' | 'compact';
 /**
  * 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 +4628,43 @@ 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')" />
+ *
+ * `density` (`'default'` | `'compact'`): `'compact'` es la variante para
+ * pantallas angostas — padding de `--kf-space-md`, ícono de 40px y valor de
+ * `--kf-font-size-title-sm`, con el mismo contenido. Si la card mide 210px de
+ * ancho o menos (ej. una grilla 2x2 en teléfono), pasa además a dos filas:
+ * ícono y valor en la primera, y label, nota, barra y `hint` debajo a todo el
+ * ancho; el chevron se oculta. Solo la variante compacta convierte el host en
+ * contenedor de tamaño (`container-type: inline-size`), así que debe tener un
+ * ancho que no dependa de su contenido (celda de grilla, `width` explícito o
+ * hijo de un contenedor en bloque). `'default'` no cambia nada.
+ *
+ *   <kf-stat-card density="compact" icon="clock" value="7" label="Por vencer" />
+ *
+ * `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 +4672,26 @@ 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>;
+    /** `'compact'`: variante para pantallas angostas; `'default'` no cambia la card. */
+    readonly density: _angular_core.InputSignal<StatCardDensity>;
+    /** 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; }; "density": { "alias": "density"; "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 +4749,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 +4809,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 +5073,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 +5098,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 +5113,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 +5296,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, CursorPager, 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, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, 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, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };