@kaufmann-lab/ui 0.1.2 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.2",
+  "version": "0.1.8",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",
@@ -8,6 +8,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@angular/cdk": "^22.1.0",
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0"
   },

package/src/tokens/base.css

@@ -106,6 +106,26 @@
   --kf-font-body: 'Roboto', system-ui, -apple-system, sans-serif;
   --kf-font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
 
+  /*
+   * Escala de tamaño (usada por `kf-text`, ver variant `title-lg|md|sm` y
+   * `body|body-muted|caption`). Antes de esta escala, cada pantalla que
+   * consume la librería definía su propio `font-size` suelto para el mismo
+   * rol semántico — auditoría sobre `web-portal-latam-frontend` encontró 9
+   * valores distintos entre login y home para títulos/subtítulos/texto
+   * secundario (0.6875rem a 2.125rem), sin ningún paso de escala en común.
+   * Estos 6 pasos cubren esos casos reales, no son arbitrarios.
+   */
+  --kf-font-size-title-lg: 1.75rem;
+  --kf-font-size-title-md: 1.5rem;
+  --kf-font-size-title-sm: 1.125rem;
+  --kf-font-size-body: 1rem;
+  --kf-font-size-body-sm: 0.875rem;
+  --kf-font-size-caption: 0.75rem;
+
+  /* ---------- Peso de fuente ---------- */
+  --kf-font-weight-title: 700;
+  --kf-font-weight-body: 400;
+
   /* ---------- Espaciado (escala 4/8px) ---------- */
   --kf-space-xs: 4px;
   --kf-space-sm: 8px;

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentInit, TemplateRef, AfterViewInit } from '@angular/core';
+import { AfterContentInit, TemplateRef, ElementRef, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -8,11 +8,17 @@ import { ControlValueAccessor } from '@angular/forms';
  * el toggle de mostrar/ocultar contraseña de `Input` — no hay un ícono de
  * "ojo tachado" en la spec original porque esa interacción no estaba
  * contemplada ahí.
+ *
+ * Separado de `Icon.ts` a propósito: este type es el contrato público que
+ * comparten `Icon`, `icons/index.ts` (registro) y cualquier componente que
+ * reciba un `IconName` (`Button`, `MetricCard`, etc.) — no debería requerir
+ * importar el componente `Icon` completo solo para tipar una prop.
  */
 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' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+
 type IconSize = 'sm' | 'md' | 'lg';
 /**
- * Ícono de trazo del design system — 59 glyphs (página 5), grilla 24×24,
+ * Ícono de trazo del design system — 60 glyphs (59 de la página 5 + `eye-off`), grilla 24×24,
  * grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
  * `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
  * cada instancia: el sprite se inyecta al DOM una única vez, la primera
@@ -89,10 +95,16 @@ declare class AdminBadge {
  *
  * `(click)` is not forwarded — it bubbles from the inner button to the host.
  *
+ * `loading` replaces the projected content with `kf-spinner` and forces
+ * `disabled` — for the common "Ingresando…"/"Enviando…" submit pattern,
+ * which before this prop existed as plain text swaps with no visual
+ * indicator (see `web-portal-latam-frontend`'s login submit buttons).
+ *
  *   <kf-button (click)="save()">Save</kf-button>
  *   <kf-button variant="ghost" disabled>Cancel</kf-button>
  *   <kf-button variant="danger" (click)="remove()">Delete</kf-button>
  *   <kf-button size="sm" icon="calendar" block>Reservar hora</kf-button>
+ *   <kf-button type="submit" [loading]="submitting()">Ingresar</kf-button>
  */
 declare class Button {
     readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger">;
@@ -104,8 +116,12 @@ declare class Button {
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     /** Stretches the button to the full width of its container. */
     readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Replaces the projected content with `kf-spinner` and forces `disabled`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `ghost`/`outline` have no solid background — the default spinner ring already reads fine there. */
+    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; }; "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; }; }, {}, 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; }; "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; }; }, {}, never, ["*"], true, never>;
 }
 
 type AlertTone = 'info' | 'ok' | 'warn' | 'error';
@@ -190,7 +206,7 @@ declare class Avatar {
  * no existe un `-strong` para secondary todavía — usa el color base).
  */
 declare class Badge {
-    readonly tone: _angular_core.InputSignal<"info" | "ok" | "warn" | "error" | "neutral" | "service">;
+    readonly tone: _angular_core.InputSignal<"error" | "info" | "ok" | "warn" | "neutral" | "service">;
     readonly dot: _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; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -377,7 +393,7 @@ declare class Checkbox implements ControlValueAccessor {
  * de superficie/borde/texto-muted más cercanos).
  */
 declare class Chip {
-    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "neutral">;
+    readonly tone: _angular_core.InputSignal<"error" | "ok" | "warn" | "neutral">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -583,6 +599,132 @@ declare class DataTable<T = unknown> {
     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; }; "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; }; }, { "rowClick": "rowClick"; }, never, ["[empty]", "[footer]"], true, never>;
 }
 
+type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Separador visual simple entre bloques de contenido. `orientation`
+ * controla si es una línea horizontal (para separar secciones apiladas) o
+ * vertical (para separar elementos en una fila, ej. acciones en una toolbar,
+ * o las columnas de metadata en `kf-company-selector`).
+ *
+ * En `vertical`, el divisor necesita una altura del contexto donde vive —
+ * `:host { align-self: stretch }` lo hace ocupar la altura del contenedor
+ * flex/grid padre sin que el consumidor tenga que fijarla a mano. `flex:
+ * none` evita que el propio divisor se achique a 0 dentro de ese contenedor
+ * flex cuando hay contenido hermano compitiendo por espacio.
+ *
+ *   <kf-divider />
+ *   <kf-divider orientation="vertical" />
+ */
+declare class Divider {
+    readonly orientation: _angular_core.InputSignal<DividerOrientation>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Divider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type DropdownItemTone = 'neutral' | 'error';
+/**
+ * Ítem de acción dentro de un `kf-dropdown-panel`. Es un `<button>` nativo
+ * por dentro (no un `<a>`): las acciones de un menú de este tipo disparan
+ * comportamiento en la pantalla actual (cerrar sesión, ejecutar un
+ * comando), no navegan a otra URL.
+ *
+ *   <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ */
+declare class DropdownItem {
+    readonly tone: _angular_core.InputSignal<DropdownItemTone>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItem, "kf-dropdown-item", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
+ * (`<ng-template>` por dentro, capturada vía `TemplateRef`) — `Dropdown` la
+ * conecta al overlay real cuando `open` pasa a `true`, no la renderiza en su
+ * propio lugar del DOM. Esto es lo que permite que el panel aparezca pegado
+ * al host de `Dropdown` sin importar dónde esté ese host en la página.
+ *
+ *   <kf-dropdown [(open)]="menuOpen">
+ *     <kf-dropdown-panel>
+ *       <kf-dropdown-item (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
+ *     </kf-dropdown-panel>
+ *   </kf-dropdown>
+ */
+declare class DropdownPanel {
+    readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Menú de acciones flotante, conectado a un elemento disparador vía
+ * `@angular/cdk/overlay` — la misma pieza que usa Angular Material para
+ * `mat-menu`/`mat-select`. Resuelve el patrón que antes se reimplementaba a
+ * mano en cada consumidor (ver el session-menu de `web-portal-latam-frontend`,
+ * ~80 líneas de HTML/TS/SCSS para toggle + click-afuera + Escape + animación
+ * de entrada, acopladas a una clase interna no pública de `PortalHeader`).
+ *
+ * Se apoya en el CDK en vez de un `position: absolute` casero (como sí hace
+ * `SelectMenu`, que puede permitírselo porque su trigger vive siempre dentro
+ * del propio componente) porque acá el disparador real puede vivir en OTRO
+ * componente por completo — ej. el avatar dentro de `kf-portal-header` — y
+ * el panel tiene que aparecer pegado a ESE elemento sin importar dónde el
+ * consumidor ubique al `Dropdown` en su HTML. El Overlay CDK calcula esa
+ * posición (con fallback si no entra en pantalla) en vez de que cada
+ * consumidor lo recalcule a mano.
+ *
+ * `open` es two-way, igual que `Alert`/`Modal`: el consumidor decide qué
+ * dispara la apertura (puede ser un `(click)` en un botón propio, o un
+ * evento de otro componente como `PortalHeader.sessionClick`) — `Dropdown`
+ * en sí no renderiza ningún trigger, su propio host es el punto de anclaje
+ * visual del panel.
+ *
+ *   <kf-dropdown [(open)]="menuOpen">
+ *     <kf-dropdown-panel>
+ *       <div class="mi-header">Sesión iniciada como {{ email() }}</div>
+ *       <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ *     </kf-dropdown-panel>
+ *   </kf-dropdown>
+ */
+declare class Dropdown {
+    /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * Elemento al que se conecta el overlay, si es distinto del propio host
+     * de `Dropdown`. Sin esto, `Dropdown` asume que ÉL MISMO es visualmente
+     * el disparador (caso normal: el consumidor arma su propio botón como
+     * contenido, y `Dropdown` envuelve ese contenido). Cuando el disparador
+     * real vive dentro de OTRO componente que no se puede envolver sin
+     * ensanchar el área de click a algo más grande que el botón (ej. el
+     * avatar de sesión dentro de `PortalHeader`, que convive con logo y
+     * navegación en el mismo host), `anchor` permite apuntar el overlay a la
+     * referencia real de ese componente en vez de al host vacío de
+     * `Dropdown`.
+     *
+     *   <kf-dropdown [(open)]="menuOpen" [anchor]="headerRef()">
+     */
+    readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
+    private readonly panel;
+    private readonly overlayService;
+    private readonly host;
+    private readonly viewContainerRef;
+    private readonly destroyRef;
+    private overlayRef;
+    constructor();
+    /**
+     * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
+     * ve teclas presionadas con el foco DENTRO del pane del overlay. Si el
+     * usuario abre el menú y presiona Escape con el foco en otro lado de la
+     * página (caso común — el foco puede seguir en el botón disparador, que
+     * vive fuera del overlay), `keydownEvents()` nunca dispara. Este listener
+     * a nivel de documento cubre ese caso; el de `keydownEvents()` sigue
+     * activo para cuando el foco sí está dentro del panel.
+     */
+    onDocumentEscape(): void;
+    private attach;
+    private detach;
+    private getOrCreateOverlayRef;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
+}
+
 /**
  * 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
@@ -855,6 +997,36 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     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; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type LinkVariant = 'default' | 'muted';
+/**
+ * Acción de bajo énfasis con apariencia de texto — "¿Olvidaste tu
+ * contraseña?", "Volver a iniciar sesión". Antes de este componente,
+ * `web-portal-latam-frontend` reimplementaba esto dos veces (`.login__forgot`
+ * como `<a href="#">` con `preventDefault()`, `.login__back` como
+ * `<button>`), cada una con su propio `:focus-visible` copiado literal.
+ *
+ * Es siempre un `<button type="button">` por dentro, nunca un `<a>`: ninguno
+ * de los dos casos reales navega a otra URL, ambos disparan una acción en la
+ * misma pantalla (cambiar de vista, someter un flujo). Si en el futuro un
+ * consumidor necesita navegación real con href, esa es una discusión de API
+ * distinta (`kf-link` con `[routerLink]`/`href`), no se fuerza acá sin caso
+ * de uso confirmado.
+ *
+ * `variant="default"` (color primario, subrayado en hover) es para la
+ * acción de mayor jerarquía relativa de la pantalla (ej. "¿Olvidaste tu
+ * contraseña?"); `variant="muted"` (gris que pasa a primario en hover) es
+ * para acciones de retroceso/salida (ej. "← Volver a iniciar sesión").
+ *
+ *   <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
+ *   <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
+ */
+declare class Link {
+    readonly variant: _angular_core.InputSignal<LinkVariant>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Link, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Link, "kf-link", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], 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
@@ -1139,10 +1311,17 @@ declare class ReserveBlock {
  * `<ng-content select="[actions]">` para no acoplar el componente a un set
  * fijo de botones.
  *
- * `size="sm"` reduce tipografía y espaciado para usarse dentro de cards ya
- * compactas. `solid` rellena el chip de ícono con el color primario sólido
- * en vez del tratamiento "soft" (fondo tenue) — pensado para superficies que
- * ya tienen un tinte de color propio, donde el chip "soft" perdería contraste.
+ * `size` sigue la misma escala `'sm'|'md'|'lg'` que `Button`/`Icon`/`Spinner`
+ * (`md` es el default): `sm` reduce tipografía y espaciado para usarse
+ * dentro de cards ya compactas, `lg` los agranda para encabezar un bloque
+ * más prominente. Antes de la `0.2.0`, `size` solo aceptaba `'sm'` —
+ * placeholder incompleto de esta misma escala; los valores de `lg` son una
+ * extrapolación proporcional de la escala existente (sin un caso de uso
+ * real todavía que los valide, a diferencia de `sm`, que sí viene de un
+ * patrón real de uso dentro de cards). `solid` rellena el chip de ícono con
+ * el color primario sólido en vez del tratamiento "soft" (fondo tenue) —
+ * pensado para superficies que ya tienen un tinte de color propio, donde el
+ * chip "soft" perdería contraste.
  *
  *   <kf-section-header icon="settings" title="Preferencias"
  *     subtitle="Configuración general de la cuenta">
@@ -1150,13 +1329,15 @@ declare class ReserveBlock {
  *   </kf-section-header>
  *
  *   <kf-section-header title="Detalle" size="sm" [solid]="true" />
+ *   <kf-section-header title="Resumen de flota" size="lg" />
  */
 declare class SectionHeader {
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     readonly title: _angular_core.InputSignal<string>;
     readonly subtitle: _angular_core.InputSignal<string | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
     readonly solid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly iconSize: _angular_core.Signal<"sm" | "md" | "lg">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionHeader, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionHeader, "kf-section-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "solid": { "alias": "solid"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
 }
@@ -1195,18 +1376,25 @@ interface SelectOption {
  * Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
  * nativo del navegador. Un `<select>` real siempre delega el popup de
  * opciones al sistema operativo, y ningún CSS puede controlar cómo se ve
- * ese popup (ver el mismo problema ya resuelto en `SelectMenu`, del que
- * este componente reutiliza el patrón completo: trigger + panel flotante
- * propio, cerrado con click-afuera y Escape).
+ * ese popup.
+ *
+ * Hasta la `0.1.5` existía además `kf-select-menu`, un segundo componente
+ * prácticamente idéntico (mismo trigger, mismo panel, mismo CSS) que solo
+ * se diferenciaba en aceptar `options` únicamente como `{ value, label }[]`
+ * (sin el atajo `string[]` que `Select` ya tenía). Se fusionaron en este
+ * componente en la `0.2.0` — mantener dos componentes con la misma
+ * interacción y el mismo aspecto visual, cuya única diferencia real era la
+ * forma de un input, no se sostenía como dos piezas separadas del catálogo.
  *
- * Pensado para sets simples y cortos. Para listas más ricas o con más
- * opciones, es el mismo componente que `SelectMenu` — la diferencia es
- * solo de estilo (label uppercase, fondo gris que pasa a blanco al foco,
- * a tono con `Input`) y que acepta `options` como `string[]` además de
- * `{ value, label }[]`.
+ * El panel flotante se conecta al trigger vía `@angular/cdk/overlay` — el
+ * mismo mecanismo que `Dropdown` (ver `../dropdown/Dropdown.ts`).
  *
  *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
  *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
+ *
+ * Pendiente: el prop `icon` de otros componentes del design system requiere
+ * un componente Icon / sprite SVG que esta librería todavía no tiene — este
+ * componente no usa iconos, así que no aplica acá.
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
@@ -1222,60 +1410,29 @@ declare class Select {
     /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
-    private readonly host;
+    private readonly triggerRef;
+    private readonly panelTemplate;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly destroyRef;
+    private overlayRef;
+    constructor();
+    /**
+     * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo ve
+     * teclas presionadas con el foco DENTRO del pane del overlay. Si el foco
+     * sigue en el trigger (o en cualquier otro lado de la página) mientras el
+     * panel está abierto, `keydownEvents()` nunca dispara.
+     */
+    onDocumentEscape(): void;
     toggle(): void;
     select(option: SelectOption): void;
-    onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
+    private attach;
+    private detach;
+    private getOrCreateOverlayRef;
     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; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-interface SelectMenuOption {
-    value: string;
-    label: string;
-}
-/**
- * Dropdown de selección simple pero con panel propio (no usa `<select>` nativo),
- * para cuando se necesita más control visual que un `<select>` estándar permite.
- *
- * El panel flotante se implementa con `position: absolute` sobre el host
- * (sin Angular CDK Overlay, que no es dependencia del proyecto). Se abre y
- * cierra por click en el disparador, y se cierra al hacer click afuera o al
- * presionar Escape.
- *
- *   <kf-select-menu
- *     label="País"
- *     [options]="countries"
- *     [value]="selectedCountry()"
- *     (valueChange)="selectedCountry.set($event)"
- *   />
- *
- * Pendiente: el prop `icon` de otros componentes del design system requiere
- * un componente Icon / sprite SVG que esta librería todavía no tiene — este
- * componente no usa iconos, así que no aplica acá.
- */
-declare class SelectMenu {
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly options: _angular_core.InputSignal<SelectMenuOption[]>;
-    readonly value: _angular_core.InputSignal<string | undefined>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly valueChange: _angular_core.OutputEmitterRef<string>;
-    private readonly instanceId;
-    readonly triggerId: string;
-    readonly listboxId: string;
-    readonly isOpen: _angular_core.WritableSignal<boolean>;
-    readonly selectedOption: _angular_core.Signal<SelectMenuOption | undefined>;
-    private readonly host;
-    toggle(): void;
-    select(option: SelectMenuOption): void;
-    onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectMenu, "kf-select-menu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
-}
-
 /** Forma del placeholder. */
 type SkeletonVariant = 'text' | 'circle' | 'rect';
 /**
@@ -1365,7 +1522,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>;
@@ -1404,6 +1561,44 @@ declare class Tabs {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "kf-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
+type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
+type TextVariant = 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption';
+type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+/**
+ * Tipografía unificada — separa la etiqueta semántica (`as`, qué es el
+ * texto para el DOM/accesibilidad) del estilo visual (`variant`, cómo se
+ * ve). Antes de este componente, cada pantalla que consume la librería
+ * definía su propio `h1`/`p` con `font-size` suelto para el mismo rol
+ * (título de página, subtítulo, texto secundario) — auditoría sobre
+ * `web-portal-latam-frontend` encontró 9 tamaños distintos entre login y
+ * home sin ningún paso de escala en común. `variant` resuelve eso contra
+ * la escala de `tokens/base.css` (`--kf-font-size-*`).
+ *
+ * `tone` sigue la misma convención cerrada que `Alert`/`Badge`/`Chip`: sin
+ * escape hatch de color libre. Si un caso necesita un color que `tone` no
+ * cubre, es una discusión de design system, no una prop nueva acá.
+ *
+ *   <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="caption" tone="error">Campo obligatorio</kf-text>
+ */
+declare class Text {
+    /** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
+    readonly as: _angular_core.InputSignal<TextAs>;
+    readonly variant: _angular_core.InputSignal<TextVariant>;
+    readonly tone: _angular_core.InputSignal<TextTone>;
+    /**
+     * Copia de `as` para uso dentro del template: `as` es palabra reservada
+     * en las expresiones de Angular (`@if (x; as y)`), así que `@switch (as())`
+     * no parsea — NG5002. La prop pública sigue llamándose `as` (es solo un
+     * atributo HTML ahí, `<kf-text as="h1">`, no una expresión).
+     */
+    protected readonly tag: _angular_core.Signal<TextAs>;
+    protected hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Text, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Text, "kf-text", never, { "as": { "alias": "as"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Visual tone of a toast. Maps to the state tokens in
  * projects/ui/src/tokens/base.css. `loading` has no auto-dismiss and shows an
@@ -1559,5 +1754,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
-export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, FolderTabOption, IconName, IconSize, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SelectMenuOption, SkeletonVariant, SpinnerSize, TabOption, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, VehicleHeader, ViewToggle };
+export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, DividerOrientation, DropdownItemTone, FolderTabOption, IconName, IconSize, LinkVariant, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SkeletonVariant, SpinnerSize, TabOption, TextAs, TextTone, TextVariant, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };