@kaufmann-lab/ui 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "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

@@ -1438,7 +1438,7 @@ declare class SkeletonPreset {
     protected readonly items: _angular_core.Signal<number[]>;
     /** Columnas de la tabla sintética (encabezados en blanco: lo real aún no llegó). */
     protected readonly tableColumns: _angular_core.Signal<DataTableColumn[]>;
-    protected readonly formColumns: _angular_core.Signal<2 | 1>;
+    protected readonly formColumns: _angular_core.Signal<1 | 2>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonPreset, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonPreset, "kf-skeleton-preset", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -3246,6 +3246,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 +3286,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 +3334,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 +3371,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 +3472,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 +3493,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 +3510,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 +4287,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
@@ -4298,8 +4349,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 +4404,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 +4501,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; }; "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 {
@@ -4718,6 +4783,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>;
@@ -4747,12 +4830,37 @@ 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;
     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; }; "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 +4929,61 @@ 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.
+ *
+ * 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" />
+ */
+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>;
+    /** 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; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
 interface TabOption {
     value: string;
     label: string;
@@ -5302,5 +5465,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, 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 };