@kaufmann-lab/ui 0.1.20 → 0.1.22

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit } from '@angular/core';
+import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
@@ -31,8 +31,16 @@ import { SafeResourceUrl } from '@angular/platform-browser';
  * `map-pin`, que en este mismo dominio representa ubicación geográfica real
  * de vehículos; reusarlo para "fijar" generaría ambigüedad con los markers
  * de mapa.
+ *
+ * `refresh` (`refresh-cw` de Lucide) e `info` son extensión propia: la
+ * acción "Reintentar" y los avisos informativos (ej. estados de
+ * `kf-empty-state` en tono `info`) no tenían glyph equivalente en el set.
+ *
+ * `layout-grid` (de Lucide, cuatro cuadros) es extensión propia: representa
+ * la vista de tarjetas; `grid` dibuja una cuadrícula de tabla y no se
+ * distingue de la vista de tabla.
  */
-type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'crosshair' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'home' | 'inbox' | 'layers' | 'list' | 'log-out' | 'mail' | 'map' | 'map-pin' | 'maximize' | 'menu' | 'message-circle' | 'mic' | 'mic-off' | 'minimize' | 'minus' | 'monitor' | 'more-vertical' | 'navigation' | 'pause' | 'phone' | 'pin' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x' | 'zap';
+type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'crosshair' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'home' | 'inbox' | 'info' | 'layers' | 'layout-grid' | 'list' | 'log-out' | 'mail' | 'map' | 'map-pin' | 'maximize' | 'menu' | 'message-circle' | 'mic' | 'mic-off' | 'minimize' | 'minus' | 'monitor' | 'more-vertical' | 'navigation' | 'pause' | 'phone' | 'pin' | 'play' | 'plus' | 'refresh' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x' | 'zap';
 
 type IconSize = 'sm' | 'md' | 'lg';
 /** Ángulos de rotación soportados por `rotate` — cubre los casos reales del
@@ -128,7 +136,7 @@ declare class AdminBadge {
  * Envuelve un `<button>` nativo: mantiene teclado, foco y submit de formulario.
  * Como es un elemento personalizado, ningún atributo ARIA puesto en el host
  * llega al `<button>` interno — por eso `disabled`, `type`, `ariaLabel`,
- * `ariaExpanded` y `ariaPressed` se reenvían a mano.
+ * `ariaExpanded`, `ariaPressed` y `ariaHaspopup` se reenvían a mano.
  *
  * Seis variantes: `primary`, `secondary`, `ghost`, `outline`, `danger`,
  * `surface`. Tres tamaños (`sm`/`md`/`lg`). `icon` agrega un glifo antes del
@@ -147,6 +155,15 @@ declare class AdminBadge {
  *
  * `(click)` no se reenvía: burbujea del botón interno al host solo.
  *
+ * Objetivo táctil: el alto y el ancho mínimos del `<button>` interno salen
+ * de `--kf-button-min-height` y `--kf-button-min-width` (default `auto`,
+ * sin cambio). Un contenedor los sube (ej. a 44px en pantallas táctiles,
+ * sobre todo para un botón solo-ícono) declarando las variables en su
+ * propio CSS — heredan a través del límite de encapsulación.
+ *
+ * `focus()` enfoca el `<button>` interno: el consumidor no necesita
+ * buscarlo con `querySelector` en el DOM del componente.
+ *
  * `loading` reemplaza el contenido proyectado por `kf-spinner` y fuerza
  * `disabled`.
  *
@@ -186,15 +203,23 @@ declare class Button {
      * más fuerte para leerse activo, y así ningún consumidor tiene que
      * acordarse de pedirlo aparte. */
     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<"menu" | "dialog" | "listbox" | "true" | undefined>;
+    private readonly nativeButton;
+    /** Enfoca el `<button>` interno (mismas opciones que `HTMLElement.focus`). */
+    focus(options?: FocusOptions): void;
     /** `ghost`/`outline`/`surface` no tienen fondo oscuro sólido — el anillo
      * del spinner por defecto ya se lee bien ahí sin variante propia
      * (`surface` es fondo claro con texto oscuro, mismo motivo que `outline`). */
     protected readonly hasSolidFill: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 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
@@ -206,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>;
@@ -221,7 +258,7 @@ declare class 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';
@@ -279,13 +316,24 @@ declare class Avatar {
  * punto (`dot`) usa el color BASE de cada tono, no `-strong` — ese último
  * está pensado para texto legible sobre el fondo pastel de `soft` y se ve
  * apagado sobre una superficie translúcida/oscura.
+ *
+ * `truncate` corta un texto largo con elipsis (ej. un estado de SAP como
+ * "WF Aprobación Política descuento") en vez de ensanchar la fila que lo
+ * contiene: el badge se limita al ancho de su contenedor (`max-width: 100%`,
+ * `min-width: 0`) y el punto no se recorta. El texto completo lo pone el
+ * consumidor en `title` (el badge no puede leer su propio contenido
+ * proyectado para generarlo):
+ *
+ *   <kf-badge tone="warn" dot truncate [title]="q.statusLabel">{{ q.statusLabel }}</kf-badge>
  */
 declare class Badge {
-    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error" | "info" | "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. */
+    readonly truncate: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "truncate": { "alias": "truncate"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 interface BreadcrumbItem {
@@ -512,14 +560,26 @@ declare class Calendar {
  *       <kf-button>Guardar</kf-button>
  *     </div>
  *   </kf-card>
+ *
+ * `loading` (default `false`): cubre el cuerpo con un bloque de carga animado
+ * sin sacar el contenido del layout (queda invisible y fuera del foco y de
+ * lectores de pantalla), así la card conserva exactamente sus dimensiones. Los
+ * slots `[kf-card-media]` y `[kf-card-actions]` también se ocultan. Marca el
+ * host con `aria-busy="true"`. Para una forma más fiel (líneas separadas) usa
+ * `kf-skeleton` dentro de la card, o la card propia del dominio con su
+ * `loading` (`kf-stat-card`, `kf-metric-card`).
+ *
+ *   <kf-card [loading]="isLoading()"><h3>{{ title() }}</h3><p>{{ text() }}</p></kf-card>
  */
 declare class Card {
     /** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
     readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Espacio entre los hijos directos del cuerpo. `md` es el default. */
     readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
+    /** Cubre el cuerpo con un bloque de carga conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
 }
 
 /**
@@ -735,99 +795,6 @@ declare class ContentSlot {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSlot, "kf-content-slot", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** En qué estado está la sección. */
-type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
-/** Cómo se dibuja `loading`. Default `'skeleton'`. */
-type ContentStateLoad = 'skeleton' | 'spinner';
-/**
- * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
- * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
- * siempre el mismo slot el que va rotando entre los cuatro.
- *
- * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
- * tres dibuja el placeholder correspondiente y el contenido no se instancia.
- * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
- * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
- *
- * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
- * mientras carga, porque no hay nada que reintentar todavía.
- *
- *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
- *                     subtitle="Revisá tu conexión e intentá de nuevo.">
- *     <kf-button actions (click)="retry()">Reintentar</kf-button>
- *     <kf-data-table [columns]="cols" [rows]="rows()" />
- *   </kf-content-state>
- */
-declare class ContentState {
-    readonly state: _angular_core.InputSignal<ContentStateKind>;
-    /** Forma del estado de carga: silueta (default) o spinner. */
-    readonly load: _angular_core.InputSignal<ContentStateLoad>;
-    /** Título de `empty`/`error`. Ignorado mientras carga. */
-    readonly title: _angular_core.InputSignal<string>;
-    readonly subtitle: _angular_core.InputSignal<string>;
-    /** Texto al lado del spinner cuando `load="spinner"`. */
-    readonly loadingLabel: _angular_core.InputSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]"], true, never>;
-}
-
-type ContentViewerType = 'image' | 'video' | 'pdf';
-/**
- * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
- * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
- * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
- * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
- * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
- *
- * `src` acepta lo que venga del backend sin que el consumidor tenga que
- * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
- * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
- * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
- * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
- *
- * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
- * la barra superior, junto al título.
- *
- *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
- *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
- *   </kf-content-viewer>
- */
-declare class ContentViewer {
-    readonly type: _angular_core.InputSignal<ContentViewerType>;
-    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
-    readonly src: _angular_core.InputSignal<string | null>;
-    /** Texto alternativo cuando `type="image"`. */
-    readonly alt: _angular_core.InputSignal<string>;
-    readonly title: _angular_core.InputSignal<string>;
-    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
-    readonly open: _angular_core.ModelSignal<boolean>;
-    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
-    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly titleId: string;
-    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
-     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
-     * — el backend a veces manda una cosa, a veces la otra. */
-    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
-    protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
-    protected readonly fallbackLabel: _angular_core.Signal<string>;
-    private readonly dialog;
-    private readonly document;
-    private readonly sanitizer;
-    constructor();
-    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
-    protected onCancel(event: Event): void;
-    /**
-     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
-     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
-     * comparar contra él — no hace falta cortar la propagación en el panel.
-     */
-    protected onHostClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
-}
-
 /**
  * Zona que ocupa la columna en la vista de cards. La vista de tabla ignora
  * esto (salvo `media`, que igual se rinde como thumbnail en vez de imprimir
@@ -836,10 +803,14 @@ declare class ContentViewer {
  *   usa como `src` salvo que la columna traiga su `cellTemplates`.
  * - `title`: título del encabezado (ej. la patente/unidad).
  * - `status`: chip/estado al lado del título.
- * - `field` (default): par label/valor en el cuerpo.
+ * - `field` (default): par label/valor en el cuerpo. Con `cardClamp`, el
+ *   valor ocupa el ancho completo (sin label visible) recortado a N líneas.
+ * - `meta`: dato secundario corto (fecha, monto) en una fila inferior de la
+ *   tarjeta, rótulo chico arriba y valor abajo; con `emphasis` se destaca
+ *   (ej. el precio) y se alinea al final.
  * - `action`: va al pie, separado del cuerpo por una línea.
  */
-type DataTableCardRole = 'media' | 'title' | 'status' | 'field' | 'action';
+type DataTableCardRole = 'media' | 'title' | 'status' | 'field' | 'meta' | 'action';
 interface DataTableColumn {
     key: string;
     label: string;
@@ -862,7 +833,65 @@ interface DataTableColumn {
      * corto) se comprima más de la cuenta cuando hay poco espacio y otras
      * columnas compiten por él. */
     minWidth?: string;
+    /** Ancho fijo de la columna (ej. `'56px'` para una columna de acciones
+     * solo ícono, `'9rem'` para una fecha). En la tabla va como `width` de la
+     * celda; en `kf-quote-picker` (`modalLayout="list"`), como el ancho de su
+     * pista en la grilla. */
+    width?: string;
+    /** Techo de ancho. En la tabla, junto con `truncate`, reemplaza al
+     * techo automático (ver `truncate`). En una tabla con `grow` admite
+     * unidades de contenedor relativas al ancho de la tabla, ej.
+     * `'min(14rem, 22cqw)'`: el techo baja solo cuando la tabla es angosta. */
+    maxWidth?: string;
+    /** Peso con el que la columna se reparte TODO el espacio sobrante de la
+     * tabla (ej. `1`; con dos columnas `grow: 2` y `grow: 1`, la primera
+     * recibe el doble). Con al menos una columna `grow` la tabla pasa a
+     * reparto de anchos: las columnas con `width` mantienen ese ancho, las que
+     * no traen `width` ni `grow` se ajustan a su contenido (con `maxWidth` como
+     * techo) y las `grow` absorben el resto. Se combina con `truncate` para
+     * que el texto largo ocupe el espacio sin empujar a las demás. Sin ninguna
+     * columna `grow`, el reparto es el de siempre. */
+    grow?: number;
+    /** Texto largo en UNA línea con elipsis y el valor completo en `title`
+     * (ej. el modelo de un vehículo). La columna deja de imponer su ancho
+     * mínimo: cede espacio para que las demás (y la de acciones) entren en
+     * pantalla sin scroll horizontal. Con `maxWidth`, se corta en ese ancho. */
+    truncate?: boolean;
+    /** Alineación horizontal. `'end'` equivale a `right: true` (que se
+     * mantiene por compatibilidad). */
+    align?: 'start' | 'center' | 'end';
+    /** Oculta el rótulo del encabezado a la vista (queda para lectores de
+     * pantalla) — ej. una columna de acciones solo ícono. */
+    hideLabel?: boolean;
+    /** Valor en tipografía monoespaciada (ej. un identificador "COT-2026-0042"),
+     * en la celda de la tabla y como título de la tarjeta. */
+    mono?: boolean;
+    /** Vista tarjetas, columna `field`: el valor va a ancho completo (rótulo
+     * solo para lectores de pantalla), recortado a este número de líneas con
+     * el texto completo en `title` — ej. el modelo del vehículo con `2`. */
+    cardClamp?: number;
+    /** 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
@@ -910,12 +939,21 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  *   <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
  *
  * Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
- * placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
- * `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
+ * placeholder (`kf-skeleton` por celda/card) — `skeletonRows` filas si se
+ * pasa; si no, las de `pageSize`, o 5 si no hay paginación activa. Nunca más
+ * de 12 (`DATA_TABLE_MAX_SKELETON_ROWS`): con una página de 50 no se pintan
+ * 50 placeholders. Ignora `rows()`/el slot
  * `[empty]` mientras dura (no sabemos aún si el resultado real estará
  * vacío), y respeta la vista activa (tabla o cards) para no cambiar el
  * layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
- * el header de columnas siguen visibles — solo el cuerpo se reemplaza:
+ * el header de columnas siguen visibles — solo el cuerpo se reemplaza.
+ *
+ * El placeholder respeta la columna: en la tabla cada celda conserva su
+ * `align`, `width`, `minWidth` y `maxWidth` (una columna numérica lleva una
+ * barra corta alineada al final, una de acciones un cuadrado chico, el resto
+ * barras de anchos distintos) y la fila reserva el alto de una línea de texto.
+ * En tarjetas reproduce la estructura según `cardRole`: encabezado (miniatura,
+ * título y estado), campos con su rótulo, fila de `meta` y pie de acciones:
  *
  *   <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
  *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
@@ -940,6 +978,12 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
  *
+ * La página es `[(page)]` (el consumidor puede llevarla a la URL) y se
+ * corrige sola si queda fuera de rango. Por defecto un cambio de `rows` la
+ * devuelve a 1; con `keepPageOnRowsChange` la conserva (el consumidor decide
+ * cuándo volver a 1). Un `pageSize` nuevo del consumidor pisa el elegido en
+ * 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
  * usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
@@ -953,6 +997,79 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  *
  * Densidad: `density="compact"` reduce el padding vertical de cada fila,
  * para priorizar cantidad de filas visibles sobre aire entre ellas.
+ *
+ * Listados largos con textos largos (ej. cotizaciones con el modelo del
+ * vehículo): la columna de texto largo lleva `truncate` (elipsis + `title`),
+ * las de dato corto `width`/`align: 'end'`, y la de acciones solo ícono
+ * `width` angosto + `hideLabel` + `sticky: 'right'`. Así la acción queda
+ * siempre a la vista sin scroll horizontal:
+ *
+ *   columns = [
+ *     { key: 'id', label: 'Cotización', width: '9rem' },
+ *     { key: 'model', label: 'Vehículo', truncate: true, minWidth: '10rem' },
+ *     { key: 'amount', label: 'Monto', align: 'end', width: '8rem' },
+ *     { key: 'open', label: 'Abrir', hideLabel: true, width: '56px', sticky: 'right' },
+ *   ];
+ *   <kf-data-table [columns]="columns" [rows]="quotes" [rowClickable]="true"
+ *                  (rowClick)="open($event.row)" [cellTemplates]="{ open: openCell }" />
+ *
+ * Reparto de anchos: con `grow` en alguna columna, esa(s) se reparten TODO el
+ * espacio sobrante según su peso, las de `width` lo mantienen y las que no
+ * traen `width` ni `grow` se ajustan a su contenido (con `maxWidth` como
+ * techo). Así una columna de dato corto (estado, precio, fecha) no acapara
+ * espacio y el texto largo (el vehículo) lo aprovecha:
+ *
+ *   columns = [
+ *     { key: 'id', label: 'Cotización', width: '8.5rem', mono: true },
+ *     { key: 'model', label: 'Vehículo', grow: 1, truncate: true },
+ *     { key: 'issuedAt', label: 'Emisión' },
+ *     { key: 'price', label: 'Precio', align: 'end', emphasis: true },
+ *     { key: 'status', label: 'Estado', truncate: true, maxWidth: '14rem' },
+ *   ];
+ *
+ * Listado completo con vista tarjetas (ej. cotizaciones): la vista es
+ * two-way (`[(view)]`) y el toggle interno se oculta con
+ * `[showViewToggle]="false"` cuando el consumidor lo pone en su barra. En
+ * tarjetas: título (`mono`) y estado en una fila, el campo principal a
+ * ancho completo en 2 líneas (`cardClamp: 2`), y fecha/monto en una fila
+ * inferior (`cardRole: 'meta'`, el monto con `emphasis`). Las tarjetas de
+ * una fila miden lo mismo; `cardMinWidth` fija el ancho mínimo. Con
+ * `rowClickable` la tarjeta entera es un botón (Enter/Espacio):
+ *
+ *   columns = [
+ *     { key: 'id', label: 'Cotización', cardRole: 'title', mono: true },
+ *     { key: 'status', label: 'Estado', cardRole: 'status' },
+ *     { key: 'model', label: 'Vehículo', truncate: true, cardClamp: 2 },
+ *     { key: 'date', label: 'Fecha', cardRole: 'meta', width: '7rem' },
+ *     { key: 'amount', label: 'Monto', cardRole: 'meta', align: 'end', emphasis: true },
+ *   ];
+ *   <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[]>;
@@ -960,6 +1077,10 @@ declare class DataTable<T = unknown> {
     /** Placeholder nativo (`kf-skeleton`) mientras los datos reales cargan —
      * ver el doc-comment de la clase para el detalle. */
     readonly loading: _angular_core.InputSignal<boolean>;
+    /** Filas (o tarjetas) esqueleto mientras `loading` es `true`. Sin valor: el
+     * `pageSize` con paginación activa, o 5. Máximo
+     * {@link DATA_TABLE_MAX_SKELETON_ROWS}. */
+    readonly skeletonRows: _angular_core.InputSignal<number | undefined>;
     private readonly scrollEl;
     private readonly destroyRef;
     /**
@@ -972,6 +1093,13 @@ declare class DataTable<T = unknown> {
      */
     protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
     protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
+    /**
+     * Hay contenido oculto por scroll horizontal. Solo entonces el contenedor
+     * es una región nombrada y enfocable (`tabindex="0"`, `role="region"`):
+     * sin foco, quien navega con teclado no puede desplazarlo (WCAG 2.1.1).
+     * Una tabla que entra completa no suma una parada de Tab vacía.
+     */
+    protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
     constructor();
     private updateScrollState;
     /** Default: índice de la fila dentro de `rows`. */
@@ -979,17 +1107,26 @@ declare class DataTable<T = unknown> {
     /** Sin borde/sombra de card — para tablas anidadas dentro de otra card. */
     readonly flush: _angular_core.InputSignal<boolean>;
     /** Habilita el toggle de vista tabla/cards. */
-    readonly cardable: _angular_core.InputSignal<boolean>;
+    readonly cardable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly defaultView: _angular_core.InputSignal<DataTableView>;
+    /** Muestra el toggle tabla/tarjetas interno (con `cardable`). En `false`,
+     * el consumidor controla la vista con `[(view)]` desde su propio control. */
+    readonly showViewToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ancho mínimo de cada tarjeta en la grilla (default `220px`, histórico).
+     * Nunca supera el ancho disponible: en pantallas angostas, una columna. */
+    readonly cardMinWidth: _angular_core.InputSignal<string>;
     /**
      * Formateo simple de celda como texto: `(row) => string`. Para marcado
      * 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>;
@@ -1000,6 +1137,27 @@ declare class DataTable<T = unknown> {
         row: T;
         index: number;
     }>;
+    /**
+     * Se emite al activar (clic, Enter o Espacio) una celda de una columna
+     * `interactive`. `index` es el de la fila dentro de las filas mostradas
+     * (misma convención que `rowClick`). No emite `rowClick`.
+     */
+    readonly cellClick: _angular_core.OutputEmitterRef<DataTableCellClick<T>>;
+    /**
+     * Nombre accesible (`aria-label`) del botón de cada celda interactiva:
+     * `(row, column, index) => string`. Sin esta función, el botón se nombra
+     * por su contenido. Se usa solo en columnas `interactive`.
+     */
+    readonly cellAriaLabel: _angular_core.InputSignal<((row: T, column: DataTableColumn, index: number) => string) | undefined>;
+    /** Nombre accesible del contenedor con scroll horizontal (solo se aplica cuando hay overflow). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Clave (la misma que devuelve `rowKey`, o el índice sin él) de la fila
+     * "actual" — ej. el registro que se está viendo en un selector. Esa fila
+     * o card lleva `aria-current="true"` y la clase `--current` (fondo
+     * `primary-soft`). `null` (default): ninguna.
+     */
+    readonly currentRowKey: _angular_core.InputSignal<string | number | null>;
     /**
      * Paginación interna opcional — sin `pageSize`, cero cambio de
      * comportamiento (el consumidor sigue paginando afuera si quiere, vía el
@@ -1014,7 +1172,16 @@ declare class DataTable<T = unknown> {
      * portal) — pasar `[]` explícitamente desactiva el selector de tamaño
      * aunque `pageSize` esté activo (paginación sin selector). */
     readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
-    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    /** Página actual (desde 1), bidireccional: `[(page)]="page"`. El consumidor
+     * puede llevarla fuera de la tabla (ej. en la URL) y la tabla la corrige
+     * si queda fuera de rango. `pageChange` emite en cada cambio, también los
+     * automáticos (volver a 1 al cambiar de tamaño de página). */
+    readonly page: _angular_core.ModelSignal<number>;
+    /** Con `true`, un cambio de `rows` NO devuelve la página a 1: el
+     * consumidor decide cuándo (ej. al filtrar) y la tabla solo la corrige si
+     * queda fuera de rango. Default `false`: vuelve a 1, como siempre. */
+    readonly keepPageOnRowsChange: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emite el tamaño elegido en el selector de la paginación interna. */
     readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
     /** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
      * plural — se agrega al final del texto informativo de la paginación
@@ -1022,16 +1189,27 @@ declare class DataTable<T = unknown> {
      * números ("1–5 de 7"): la librería no impone un idioma ni un nombre
      * fijo, cada consumidor decide el suyo. */
     readonly itemLabel: _angular_core.InputSignal<string>;
-    protected readonly page: _angular_core.WritableSignal<number>;
     private readonly internalPageSize;
     /** Tamaño de página efectivo: el que el usuario elija en el selector
      * (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,
@@ -1055,27 +1233,68 @@ declare class DataTable<T = unknown> {
     protected toggleSort(column: DataTableColumn): void;
     protected goToPage(target: number): void;
     protected setPageSize(size: number | null): void;
+    /**
+     * Reparto de anchos activo: hay al menos una columna `grow`. Sin ella, los
+     * anchos son los de siempre (`width`/`minWidth`/`maxWidth` tal cual).
+     */
+    protected readonly weighted: _angular_core.Signal<boolean>;
+    /** Porción (%) del espacio sobrante de cada columna `grow`, según su peso. */
+    private readonly growShares;
+    private growWeight;
+    /**
+     * `width` de la celda. En reparto de anchos: la columna `grow` toma su
+     * porción en porcentaje (las porciones suman 100% y el navegador las escala
+     * al espacio que dejan las demás), la de `width` conserva su ancho y la que
+     * no trae ni `width` ni `grow` pide 1% — con `nowrap` queda en el ancho de
+     * su contenido.
+     */
+    protected widthFor(column: DataTableColumn): string | null;
+    /**
+     * `min-width` de la celda. En reparto de anchos, el `width` de una columna
+     * (también de una `grow`) funciona como piso: ni las porciones en
+     * porcentaje ni el contenido de las demás pueden comprimirla.
+     */
+    protected minWidthFor(column: DataTableColumn): string | null;
+    /**
+     * `max-width` de la celda. En reparto de anchos, una columna que se ajusta
+     * a su contenido y es `truncate` SIN `maxWidth` no debe heredar el techo de
+     * 0 de `truncate` (quedaría sin ancho): se libera con `none`.
+     */
+    protected maxWidthFor(column: DataTableColumn): string | null;
     /** Columnas fijas del lado izquierdo/derecho, con el offset acumulado
      * (medido en runtime, ver `measureStickyOffsets`) para `position: sticky`. */
     protected readonly stickyLeftColumns: _angular_core.Signal<DataTableColumn[]>;
     protected readonly stickyRightColumns: _angular_core.Signal<DataTableColumn[]>;
     protected readonly stickyOffsets: _angular_core.WritableSignal<Map<string, number>>;
     protected stickyStyle(column: DataTableColumn): Record<string, string> | null;
-    private readonly internalView;
-    /** Vista activa: la elegida por el usuario, o `defaultView` si no tocó el toggle. */
-    readonly view: _angular_core.Signal<DataTableView>;
+    /**
+     * Vista elegida, two-way: `[(view)]="view"`. Sin valor (default) manda
+     * `defaultView`; el toggle interno la escribe. Para controlarla desde
+     * afuera (ej. con el toggle en `kf-list-toolbar` y el estado en la URL),
+     * enlazar `[(view)]` y ocultar el interno con `[showViewToggle]="false"`.
+     * La vista efectivamente renderizada es `activeView()`.
+     */
+    readonly view: _angular_core.ModelSignal<DataTableView | undefined>;
+    /** Vista activa: `view` si está definida, si no `defaultView`. */
+    readonly activeView: _angular_core.Signal<DataTableView>;
     /** Primera columna de cada rol único; el resto se ignora en el encabezado. */
     readonly cardMediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
     readonly cardTitleColumn: _angular_core.Signal<DataTableColumn | undefined>;
     readonly cardStatusColumns: _angular_core.Signal<DataTableColumn[]>;
     readonly cardActionColumns: _angular_core.Signal<DataTableColumn[]>;
     readonly cardFieldColumns: _angular_core.Signal<DataTableColumn[]>;
+    /** Campos a ancho completo y recortados (`cardClamp`), antes del resto. */
+    readonly cardLeadColumns: _angular_core.Signal<DataTableColumn[]>;
+    /** Fila inferior de datos secundarios (`cardRole: 'meta'`). */
+    readonly cardMetaColumns: _angular_core.Signal<DataTableColumn[]>;
     /**
      * La card entera es clickeable solo si no tiene acciones propias: un
      * `role="button"` con botones adentro es inválido y deja el foco ambiguo.
      * 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
@@ -1087,8 +1306,32 @@ declare class DataTable<T = unknown> {
     readonly rowInteractive: _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`. */
+    protected isEndAligned(column: DataTableColumn): boolean;
+    /** `title` de una celda `truncate`: el valor completo como texto. */
+    protected truncateTitle(row: T, column: DataTableColumn): string | null;
     cellValue(row: T, column: DataTableColumn): string;
-    onRowClick(row: T, index: number): void;
+    protected isCurrentRow(row: T, index: number): boolean;
+    /**
+     * Espacio activa la fila/card igual que Enter, como un botón. Solo si el
+     * foco está en la fila misma (no en un control dentro de ella): ahí
+     * `preventDefault` evita el scroll de página; en cualquier otro caso
+     * Espacio conserva su comportamiento nativo.
+     */
+    protected onRowSpace(event: Event, row: T, index: number): void;
+    /**
+     * Emite `rowClick` salvo que el evento nazca dentro de un control
+     * interactivo de la celda (enlace, botón, campo…): ese control ya resuelve
+     * su propia acción. Así una celda con un `<a href>` real (clic derecho →
+     * "abrir en nueva pestaña", Ctrl/Cmd+clic) no navega dos veces. El parámetro
+     * `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
      * porque el ancho de una columna depende de su contenido, no hay forma
@@ -1099,7 +1342,185 @@ declare class DataTable<T = unknown> {
      */
     protected measureStickyOffsets(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "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; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; }, never, ["[empty]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "showViewToggle": { "alias": "showViewToggle"; "required": false; "isSignal": true; }; "cardMinWidth": { "alias": "cardMinWidth"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "cellAriaLabel": { "alias": "cellAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "currentRowKey": { "alias": "currentRowKey"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "keepPageOnRowsChange": { "alias": "keepPageOnRowsChange"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "cellClick": "cellClick"; "page": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "view": "viewChange"; }, never, ["[empty]", "[footer]"], true, never>;
+}
+
+/** Forma de contenido que reproduce el preset. */
+type SkeletonPresetVariant = 'kpi-grid' | 'card-grid' | 'form' | 'list' | 'table' | 'timeline' | 'detail-header';
+/** Tope de elementos: un `count` mayor se acota, no tiene sentido pintar más. */
+declare const SKELETON_PRESET_MAX_COUNT = 12;
+/**
+ * Esqueletos listos para usar que reproducen la FORMA del contenido real, para
+ * que al llegar los datos nada se mueva. Cada variante se arma con la misma
+ * geometría que su equivalente cargado (mismos cascarones, alturas, radios y
+ * gaps, todo por tokens):
+ *
+ * | `variant`        | Equivalente cargado          | `count`        | `columns`          |
+ * | ---------------- | ---------------------------- | -------------- | ------------------ |
+ * | `kpi-grid`       | `kf-stat-card`               | tarjetas (4)   | columnas de la grilla |
+ * | `card-grid`      | `kf-card`                    | tarjetas (6)   | columnas de la grilla |
+ * | `form`           | `kf-input` con label         | campos (4)     | `1` o `2`          |
+ * | `list`           | `kf-document-row`            | filas (4)      | —                  |
+ * | `table`          | `kf-data-table`              | filas (5)      | columnas (4)       |
+ * | `timeline`       | `kf-milestone-timeline`      | etapas (4)     | —                  |
+ * | `detail-header`  | `kf-page-header` con ícono   | —              | —                  |
+ *
+ * Sin `columns`, las grillas (`kpi-grid`, `card-grid`) se reparten solas con un
+ * ancho mínimo por tarjeta. `count` se acota a 12.
+ *
+ * El preset es decorativo (`aria-hidden` por dentro) y marca su contenedor con
+ * `aria-busy="true"`. Con `label` agrega un texto visualmente oculto con
+ * `role="status"` que lo anuncia a lectores de pantalla; dentro de
+ * `kf-content-state` no hace falta (ya lo anuncia él).
+ *
+ *   <kf-skeleton-preset variant="kpi-grid" [count]="4" />
+ *   <kf-skeleton-preset variant="form" [count]="3" [columns]="2" label="Cargando formulario" />
+ *   <kf-content-state [state]="state()" loadingPreset="table">…</kf-content-state>
+ */
+declare class SkeletonPreset {
+    readonly variant: _angular_core.InputSignal<SkeletonPresetVariant>;
+    /** Cantidad de elementos. Sin valor, el de la variante. Máximo 12. */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /** Columnas: de la grilla (`kpi-grid`, `card-grid`), del formulario (`1`|`2`) o de la tabla. */
+    readonly columns: _angular_core.InputSignal<number | undefined>;
+    /** Texto accesible (visualmente oculto, `role="status"`). Vacío, no se emite. */
+    readonly label: _angular_core.InputSignal<string>;
+    protected readonly total: _angular_core.Signal<number>;
+    protected readonly items: _angular_core.Signal<number[]>;
+    /** Columnas de la tabla sintética (encabezados en blanco: lo real aún no llegó). */
+    protected readonly tableColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly formColumns: _angular_core.Signal<2 | 1>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonPreset, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonPreset, "kf-skeleton-preset", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** En qué estado está la sección. */
+type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
+/** Cómo se dibuja `loading`. Default `'skeleton'`. */
+type ContentStateLoad = 'skeleton' | 'spinner';
+/**
+ * Marca el `ng-template` que reemplaza el esqueleto genérico de
+ * `kf-content-state` mientras carga (`state="loading"`, `load="skeleton"`).
+ *
+ *   <kf-content-state [state]="state()">
+ *     <ng-template kfContentStateLoading><kf-skeleton-preset variant="kpi-grid" /></ng-template>
+ *     …
+ *   </kf-content-state>
+ */
+declare class ContentStateLoading {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentStateLoading, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ContentStateLoading, "ng-template[kfContentStateLoading]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
+ * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
+ * siempre el mismo slot el que va rotando entre los cuatro.
+ *
+ * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
+ * tres dibuja el placeholder correspondiente y el contenido no se instancia.
+ * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
+ * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
+ *
+ * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
+ * mientras carga, porque no hay nada que reintentar todavía.
+ *
+ *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
+ *                     subtitle="Revisá tu conexión e intentá de nuevo.">
+ *     <kf-button actions (click)="retry()">Reintentar</kf-button>
+ *     <kf-data-table [columns]="cols" [rows]="rows()" />
+ *   </kf-content-state>
+ *
+ * Esqueleto de carga: por defecto son tres líneas genéricas. Para que la
+ * carga se parezca a lo que va a aparecer, hay tres vías (de la más corta a la
+ * más libre): `loadingPreset` (una variante de `kf-skeleton-preset`), el input
+ * `loadingTemplate` (un `TemplateRef`) o un `ng-template` marcado con
+ * `kfContentStateLoading` dentro del contenido. Si hay más de una, gana la
+ * plantilla proyectada, luego `loadingTemplate` y por último `loadingPreset`.
+ *
+ *   <kf-content-state [state]="state()" loadingPreset="kpi-grid">…</kf-content-state>
+ *
+ * Accesibilidad: en modo skeleton el contenedor lleva `aria-busy="true"` y un
+ * texto visualmente oculto con `role="status"` (`loadingLabel`, "Cargando…" por
+ * defecto) que anuncia el estado una vez. Con `load="spinner"` el texto es el
+ * del propio `kf-spinner`. El contenedor reserva un ancho mínimo, así que el
+ * esqueleto no colapsa a 0 dentro de un padre que se ajusta a su contenido.
+ */
+declare class ContentState {
+    readonly state: _angular_core.InputSignal<ContentStateKind>;
+    /** Forma del estado de carga: silueta (default) o spinner. */
+    readonly load: _angular_core.InputSignal<ContentStateLoad>;
+    /** Título de `empty`/`error`. Ignorado mientras carga. */
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Texto de carga: al lado del spinner con `load="spinner"` y, en modo skeleton,
+     * texto visualmente oculto con `role="status"` para lectores de pantalla. */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    /** Plantilla propia del esqueleto (reemplaza las tres líneas genéricas). */
+    readonly loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    /** Variante de `kf-skeleton-preset` como esqueleto de carga. */
+    readonly loadingPreset: _angular_core.InputSignal<SkeletonPresetVariant | null>;
+    /** `ng-template[kfContentStateLoading]` proyectado como contenido. */
+    protected readonly projectedLoading: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly customLoading: _angular_core.Signal<TemplateRef<any> | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "loadingPreset": { "alias": "loadingPreset"; "required": false; "isSignal": true; }; }, {}, ["projectedLoading"], ["*", "[actions]"], true, never>;
+}
+
+type ContentViewerType = 'image' | 'video' | 'pdf';
+/**
+ * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
+ * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
+ * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
+ * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
+ * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
+ *
+ * `src` acepta lo que venga del backend sin que el consumidor tenga que
+ * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
+ * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
+ * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
+ * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
+ *
+ * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
+ * la barra superior, junto al título.
+ *
+ *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
+ *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
+ *   </kf-content-viewer>
+ */
+declare class ContentViewer {
+    readonly type: _angular_core.InputSignal<ContentViewerType>;
+    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
+    readonly src: _angular_core.InputSignal<string | null>;
+    /** Texto alternativo cuando `type="image"`. */
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly titleId: string;
+    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
+     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
+     * — el backend a veces manda una cosa, a veces la otra. */
+    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
+    protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
+    protected readonly fallbackLabel: _angular_core.Signal<string>;
+    private readonly dialog;
+    private readonly document;
+    private readonly sanitizer;
+    constructor();
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    protected onCancel(event: Event): void;
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     */
+    protected onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
 }
 
 /**
@@ -1145,6 +1566,14 @@ type DocumentRowTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
  * título, metadata y la acción de descarga al final. Sin `href` rinde
  * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
  * la metadata y la acción, como slot para un `kf-badge` de estado.
+ *
+ * `loading` (default `false`): dibuja el esqueleto de la fila — chip, título,
+ * metadata y acción como bloques del alto real de cada texto — con el mismo
+ * cascarón, así que al llegar los datos no hay salto de layout. Pasa los
+ * mismos inputs que usarás cargada (`meta` incluido, para reservar su línea).
+ * Marca el host con `aria-busy="true"` y oculta el contenido proyectado.
+ *
+ *   <kf-document-row title="Factura" meta="PDF · 120 KB" [loading]="isLoading()" />
  */
 declare class DocumentRow {
     readonly icon: _angular_core.InputSignal<IconName>;
@@ -1160,11 +1589,20 @@ 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>;
 }
 
-type DrawerSide = 'left' | 'right';
+/** Borde de anclaje del panel. `bottom` es una hoja inferior (bottom sheet). */
+type DrawerSide = 'left' | 'right' | 'bottom';
+/**
+ * Rol del panel. `navigation` (default) es el menú lateral histórico;
+ * `dialog` es un panel modal de tarea (filtros, resumen) con
+ * `aria-modal="true"`.
+ */
+type DrawerRole = 'navigation' | 'dialog';
 /**
  * Panel lateral genérico, agnóstico de contenido — no sabe qué es navegación
  * ni qué es sesión, solo da tres lugares para proyectar contenido
@@ -1197,28 +1635,98 @@ type DrawerSide = 'left' | 'right';
  *     <a href="/">Home</a>
  *     <a href="/vehiculos">Vehículos</a>
  *   </kf-drawer>
+ *
+ * ## Panel de tarea (`role="dialog"`)
+ *
+ * Para un panel modal que no es navegación (filtros de un listado, resumen
+ * de un registro): `role="dialog"` expone `role="dialog"` + `aria-modal`,
+ * `title` dibuja una barra clara con el título (que nombra el diálogo vía
+ * `aria-labelledby`) y un botón de cierre con `closeLabel`. En pantallas de
+ * hasta 640px el panel ocupa el ancho completo; arriba de eso mide
+ * `--kf-drawer-width` (default 480px). El pie (`[kf-drawer-footer]`) queda
+ * fijo abajo mientras el cuerpo hace scroll.
+ *
+ *   <kf-drawer [(open)]="filtersOpen" role="dialog" side="right"
+ *              title="Filtros" closeLabel="Cerrar filtros">
+ *     <kf-option-list label="Estado" ... />
+ *     <div kf-drawer-footer> ...Limpiar / Ver 12 resultados... </div>
+ *   </kf-drawer>
+ *
+ * `side="bottom"` lo convierte en hoja inferior (grip, esquinas superiores
+ * 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`): 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"`
+ * los defaults son neutros ("Diálogo" / "Cerrar") y en modo desarrollo se
+ * avisa por consola si no hay `title` ni `ariaLabel`: un diálogo sin nombre
+ * propio no le dice nada al lector de pantalla.
+ *
+ * ## 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
+ * estaba abierto, no se fuerza ningún destino.
  */
 declare class Drawer {
     /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
     readonly open: _angular_core.ModelSignal<boolean>;
     /** Borde de anclaje del panel. `left` (default) es la convención dominante
      * (Material/iOS/Android): el botón que abre el drawer y el propio panel
-     * quedan del mismo lado. */
+     * quedan del mismo lado. `bottom` lo convierte en hoja inferior. */
     readonly side: _angular_core.InputSignal<DrawerSide>;
-    /** `aria-label` del `<nav>` interno — describe el propósito del panel para
-     * lectores de pantalla (ej. "Menú de navegación"). */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** `navigation` (default, menú) o `dialog` (panel modal de tarea). Ver JSDoc de la clase. */
+    readonly role: _angular_core.InputSignal<DrawerRole>;
+    /** `aria-label` del panel — describe su propósito para lectores de
+     * pantalla (ej. "Menú de navegación"). Ignorado cuando hay `title`, que
+     * nombra el panel con su texto visible. Default: "Menú" (`navigation`) o
+     * "Diálogo" (`dialog`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Título visible en una barra clara arriba del panel, con botón de cierre. Sin él no hay barra (comportamiento histórico). */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible del botón de cierre de la barra de título y del
+     * overlay. Default: "Cerrar menú" (`navigation`) o "Cerrar" (`dialog`). */
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
+    /** `ariaLabel` o, sin él, el default según el rol. */
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
+    /** `closeLabel` o, sin él, el default según el rol. */
+    protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
+    protected readonly titleId: string;
     private readonly panelRef;
     private readonly focusTrapFactory;
     private readonly document;
+    private readonly overlayContainer;
+    private registeredPanel;
     private focusTrap;
     private lastFocusedElement;
     constructor();
     /** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
-    protected onEscape(): void;
+    protected onEscape(event: Event): void;
     private getOrCreateFocusTrap;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "kf-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-drawer-header]", "*", "[kf-drawer-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "kf-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-drawer-header]", "*", "[kf-drawer-footer]"], true, never>;
 }
 
 /**
@@ -1266,9 +1774,12 @@ declare class Dropdown {
      * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
      * ve teclas con el foco DENTRO del panel. Si el foco queda en el botón
      * disparador (caso común), `keydownEvents()` nunca dispara — este
-     * listener a nivel de documento cubre ese caso.
+     * listener a nivel de documento cubre ese caso. Va en fase de captura
+     * (ver `listenEscapeCapture`) y consume la tecla solo si había un menú
+     * abierto, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
      */
-    onDocumentEscape(): void;
+    onDocumentEscape(): boolean;
     private attach;
     /**
      * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
@@ -1334,6 +1845,8 @@ declare class DropdownPanel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Tono del estado. `warn`/`info` solo cambian el chip del ícono. */
+type EmptyStateTone = 'neutral' | 'error' | 'warn' | 'info';
 /**
  * Placeholder para una sección sin contenido. Dos tonos, con anatomía
  * distinta (páginas 27-28 del design system, que los trata como piezas
@@ -1353,13 +1866,45 @@ declare class DropdownPanel {
  *     No pudimos cargar tus vehículos
  *     <kf-button (click)="retry()">Reintentar</kf-button>
  *   </kf-empty-state>
+ *
+ * ## Variante `card`
+ * Tarjeta centrada (fondo blanco, borde, sombra, ancho máximo 480px) para
+ * un estado que REEMPLAZA a un contenido grande — ej. un iframe que no
+ * cargó o un documento que aún no existe. Ícono en un círculo tonal de
+ * 56px según `tone` (`warn`, `info`, `error` o `neutral`), `title` como
+ * título, el contenido proyectado como texto (puede incluir una lista de
+ * pasos) y `[kf-empty-state-actions]` para los botones. Los roles
+ * (`role="alert"` para un error) los pone el consumidor en el host: no
+ * todo estado de esta forma debe interrumpir al lector de pantalla.
+ *
+ *   <kf-empty-state variant="card" tone="warn" icon="alert-triangle"
+ *                   title="No pudimos cargar la propuesta" role="alert">
+ *     <p>Este contenido solo está disponible dentro de la red de la empresa.</p>
+ *     <ol>…pasos…</ol>
+ *     <div kf-empty-state-actions>
+ *       <kf-button (click)="retry()">Reintentar</kf-button>
+ *     </div>
+ *   </kf-empty-state>
+ *
+ * `[kf-empty-state-footer]` va DESPUÉS de las acciones, para pistas y
+ * metadatos debajo de los botones ("¿Ya estás conectado? …", "Intento 2 ·
+ * 10:42"). Vacío, no ocupa lugar.
+ *
+ * `title` se dibuja como texto destacado, no como encabezado (`<h*>`): el
+ * nivel de encabezado depende de la página que lo contiene, y un estado
+ * vacío no debe alterar su estructura.
  */
 declare class EmptyState {
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
-    /** `neutral` (default): cero resultados. `error`: fallo real de carga. */
-    readonly tone: _angular_core.InputSignal<"neutral" | "error">;
+    /** `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<"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>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyState, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "kf-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "kf-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[kf-empty-state-actions]", "[kf-empty-state-footer]"], true, never>;
 }
 
 /** Color del marcador. Distingue la CLASE de evento de un vistazo en un log
@@ -1474,6 +2019,128 @@ declare class FieldLabel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Por qué se descartó un archivo: formato fuera de `accept` o más grande que `maxSize`. */
+type FileRejectionReason = 'type' | 'size';
+/** Un archivo descartado y el motivo. */
+interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+/** Tamaño en bytes como texto (`5 MB`, `120 KB`), base 1024. */
+declare function formatFileSize(bytes: number): string;
+/**
+ * Selector de archivo accesible, con la misma apariencia y contrato de campo
+ * que `kf-input`: label arriba, ayuda y error debajo, `invalid`.
+ *
+ * El control real es un `<input type="file">` nativo, visualmente oculto pero
+ * enfocable: se llega con Tab, se abre con Enter o Espacio y el anillo de foco
+ * se dibuja sobre el botón visible. Su nombre accesible es el `label` (o
+ * `ariaLabel`); la ayuda, el archivo elegido y el error lo describen
+ * (`aria-describedby`).
+ *
+ * **Ayuda antes de elegir.** `hint` es texto libre; si no se pasa, se arma sola
+ * con los formatos de `accept` y el tamaño de `maxSize` (`PDF, JPG · máx. 5 MB`),
+ * para que el usuario sepa qué sirve ANTES de abrir el selector.
+ *
+ * **Validación.** Cada archivo se revisa contra `accept` (extensiones `.pdf`,
+ * tipos `image/png` o comodines `image/*`) y `maxSize` (bytes). Los válidos
+ * quedan elegidos y se emiten en `fileChange` (siempre `File[]`, vacío al
+ * quitar); los descartados se emiten uno a uno en `fileRejected` con su
+ * motivo (`'type'` o `'size'`) y se muestran como error bajo el campo
+ * (`rejectedTypeText` / `rejectedSizeText`); la ayuda sigue visible bajo ese
+ * mensaje, para que se vea qué sí sirve. Un `error` del consumidor tiene
+ * prioridad sobre ese mensaje y reemplaza a la ayuda, igual que `errorMessage`
+ * sobre `hint` en `kf-input`. La validación del navegador no reemplaza la del servidor.
+ *
+ * **Archivo elegido.** Su nombre y tamaño aparecen UNA vez, con un botón para
+ * quitarlo (`removeLabel`, con el nombre del archivo en su `aria-label`); el
+ * nombre del `<input>` nativo queda oculto. Con `multiple` se listan todos y
+ * cada uno se quita por separado. Elegir de nuevo reemplaza la selección.
+ *
+ * `dropzone` agrega arrastrar y soltar sobre el área; el botón y el teclado
+ * siguen siendo la vía principal.
+ *
+ * Es un `ControlValueAccessor`: con `[(ngModel)]`/`formControl` el valor es
+ * `File | null` (o `File[]` con `multiple`); `writeValue(null)` limpia.
+ *
+ *   <kf-file-input label="Comprobante" accept=".pdf,.jpg,.png" [maxSize]="5242880"
+ *                  (fileChange)="onFiles($event)" (fileRejected)="onRejected($event)" />
+ *   <kf-file-input label="Fotos" accept="image/*" multiple dropzone formControlName="photos" />
+ *   <kf-file-input label="Contrato" error="Adjunta el contrato firmado." formControlName="contract" />
+ */
+declare class FileInput implements ControlValueAccessor {
+    private readonly nativeInput;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Texto de ayuda. Sin valor, se arma con `accept` y `maxSize`. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Formatos admitidos, como el `accept` nativo: `.pdf,.jpg`, `image/png`, `image/*`. */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /** Tamaño máximo por archivo, en bytes. Sin valor, sin límite. */
+    readonly maxSize: _angular_core.InputSignal<number | undefined>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Agrega arrastrar y soltar sobre el área del control. */
+    readonly dropzone: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Borde rojo y `aria-invalid`. Se activa solo con `error`; úsalo para marcar un error sin mensaje. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error del consumidor (`role="alert"`); reemplaza a la ayuda y al motivo de rechazo, como `errorMessage` en `kf-input`. */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible cuando no hay `label` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Texto del botón cuando no hay archivo elegido. */
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    /** Texto del botón con `multiple` o cuando ya hay un archivo (cambiar). */
+    readonly changeLabel: _angular_core.InputSignal<string>;
+    /** Nombre accesible del botón de quitar; se le agrega el nombre del archivo. */
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /** Texto de arrastrar y soltar (solo con `dropzone`). */
+    readonly dropzoneText: _angular_core.InputSignal<string>;
+    readonly rejectedTypeText: _angular_core.InputSignal<string>;
+    readonly rejectedSizeText: _angular_core.InputSignal<string>;
+    /** Selección vigente (`File[]`, vacío al quitar todo). */
+    readonly fileChange: _angular_core.OutputEmitterRef<File[]>;
+    /** Un archivo descartado y su motivo. */
+    readonly fileRejected: _angular_core.OutputEmitterRef<FileRejection>;
+    protected readonly inputId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly filesId: string;
+    protected readonly files: _angular_core.WritableSignal<File[]>;
+    protected readonly rejection: _angular_core.WritableSignal<FileRejectionReason | null>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    private readonly disabledByForm;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    /** Mensaje visible: el del consumidor, o el motivo del último rechazo. */
+    protected readonly message: _angular_core.Signal<string | null>;
+    /** Ayuda efectiva: la del consumidor o la armada con formatos y tamaño. */
+    protected readonly effectiveHint: _angular_core.Signal<string>;
+    protected readonly isInvalid: _angular_core.Signal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly triggerText: _angular_core.Signal<string>;
+    /** Enfoca el `<input>` nativo. */
+    focus(options?: FocusOptions): void;
+    writeValue(value: File | File[] | null): void;
+    registerOnChange(fn: (value: File | File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onPick(event: Event): void;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(): void;
+    protected onDrop(event: DragEvent): void;
+    protected remove(index: number): void;
+    protected formatSize(file: File): string;
+    /** Valida lo recibido, emite los rechazos y reemplaza la selección si hay algo válido. */
+    private receive;
+    private reject;
+    private matchesAccept;
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInput, "kf-file-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "dropzone": { "alias": "dropzone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "dropzoneText": { "alias": "dropzoneText"; "required": false; "isSignal": true; }; "rejectedTypeText": { "alias": "rejectedTypeText"; "required": false; "isSignal": true; }; "rejectedSizeText": { "alias": "rejectedSizeText"; "required": false; "isSignal": true; }; }, { "fileChange": "fileChange"; "fileRejected": "fileRejected"; }, never, never, true, never>;
+}
+
 interface MultiSelectOption {
     value: string;
     label: string;
@@ -1567,7 +2234,13 @@ declare class MultiSelect {
     /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
     moveActive(delta: number): void;
     toggleActive(): void;
-    onEscape(): void;
+    /**
+     * Escape con el panel abierto, en fase de captura sobre `document` (ver
+     * `listenEscapeCapture`): consume la tecla solo si había un panel que
+     * cerrar, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
+     */
+    onEscape(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
 }
@@ -1627,43 +2300,63 @@ declare class Filter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kf-filter", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "mobileTitle": { "alias": "mobileTitle"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; }, never, never, true, never>;
 }
 
-/** Forma normalizada interna de cada opción, ya resuelta a value/label. */
+/**
+ * Opción en forma de objeto. `count` es opcional: cuando está presente se
+ * muestra a la derecha del label (ej. "Pendientes 3"), con cifras tabulares
+ * para que el ancho del chip no salte al cambiar el número.
+ */
 interface FilterChipOption {
     value: string;
     label: string;
+    count?: number;
 }
 /**
  * Fila de chips tipo "pill" para filtros de una sola selección.
  *
  * Cada opción puede pasarse como string simple (se usa como value y label
- * a la vez) o como objeto { value, label } cuando el texto mostrado difiere
- * del valor interno.
+ * a la vez) o como objeto `{ value, label, count? }` cuando el texto
+ * mostrado difiere del valor interno o cuando cada chip lleva un contador.
  *
  * El chip activo se resalta con `--kf-color-primary` — mismo color de marca
  * que `kf-tabs`/`kf-select` para su propio estado activo, así el filtro
  * seleccionado se lee con el color del tema activo, no un negro fijo que
  * no cambia entre marcas.
  *
+ * Densidad: el padding horizontal de cada chip sale de
+ * `--kf-filter-chips-padding-inline` (default `--kf-space-md`). Un
+ * contenedor puede reducirlo sin tocar este componente — `kf-list-toolbar`
+ * lo baja a 12px en su modo compacto.
+ *
  *   <kf-filter-chips [options]="['Todos', 'Activos', 'Archivados']"
  *                     [value]="filtro"
  *                     (valueChange)="filtro = $event" />
  *
- *   <kf-filter-chips [options]="[{ value: 'all', label: 'Todos' }]"
+ * `layout="scroll"` deja todos los chips en UNA línea con desplazamiento
+ * horizontal (para mobile: los filtros no ocupan más alto que una fila); el
+ * default `wrap` los reparte en varias líneas. `deselectable` permite
+ * quitar el filtro volviendo a tocar el chip activo (emite `''`), para el
+ * caso "ningún chip = sin filtro".
+ *
+ *   <kf-filter-chips ariaLabel="Filtrar por estado"
+ *                     [options]="[{ value: '', label: 'Todas', count: 12 }]"
  *                     [value]="filtro"
  *                     (valueChange)="filtro = $event" />
  */
 declare class FilterChips {
-    readonly options: _angular_core.InputSignal<(string | {
-        value: string;
-        label: string;
-    })[]>;
+    readonly options: _angular_core.InputSignal<(string | FilterChipOption)[]>;
     readonly value: _angular_core.InputSignal<string>;
+    /** Nombre accesible del grupo (ej. "Filtrar por estado"). Sin él, el grupo se anuncia sin nombre. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** `wrap` (default): varias líneas. `scroll`: una sola línea con desplazamiento horizontal. */
+    readonly layout: _angular_core.InputSignal<"scroll" | "wrap">;
+    /** Tocar el chip activo lo desactiva y emite `''`. Default `false` (comportamiento histórico). */
+    readonly deselectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
-    /** Normaliza cada opción string/objeto a la forma { value, label }. */
+    /** Normaliza cada opción string/objeto a la forma `{ value, label, count? }`. */
     readonly normalizedOptions: _angular_core.Signal<FilterChipOption[]>;
     select(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterChips, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterChips, "kf-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterChips, "kf-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "deselectable": { "alias": "deselectable"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 /** Un link del pie — legales, contacto, soporte. */
@@ -1698,6 +2391,8 @@ declare class Footer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "kf-footer", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": true; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Valor de `min`/`max`/`step`: número, o texto cuando el tipo lo pide (una fecha `'2026-01-31'`, un mes, una hora). */
+type InputBound = string | number | null | undefined;
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
  * fondo gris que pasa a blanco con anillo de foco azul al enfocar.
@@ -1740,6 +2435,41 @@ declare class Footer {
  * está en vuelo).
  *
  *   <kf-input label="DNI" readonly formControlName="documentId" />
+ *
+ * Buscador sin label visible: `ariaLabel` da el nombre accesible del
+ * `<input>` (el placeholder no lo reemplaza: desaparece al escribir) y
+ * `clearable` agrega un botón "×" mientras haya texto. Borrar limpia el
+ * valor, notifica al formulario (`ngModel`/`formControl`), dispara un
+ * evento `input` nativo (para quien escucha `(input)`), emite `cleared` y
+ * devuelve el foco al campo.
+ *
+ *   <kf-input type="search" icon="search" ariaLabel="Buscar cotizaciones"
+ *             placeholder="Buscar cotización" clearable [(ngModel)]="query" />
+ *
+ * `focus()` enfoca el `<input>` nativo, sin que el consumidor busque el
+ * control interno con `querySelector`.
+ *
+ * `autocomplete`, `name` e `inputmode` se reenvían al `<input>` nativo (un
+ * atributo en el host no llega adentro) para que el navegador y los gestores
+ * de contraseñas identifiquen el campo; sin valor no se renderiza ningún
+ * atributo. Funcionan igual con `type="password"` y `toggleable`.
+ *
+ *   <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;
@@ -1766,11 +2496,37 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    /** Teclado virtual sugerido en mobile (ej. `"numeric"` para montos o
-     * kilometraje) — sin valor, el navegador decide según `type`. */
-    readonly inputmode: _angular_core.InputSignal<string | undefined>;
+    /** Token de autocompletado HTML (`username`, `email`, `current-password`,
+     * `new-password`, `off`, etc.) que se reenvía al `<input>` nativo para que
+     * el navegador y los gestores de contraseñas identifiquen el propósito del
+     * campo (WCAG 1.3.5 y 3.3.8). Sin valor, el atributo no se renderiza. */
+    readonly autocomplete: _angular_core.InputSignal<string | null | undefined>;
+    /** `name` del `<input>` nativo; los gestores de contraseñas y el envío
+     * nativo de formularios lo usan para identificar el campo. Sin valor, el
+     * atributo no se renderiza. */
+    readonly name: _angular_core.InputSignal<string | null | undefined>;
+    /** 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
+     * si hay `label`: un `aria-label` pisaría al `<label for>` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Agrega un botón "×" para borrar el valor mientras haya texto (sin efecto con `disabled`/`readonly`). */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre accesible del botón de borrar. */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Emitido después de borrar el valor con el botón "×". */
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
     protected readonly inputId: string;
     protected readonly hintId: string;
     protected readonly errorId: string;
@@ -1784,6 +2540,8 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
     /** El botón solo tiene sentido si el campo realmente es de contraseña. */
     protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
+    /** El botón de borrar solo aparece con texto y con el campo editable. */
+    protected readonly showClear: _angular_core.Signal<boolean>;
     /**
      * `type` real que recibe el `<input>` nativo: igual a `type()` salvo
      * cuando el toggle está activo y visible, donde pasa a `text` para
@@ -1794,12 +2552,22 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     private onChange;
     private onTouched;
     ngAfterViewInit(): void;
+    /** Enfoca el `<input>` nativo (mismas opciones que `HTMLElement.focus`). */
+    focus(options?: FocusOptions): void;
     writeValue(value: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     protected onInput(rawValue: string): void;
     protected onBlur(): void;
+    /**
+     * Borra el valor reutilizando el mismo camino que el tipeo: un evento
+     * `input` nativo pasa por `onInput` (notifica al formulario) y además
+     * llega a cualquier `(input)` del consumidor. Con el mouse no hay blur:
+     * el `mousedown` del botón hace `preventDefault` (ver Input.html), así el
+     * campo no se marca `touched` por usar su propio "×".
+     */
+    protected onClear(): void;
     /**
      * Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
      * el botón vive dentro del mismo `.kf-input__field`, así que un click acá
@@ -1807,7 +2575,7 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
      */
     protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "cleared": "cleared"; }, never, never, true, never>;
 }
 
 type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
@@ -1900,6 +2668,205 @@ declare class Link {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Link, "kf-link", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Modo de `kf-list-toolbar` según el ancho REAL disponible:
+ * - `full`: todo en una fila con la densidad normal.
+ * - `compact`: todo en una fila, con los chips más angostos (`data-density="compact"`).
+ * - `panel`: solo el buscador y un botón "Filtros"; filtros y acciones finales se ocultan.
+ */
+type ListToolbarMode = 'full' | 'compact' | 'panel';
+/** Anchos medidos (px): disponible en la barra y requerido por cada densidad. */
+interface ListToolbarWidths {
+    available: number;
+    full: number;
+    compact: number;
+}
+/**
+ * Margen de histéresis (px) para SUBIR de modo. Bajar es inmediato (si no
+ * cabe, no cabe); subir exige este margen extra, así un ancho que oscila
+ * justo en el umbral (scrollbar que aparece y desaparece, un contador que
+ * pasa de 9 a 10) no hace parpadear la barra entre dos modos.
+ */
+declare const LIST_TOOLBAR_HYSTERESIS = 24;
+/**
+ * Decide el modo a partir del modo actual y los anchos medidos. Función pura
+ * para poder probar la histéresis sin layout real.
+ */
+declare function resolveListToolbarMode(widths: ListToolbarWidths, current: ListToolbarMode, hysteresis?: number): ListToolbarMode;
+
+/**
+ * Barra de herramientas de un listado: buscador, filtros y acciones finales
+ * (orden, cambio de vista) en UNA fila, que se adapta al ancho REAL que
+ * tiene disponible — no al del viewport. El mismo listado puede renderizarse
+ * con el menú lateral abierto o cerrado, dentro de un panel o a pantalla
+ * completa, y una `@media` no distingue esos casos; la barra mide su propio
+ * ancho con `ResizeObserver`.
+ *
+ * ## Cuándo usarla y cuándo `kf-filter`
+ * - `kf-list-toolbar`: chips con contador (`kf-filter-chips`) + orden + cambio
+ *   de vista + panel de filtros en modo estrecho, fija al hacer scroll y
+ *   guiada por el ancho del contenedor.
+ * - `kf-filter`: selects, multi-select y buscador de texto en una fila de
+ *   formulario, que se pliega en un `kf-collapsible` a ≤768px de viewport.
+ *   Si el listado se filtra con campos, usar `kf-filter`; no se combinan ni
+ *   se reimplementan entre sí.
+ *
+ * ## Slots
+ * - `[kf-toolbar-search]`: el buscador (ej. `kf-input icon="search"`). Siempre visible; ocupa el espacio libre.
+ * - `[kf-toolbar-filters]`: filtros rápidos (ej. `kf-filter-chips`).
+ * - `[kf-toolbar-end]`: acciones al final de la fila (ej. `kf-select` de orden, `kf-view-toggle`).
+ *
+ * Cada slot acepta VARIOS elementos con el mismo atributo y los ubica en
+ * fila con `gap`; marcar cada control (no un `<div>` envoltorio sin
+ * `display: flex`, que apilaría sus hijos en bloque).
+ *
+ * La barra ocupa el ancho de su contenedor (`display: block`). Dentro de un
+ * contenedor flex que ajusta su ancho al contenido, darle un ancho
+ * explícito: si el contenedor mide lo que la barra pide, la barra mide lo
+ * que el contenedor le da y el modo nunca puede subir de `panel`.
+ * - default: contenido no visual que debe quedar SIEMPRE presente, como una
+ *   región `aria-live` con el conteo de resultados (nunca dentro de un slot
+ *   que se oculta).
+ *
+ * ## Modos (`mode`, `modeChange`, atributo `data-mode`)
+ * - `full`: todo cabe en una fila.
+ * - `compact`: cabe en una fila solo con chips más angostos. El host expone
+ *   `data-density="compact"` y redefine `--kf-filter-chips-padding-inline`
+ *   (12px), que `kf-filter-chips` adopta sin configuración extra.
+ * - `panel`: no cabe. Se ocultan `filters` y `end` y aparece, junto al
+ *   buscador, un botón "Filtros" (`filtersLabel`) con un badge de
+ *   `activeCount` (filtros/orden distintos del valor por defecto) que emite
+ *   `filtersClick` — el consumidor abre su propio panel (típicamente
+ *   `kf-drawer role="dialog"` con `kf-option-list`).
+ *
+ * Contrato con el panel de filtros: el consumidor DEBE pasar
+ * `[filtersExpanded]` con el estado de su panel y DEBE cerrarlo al recibir
+ * un `modeChange` distinto de `'panel'`. Al salir de `panel` con el panel
+ * abierto, la barra mueve el foco al primer filtro visible (el botón
+ * "Filtros" ya no existe para recibirlo); si el panel modal siguiera
+ * abierto, ese foco quedaría fuera del diálogo.
+ *
+ * El modo sale de comparar el ancho disponible con el ancho natural de los
+ * slots en cada densidad (más `searchMinWidth` para el buscador), con
+ * histéresis al subir de modo (`LIST_TOOLBAR_HYSTERESIS`) para que no
+ * parpadee en el umbral. Los slots ocultos en modo `panel` se siguen
+ * midiendo (quedan fuera de vista con `visibility: hidden`, sin foco ni
+ * árbol de accesibilidad), así un contador que crece se refleja igual.
+ *
+ * ## Fija (`sticky`)
+ * Con `sticky`, la barra queda pegada arriba al hacer scroll (`stickyTop`
+ * compensa una cabecera fija del shell). Cuando efectivamente queda pegada,
+ * el host recibe la clase `kf-list-toolbar--stuck`: sombra más marcada y
+ * menos alto. "Pegada" = el contenedor con scroll (el ancestro más cercano
+ * con `overflow-y: auto|scroll`, o la ventana) ya se desplazó Y la barra
+ * está en su posición fija. Sin centinela: un centinela por encima de la
+ * barra quedaría recortado cuando la barra es el primer elemento del
+ * contenedor, y la marcaría pegada en reposo. El fondo alrededor de
+ * la barra fija sale de `--kf-list-toolbar-backdrop` (default
+ * `--kf-color-surface`, el fondo habitual del área de contenido).
+ *
+ * Foco tapado (WCAG 2.4.11): una barra fija puede quedar encima del control
+ * que recibe el foco al tabular hacia arriba. El consumidor debe aplicar
+ * `scroll-padding-top` = `stickyTop` + alto de la barra al contenedor que
+ * hace scroll (o a `html` si es la ventana), así el navegador deja ese
+ * margen al llevar un elemento enfocado a la vista. El alto vigente se
+ * publica como señal `height` (px), output `heightChange` y variable CSS
+ * `--kf-list-toolbar-height` en el host (esta última solo la heredan los
+ * descendientes; un ancestro debe usar la señal):
+ *
+ *   <main class="content" [style.scroll-padding-top.px]="56 + toolbar.height()">
+ *     <kf-list-toolbar #toolbar sticky [stickyTop]="56" ... />
+ *   </main>
+ *
+ *   <kf-list-toolbar sticky ariaLabel="Filtrar cotizaciones" [activeCount]="activeFilters()"
+ *                    (filtersClick)="filtersOpen.set(true)" (modeChange)="mode.set($event)">
+ *     <span class="sr-only" aria-live="polite">{{ resultsLabel() }}</span>
+ *     <kf-input kf-toolbar-search icon="search" ... />
+ *     <kf-filter-chips kf-toolbar-filters ... />
+ *     <kf-select kf-toolbar-end variant="compact" icon="sort" ariaLabel="Ordenar por" ... />
+ *     <kf-view-toggle kf-toolbar-end ... />
+ *   </kf-list-toolbar>
+ */
+declare class ListToolbar {
+    /** Nombre accesible del landmark de búsqueda (`role="search"`). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Fija la barra arriba al hacer scroll. */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Offset superior de la barra fija: número (px) o longitud CSS (ej. `'var(--shell-header-height)'`). */
+    readonly stickyTop: _angular_core.InputSignal<string | number>;
+    /** Ancho mínimo útil del buscador (px) — entra en el cálculo de si todo cabe en una fila. */
+    readonly searchMinWidth: _angular_core.InputSignal<number>;
+    /** Texto del botón del modo `panel`. */
+    readonly filtersLabel: _angular_core.InputSignal<string>;
+    /** Cantidad de filtros/orden distintos del valor por defecto; se muestra como badge en el botón del modo `panel`. */
+    readonly activeCount: _angular_core.InputSignal<number>;
+    /**
+     * `aria-expanded` del botón del modo `panel`: el estado del panel que abre
+     * el consumidor. Además, si es `true` al salir de `panel`, el foco pasa al
+     * primer filtro visible — por eso el consumidor DEBE cerrar su panel en
+     * ese mismo `modeChange` (ver "Contrato con el panel de filtros").
+     */
+    readonly filtersExpanded: _angular_core.InputSignal<boolean | undefined>;
+    readonly filtersClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Nuevo modo. Al recibir un valor distinto de `'panel'`, el consumidor
+     * DEBE cerrar su panel de filtros (ver "Contrato con el panel de filtros").
+     */
+    readonly modeChange: _angular_core.OutputEmitterRef<ListToolbarMode>;
+    /** Alto del host (px) cada vez que cambia — ver "Foco tapado" en el JSDoc de la clase. */
+    readonly heightChange: _angular_core.OutputEmitterRef<number>;
+    private readonly modeState;
+    /** Modo vigente (también disponible como `data-mode` en el host). */
+    readonly mode: _angular_core.Signal<ListToolbarMode>;
+    private readonly stuckState;
+    /** `true` mientras la barra fija está efectivamente pegada arriba. */
+    readonly stuck: _angular_core.Signal<boolean>;
+    private readonly heightState;
+    /** Alto vigente del host en px (barra + padding de la variante fija). */
+    readonly height: _angular_core.Signal<number>;
+    protected readonly stickyTopCss: _angular_core.Signal<string>;
+    protected readonly filtersAriaLabel: _angular_core.Signal<string | undefined>;
+    private readonly hostRef;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly barRef;
+    private readonly filtersRef;
+    private readonly endRef;
+    private readonly filtersButtonRef;
+    /** A dónde mover el foco tras un cambio de modo que desmonta/oculta el elemento enfocado. */
+    private pendingFocus;
+    /** `requestAnimationFrame` pendiente de `measure()` (coalesce de notificaciones). */
+    private measureFrame;
+    private stuckFrame;
+    private removeScrollListener;
+    constructor();
+    protected onFiltersClick(): void;
+    /**
+     * Mide el ancho disponible y el natural de cada slot en ambas
+     * densidades, y actualiza el modo. La densidad de medición se fuerza con
+     * `data-measure` (que gana sobre `data-density` en el CSS) y se retira en
+     * el mismo frame: el navegador nunca pinta ese estado intermedio.
+     */
+    private measure;
+    private updateHeight;
+    private applyMode;
+    private slotsContain;
+    private restorePendingFocus;
+    private observeSize;
+    private scheduleMeasure;
+    /** Engancha (o suelta) el cálculo de `stuck` al scroll del contenedor. */
+    private watchScroll;
+    /**
+     * Pegada = el contenedor ya se desplazó Y la barra está en su posición
+     * fija (`top` resuelto, con medio píxel de tolerancia por subpíxeles).
+     * Sin la primera condición, una barra que es el primer elemento del
+     * contenedor se leería pegada en reposo.
+     */
+    private updateStuck;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListToolbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListToolbar, "kf-list-toolbar", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "stickyTop": { "alias": "stickyTop"; "required": false; "isSignal": true; }; "searchMinWidth": { "alias": "searchMinWidth"; "required": false; "isSignal": true; }; "filtersLabel": { "alias": "filtersLabel"; "required": false; "isSignal": true; }; "activeCount": { "alias": "activeCount"; "required": false; "isSignal": true; }; "filtersExpanded": { "alias": "filtersExpanded"; "required": false; "isSignal": true; }; }, { "filtersClick": "filtersClick"; "modeChange": "modeChange"; "heightChange": "heightChange"; }, never, ["*", "[kf-toolbar-search]", "[kf-toolbar-filters]", "[kf-toolbar-end]"], true, never>;
+}
+
 /**
  * Card de estadística/KPI: label, valor grande, ícono opcional en la esquina
  * superior derecha, badge de esquina opcional (pegado al valor) y una nota
@@ -1921,6 +2888,14 @@ declare class Link {
  *   <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>;
@@ -1933,8 +2908,132 @@ declare class MetricCard {
     readonly valueColor: _angular_core.InputSignal<string | undefined>;
     /** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
     readonly badge: _angular_core.InputSignal<string | undefined>;
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/** Estado de avance de una etapa o hito; nunca se comunica solo con color. */
+type ProgressStatus = 'done' | 'current' | 'pending';
+declare const PROGRESS_STATUS: {
+    readonly DONE: "done";
+    readonly CURRENT: "current";
+    readonly PENDING: "pending";
+};
+/**
+ * Texto por defecto (español) de cada estado: el estado nunca se comunica solo
+ * con color. Los componentes que lo muestran aceptan sus propios textos.
+ */
+declare const PROGRESS_STATUS_LABEL: {
+    readonly done: "Completado";
+    readonly current: "En curso";
+    readonly pending: "Pendiente";
+};
+
+/**
+ * Hito de una etapa. `date` llega ya formateada; `exception` excluye el hito
+ * del avance (se muestra en un bloque aparte y solo si ocurrió).
+ */
+interface MilestoneItem {
+    id: string;
+    label: string;
+    done: boolean;
+    date?: string;
+    exception?: boolean;
+}
+/**
+ * Etapa expandible de la línea de tiempo. `date` llega ya formateada y solo
+ * aplica si la etapa está completada. Una etapa sin `items` no es expandible.
+ */
+interface MilestoneGroup {
+    id: string;
+    label: string;
+    status: ProgressStatus;
+    icon: IconName;
+    date?: string;
+    items: readonly MilestoneItem[];
+}
+/** Textos de `kf-milestone-timeline`; todos tienen valor por defecto en español. */
+interface MilestoneTimelineLabels {
+    heading: string;
+    expandAll: string;
+    collapseAll: string;
+    statusDone: string;
+    statusPending: string;
+    /** Texto de una etapa en curso; recibe los hitos completados y el total que cuenta en el avance. */
+    currentMeta: (done: number, total: number) => string;
+    /** Insignia del hito destacado como el siguiente a completar. */
+    next: string;
+    exceptionsTitle: string;
+    noExceptions: string;
+    /** Texto solo para lectores de pantalla tras un hito completado. */
+    itemDone: string;
+    /** Texto solo para lectores de pantalla tras un hito pendiente. */
+    itemPending: string;
+}
+declare const DEFAULT_MILESTONE_TIMELINE_LABELS: MilestoneTimelineLabels;
+
+/**
+ * Línea de tiempo de etapas con hitos. Cada etapa es un encabezado expandible
+ * (`aria-expanded`/`aria-controls`) con un panel de hitos y, si la etapa tiene
+ * hitos de excepción, un bloque aparte que no cuenta en el avance. Una etapa
+ * sin hitos es solo informativa (no es un botón).
+ *
+ * El estado nunca se comunica solo con color: cada etapa y cada hito llevan su
+ * estado en texto (visible o solo para lectores de pantalla) y los nodos y
+ * marcas lo dibujan también con la forma. Todos los textos salen de `labels`
+ * (español por defecto) y las fechas llegan ya formateadas.
+ *
+ * El conector entre etapas se deriva del tamaño del nodo
+ * (`--kf-status-node-size`, default `2.125rem`) y de la separación del
+ * encabezado: cambiar el tamaño del nodo mueve la línea con él.
+ *
+ *   <kf-milestone-timeline
+ *     [groups]="stages()"
+ *     [(expandedIds)]="expanded"
+ *     nextItemId="stage2-docs"
+ *     ariaLabel="Avance de la entrega"
+ *     [labels]="{ heading: 'Progress', expandAll: 'Expand all' }"
+ *   />
+ */
+declare class MilestoneTimeline {
+    private readonly host;
+    private readonly instanceId;
+    readonly groups: _angular_core.InputSignal<readonly MilestoneGroup[]>;
+    /** Ids de las etapas expandidas, two-way: `[(expandedIds)]`. El padre controla el estado inicial. */
+    readonly expandedIds: _angular_core.ModelSignal<readonly string[]>;
+    /** Id del hito que se destaca como el siguiente a completar. */
+    readonly nextItemId: _angular_core.InputSignal<string | undefined>;
+    /** Textos; los que no se pasen usan el español por defecto. */
+    readonly labels: _angular_core.InputSignal<Partial<MilestoneTimelineLabels>>;
+    /** Nombre accesible de la lista de etapas. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Nivel (2-6) del título "Avance por etapa", para respetar el esquema de títulos de la página. */
+    readonly headingLevel: _angular_core.InputSignal<2 | 3 | 4 | 5 | 6>;
+    protected readonly text: _angular_core.Signal<MilestoneTimelineLabels>;
+    protected readonly rows: _angular_core.Signal<{
+        group: MilestoneGroup;
+        main: MilestoneItem[];
+        exceptions: MilestoneItem[];
+        happened: MilestoneItem[];
+        expandable: boolean;
+        meta: string;
+    }[]>;
+    private readonly expandableIds;
+    protected readonly hasExpandable: _angular_core.Signal<boolean>;
+    protected readonly allExpanded: _angular_core.Signal<boolean>;
+    protected isExpanded(groupId: string): boolean;
+    protected headId(groupId: string): string;
+    protected panelId(groupId: string): string;
+    protected itemStatus(item: MilestoneItem): 'done' | 'pending';
+    protected toggle(groupId: string): void;
+    protected toggleAll(): void;
+    /** Lleva el foco al encabezado de una etapa expandible; devuelve el elemento, o `null` si no existe o no es expandible. */
+    focusGroup(groupId: string): HTMLElement | null;
+    private metaOf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MilestoneTimeline, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MilestoneTimeline, "kf-milestone-timeline", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "nextItemId": { "alias": "nextItemId"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, { "expandedIds": "expandedIdsChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1974,6 +3073,27 @@ declare class MetricCard {
  *
  *   <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
  *   <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
+ *
+ * ## Modal de listado (alto acotado, filtros fijos)
+ * Para un diálogo con mucho contenido (ej. elegir un ítem entre cientos):
+ * - `maxHeight` (ej. `"85vh"`) acota el panel; solo `.kf-modal__body` se
+ *   desplaza, el encabezado, la zona `[kf-modal-toolbar]` y el footer
+ *   quedan fijos.
+ * - `[kf-modal-toolbar]`: zona FIJA entre el encabezado y el cuerpo, para
+ *   buscador y filtros.
+ * - `[kf-modal-meta]`: dato corto junto al título (ej. "12 de 86").
+ * - `fullscreenOnMobile`: hasta 640px de viewport ocupa toda la pantalla
+ *   (`100dvh`, sin radio).
+ * - `initialFocus`: selector CSS del elemento que recibe el foco al abrir
+ *   (si apunta a un contenedor, se enfoca su primer control). Sin él, el
+ *   `<dialog>` nativo decide (`autofocus` o el primer control).
+ *
+ *   <kf-modal [(open)]="open" title="Cambiar cotización" width="1040px"
+ *             maxHeight="85vh" fullscreenOnMobile initialFocus=".search">
+ *     <span kf-modal-meta aria-live="polite">12 de 86</span>
+ *     <div kf-modal-toolbar><kf-input class="search" … /></div>
+ *     <ul>…</ul>
+ *   </kf-modal>
  */
 declare class Modal {
     readonly title: _angular_core.InputSignal<string>;
@@ -1986,11 +3106,26 @@ declare class Modal {
      *  más, ej. `width="720px"` — sigue topeado por `100vw` en pantallas
      *  angostas, mismo `min()` de siempre. */
     readonly width: _angular_core.InputSignal<string | null>;
+    /** Alto máximo del panel (ej. `"85vh"`); con valor, solo el cuerpo se
+     *  desplaza. Sin valor (default) el panel crece con su contenido. */
+    readonly maxHeight: _angular_core.InputSignal<string | null>;
+    /** Hasta 640px de viewport, ocupa toda la pantalla (100dvh, sin radio). */
+    readonly fullscreenOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Selector CSS (dentro del panel) del elemento a enfocar al abrir. */
+    readonly initialFocus: _angular_core.InputSignal<string | null>;
     protected readonly titleId: string;
     private readonly dialog;
+    private readonly panel;
     private readonly document;
     private readonly overlayContainer;
     constructor();
+    /**
+     * Enfoca `initialFocus` DESPUÉS de `showModal()` (que ya movió el foco al
+     * primer control): un elemento dentro de un `<dialog>` cerrado no se puede
+     * enfocar. Si el selector apunta a un host (ej. `kf-input`), se enfoca su
+     * primer control interno.
+     */
+    private focusInitial;
     /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
     protected onCancel(event: Event): void;
     /**
@@ -2004,7 +3139,7 @@ declare class Modal {
      */
     protected onHostClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Modal, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "kf-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "kf-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fullscreenOnMobile": { "alias": "fullscreenOnMobile"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-modal-meta]", "[kf-modal-toolbar]", "*", "[footer]"], true, never>;
 }
 
 /** Color de la franja izquierda y del fondo. */
@@ -2026,6 +3161,84 @@ declare class NoteBlock {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NoteBlock, "kf-note-block", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "signature": { "alias": "signature"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Opción de `kf-option-list`. `count` se muestra alineado a la derecha. */
+interface OptionListOption {
+    value: string;
+    label: string;
+    count?: number;
+}
+/**
+ * Lista vertical de opciones de UNA sola selección para paneles (ej. las
+ * secciones "Estado", "Ordenar por" y "Vista" de un panel de filtros): una
+ * fila de al menos 44px por opción, contador opcional a la derecha y la
+ * opción elegida resaltada con `--kf-color-primary-soft`.
+ *
+ * Es la contraparte en panel de `kf-filter-chips`: misma función (filtrar u
+ * ordenar lo que se muestra) cuando no hay ancho para una fila de chips. No
+ * es `kf-selectable-card-group`: aquel responde una pregunta de un flujo
+ * ("¿con qué método pagas?") con affordance de radio y cards grandes; esta
+ * lista ajusta una vista, con filas densas y contador.
+ *
+ * Semántica: `role="radiogroup"` + `role="radio"` con `aria-checked`, no
+ * botones con `aria-pressed`. Las opciones son mutuamente excluyentes (eso
+ * es un radio; `aria-pressed` describe toggles independientes), el lector
+ * de pantalla anuncia la posición ("2 de 4") y cada grupo es UNA sola
+ * parada de Tab: un panel con tres secciones se recorre con 3 Tabs en vez
+ * de uno por opción. Dentro del grupo, flechas arriba/abajo y Home/End
+ * mueven el foco y seleccionan (`handleArrowKeyNavigation`, mismo helper que
+ * `kf-tabs`/`kf-selectable-card-group`).
+ *
+ * La opción elegida lleva además un check (no solo color), para que el
+ * estado no dependa de distinguir el tinte `primary-soft` (WCAG 1.4.1).
+ *
+ * El `@for` hace `track` por índice: cuando el padre re-renderiza (ej. los
+ * contadores cambian al elegir), los botones existentes se reutilizan y el
+ * foco no se pierde. Por índice y no por `value` para no fallar (NG0955)
+ * si dos opciones repiten `value`; aun así los values deben ser únicos:
+ * con repetidos, ambas filas se marcan elegidas.
+ *
+ * `label` dibuja el título de la sección (chico, en mayúsculas) y nombra el
+ * grupo vía `aria-labelledby`; sin título visible, pasar `ariaLabel`.
+ *
+ *   <kf-option-list label="Estado"
+ *                   [options]="[{ value: '', label: 'Todas', count: 12 },
+ *                               { value: 'pending', label: 'Pendientes', count: 3 }]"
+ *                   [value]="status()"
+ *                   (valueChange)="status.set($event)" />
+ */
+declare class OptionList {
+    readonly options: _angular_core.InputSignal<(string | OptionListOption)[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    /** Título visible de la sección; nombra el grupo. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible del grupo cuando no hay `label` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    private readonly instanceId;
+    protected readonly labelId: string;
+    /**
+     * Prefijo de id de cada opción — único por instancia (dos listas con los
+     * mismos values no colisionan). El id termina en el ÍNDICE, no en el
+     * value: un value con espacios u otros caracteres daría un id inválido.
+     */
+    protected readonly optionIdPrefix: string;
+    readonly normalizedOptions: _angular_core.Signal<OptionListOption[]>;
+    /**
+     * Opción que recibe `tabindex="0"`: la seleccionada o, si ninguna lo
+     * está, la primera — el grupo siempre debe ser alcanzable con Tab.
+     */
+    protected readonly tabStopValue: _angular_core.Signal<string>;
+    select(value: string): void;
+    /**
+     * `handleArrowKeyNavigation` ubica el botón destino por `idPrefix + value`;
+     * como los ids usan el índice, se le pasa la lista con el índice como
+     * value y se traduce de vuelta al value real al seleccionar.
+     */
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OptionList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OptionList, "kf-option-list", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
 type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
 type TextVariant = 'title-xxl' | 'title-xl' | 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption' | 'overline' | 'overline-strong';
 type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
@@ -2217,6 +3430,140 @@ declare class Panel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
 
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Popover de contenido enriquecido anclado a un elemento — la contraparte de
+ * `kfTooltip` para cuando el texto plano no alcanza (varias líneas, énfasis,
+ * un desglose, enlaces). Mismo mecanismo de `@angular/cdk/overlay`. El host
+ * sigue siendo el elemento que recibe el foco: la directiva no lo hace
+ * focusable, así que va sobre un `<button>`, un `<a>` o un elemento con
+ * `tabindex="0"`.
+ *
+ *   <button [kfPopover]="detail" kfPopoverPlacement="top">Etapa</button>
+ *   <ng-template #detail><strong>Recepción</strong><p>Completada el 12/05.</p></ng-template>
+ *
+ * Apertura: puntero (hover, tras `kfPopoverShowDelay` ms; NO se abre con puntero
+ * táctil) y foco de teclado (al instante, solo si el foco es visible: un
+ * clic con el mouse no lo abre). Cierre: Escape (descarta el panel hasta que
+ * el puntero y el foco salgan y vuelvan), salida del puntero tras
+ * `kfPopoverHideDelay` ms, pérdida de foco, scroll de cualquier contenedor y
+ * redimensionado de la ventana. El panel se reposiciona dentro del viewport
+ * (invierte el lado si no cabe).
+ *
+ * Con `kfPopoverInteractive`, el puntero puede entrar al panel sin cerrarlo y
+ * el panel es un `dialog` no modal: Tab desde el anfitrión entra al primer
+ * control del panel y Mayús+Tab desde ese control vuelve al anfitrión. Sin
+ * `kfPopoverInteractive` (default), el panel es un `tooltip` que no captura
+ * el puntero y no debe contener controles.
+ *
+ * Si el anfitrión no es interactivo pero vive dentro de un control (un botón,
+ * un enlace, un elemento con `tabindex`), los eventos de puntero, foco y
+ * teclado se escuchan en ese control y el panel se ancla al anfitrión. Es el
+ * caso de un indicador dentro de una celda interactiva de `kf-data-table`:
+ *
+ *   <ng-template #stageCell let-row>
+ *     <span [kfPopover]="detail"><kf-status-mark [status]="row.status" /></span>
+ *   </ng-template>
+ *
+ * Accesibilidad: mientras está abierto, el elemento que recibe el foco
+ * referencia el panel con `aria-describedby` (se conserva cualquier valor
+ * previo).
+ */
+declare class PopoverDirective implements OnDestroy {
+    /** Contenido del popover (un `ng-template`). `null`/`undefined` = no se abre. */
+    readonly kfPopover: _angular_core.InputSignal<TemplateRef<unknown> | null | undefined>;
+    /** Lado preferido; si no cabe en el viewport, se invierte. Default `bottom`. */
+    readonly kfPopoverPlacement: _angular_core.InputSignal<PopoverPlacement>;
+    /** Retardo (ms) antes de abrir con el puntero. El foco de teclado abre sin retardo. */
+    readonly kfPopoverShowDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Retardo (ms) antes de cerrar al salir el puntero. */
+    readonly kfPopoverHideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Desactiva el popover (y lo cierra si estaba abierto). */
+    readonly kfPopoverDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Permite que el puntero entre al panel sin cerrarlo y que el teclado llegue a sus controles. */
+    readonly kfPopoverInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre accesible del panel cuando es `interactive` (rol `dialog`). */
+    readonly kfPopoverLabel: _angular_core.InputSignal<string | null>;
+    /** Emite `true` al abrirse y `false` al cerrarse. */
+    readonly kfPopoverOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly host;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly panelId;
+    private readonly openState;
+    /** `true` mientras el panel está abierto. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /**
+     * Elemento que recibe los eventos de puntero, foco y teclado: el propio
+     * anfitrión o, si este no es interactivo pero vive dentro de un control
+     * (botón, enlace, `tabindex`), ese control. `aria-describedby` va en él.
+     */
+    private trigger;
+    private overlayRef;
+    private panelElement;
+    private showTimer;
+    private hideTimer;
+    private openedAt;
+    private teardownGlobalListeners;
+    private destroyed;
+    private pointerOnHost;
+    private pointerOnPanel;
+    private focusOnHost;
+    private focusOnPanel;
+    /** Escape lo descartó: no reabre hasta que puntero y foco hayan salido. */
+    private dismissed;
+    constructor();
+    ngOnDestroy(): void;
+    /** Cierra el panel de inmediato, sin retardo. */
+    close(): void;
+    private readonly onHostPointerEnter;
+    private readonly onHostPointerLeave;
+    private readonly onHostFocusIn;
+    private readonly onHostFocusOut;
+    private readonly onHostKeydown;
+    private get wanted();
+    /** Abre o cierra según los cuatro orígenes (puntero/foco × anfitrión/panel). */
+    private reevaluate;
+    private scheduleOpen;
+    private scheduleClose;
+    private open;
+    private dispose;
+    private onPanelFocusOut;
+    /** Mayús+Tab desde el primer control del panel devuelve el foco al anfitrión. */
+    private readonly onPanelKeydown;
+    private focusHost;
+    /**
+     * Escape, scroll y resize mientras el panel está abierto. En fase de captura
+     * y sobre `document`: `scroll` no burbujea (hay que capturarlo para ver el
+     * de cualquier contenedor) y Escape debe cerrar primero el popover sin
+     * llegar al modal o drawer que lo contenga.
+     */
+    private listenGlobal;
+    private resolveTrigger;
+    /** Foco de teclado (`:focus-visible`); sin soporte del selector, se asume teclado. */
+    private isKeyboardFocus;
+    private addDescribedBy;
+    private removeDescribedBy;
+    private describedByTokens;
+    private clearShowTimer;
+    private clearHideTimer;
+    private clearTimers;
+    /**
+     * Posiciones en orden de preferencia: el lado pedido (centrado, luego
+     * alineado al inicio y al final del anfitrión), el lado opuesto con las
+     * mismas tres alineaciones y, por último, los dos lados perpendiculares.
+     * Así un anfitrión pegado a una esquina encuentra una posición que cabe
+     * entera en vez de depender solo del empuje al viewport.
+     */
+    private positionsFor;
+    private positionFor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[kfPopover]", ["kfPopover"], { "kfPopover": { "alias": "kfPopover"; "required": true; "isSignal": true; }; "kfPopoverPlacement": { "alias": "kfPopoverPlacement"; "required": false; "isSignal": true; }; "kfPopoverShowDelay": { "alias": "kfPopoverShowDelay"; "required": false; "isSignal": true; }; "kfPopoverHideDelay": { "alias": "kfPopoverHideDelay"; "required": false; "isSignal": true; }; "kfPopoverDisabled": { "alias": "kfPopoverDisabled"; "required": false; "isSignal": true; }; "kfPopoverInteractive": { "alias": "kfPopoverInteractive"; "required": false; "isSignal": true; }; "kfPopoverLabel": { "alias": "kfPopoverLabel"; "required": false; "isSignal": true; }; }, { "kfPopoverOpenChange": "kfPopoverOpenChange"; }, never, never, true, never>;
+}
+
 /** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
  * usa en el drawer mobile (columna, ver template) — el `<nav>` horizontal de
  * escritorio se mantiene solo texto, sin ícono ni chevron. */
@@ -2351,9 +3698,12 @@ declare class PortalHeader {
  * que no aplican a un valor de progreso): `neutral` es el color de marca
  * por defecto (sin implicar buen/mal estado), `primary` es el color
  * primario para un avance de proceso (ej. una carga), y `ok`/`warn`/`error`
- * sí comunican severidad. La librería no conoce el dominio que produce ese
+ * sí comunican severidad. `purple` es el acento morado de marca, igual al tono
+ * `purple` de `kf-stat-card`. La librería no conoce el dominio que produce ese
  * valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
-type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error';
+type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error' | 'purple';
+/** Grosor de la pista: `sm` 4px (el histórico), `md` 8px, `lg` 12px. */
+type ProgressSize = 'sm' | 'md' | 'lg';
 /**
  * Barra de progreso de un solo valor (0-100%) con color por severidad —
  * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
@@ -2364,16 +3714,24 @@ type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error';
  *
  * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
  * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
- * ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
+ * ancho de la barra. `size` cambia el grosor de la pista (`sm` 4px, `md` 8px,
+ * `lg` 12px; sin él, 4px como siempre); el `role="progressbar"` y sus valores
+ * accesibles no cambian. `label` es texto libre opcional sobre la barra (ej.
  * "80%"); sin él, no se renderiza ningún texto, solo la barra.
  */
 declare class Progress {
     readonly value: _angular_core.InputSignal<number>;
     readonly tone: _angular_core.InputSignal<ProgressTone>;
+    /** Grosor de la pista. Default `sm` (4px). */
+    readonly size: _angular_core.InputSignal<ProgressSize>;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible de la barra (`aria-label`). Sin él, el `progressbar`
+     * queda sin nombre: dalo siempre que el contexto no lo nombre ya (por
+     * ejemplo con un `label` visible asociado). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     protected readonly clampedValue: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -2632,12 +3990,16 @@ declare class Segmented {
  * Opción en forma de objeto. `tag` se muestra como `kf-badge` a la derecha
  * del label (en el panel y en el trigger) y `detail` como línea secundaria
  * atenuada debajo, solo en el panel. Ambos entran en la búsqueda.
+ * `shortLabel` reemplaza al label SOLO en el trigger (ej. panel "Más
+ * recientes primero", trigger "Más recientes") — para triggers compactos
+ * donde el label completo se truncaría.
  */
 interface SelectOption {
     value: string;
     label: string;
     tag?: string;
     detail?: string;
+    shortLabel?: string;
 }
 /**
  * Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
@@ -2667,6 +4029,25 @@ interface SelectOption {
  * layouts flex/grid donde el ancho fijo de `md` no encaja.
  *
  *   <kf-select width="full" [options]="branches" [value]="branch()" (valueChange)="..." />
+ *
+ * Control de orden de una barra de herramientas (ícono + valor + caret, sin
+ * label visible): `icon` agrega un glifo `sm` a la izquierda del valor,
+ * `ariaLabel` da el nombre accesible (el trigger se anuncia como
+ * `"<ariaLabel>: <valor actual>"`), `panelTitle` agrega un título chico en
+ * mayúsculas dentro del panel (decorativo, `aria-hidden`) y
+ * `panelWidth="content"` deja que el panel crezca hasta el ancho de sus
+ * opciones en vez de truncarlas al ancho del trigger compacto.
+ *
+ *   <kf-select variant="compact" icon="sort" ariaLabel="Ordenar por"
+ *              panelTitle="Ordenar por" panelWidth="content"
+ *              [options]="sortOptions" [value]="sort()" (valueChange)="sort.set($event)" />
+ *
+ * Teclado (patrón listbox de WAI-ARIA): ArrowDown/ArrowUp sobre el trigger
+ * cerrado lo abren; al abrir, el foco pasa a la opción seleccionada (o al
+ * 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"`).
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
@@ -2694,6 +4075,26 @@ declare class Select {
      */
     readonly searchable: _angular_core.InputSignal<boolean | undefined>;
     readonly searchThreshold: _angular_core.InputSignal<number>;
+    /**
+     * Nombre accesible del control cuando no hay `label` visible (ej. "Ordenar
+     * por"). El trigger se anuncia como `"<ariaLabel>: <valor visible>"` (el
+     * mismo texto que muestra el trigger, `shortLabel` si la opción lo trae),
+     * así el nombre contiene el texto visible (WCAG 2.5.3) y además dice qué se
+     * está eligiendo. Ignorado si hay `label`: un `aria-label` pisaría al
+     * `<label for>` visible.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Ícono `sm` a la izquierda del valor en el trigger (ej. `'sort'`). */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** Título chico en mayúsculas dentro del panel, sobre las opciones. Decorativo (`aria-hidden`): el nombre del listbox ya lo da `ariaLabel`/`label`. */
+    readonly panelTitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * `'trigger'` (default): el panel mide lo mismo que el trigger.
+     * `'content'`: el trigger es el ancho mínimo y el panel crece hasta el
+     * ancho de la opción más larga — para triggers compactos cuyas opciones
+     * son más largas que el valor resumido.
+     */
+    readonly panelWidth: _angular_core.InputSignal<"content" | "trigger">;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     private readonly instanceId;
     readonly triggerId: string;
@@ -2705,22 +4106,68 @@ declare class Select {
     /** Resolves `string | SelectOption` entries into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
+    /** Texto que muestra el trigger: `shortLabel` o `label` de la opción elegida, o el placeholder. */
+    readonly triggerText: _angular_core.Signal<string>;
+    /**
+     * `aria-label` del trigger: solo con `ariaLabel` y SIN `label` visible. Un
+     * `aria-label` tiene prioridad sobre el `<label for>` en el cálculo del
+     * nombre accesible, así que con label visible no se emite.
+     */
+    readonly triggerAriaLabel: _angular_core.Signal<string | null>;
     readonly showSearch: _angular_core.Signal<boolean>;
     /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
     readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
     private readonly triggerRef;
     private readonly panelTemplate;
     private readonly searchInputRef;
+    private readonly panelRef;
+    private readonly document;
     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;
+    /**
+     * Cierra el panel. `restoreFocus` (default: solo si el foco está dentro
+     * del panel) devuelve el foco al trigger ANTES de desmontar el panel —
+     * si no, el elemento enfocado desaparece y el foco cae al `<body>`. Un
+     * 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). */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    /**
+     * Teclado con el foco en una opción del panel. Las flechas parten SIEMPRE
+     * de la opción que recibió el evento (`index`), no de `activeIndex`: el
+     * `mouseenter` mueve `activeIndex` sin mover el foco, y sin esto, con el
+     * 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;
+    /** Teclas de salida del buscador: Escape y Tab, igual que desde una opción. */
+    onSearchKeydown(event: KeyboardEvent): void;
+    /**
+     * Escape cierra y devuelve el foco al trigger; `preventDefault` le avisa a
+     * un contenedor que también escucha Escape (ej. `kf-drawer`) que la tecla
+     * ya se consumió. Tab cierra y mueve el foco al trigger SIN
+     * `preventDefault`: la tabulación nativa continúa desde el trigger, así
+     * Tab/Shift+Tab salen del panel hacia el control siguiente/anterior.
+     */
+    private handleExitKeys;
+    private focusOption;
+    private isFocusInPanel;
+    /** Id de cada opción, para `aria-activedescendant` del buscador. */
+    optionId(index: number): string;
     /** Nombre accesible explícito solo para opciones con `tag`/`detail`, para separar las partes al leerlas. */
     optionAriaLabel(option: SelectOption): string | null;
     select(option: SelectOption): void;
@@ -2732,9 +4179,16 @@ declare class Select {
      * cuando se combina con un buscador que puede reducir la lista a 1 opción.
      */
     moveActive(delta: number): void;
+    /**
+     * Con el foco en el buscador, la opción activa se marca con
+     * `aria-activedescendant` pero no recibe foco, así que el navegador no la
+     * desplaza a la vista: se hace a mano. (`scrollIntoView` puede no existir
+     * en entornos sin layout.)
+     */
+    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; }; }, { "valueChange": "valueChange"; }, never, never, true, 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>;
 }
 
 interface SelectableCardOption {
@@ -2921,7 +4375,7 @@ declare class Spinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "kf-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onDark": { "alias": "onDark"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
+type StatCardTone = 'primary' | 'success' | 'error' | 'purple' | 'warn' | 'info' | 'neutral';
 /**
  * Card de estadística horizontal: ícono circular grande a la izquierda,
  * valor + label + nota apilados al centro, chevron opcional al final si es
@@ -2930,6 +4384,31 @@ type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
  * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
  *
  *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
+ *
+ * Extensiones opcionales (la card sin ellas se ve y se comporta como siempre):
+ * - `tone`: además de `primary|success|error|purple`, `warn`, `info` y `neutral`.
+ * - `bar` (0-100): barra de progreso accesible (`kf-progress`, `role="progressbar"`
+ *   con `aria-valuenow`/`min`/`max` y el `label` como nombre) bajo la nota. Se
+ *   acota a [0, 100]; `null`/`undefined` no la dibuja. Es un refuerzo visual:
+ *   el valor exacto conviene darlo también en texto (`hint`), porque el relleno
+ *   de algunos tonos de `kf-progress` tiene poco contraste con su pista.
+ * - `hint`: texto secundario bajo la barra (ej. "12 de 20 completadas").
+ * - `pressed` (`boolean | null`): con `clickable`, la card es un botón de
+ *   alternancia (`aria-pressed`), útil como filtro. `null` (default) = no
+ *   aplica y no emite el atributo. Sin `clickable` no tiene efecto.
+ *
+ *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
+ *     clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
+ *
+ * `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
+ * en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
+ * y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
+ * nota, barra y `hint` —, así que al llegar los datos no hay salto de
+ * layout. Pasa los mismos inputs que usarás cargada para que el esqueleto
+ * reserve las mismas líneas. Marca la card con `aria-busy="true"`, no es
+ * clicable ni expone su texto a lectores de pantalla mientras carga.
+ *
+ *   <kf-stat-card icon="clock" value="7" label="Por vencer" note="Esta semana" [loading]="isLoading()" />
  */
 declare class StatCard {
     readonly icon: _angular_core.InputSignal<IconName>;
@@ -2937,11 +4416,24 @@ declare class StatCard {
     readonly value: _angular_core.InputSignal<string | number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly note: _angular_core.InputSignal<string | undefined>;
+    /** Avance 0-100 (barra de progreso accesible); `null`/`undefined` = sin barra. */
+    readonly bar: _angular_core.InputSignal<number | null | undefined>;
+    /** Texto secundario bajo la barra (o bajo la nota si no hay barra). */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Estado de alternancia (`aria-pressed`) cuando la card es `clickable`.
+     * `null` (default) = no aplica: el atributo no se emite.
+     */
+    readonly pressed: _angular_core.InputSignal<boolean | null>;
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
     readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    protected readonly barTone: _angular_core.Signal<ProgressTone>;
+    protected readonly hasBar: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
 /** Vocabulario semántico único de tono, compartido con `TextTone`. */
@@ -2999,6 +4491,57 @@ declare class StatTile {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["[valueContent]"], true, never>;
 }
 
+/**
+ * Marca pequeña de estado para leyendas y listas de hitos: círculo relleno
+ * con check (completado), anillo con punto (en curso) o anillo vacío
+ * (pendiente). La forma comunica el estado y el color solo lo refuerza.
+ * `exception` la pinta con borde discontinuo y tono de aviso.
+ *
+ * Es decorativa por defecto (`aria-hidden`): el texto del estado va en el
+ * contexto que la usa. Para usarla suelta (ej. una leyenda sin texto al lado),
+ * `label` la expone como imagen con ese nombre.
+ *
+ *   <kf-status-mark status="done" small />
+ *   <kf-status-mark status="current" label="En curso" />
+ *
+ * Tamaño: variables CSS `--kf-status-mark-size` y `--kf-status-mark-size-sm`.
+ */
+declare class StatusMark {
+    readonly status: _angular_core.InputSignal<ProgressStatus>;
+    /** Versión reducida, para listas de hitos. */
+    readonly small: _angular_core.InputSignal<boolean>;
+    /** Hito de excepción: borde discontinuo y tono de aviso. */
+    readonly exception: _angular_core.InputSignal<boolean>;
+    /** Nombre accesible; sin él la marca es decorativa. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusMark, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusMark, "kf-status-mark", never, { "status": { "alias": "status"; "required": true; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "exception": { "alias": "exception"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Nodo circular de una etapa: ícono de la etapa más una insignia de estado.
+ * La forma comunica el estado (relleno con check, anillo con punto, anillo
+ * vacío) y el color solo lo refuerza.
+ *
+ * Es decorativo por defecto (`aria-hidden`): el texto del estado debe estar en
+ * el contexto que lo usa. Para usarlo suelto, `label` lo expone como imagen
+ * con ese nombre.
+ *
+ *   <kf-status-node status="current" icon="truck" />
+ *   <kf-status-node status="done" icon="check" size="sm" label="Entrega completada" />
+ *
+ * Tamaño: variables CSS `--kf-status-node-size` y `--kf-status-node-size-sm`.
+ */
+declare class StatusNode {
+    readonly status: _angular_core.InputSignal<ProgressStatus>;
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** Nombre accesible; sin él el nodo es decorativo. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusNode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusNode, "kf-status-node", never, { "status": { "alias": "status"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
  * de estado únicos y prominentes (ej. "ESTADO TÉCNICO"). El fondo es siempre
@@ -3272,7 +4815,12 @@ interface ToastAction {
 interface ToastOptions {
     /** Color tone. Defaults to `'info'`. */
     tone?: ToastTone;
-    /** Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. Defaults to `2800`. */
+    /**
+     * Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. When
+     * omitted it depends on the tone (see {@link TOAST_DEFAULT_DURATION_MS}):
+     * `2800` for `success`/`info`, `5000` for `warning`, `8000` for `error`. An
+     * explicit value always wins over the per-tone default.
+     */
     duration?: number;
     /** Botón de acción opcional, ej. ir al registro sobre el que avisa el toast. */
     action?: ToastAction;
@@ -3292,6 +4840,13 @@ interface ToastState {
     leaving: boolean;
     action?: ToastAction;
 }
+/**
+ * Auto-dismiss time per tone when the caller doesn't pass `duration`. Errors and
+ * warnings stay longer than confirmations: they carry something to read and
+ * act on, while a success only has to be noticed. `success`/`info` keep the
+ * historical 2800ms. `loading` never auto-dismisses.
+ */
+declare const TOAST_DEFAULT_DURATION_MS: Readonly<Record<Exclude<ToastTone, 'loading'>, number>>;
 /** What's currently holding the auto-dismiss timer paused. Tracked as a set so hover and
  * focus can overlap (e.g. mouse leaves while focus is still on the action button) without
  * resuming the timer early. */
@@ -3300,6 +4855,11 @@ type ToastPauseSource = 'hover' | 'focus';
  * Shows one toast at a time — a new `show()` call replaces whatever is
  * currently up (this mirrors a global status line, not a notification stack).
  *
+ * Duration by tone (when `duration` isn't passed): `success`/`info` 2800ms,
+ * `warning` 5000ms, `error` 8000ms (`TOAST_DEFAULT_DURATION_MS`); an explicit
+ * `duration` always wins. The countdown pauses while the pointer or focus is
+ * on the toast. Error toasts also get a larger, always-opaque close button.
+ *
  * Angular has no global function that can mount UI on its own, so the
  * imperative `showToast(...)` of the reference design system becomes a
  * root-provided service holding signal state: `ToastService.show(...)` sets
@@ -3452,17 +5012,31 @@ type ViewToggleOption = 'table' | 'cards';
  * navegación con flechas izquierda/derecha, igual que un <input type="radio">
  * nativo agrupado.
  *
+ * Con `iconOnly` cada opción muestra solo su ícono (`list` / `grid`); el
+ * nombre accesible y el tooltip salen de `tableLabel` / `cardsLabel`. El
+ * objetivo táctil mide 32px en escritorio y 44px en pantallas táctiles o de
+ * hasta 640px.
+ *
  *   <kf-view-toggle [view]="view" (viewChange)="view = $event" />
+ *   <kf-view-toggle iconOnly [view]="view" (viewChange)="view = $event" />
  */
 declare class ViewToggle {
     readonly view: _angular_core.InputSignal<ViewToggleOption>;
+    /** Solo íconos (el rótulo queda como nombre accesible y `title`). */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Rótulo de la opción de tabla. */
+    readonly tableLabel: _angular_core.InputSignal<string>;
+    /** Rótulo de la opción de tarjetas. */
+    readonly cardsLabel: _angular_core.InputSignal<string>;
+    /** Nombre accesible del grupo. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly viewChange: _angular_core.OutputEmitterRef<ViewToggleOption>;
     select(next: ViewToggleOption): void;
     /** Navegación estándar de ARIA radiogroup: flechas mueven foco y seleccionan. */
     onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
+    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, Link, MetricCard, Modal, MultiSelect, NoteBlock, 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 };
-export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
+export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };