@kaufmann-lab/ui 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",
@@ -17,6 +17,11 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "files": [
+    "fesm2022",
+    "types",
+    "src/tokens"
+  ],
   "module": "fesm2022/kaufmann-lab-ui.mjs",
   "typings": "types/kaufmann-lab-ui.d.ts",
   "exports": {

package/src/tokens/base.css

@@ -156,6 +156,12 @@
   --kf-font-size-title-sm: 1.125rem;
   --kf-font-size-body: 1rem;
   --kf-font-size-body-sm: 0.875rem;
+  /*
+   * Tamaño de etiqueta/valor en filas y paneles densos (13px): queda entre
+   * `body-sm` (14px) y `caption` (12px). Es solo el token; varios CSS de la
+   * librería todavía escriben `0.8125rem` suelto y se migran por separado.
+   */
+  --kf-font-size-label: 0.8125rem;
   --kf-font-size-caption: 0.75rem;
 
   /*
@@ -214,6 +220,13 @@
    */
   --kf-shadow-focus-error: 0 0 0 2px var(--kf-color-white), 0 0 0 4px var(--kf-color-error);
 
+  /*
+   * Anillo de selección de `kf-stat-tile interactive` en estado `pressed`:
+   * 1px de marca por fuera del borde (que también pasa a marca). Un tema o
+   * una pantalla lo puede redefinir sin tocar el componente.
+   */
+  --kf-stat-tile-ring: 0 0 0 1px var(--kf-color-primary);
+
   /*
    * ---------- Anchos de controles de formulario ----------
    * Usados por `width` de `kf-select`/`kf-multi-select`. `md` (240px) es
@@ -223,6 +236,8 @@
   --kf-select-width-sm: 160px;
   --kf-select-width-md: 240px;
   --kf-select-width-lg: 320px;
+  /* Techo de `kf-select width="fit"`: más allá de este ancho trunca con elipsis. */
+  --kf-select-fit-max-width: 20rem;
 
   /*
    * ---------- Geometría del checkbox ----------

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

@@ -241,6 +241,15 @@ type AlertVariant = 'card' | 'bar';
  * sobra.
  *
  *   <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
+ *
+ * Los elementos con el atributo `kfAlertActions` se proyectan en una fila
+ * propia bajo el mensaje (con salto de línea si no caben, también en la
+ * variante `bar`). Sin ellos la fila no existe y el aviso queda igual.
+ *
+ *   <kf-alert tone="warn" title="SOAT por vencer">
+ *     Vence el 15/08.
+ *     <div kfAlertActions><kf-button size="sm">Renovar</kf-button></div>
+ *   </kf-alert>
  */
 declare class Alert {
     readonly tone: _angular_core.InputSignal<AlertTone>;
@@ -258,7 +267,7 @@ declare class Alert {
     protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
     protected readonly toneIcon: _angular_core.Signal<IconName>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kfAlertActions]"], true, never>;
 }
 
 type AlertRowTone = 'warn' | 'error' | 'neutral';
@@ -938,6 +947,12 @@ type DataTableDensity = 'comfortable' | 'compact';
 /** `key:direction` — mismo formato que `sort` de `kf-quote-picker`, para
  * que un consumidor que ya conoce ese patrón no aprenda uno nuevo acá. */
 type DataTableSort = `${string}:${'asc' | 'desc'}`;
+/** Nombre de la entidad listada: un `string` (plural fijo) o `{ one, other }`
+ * para usar el singular cuando el total es 1. */
+type DataTableItemLabel = string | {
+    one: string;
+    other: string;
+};
 /**
  * Tabla estandarizada con soporte opcional de toggle tabla/cards.
  *
@@ -1002,9 +1017,11 @@ type DataTableSort = `${string}:${'asc' | 'desc'}`;
  * por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
  * ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
  * pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
- * completa el texto informativo ("1–10 de 42 beneficios").
+ * completa el texto informativo ("1–10 de 42 beneficios"); con
+ * `{ one, other }` usa el singular cuando el total es 1 ("1–1 de 1 beneficio").
  *
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [itemLabel]="{ one: 'unidad', other: 'unidades' }" />
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
  *
  * La página es `[(page)]` (el consumidor puede llevarla a la URL) y se
@@ -1225,10 +1242,13 @@ declare class DataTable<T = unknown> {
     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
-     * interna ("1–5 de 7 beneficios"). Sin esto, el texto queda solo con
-     * 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>;
+     * interna ("1–5 de 7 beneficios"). Acepta `{ one, other }` para usar el
+     * singular cuando el total es 1 ("1–1 de 1 beneficio"); un `string`
+     * conserva el comportamiento de siempre (mismo texto para cualquier
+     * total). Sin esto, el texto queda solo con 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<DataTableItemLabel>;
     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. */
@@ -3246,6 +3266,8 @@ declare class MilestoneTimeline {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MilestoneTimeline, "kf-milestone-timeline", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "nextItemId": { "alias": "nextItemId"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, { "expandedIds": "expandedIdsChange"; }, never, never, true, never>;
 }
 
+/** Anchos con nombre de `size`: 480 / 640 / 880 / 1120 px. */
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Diálogo centrado sobre un backdrop: confirmaciones destructivas, formularios
  * cortos, decisiones que bloquean el flujo.
@@ -3284,6 +3306,22 @@ declare class MilestoneTimeline {
  *   <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
  *   <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
  *
+ * ## Ancho: `size` y `width`
+ * `size` (`'sm'` 480px, `'md'` 640px, `'lg'` 880px, `'xl'` 1120px) elige un
+ * ancho con nombre; sin `size` ni `width` el ancho es el histórico de 480px.
+ * `width` sigue aceptando cualquier valor CSS y, si se pasa, manda sobre
+ * `size`. En pantallas angostas el panel nunca supera el ancho del viewport.
+ *
+ *   <kf-modal [(open)]="open" title="Nuevo ticket" size="xl">…</kf-modal>
+ *
+ * ## Separadores: `dividers`
+ * Con `dividers` el encabezado y el footer quedan separados del cuerpo por
+ * una línea (`--kf-color-border`); el del footer solo aparece si hay
+ * acciones. Sirve cuando el cuerpo se desplaza (`maxHeight`) y su contenido
+ * no debe cortarse contra los botones. Sin `dividers` no cambia nada.
+ *
+ *   <kf-modal [(open)]="open" title="Nuevo ticket" size="lg" dividers maxHeight="85vh">…</kf-modal>
+ *
  * ## 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
@@ -3316,6 +3354,10 @@ 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>;
+    /** Ancho con nombre sobre `--kf-modal-width`; `width` lo pisa si ambos están. */
+    readonly size: _angular_core.InputSignal<ModalSize | null>;
+    /** Línea bajo el encabezado y sobre el footer (si tiene acciones). */
+    readonly dividers: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** 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>;
@@ -3349,7 +3391,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; }; "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>;
+    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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dividers": { "alias": "dividers"; "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. */
@@ -3450,7 +3492,7 @@ declare class OptionList {
 }
 
 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 TextVariant = 'title-xxl' | 'title-xl' | 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'body-sm' | 'body-sm-muted' | 'caption' | 'overline' | 'overline-strong';
 type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
 /**
  * Tipografía unificada — separa la etiqueta semántica (`as`, qué es el
@@ -3471,6 +3513,12 @@ type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
  * títulos protagonistas de pantalla completa (ej. bienvenida del home vía
  * `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
  *
+ * `body-sm`/`body-sm-muted` son el paso intermedio entre `body` (1rem) y
+ * `caption` (0.75rem): 0.875rem (`--kf-font-size-body-sm`), para texto de
+ * apoyo en filas y paneles densos. Mismo criterio de color que `body`/
+ * `body-muted`: `body-sm` hereda el color de texto y `body-sm-muted` usa el
+ * atenuado.
+ *
  * `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
  * junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
  * `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
@@ -3482,6 +3530,7 @@ type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
  *
  *   <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
  *   <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
+ *   <kf-text as="span" variant="body-sm">Última actualización hace 5 min</kf-text>
  *   <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
  *   <kf-text as="span" variant="overline">RUC</kf-text>
  *   <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</kf-text>
@@ -4258,6 +4307,28 @@ interface SelectOption {
  *              panelTitle="Ordenar por" panelWidth="content"
  *              [options]="sortOptions" [value]="sort()" (valueChange)="sort.set($event)" />
  *
+ * `width="fit"` ajusta el ancho al contenido: mide la opción más larga (y el
+ * placeholder) con la tipografía real y no cambia al elegir otra, hasta un
+ * tope de `--kf-select-fit-max-width` (20rem por defecto; lo que no entra se
+ * trunca con elipsis). Pensado para selects en barras de herramientas o
+ * encabezados donde un ancho fijo deja espacio vacío. La medición se hace
+ * con una pasada invisible de todas las opciones, así que conviene para
+ * listas cortas o medianas; con cientos de opciones usar un ancho fijo. Si
+ * alguna opción trae `tag`, también se reserva el hueco del tag más ancho,
+ * por lo que elegir una opción con tag tampoco cambia el ancho. Conviene
+ * combinarlo con `panelWidth="content"`: con el default (`"trigger"`) el panel
+ * mide lo mismo que el trigger y las opciones, que suman su propio padding
+ * (y su tag, si lo traen), pueden quedar truncadas.
+ *
+ *   <kf-select width="fit" label="División" hideLabel [options]="divisions" [value]="division()" (valueChange)="..." />
+ *
+ * `size="sm"` fija la altura del trigger en 32px (`--kf-select-min-height`)
+ * para filas de filtros densas, sin tocar el padding horizontal ni el
+ * `variant`. El default (`'md'`) no cambia nada. Para otra altura puntual,
+ * declarar `--kf-select-min-height` en el propio `kf-select`.
+ *
+ *   <kf-select size="sm" width="fit" [options]="ranges" [value]="range()" (valueChange)="..." />
+ *
  * 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
@@ -4290,6 +4361,12 @@ declare class Select {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Pone el asterisco rojo en la etiqueta (igual que `kf-input`) y
+     * `aria-required="true"` en el trigger. Solo señaliza: la validación sigue
+     * en el formulario del consumidor.
+     */
+    readonly required: _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">;
@@ -4298,8 +4375,14 @@ declare class Select {
      * comportamiento actual sin cambios para consumidores existentes.
      * 'full' ocupa el 100% del contenedor — para selects dentro de layouts
      * flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
+     * 'fit' mide el contenido (opción más larga) con un tope.
      */
-    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
+    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full" | "fit">;
+    /**
+     * Altura del trigger. 'md' (default) conserva la altura histórica; 'sm'
+     * la fija en 32px para barras de filtros densas.
+     */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
     /**
      * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
      * se activa solo cuando `options().length` supera `searchThreshold()`. Si
@@ -4347,6 +4430,14 @@ declare class Select {
      * nombre accesible, así que con label visible no se emite.
      */
     readonly triggerAriaLabel: _angular_core.Signal<string | null>;
+    /**
+     * Textos que `width="fit"` mide para dimensionar el trigger: el de cada
+     * opción tal como se vería en el trigger (`shortLabel` o `label`) y el
+     * placeholder. Sin repetidos.
+     */
+    protected readonly fitTexts: _angular_core.Signal<string[]>;
+    /** Tags distintos de las opciones, para reservar el hueco del más ancho con `width="fit"`. */
+    protected readonly fitTags: _angular_core.Signal<string[]>;
     readonly showSearch: _angular_core.Signal<boolean>;
     /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
     readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
@@ -4436,7 +4527,7 @@ declare class Select {
     private scrollActiveIntoView;
     selectActive(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "panelTitle": { "alias": "panelTitle"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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; }; "size": { "alias": "size"; "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 {
@@ -4564,8 +4655,13 @@ declare class SidebarShell {
      * muestra todo expandido.
      */
     readonly itemsCollapsed: _angular_core.Signal<boolean>;
-    /** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
-    protected onEscape(): void;
+    /**
+     * Cierra el panel mobile con Escape — mismo criterio que `Drawer`: si un
+     * panel flotante de adentro (`kf-dropdown`, `kf-select`) ya consumió la
+     * tecla en captura (`defaultPrevented`), el panel mobile sigue abierto y
+     * solo cierra la capa superior.
+     */
+    protected onEscape(event: Event): void;
     protected onNavItemClick(event: Event, item: SidebarNavItemData): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarShell, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarShell, "kf-sidebar-shell", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "navItemClick": "navItemClick"; }, never, ["[kf-sidebar-brand]", "[kf-sidebar-brand-collapsed]", "[kf-sidebar-footer]", "[kf-sidebar-brand-mobile]"], true, never>;
@@ -4718,6 +4814,24 @@ type StatTileVariant = 'inline' | 'card';
  *   <kf-stat-tile label="Estado" hasProjectedValue>
  *     <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
  *   </kf-stat-tile>
+ *
+ * `interactive` convierte el tile en un botón (`role="button"`, enfocable,
+ * Enter y Espacio) que emite `tileClick`: para un KPI que filtra o despliega
+ * algo. El click sobre un control proyectado dentro del tile (link, botón,
+ * campo) no emite `tileClick`; el de texto común sí. `pressed`
+ * (`aria-pressed`) lo vuelve un botón de alternancia, útil como filtro; `expanded` (`aria-expanded`) indica que controla un panel
+ * desplegable. Ambos son `boolean | null`: `null` (default) no emite el
+ * atributo. El estado `pressed` se marca con un borde y el anillo
+ * `--kf-stat-tile-ring`; el foco de teclado usa `--kf-shadow-focus`. Sin
+ * `interactive` el tile se comporta exactamente como antes (los demás inputs
+ * se ignoran), y con `cta` tampoco aplica: ya contiene su propio link.
+ *
+ * Distinto de `kf-stat-card` (`clickable` + `pressed`): esa card tiene el
+ * ícono circular a la izquierda y un chevron; el tile conserva label arriba,
+ * ícono a la derecha, valor y nota, y suma `expanded`.
+ *
+ *   <kf-stat-tile interactive label="En ruta" value="12" icon="truck"
+ *     [pressed]="filter() === 'route'" (tileClick)="toggleFilter('route')" />
  */
 declare class StatTile {
     readonly cta: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -4728,6 +4842,11 @@ declare class StatTile {
     readonly tone: _angular_core.InputSignal<StatTileTone>;
     /** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
     readonly note: _angular_core.InputSignal<string | null | undefined>;
+    /** Máximo de líneas visibles de la nota antes de la elipsis (`…`); el texto
+     * completo sigue en el DOM y en el `title`. Default 2, como siempre. Un
+     * valor menor a 1 o no numérico no limita la altura: la nota se muestra
+     * entera. */
+    readonly noteLines: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
      * pasar el motivo real de SU dato ausente, no un texto genérico. */
     readonly notePlaceholder: _angular_core.InputSignal<string | undefined>;
@@ -4747,12 +4866,39 @@ declare class StatTile {
      * que `actionClick` de `kf-panel`, sin depender de `@angular/router`.
      */
     readonly actionClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Convierte el tile en un botón; ver la descripción de la clase. */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Estado de alternancia (`aria-pressed`); `null` = no aplica. */
+    readonly pressed: _angular_core.InputSignal<boolean | null>;
+    /** El tile controla un panel (`aria-expanded`); `null` = no aplica. */
+    readonly expanded: _angular_core.InputSignal<boolean | null>;
+    /** Activación del tile interactivo: click, Enter o Espacio. */
+    readonly tileClick: _angular_core.OutputEmitterRef<void>;
+    /** La variante CTA ya tiene su propio link: no puede ser además un botón. */
+    protected readonly isInteractive: _angular_core.Signal<boolean>;
     /** Texto real de la nota. `null` significa "no reservar la línea": pasa
      * solo cuando el consumidor no declaró ni nota ni placeholder. */
     protected readonly noteText: _angular_core.Signal<string | null>;
+    protected onActivate(event: MouseEvent): void;
+    /**
+     * Un control proyectado dentro del tile (link, botón, campo…) tiene su
+     * propia acción: su click no debe contar como activar el tile. El texto o
+     * los spans comunes sí activan, por eso se busca el control con `closest`
+     * y no se compara `target` con `currentTarget`.
+     */
+    private isFromProjectedControl;
+    /**
+     * Teclado de un botón nativo: Enter activa al presionar y Espacio al soltar
+     * (en `keydown` solo se frena el scroll de la página). Solo cuenta cuando el
+     * foco está en el propio tile, no en contenido proyectado dentro de él.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onKeyup(event: KeyboardEvent): void;
+    /** Valor de `line-clamp`: entero ≥ 1, o `none` para mostrar la nota entera. */
+    protected readonly noteClamp: _angular_core.Signal<string>;
     protected readonly noteIsPlaceholder: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["[valueContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "noteLines": { "alias": "noteLines"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; "tileClick": "tileClick"; }, never, ["[valueContent]"], true, never>;
 }
 
 /**
@@ -4821,6 +4967,70 @@ declare class StatusPill {
     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>;
 }
 
+type SwitchSize = 'sm' | 'md';
+/**
+ * Interruptor de activar/desactivar con efecto inmediato (preferencias,
+ * ajustes). Para elegir opciones dentro de un formulario que se envía al
+ * final, usar `kf-checkbox`.
+ *
+ * Es un `<button role="switch" aria-checked>`: el lector de pantalla anuncia
+ * el estado con el propio rol, por eso no hay texto extra de "activado". Enter
+ * y Espacio lo alternan como en cualquier botón.
+ *
+ * `label` es obligatorio: da el nombre accesible aunque no se vea. Con
+ * `hideLabel` se oculta el texto y pasa a `aria-label`, para un interruptor
+ * cuyo contexto ya lo explica la fila que lo contiene.
+ *
+ * `checked` es two-way (`model`). Implementa `ControlValueAccessor`, así que
+ * también funciona con `formControlName`/`ngModel`; en ese modo `writeValue`
+ * escribe en el mismo `checked`. `disabled` del input y el del formulario se
+ * combinan: basta con que uno esté activo.
+ *
+ * `writeValue` (el formulario escribiendo el valor por código, ej.
+ * `setValue`/`reset`) también emite `checkedChange`, porque escribe en el
+ * `model`. Combinar `[(checked)]` con `formControlName`/`ngModel` en el mismo
+ * switch hace que el valor llegue dos veces al consumidor: usar una sola de
+ * las dos vías, o ignorar en el handler el eco que no cambia el valor.
+ *
+ * `describedBy` recibe el `id` de un texto de ayuda externo (ej. el `<p>` de
+ * una fila de preferencias) y lo enlaza con `aria-describedby` del botón, para
+ * que el lector de pantalla lo anuncie junto al nombre y el estado. Sin valor,
+ * el atributo no se renderiza.
+ *
+ * El color sale de roles (`--kf-color-primary` encendido,
+ * `--kf-color-border-control` apagado) y el foco de `--kf-shadow-focus`; no
+ * recibe colores.
+ *
+ *   <kf-switch label="Fijar indicadores" [(checked)]="pinned" />
+ *   <kf-switch label="Mapa junto a la tabla" hideLabel size="sm" formControlName="splitMap" />
+ *   <kf-switch label="Alertas por correo" describedBy="mail-hint" [(checked)]="mail" />
+ *   <p id="mail-hint">Se envía un resumen cada hora.</p>
+ */
+declare class Switch implements ControlValueAccessor {
+    /** Nombre accesible y texto visible (salvo con `hideLabel`). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Oculta el texto y lo deja como `aria-label`. */
+    readonly hideLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<SwitchSize>;
+    /** `id` del texto de ayuda que describe al interruptor (`aria-describedby`). */
+    readonly describedBy: _angular_core.InputSignal<string | null>;
+    /** Estado encendido, two-way: `[(checked)]="pinned"`. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    private readonly disabledByForm;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChangeFn;
+    private onTouchedFn;
+    protected toggle(): void;
+    protected onBlur(): void;
+    writeValue(value: boolean | null): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Switch, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Switch, "kf-switch", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
 interface TabOption {
     value: string;
     label: string;
@@ -4910,6 +5120,16 @@ declare class FolderTabs {
  *
  *   <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
  *
+ * `maxlength` limita el texto (`maxlength` nativo, entero positivo) y
+ * `showCounter` agrega el contador «0 / 500» pegado bajo el campo, en la misma
+ * fila que el `hint`/`errorMessage`. Ambos son opt-in: sin ellos el campo no
+ * cambia. El contador sin `maxlength` no se muestra (no hay tope que contar).
+ * Visualmente pasa a rojo al llegar al tope; para lectores de pantalla solo
+ * anuncia (`aria-live="polite"`) al cruzar el 90 % y al llegar al límite, no
+ * en cada tecla.
+ *
+ *   <kf-textarea label="Motivo" formControlName="reason" [maxlength]="500" showCounter />
+ *
  * `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
  * contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
  * estados.
@@ -4936,15 +5156,29 @@ declare class Textarea implements ControlValueAccessor, AfterViewInit {
     readonly minRows: _angular_core.InputSignal<number>;
     /** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
     readonly maxRows: _angular_core.InputSignal<number>;
+    /** Largo máximo del texto (`maxlength` nativo), entero positivo. */
+    readonly maxlength: _angular_core.InputSignalWithTransform<number | null, string | number | null | undefined>;
+    /** Muestra el contador «n / maxlength» bajo el campo. Requiere `maxlength`. */
+    readonly showCounter: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly textareaId: string;
     protected readonly hintId: string;
     protected readonly errorId: string;
+    protected readonly counterId: string;
     protected readonly value: _angular_core.WritableSignal<string>;
     protected readonly focused: _angular_core.WritableSignal<boolean>;
     /** Deshabilitado por Reactive Forms (formControl.disable()). */
     private readonly disabledByForm;
     /** Disabled real: por input() directo o por el FormControl asociado. */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly counterVisible: _angular_core.Signal<boolean>;
+    protected readonly atLimit: _angular_core.Signal<boolean>;
+    /**
+     * Texto del `aria-live`: cambia solo al cruzar un umbral (90 % y tope), así
+     * el lector no lee cada carácter escrito cerca del límite.
+     */
+    protected readonly counterAnnouncement: _angular_core.Signal<string>;
+    /** Hint o error, más el contador cuando se muestra. */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
     private onChange;
     private onTouched;
     ngAfterViewInit(): void;
@@ -4963,7 +5197,7 @@ declare class Textarea implements ControlValueAccessor, AfterViewInit {
      */
     private adjustHeight;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Textarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "kf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "kf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -5302,5 +5536,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "tableLabel": { "alias": "tableLabel"; "required": false; "isSignal": true; }; "cardsLabel": { "alias": "cardsLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
-export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, Switch, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
+export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableItemLabel, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, ModalSize, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, SwitchSize, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };

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

@@ -306,6 +306,7 @@ interface MapMarker {
  *   <kf-map label="Ubicación del vehículo y del destino" [markers]="markers()" />
  *   <kf-map size="sm" variant="preview" label="Vista previa de la ruta" [route]="route()" />
  *   <kf-map label="Flota completa" [markers]="fleet()" [controls]="['zoom', 'recenter', 'cluster', 'follow']" />
+ *   <kf-map label="Flota completa" [markers]="fleet()" [clusterAbove]="50" />
  */
 declare class MapView {
     readonly size: _angular_core.InputSignal<MapSize>;
@@ -329,6 +330,15 @@ declare class MapView {
     readonly theme: _angular_core.InputSignal<MapTheme>;
     /** Controles flotantes a mostrar — ver JSDoc de la clase y `MapControls.ts`. */
     readonly controls: _angular_core.InputSignal<MapControlKind[]>;
+    /**
+     * Umbral de agrupado automático: con `markers().length > clusterAbove` el
+     * mapa entra en modo cluster (el mismo que activa el control `cluster`),
+     * en vez de apilar cientos de pins y de paradas de Tab. `null` (default)
+     * conserva el comportamiento de siempre: nunca agrupa solo. Con el control
+     * `cluster` visible, el botón sigue mandando: un clic reemplaza lo
+     * automático hasta que se destruya el mapa.
+     */
+    readonly clusterAbove: _angular_core.InputSignal<number | null>;
     /**
      * Descripción accesible real del mapa — el `<div>` donde Mapbox renderiza
      * su canvas queda vacío de semántica para un lector de pantalla. Requerido
@@ -360,7 +370,7 @@ declare class MapView {
     protected readonly isPreview: _angular_core.Signal<boolean>;
     protected readonly containerRole: _angular_core.Signal<"img" | "region">;
     /** Ver estado de carga/error real, más abajo (`status`). */
-    protected readonly status: _angular_core.WritableSignal<"error" | "loading" | "ready">;
+    protected readonly status: _angular_core.WritableSignal<"loading" | "ready" | "error">;
     /** Elección manual del consumidor final vía el control `mapStyle` — pisa
      * `theme()` de forma sostenida (no vuelve a `theme()` sola) hasta que se
      * destruya este `kf-map`; ver `resolvedTheme()`. */
@@ -369,7 +379,10 @@ declare class MapView {
     /** Igual que `resolvedTheme()` pero público para el template — lo necesita
      * `MapThemePicker` (vía `MapControls`) para marcar la opción activa. */
     protected readonly activeTheme: _angular_core.Signal<MapTheme>;
-    protected readonly clusterActive: _angular_core.WritableSignal<boolean>;
+    /** Elección manual del botón `cluster`; `null` = sin elegir, manda `clusterAbove`. */
+    private readonly clusterChoice;
+    private readonly clusterAutomatic;
+    protected readonly clusterActive: _angular_core.Signal<boolean>;
     protected readonly followActive: _angular_core.WritableSignal<boolean>;
     protected readonly hasLiveMarker: _angular_core.Signal<boolean>;
     protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
@@ -624,7 +637,7 @@ declare class MapView {
     protected handleThemeSelect(theme: MapTheme): void;
     protected handleFullscreenToggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapView, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapView, "kf-map", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "fitToMarkers": { "alias": "fitToMarkers"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; }, { "markerSelect": "markerSelect"; "markerAction": "markerAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapView, "kf-map", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "fitToMarkers": { "alias": "fitToMarkers"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "clusterAbove": { "alias": "clusterAbove"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; }, { "markerSelect": "markerSelect"; "markerAction": "markerAction"; }, never, never, true, never>;
 }
 
 export { MAP_CONFIG, MapControls, MapView, STYLE_BY_THEME, THEME_LABEL, THEME_ORDER, provideMapConfig };