@kaufmann-lab/ui 0.1.22 → 0.1.24

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

@@ -261,7 +261,7 @@ declare class Alert {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
 }
 
-type AlertRowTone = 'warn' | 'error';
+type AlertRowTone = 'warn' | 'error' | 'neutral';
 /**
  * Fila clickeable de una lista de pendientes/alertas: ícono circular con
  * tono semántico, texto de una línea, chevron al final. Pensada para
@@ -269,14 +269,43 @@ type AlertRowTone = 'warn' | 'error';
  * dashboard) — no incluye el contenedor en sí.
  *
  *   <kf-alert-row icon="file" tone="warn" text="2 cotizaciones esperan tu aprobación" (rowClick)="onNavigate('cotizaciones')" />
+ *
+ * Extensiones opcionales (la fila sin ellas se ve y se comporta como siempre):
+ * - `tone="neutral"`: ícono gris, para una fila sin urgencia ni alerta.
+ * - `value`: cifra alineada a la derecha, antes del chevron (ej. el conteo de
+ *   pendientes). Admite `'—'` cuando no hay dato; en ese caso conviene pasar
+ *   `valueLabel` con el texto que debe leer un lector de pantalla
+ *   («Sin datos»), porque la raya sola no dice nada.
+ * - `valueLabel`: texto solo para lectores de pantalla que reemplaza a `value`
+ *   en el árbol de accesibilidad; visualmente se sigue viendo `value`.
+ * - `tag`: etiqueta neutra pequeña junto al texto (ej. «Próximamente»).
+ * - `disabled`: la fila no es accionable — no emite `rowClick`, no entra en el
+ *   orden de tabulación, no cambia al pasar el mouse, su chevron se oculta (conserva el
+ *   espacio para alinear las cifras con las filas activas) y el
+ *   texto y la cifra se atenúan (sin bajar el contraste de lectura). Expone
+ *   `disabled` y `aria-disabled="true"`, así que un lector de pantalla la
+ *   anuncia como no disponible en vez de omitirla.
+ *
+ *   <kf-alert-row icon="file" tone="neutral" text="Documentos por firmar" tag="Próximamente" value="—" valueLabel="Sin datos todavía" disabled />
  */
 declare class AlertRow {
     readonly icon: _angular_core.InputSignal<IconName>;
     readonly tone: _angular_core.InputSignal<AlertRowTone>;
     readonly text: _angular_core.InputSignal<string>;
+    /** Cifra o texto corto alineado a la derecha (ej. `3`, `'—'`). */
+    readonly value: _angular_core.InputSignal<string | number | undefined>;
+    /** Texto solo para lectores de pantalla que reemplaza a `value` en el árbol de accesibilidad. */
+    readonly valueLabel: _angular_core.InputSignal<string | undefined>;
+    /** Etiqueta neutra junto al texto (ej. «Próximamente»). */
+    readonly tag: _angular_core.InputSignal<string | undefined>;
+    /** La fila no es accionable: sin clic, sin foco ni hover. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly rowClick: _angular_core.OutputEmitterRef<void>;
+    /** Emite `rowClick` salvo que la fila esté deshabilitada (también ante clics sintéticos). */
+    protected activate(): void;
+    protected hasValue(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
 }
 
 /**
@@ -985,7 +1014,8 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  * el selector, y `pageSizeChange` avisa cuando el usuario lo cambia.
  *
  * Ordenamiento por columna: cada `DataTableColumn` con `sortable: true`
- * vuelve su header clickeable, con el mismo formato `key:direction` que
+ * vuelve su header un botón (Tab, Enter y Espacio) que expone el estado con
+ * `aria-sort` (`ascending`/`descending`/`none`), con el mismo formato `key:direction` que
  * usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
  * consumidor decide si persiste el valor o lo descarta al desmontar):
  *
@@ -1133,6 +1163,16 @@ declare class DataTable<T = unknown> {
     /** Fuerza si la fila entera dispara `rowClick` en la vista de tabla —
      * ver `rowInteractive` para el cálculo automático cuando no se define. */
     readonly rowClickable: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Con `false`, las filas interactivas de la vista de tabla dejan de ser
+     * paradas de Tab (sin `tabindex`): útil cuando la fila es clickeable con el
+     * mouse pero la acción accesible por teclado es un enlace o botón real
+     * dentro de una celda — así una página de N filas no suma N paradas de Tab
+     * sin rol. El clic con mouse sigue emitiendo `rowClick`. Default `true`
+     * (comportamiento histórico). No afecta a las tarjetas, que son
+     * `role="button"`.
+     */
+    readonly rowFocusable: _angular_core.InputSignal<boolean>;
     readonly rowClick: _angular_core.OutputEmitterRef<{
         row: T;
         index: number;
@@ -1229,6 +1269,8 @@ declare class DataTable<T = unknown> {
      * recortadas a la página actual. */
     protected readonly displayedRows: _angular_core.Signal<T[]>;
     protected sortDirectionFor(column: DataTableColumn): 'asc' | 'desc' | null;
+    /** Valor de `aria-sort` del header de una columna ordenable. */
+    protected ariaSortFor(column: DataTableColumn): 'ascending' | 'descending' | 'none';
     /** Ciclo asc → desc → sin orden, disparado al clickear un header `sortable`. */
     protected toggleSort(column: DataTableColumn): void;
     protected goToPage(target: number): void;
@@ -1304,6 +1346,13 @@ declare class DataTable<T = unknown> {
      * consumidor lo necesita.
      */
     readonly rowInteractive: _angular_core.Signal<boolean>;
+    /**
+     * La fila de la vista de tabla es parada de Tab solo si es interactiva,
+     * `rowFocusable` lo permite y NO hay columnas `interactive`: con botones
+     * propios por celda, la fila además de ellos duplicaría las paradas de Tab
+     * (el clic de la fila sigue emitiendo `rowClick` con el mouse).
+     */
+    protected readonly rowTabStop: _angular_core.Signal<boolean>;
     setView(next: DataTableView): void;
     trackRow(row: T, index: number): string | number;
     /** Alineada al final: `align: 'end'` o el histórico `right: true`. */
@@ -1342,7 +1391,7 @@ 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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "showViewToggle": { "alias": "showViewToggle"; "required": false; "isSignal": true; }; "cardMinWidth": { "alias": "cardMinWidth"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "rowFocusable": { "alias": "rowFocusable"; "required": false; "isSignal": true; }; "cellAriaLabel": { "alias": "cellAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "currentRowKey": { "alias": "currentRowKey"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "keepPageOnRowsChange": { "alias": "keepPageOnRowsChange"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "cellClick": "cellClick"; "page": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "view": "viewChange"; }, never, ["[empty]", "[footer]"], true, never>;
 }
 
 /** Forma de contenido que reproduce el preset. */
@@ -1424,6 +1473,12 @@ declare class ContentStateLoading {
  * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
  * mientras carga, porque no hay nada que reintentar todavía.
  *
+ * Anuncios para lectores de pantalla: al cargar con silueta, `loadingLabel`
+ * se anuncia en una región `status` (con `load="spinner"` ya lo anuncia el
+ * propio `kf-spinner`); un error entra como `role="alert"` (interrumpe) y el
+ * estado vacío como `role="status"` (cortés). `icon` dibuja el glifo de
+ * `kf-empty-state` en esos dos estados.
+ *
  *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
  *                     subtitle="Revisá tu conexión e intentá de nuevo.">
  *     <kf-button actions (click)="retry()">Reintentar</kf-button>
@@ -1452,8 +1507,10 @@ declare class ContentState {
     /** 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. */
+    /** Glifo de `empty`/`error` (el mismo input de `kf-empty-state`). Sin valor, no se dibuja ícono. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** Texto de carga: visible al lado del spinner con `load="spinner"` y, en modo
+     * skeleton, texto visualmente oculto con `role="status"` para lectores de pantalla. */
     readonly loadingLabel: _angular_core.InputSignal<string>;
     /** Plantilla propia del esqueleto (reemplaza las tres líneas genéricas). */
     readonly loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
@@ -1463,7 +1520,7 @@ declare class ContentState {
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "loadingPreset": { "alias": "loadingPreset"; "required": false; "isSignal": true; }; }, {}, ["projectedLoading"], ["*", "[actions]"], true, never>;
 }
 
 type ContentViewerType = 'image' | 'video' | 'pdf';
@@ -1523,6 +1580,47 @@ declare class ContentViewer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
 }
 
+/**
+ * Paginador «Anterior / Siguiente» para listas con cursor: no conoce el
+ * número de página, solo si hay una anterior o una siguiente y un resumen ya
+ * armado. Complementa a `kf-pagination`, que exige número de página y total.
+ *
+ * `summary` ("Mostrando 25 de 96") se anuncia en una región `status`. Los
+ * botones usan `aria-disabled` y no `disabled`, para que el foco no se pierda
+ * al llegar a un extremo (un botón `disabled` deja de ser enfocable y el foco
+ * cae al `body`); pulsarlos en ese estado no emite nada.
+ *
+ * Con `pageSizeOptions` agrega el selector "Filas por página"; vacío lo oculta.
+ *
+ *   <kf-cursor-pager summary="Mostrando 25 de 96" [hasPrevious]="!!prev()" [hasNext]="!!next()"
+ *     [pageSizeOptions]="[25, 50, 100]" [pageSize]="size()"
+ *     (previous)="load(prev())" (next)="load(next())" (pageSizeChange)="size.set($event)" />
+ */
+declare class CursorPager {
+    /** Texto anunciado y mostrado a la izquierda, p. ej. «Mostrando 25 de 96». */
+    readonly summary: _angular_core.InputSignal<string>;
+    readonly hasPrevious: _angular_core.InputSignal<boolean>;
+    readonly hasNext: _angular_core.InputSignal<boolean>;
+    /** Opciones del selector de filas por página. Vacío oculta el selector. */
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    readonly pageSize: _angular_core.InputSignal<number | undefined>;
+    /** Nombre accesible de la navegación. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly previous: _angular_core.OutputEmitterRef<void>;
+    readonly next: _angular_core.OutputEmitterRef<void>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    protected readonly sizeOptions: _angular_core.Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    protected readonly sizeValue: _angular_core.Signal<string>;
+    protected onPrevious(): void;
+    protected onNext(): void;
+    protected onPageSize(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CursorPager, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CursorPager, "kf-cursor-pager", never, { "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "hasPrevious": { "alias": "hasPrevious"; "required": false; "isSignal": true; }; "hasNext": { "alias": "hasNext"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "previous": "previous"; "next": "next"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}
+
 /**
  * Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
  * breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
@@ -1742,6 +1840,19 @@ declare class Drawer {
  * de anclaje visual del panel.
  *
  *   <kf-dropdown [(open)]="menuOpen"><kf-dropdown-panel>...</kf-dropdown-panel></kf-dropdown>
+ *
+ * Accesibilidad. Disparador: el primer control enfocable del `anchor` (o del
+ * propio host) recibe `aria-haspopup` (`menu` o `dialog`, según el `role` del
+ * panel), `aria-expanded` y, con el panel abierto, `aria-controls`; un atributo
+ * que el consumidor ya declaró nunca se pisa. Foco: el panel vive en un overlay
+ * al final del `body`, así que al abrir el foco pasa al primer elemento
+ * enfocable del panel (`autoFocus`, default `true`; solo si el foco estaba en
+ * el disparador, para no robarlo cuando algo abre el panel por código), y al
+ * cerrar vuelve al disparador si estaba dentro del panel (Escape, elegir una
+ * acción, aplicar). Un clic afuera no devuelve el foco: ya se fue a donde se
+ * hizo clic. Con `role="menu"` las flechas, Home y End recorren los ítems. Tab
+ * desde el último (o Shift+Tab desde el primero) cierra el panel y continúa la
+ * tabulación desde el disparador.
  */
 declare class Dropdown {
     /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
@@ -1754,11 +1865,20 @@ declare class Dropdown {
      * (ej. el avatar de sesión dentro de `PortalHeader`).
      */
     readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * Mueve el foco al primer elemento enfocable del panel al abrirlo. Poner
+     * `false` si el contenido ya gestiona su propio foco inicial.
+     */
+    readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly panel;
     private readonly overlayService;
     private readonly host;
     private readonly viewContainerRef;
     private readonly destroyRef;
+    private readonly injector;
+    private readonly document;
+    /** Atributos ARIA que este componente puso en el disparador (y por tanto retira él). */
+    private readonly ownedTriggerAttributes;
     private overlayRef;
     /**
      * Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
@@ -1781,6 +1901,21 @@ declare class Dropdown {
      */
     onDocumentEscape(): boolean;
     private attach;
+    /** Flechas/Home/End entre ítems (solo `role="menu"`) y salida con Tab en los extremos. */
+    private onPanelKeydown;
+    private focusFirstInPanel;
+    private focusableIn;
+    private isFocusOnTrigger;
+    /**
+     * Control que abre el panel: el propio `anchor`/host si ya es enfocable, o
+     * su primer descendiente enfocable (ej. el `<button>` dentro de `kf-button`).
+     */
+    private triggerElement;
+    private syncTriggerAria;
+    /** Escribe el atributo solo si no es del consumidor (ausente, o ya puesto por este componente). */
+    private setOwnedAttribute;
+    private removeOwnedAttribute;
+    private releaseTriggerAria;
     /**
      * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
      * ver comentario de la clase) vive FUERA del overlay a propósito: el
@@ -1794,7 +1929,7 @@ declare class Dropdown {
     private detach;
     private getOrCreateOverlayRef;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
 }
 
 type DropdownItemTone = 'neutral' | 'error';
@@ -1822,6 +1957,8 @@ declare class DropdownItem {
 }
 
 type DropdownPanelVariant = 'solid' | 'dark';
+/** Rol del contenedor del panel: `menu` (ítems de acción) o `dialog` (contenido de formulario o informativo). */
+type DropdownPanelRole = 'menu' | 'dialog';
 /**
  * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
  * (`<ng-template>`, capturada vía `TemplateRef`) — `Dropdown` la conecta al
@@ -1837,12 +1974,24 @@ type DropdownPanelVariant = 'solid' | 'dark';
  * reposiciona el panel según dónde entra en el viewport y puede terminar
  * cayendo sobre fondo blanco en vez de sobre el rail oscuro — un color
  * sólido se ve intencional sin importar dónde lo posicione el CDK.
+ *
+ * `role`: `'menu'` (default) cuando el contenido son `kf-dropdown-item`;
+ * `'dialog'` cuando lleva campos de formulario, selects, casillas o texto
+ * libre — un `role="menu"` solo admite ítems de menú como hijos. Un panel
+ * `dialog` necesita nombre: pasar `ariaLabel`.
+ *
+ *   <kf-dropdown-panel role="dialog" ariaLabel="Filtros">…</kf-dropdown-panel>
  */
 declare class DropdownPanel {
     readonly variant: _angular_core.InputSignal<DropdownPanelVariant>;
+    readonly role: _angular_core.InputSignal<DropdownPanelRole>;
+    /** Nombre accesible del panel (obligatorio en la práctica con `role="dialog"`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** `id` del contenedor con el rol; el disparador lo referencia con `aria-controls`. */
+    readonly panelId: string;
     readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Tono del estado. `warn`/`info` solo cambian el chip del ícono. */
@@ -2009,14 +2158,19 @@ declare class Field {
  *
  *   <kf-field-label [for]="inputId">Patente o VIN</kf-field-label>
  *   <kf-field-label [for]="inputId" required>Correo electrónico</kf-field-label>
+ *
+ * `visuallyHidden` deja el texto solo para lectores de pantalla: el `<label
+ * for>` sigue nombrando el control sin ocupar espacio.
  */
 declare class FieldLabel {
     /** `id` del control asociado — se refleja como `for` en el `<label>` interno. */
     readonly for: _angular_core.InputSignal<string | undefined>;
     /** Muestra un asterisco visual indicando que el campo es obligatorio. */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Oculta el texto a la vista pero lo conserva como nombre accesible del control. */
+    readonly visuallyHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "visuallyHidden": { "alias": "visuallyHidden"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Por qué se descartó un archivo: formato fuera de `accept` o más grande que `maxSize`. */
@@ -2475,6 +2629,8 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
     private readonly nativeInput;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Oculta el `label` a la vista y lo deja como nombre accesible (`<label for>`), sin ocultarlo con CSS desde afuera. */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca el label con un asterisco visual y aplica `required` al `<input>`
      * nativo — el atributo HTML ya expone el estado obligatorio a lectores de
      * pantalla (mapeo implícito a `aria-required`), sin necesidad de un
@@ -2575,9 +2731,13 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
      */
     protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "cleared": "cleared"; }, never, never, true, never>;
 }
 
+type ResolvedJourneyStep = JourneyStep & {
+    status: JourneyStepStatus;
+    progressValue: number | null;
+};
 type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
 type JourneyStepperSurface = 'dark' | 'card';
 /**
@@ -2591,32 +2751,71 @@ type JourneyStepperSurface = 'dark' | 'card';
  *   Para cuando cada paso comunica su propio estado puntual.
  */
 type JourneyStepperColorScheme = 'brand' | 'semantic';
+/** `'auto'` elige horizontal o vertical según el ancho del propio componente. */
+type JourneyStepperOrientation = 'horizontal' | 'vertical' | 'auto';
 interface JourneyStep {
     key: string;
     label: string;
     icon: IconName;
-    /** Solo con `orientation="vertical"` — en horizontal el status se calcula desde `currentStep`. */
+    /**
+     * Estado explícito del paso. Si AL MENOS un paso lo define, todos los
+     * estados salen de acá (un paso sin `status` queda `pending`), también en
+     * horizontal y permitiendo varios pasos `current` o estados no
+     * consecutivos. Si ningún paso lo define, horizontal lo deriva de
+     * `currentStep`. Con `orientation="vertical"` siempre se usa el explícito.
+     */
     status?: JourneyStepStatus;
-    /** Texto bajo el label — solo con `orientation="vertical"`. */
+    /** Texto bajo el label, junto al label en horizontal sin `caption` (compatibilidad). */
     date?: string;
+    /**
+     * Texto secundario del paso, distinto de `date` (ej. «16 de 18 completaron»).
+     * Se muestra bajo el label en ambas orientaciones.
+     */
+    caption?: string;
+    /**
+     * Avance 0-100 del paso, como barra fina bajo el texto. Se acota a [0, 100];
+     * un valor no finito no dibuja la barra. Si el paso tiene `caption`, la
+     * barra es decorativa (`aria-hidden`) y el `caption` debe comunicar el avance;
+     * sin `caption` expone `role="progressbar"` con el `label` como nombre.
+     */
+    progress?: number;
+    /**
+     * Texto visible del estado (ej. «Completado», «En curso», «Pendiente»), para
+     * que el estado no dependa solo del color y la forma del punto.
+     */
+    statusLabel?: string;
 }
 /**
  * Progreso de un flujo de N pasos.
  *
- * - `orientation` (`'horizontal'` default | `'vertical'`): horizontal
- *   deriva done/current/pending de `currentStep`; vertical usa
- *   `steps[].status` explícito, con `delayed` como cuarto estado.
+ * - `orientation` (`'horizontal'` default | `'vertical'` | `'auto'`): horizontal
+ *   deriva done/current/pending de `currentStep` (salvo que algún paso defina
+ *   `status`); vertical usa `steps[].status` explícito, con `delayed` como
+ *   cuarto estado. `'auto'` es horizontal cuando el propio componente mide al
+ *   menos `autoBreakpoint` px (820 por defecto) y vertical si no; en vertical,
+ *   con `caption`/`progress`/`statusLabel` y desde 520 px de ancho, el texto de
+ *   cada paso pasa a filas «etiqueta | estado y conteo | barra». En `'auto'`
+ *   los puntos son clickeables solo mientras el layout es horizontal.
  * - `surface` (`'dark'` default | `'card'`): fondo sólido oscuro de marca,
  *   o superficie clara con borde+sombra.
  * - `colorScheme` (`'brand'` default | `'semantic'`): ver `JourneyStepperColorScheme`.
+ * - `ariaLabel`: nombre de la lista de pasos (lectores de pantalla).
+ *
+ * Los pasos se exponen como lista (`role="list"`/`listitem`) y el paso con
+ * `status === 'current'` lleva `aria-current="step"`.
  *
  *   <kf-journey-stepper surface="card" [steps]="steps" [currentStep]="4" (stepClick)="onNavigate($event)" />
  *   <kf-journey-stepper orientation="vertical" [steps]="unitSteps" />
  *   <kf-journey-stepper orientation="vertical" colorScheme="semantic" [steps]="unitStepsWithDelays" />
+ *   <kf-journey-stepper orientation="auto" surface="card" ariaLabel="Avance por etapa" [steps]="stages" />
  */
 declare class JourneyStepper {
     readonly steps: _angular_core.InputSignal<JourneyStep[]>;
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<JourneyStepperOrientation>;
+    /** Ancho mínimo (px) del componente para ser horizontal con `orientation="auto"`. */
+    readonly autoBreakpoint: _angular_core.InputSignal<number>;
+    /** Nombre accesible de la lista de pasos. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly surface: _angular_core.InputSignal<JourneyStepperSurface>;
     readonly colorScheme: _angular_core.InputSignal<JourneyStepperColorScheme>;
     /** Índice del paso actual — solo con `orientation="horizontal"`. */
@@ -2627,15 +2826,26 @@ declare class JourneyStepper {
     private readonly destroyRef;
     /** `true` cuando el contenido desborda el ancho visible — controla el fade de los bordes. */
     protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
+    /** Ancho medido del componente; `null` hasta la primera medición. */
+    private readonly trackWidth;
+    /**
+     * Orientación efectiva: la de `orientation`, o —con `'auto'`— horizontal si el
+     * componente mide al menos `autoBreakpoint` px. Antes de medir (o con ancho
+     * 0) es vertical, que siempre cabe.
+     */
+    protected readonly effectiveOrientation: _angular_core.Signal<"horizontal" | "vertical">;
+    protected readonly vertical: _angular_core.Signal<boolean>;
     protected readonly clickable: _angular_core.Signal<boolean>;
+    /** `true` si algún paso usa `caption`, `progress` o `statusLabel` (layout enriquecido). */
+    protected readonly rich: _angular_core.Signal<boolean>;
     constructor();
     private measureOverflow;
-    protected readonly resolvedSteps: _angular_core.Signal<(JourneyStep & {
-        status: JourneyStepStatus;
-    })[]>;
+    /** Progreso acotado a [0, 100]; `null` si no hay valor finito. */
+    private static progressOf;
+    protected readonly resolvedSteps: _angular_core.Signal<ResolvedJourneyStep[]>;
     protected dotIcon(status: JourneyStepStatus, stepIcon: IconName): IconName;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JourneyStepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "autoBreakpoint": { "alias": "autoBreakpoint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
 }
 
 type LinkVariant = 'default' | 'muted';
@@ -4047,10 +4257,27 @@ interface SelectOption {
  * buscador, si está visible). En el panel, flechas y Home/End mueven el
  * foco, Enter/Espacio eligen, Escape cierra y devuelve el foco al trigger,
  * y Tab cierra el panel y continúa la tabulación desde el trigger. Las
- * opciones nunca son paradas de Tab (`tabindex="-1"`).
+ * opciones nunca son paradas de Tab (`tabindex="-1"`). Home/End sobre el
+ * trigger cerrado lo abren en la primera/última opción, y teclear letras
+ * (con el panel abierto o cerrado, sin buscador) salta a la opción cuyo
+ * label empieza con lo tecleado; repetir la misma letra recorre las que
+ * empiezan igual.
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Oculta el `label` a la vista y lo deja como nombre accesible (`<label
+     * for>`): para un control cuyo valor se explica solo (ej. un rango de
+     * fechas), sin tener que ocultar la etiqueta con CSS desde afuera.
+     */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Texto corto visible dentro del trigger, antes del valor (ej. `Rango:
+     * Últimos 30 días`), para un select compacto que no lleva etiqueta
+     * encima. Forma parte del nombre accesible del botón: no combinarlo con
+     * `label`/`ariaLabel`, que reemplazarían ese nombre.
+     */
+    readonly prefix: _angular_core.InputSignal<string | undefined>;
     readonly options: _angular_core.InputSignal<readonly (string | SelectOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -4122,6 +4349,8 @@ declare class Select {
     private readonly searchInputRef;
     private readonly panelRef;
     private readonly document;
+    private typeaheadBuffer;
+    private typeaheadTimer;
     private readonly overlay;
     constructor();
     /**
@@ -4145,7 +4374,11 @@ declare class Select {
      * click afuera no lo restaura: el foco ya se fue a donde se hizo click.
      */
     close(restoreFocus?: boolean): void;
-    /** ArrowDown/ArrowUp con el panel cerrado lo abren (patrón listbox). */
+    /**
+     * Con el panel cerrado: ArrowDown/ArrowUp lo abren en la opción activa,
+     * Home/End en la primera/última, y una letra lo abre en la opción que
+     * empieza con ella (patrón listbox).
+     */
     onTriggerKeydown(event: KeyboardEvent): void;
     /**
      * Teclado con el foco en una opción del panel. Las flechas parten SIEMPRE
@@ -4154,6 +4387,15 @@ declare class Select {
      * foco en la opción 1 y el mouse sobre la 4, ArrowDown saltaría a la 5.
      */
     onOptionKeydown(event: KeyboardEvent, option: SelectOption, index: number): void;
+    /** Un carácter imprimible sin modificadores, y solo cuando no hay buscador (ahí la tecla filtra). */
+    private isTypeaheadKey;
+    /**
+     * Índice de la opción cuyo label empieza con lo tecleado, o -1. Una sola
+     * letra (o la misma repetida) busca desde la opción SIGUIENTE a `from`, para
+     * recorrer las que empiezan igual; un prefijo más largo busca desde `from`
+     * inclusive, para que la opción actual se conserve mientras siga coincidiendo.
+     */
+    private findTypeaheadMatch;
     /** Teclas de salida del buscador: Escape y Tab, igual que desde una opción. */
     onSearchKeydown(event: KeyboardEvent): void;
     /**
@@ -4188,7 +4430,7 @@ declare class Select {
     private scrollActiveIntoView;
     selectActive(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "panelTitle": { "alias": "panelTitle"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "panelTitle": { "alias": "panelTitle"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 interface SelectableCardOption {
@@ -4376,6 +4618,8 @@ declare class Spinner {
 }
 
 type StatCardTone = 'primary' | 'success' | 'error' | 'purple' | 'warn' | 'info' | 'neutral';
+/** Densidad de la card: `'compact'` reduce el padding, el ícono y el valor. */
+type StatCardDensity = 'default' | 'compact';
 /**
  * Card de estadística horizontal: ícono circular grande a la izquierda,
  * valor + label + nota apilados al centro, chevron opcional al final si es
@@ -4400,6 +4644,18 @@ type StatCardTone = 'primary' | 'success' | 'error' | 'purple' | 'warn' | 'info'
  *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
  *     clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
  *
+ * `density` (`'default'` | `'compact'`): `'compact'` es la variante para
+ * pantallas angostas — padding de `--kf-space-md`, ícono de 40px y valor de
+ * `--kf-font-size-title-sm`, con el mismo contenido. Si la card mide 210px de
+ * ancho o menos (ej. una grilla 2x2 en teléfono), pasa además a dos filas:
+ * ícono y valor en la primera, y label, nota, barra y `hint` debajo a todo el
+ * ancho; el chevron se oculta. Solo la variante compacta convierte el host en
+ * contenedor de tamaño (`container-type: inline-size`), así que debe tener un
+ * ancho que no dependa de su contenido (celda de grilla, `width` explícito o
+ * hijo de un contenedor en bloque). `'default'` no cambia nada.
+ *
+ *   <kf-stat-card density="compact" icon="clock" value="7" label="Por vencer" />
+ *
  * `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
  * en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
  * y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
@@ -4425,6 +4681,8 @@ declare class StatCard {
      * `null` (default) = no aplica: el atributo no se emite.
      */
     readonly pressed: _angular_core.InputSignal<boolean | null>;
+    /** `'compact'`: variante para pantallas angostas; `'default'` no cambia la card. */
+    readonly density: _angular_core.InputSignal<StatCardDensity>;
     /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
@@ -4433,7 +4691,7 @@ declare class StatCard {
     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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
 /** Vocabulario semántico único de tono, compartido con `TextTone`. */
@@ -5038,5 +5296,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "tableLabel": { "alias": "tableLabel"; "required": false; "isSignal": true; }; "cardsLabel": { "alias": "cardsLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, 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 };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
+export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };