@kaufmann-lab/ui 0.1.19 → 0.1.21

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

@@ -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`.
  *
@@ -162,10 +179,10 @@ declare class AdminBadge {
 declare class Button {
     readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger" | "surface">;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
-    readonly shape: _angular_core.InputSignal<"rect" | "circle">;
+    readonly shape: _angular_core.InputSignal<"circle" | "rect">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Igual al default nativo: hace submit dentro de un `<form>`. */
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
     /** Ícono líder, renderizado con `kf-icon` antes del label proyectado. */
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     /** Estira el botón a todo el ancho de su contenedor. */
@@ -186,12 +203,18 @@ 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<"dialog" | "menu" | "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';
@@ -218,7 +241,7 @@ declare class Alert {
      * `alert` interrumpe al lector de pantalla; se reserva para error/warn.
      * Los avisos informativos se anuncian sin cortar lo que se esté leyendo.
      */
-    protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
+    protected readonly ariaRole: _angular_core.Signal<"status" | "alert">;
     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>;
@@ -279,13 +302,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<"error" | "info" | "neutral" | "ok" | "warn" | "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 {
@@ -641,7 +675,7 @@ declare class Checkbox implements ControlValueAccessor {
  * de superficie/borde/texto-muted más cercanos).
  */
 declare class Chip {
-    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error">;
+    readonly tone: _angular_core.InputSignal<"error" | "neutral" | "ok" | "warn">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -836,10 +870,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,6 +900,46 @@ 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;
 }
 /** Vistas disponibles cuando `cardable` está activo. */
 type DataTableView = 'table' | 'cards';
@@ -940,6 +1018,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 +1037,55 @@ 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)" />
  */
 declare class DataTable<T = unknown> {
     readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
@@ -972,6 +1105,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,8 +1119,14 @@ 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`.
@@ -1000,6 +1146,15 @@ declare class DataTable<T = unknown> {
         row: T;
         index: number;
     }>;
+    /** 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 +1169,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,7 +1186,6 @@ 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. */
@@ -1044,8 +1207,8 @@ declare class DataTable<T = unknown> {
      * asc → desc → sin orden; clickear otra columna reinicia el ciclo en esa
      * columna nueva.
      */
-    readonly sort: _angular_core.InputSignal<`${string}:desc` | `${string}:asc` | null>;
-    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:desc` | `${string}:asc` | null>;
+    readonly sort: _angular_core.InputSignal<`${string}:asc` | `${string}:desc` | null>;
+    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:asc` | `${string}:desc` | null>;
     protected readonly sortedRows: _angular_core.Signal<T[]>;
     /** Filas realmente renderizadas: ordenadas y, si `pageSize` está activo,
      * recortadas a la página actual. */
@@ -1055,21 +1218,60 @@ 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.
@@ -1087,8 +1289,28 @@ 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;
+    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 +1321,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; }; "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; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "showViewToggle": { "alias": "showViewToggle"; "required": false; "isSignal": true; }; "cardMinWidth": { "alias": "cardMinWidth"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "currentRowKey": { "alias": "currentRowKey"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "keepPageOnRowsChange": { "alias": "keepPageOnRowsChange"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "page": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "view": "viewChange"; }, never, ["[empty]", "[footer]"], true, never>;
 }
 
 /**
@@ -1164,7 +1386,14 @@ declare class DocumentRow {
     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>;
 }
 
-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,17 +1426,71 @@ 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`, ej. un `kf-select` abierto dentro del
+ * drawer cierra solo su propio panel).
+ *
+ * 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.
+ *
+ * Limitación conocida: NO colocar un `kf-select` (ni otro control con panel
+ * flotante del CDK) dentro de un drawer `role="dialog"`. Su listbox se
+ * monta en `.cdk-overlay-container`, fuera del diálogo con `aria-modal`: un
+ * lector de pantalla puede tratarlo como contenido inerte y la trampa de
+ * foco no lo incluye. Para elegir una opción dentro del panel usar
+ * `kf-option-list`.
+ *
+ * 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;
@@ -1215,10 +1498,10 @@ declare class Drawer {
     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>;
 }
 
 /**
@@ -1334,6 +1617,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 +1638,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<"inline" | "card">;
+    /** 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
@@ -1627,43 +1944,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. */
@@ -1740,6 +2077,27 @@ 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" />
  */
 declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
@@ -1766,11 +2124,29 @@ 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>;
     /** 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 +2160,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 +2172,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 +2195,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; }; "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 +2288,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
@@ -1974,6 +2561,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 +2594,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 +2627,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 +2649,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';
@@ -2628,10 +3329,20 @@ declare class Segmented {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Segmented, "kf-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-/** Normalized shape used internally once `options` (string[] or object[]) is resolved. */
+/**
+ * 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>`
@@ -2644,6 +3355,7 @@ interface SelectOption {
  *
  *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
  *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
+ *   <kf-select [options]="[{ value: '1002099', label: 'BBVA', tag: 'Empresa', detail: 'RUC 20100130204' }]" />
  *
  * `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
  * techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
@@ -2660,10 +3372,29 @@ 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>;
-    readonly options: _angular_core.InputSignal<string[] | SelectOption[]>;
+    readonly options: _angular_core.InputSignal<readonly (string | SelectOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2671,7 +3402,7 @@ declare class Select {
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Mensaje de error con `role="alert"`, debajo del trigger. */
     readonly errorMessage: _angular_core.InputSignal<string | undefined>;
-    readonly variant: _angular_core.InputSignal<"field" | "compact">;
+    readonly variant: _angular_core.InputSignal<"compact" | "field">;
     /**
      * Ancho del control. 'md' (240px) es el default histórico y preserva el
      * comportamiento actual sin cambios para consumidores existentes.
@@ -2687,6 +3418,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;
@@ -2695,15 +3446,25 @@ declare class Select {
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly searchQuery: _angular_core.WritableSignal<string>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
-    /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
+    /** 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();
     /**
@@ -2714,6 +3475,40 @@ declare class Select {
      */
     onDocumentEscape(): void;
     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;
     onSearchInput(event: Event): void;
     /**
@@ -2723,9 +3518,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 {
@@ -2999,7 +3801,7 @@ declare class StatTile {
  *   <kf-status-pill tone="error" dot>Fuera de servicio</kf-status-pill>
  */
 declare class StatusPill {
-    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "blue">;
+    readonly tone: _angular_core.InputSignal<"error" | "ok" | "warn" | "blue">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusPill, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusPill, "kf-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -3443,17 +4245,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, 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, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, Modal, MultiSelect, NoteBlock, OptionList, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, resolveListToolbarMode };
+export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, ListToolbarMode, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };