@kaufmann-lab/ui 0.1.3 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.3",
+  "version": "0.1.9",
   "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';
 
 /**
@@ -95,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">;
@@ -110,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';
@@ -591,10 +601,16 @@ declare class DataTable<T = unknown> {
 
 type DividerOrientation = 'horizontal' | 'vertical';
 /**
- * Línea separadora decorativa entre bloques de contenido (ej. columnas de
- * metadata en `kf-company-selector`). `vertical` necesita que el contenedor
- * padre sea flex/grid con altura definida — se estira con `align-self:
- * stretch`; sin eso no tiene alto propio y no se ve.
+ * 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" />
@@ -605,6 +621,110 @@ declare class Divider {
     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
@@ -761,6 +881,21 @@ interface FolderTabOption {
     label: string;
     icon?: IconName;
 }
+/**
+ * Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su
+ * panel. Sin lógica propia — existe solo como token de tipo para que
+ * `contentChild(FolderTabsPanel)` pueda detectar si el consumidor proyectó
+ * algo (mismo mecanismo que `kf-dropdown` usa con `contentChild(DropdownPanel)`;
+ * acá no hace falta un componente completo, alcanza con una directiva de
+ * atributo porque el panel no necesita comportamiento propio, solo marcar
+ * su presencia).
+ *
+ *   <div kf-folder-tabs-panel>...</div>
+ */
+declare class FolderTabsPanel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kf-folder-tabs-panel]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Tabs con forma de "carpeta": el borde superior queda redondeado y el borde
  * inferior de la pestaña activa se funde visualmente con el panel de
@@ -771,20 +906,61 @@ interface FolderTabOption {
  * `--active` se mueve de un botón a otro, y eso vuelve a disparar el keyframe
  * sin tocar JS.
  *
- * El consumidor es responsable de renderizar el panel de contenido debajo;
- * este componente solo resuelve la fila de pestañas y emite `valueChange`.
- *
+ * El panel de contenido es un `<ng-content>` OPCIONAL — si el consumidor no
+ * proyecta nada, `kf-folder-tabs` renderiza solo la fila de pestañas (mismo
+ * comportamiento que antes de que existiera este slot, detectado con
+ * `contentChild()` sin `.required`, igual patrón que usa `kf-dropdown` para
+ * saber si hay un `kf-dropdown-panel` proyectado). Si SÍ proyecta contenido,
+ * se envuelve en un panel con la esquina superior-izquierda recta (nace ahí
+ * la primera pestaña, siempre pegada al borde izquierdo de la fila — un
+ * radio ahí competiría visualmente con el propio borde redondeado de esa
+ * pestaña) y las otras tres redondeadas. El `border-bottom` de 2px de la
+ * pestaña activa (ver `.kf-folder-tabs__tab--active` más abajo) es la señal
+ * visual de conexión con el panel para CUALQUIER pestaña activa, sin
+ * necesitar mover ni medir nada.
+ *
+ * El borde izquierdo de toda la fila (y por lo tanto de la esquina recta
+ * del panel) depende de que ninguna pestaña se corra al cambiar de estado
+ * — ver `transform-origin: bottom left` en `.kf-folder-tabs__tab`: con el
+ * origen centrado (como estaba antes), el `scale()` de la pestaña inactiva
+ * encogía el borde izquierdo unos px, y ese corrimiento sub-pixel es lo que
+ * hacía que este mismo diseño (esquina fija) se viera "roto" cuando la
+ * pestaña activa no era la primera. Con el origen anclado a la izquierda,
+ * el corrimiento desaparece y la esquina fija vuelve a ser una solución
+ * válida y simple — sin necesitar medir la pestaña activa por JS.
+ *
+ * Antes de este slot, el patrón era que el consumidor pusiera su propia
+ * card como HERMANO de `kf-folder-tabs` y anulara a mano el radio superior
+ * completo (`border-top-left-radius: 0`, `border-top-right-radius: 0` — ver
+ * el caso original de `web-portal-latam-frontend`). Encapsular esto acá
+ * evita que cada consumidor repita esas reglas a mano.
+ *
+ *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
+ *     <div kf-folder-tabs-panel>contenido de la pestaña activa</div>
+ *   </kf-folder-tabs>
+ *
+ *   <!-- o, sin contenido, como antes: -->
  *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
  */
 declare class FolderTabs {
     readonly options: _angular_core.InputSignal<FolderTabOption[]>;
     readonly value: _angular_core.InputSignal<string>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Detecta si el consumidor proyectó contenido marcado con
+     * `kf-folder-tabs-panel` — sin `.required`, así que es `undefined`
+     * cuando no hay nada proyectado (mismo patrón que usa `kf-dropdown` con
+     * `contentChild(DropdownPanel)` para saber si hay un panel que
+     * attachear). `hasPanel()` decide si el wrapper del panel participa del
+     * layout (`display: contents` si no).
+     */
+    private readonly projectedPanel;
+    protected readonly hasPanel: _angular_core.Signal<boolean>;
     select(value: string): void;
     /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
     onKeydown(event: KeyboardEvent, currentValue: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["projectedPanel"], ["[kf-folder-tabs-panel]"], true, never>;
 }
 
 /**
@@ -877,6 +1053,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
@@ -1108,12 +1314,29 @@ interface PortalHeaderAdminAction {
  * Es distinto de `kf-page-header`/`kf-page-head` (título de una vista
  * interna) — este es el chrome global del portal, se monta una sola vez.
  *
+ * `:host` es `position: sticky; top: 0` — el header queda pegado arriba al
+ * hacer scroll. No es `fixed`: como no se superpone al contenido en el
+ * primer render, no hace falta que el consumidor compense con
+ * `padding-top`.
+ *
+ * Bajo los 768px, el `<nav>` deja de mostrarse en línea junto al logo y
+ * colapsa detrás de un botón de menú (ícono `menu`/`x`) que despliega un
+ * drawer lateral (desde el borde derecho, `position: fixed` + overlay de
+ * fondo) con los mismos `navItems` en columna. Ese drawer expone un slot
+ * (`<ng-content select="[kf-portal-header-extra]">`) al final, pensado
+ * para que el consumidor proyecte contenido propio que en escritorio vive
+ * en otro lugar (ej. el menú de sesión) — `PortalHeader` no sabe qué es
+ * ese contenido ni cómo se abre, solo le da un lugar dentro del drawer ya
+ * desplegado. El overlay cierra el drawer al tocarlo, y `Escape` también.
+ *
  *   <kf-portal-header
  *     [isAdmin]="true"
  *     [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
  *     [navItems]="[{ label: 'Home', href: '/', active: true }, { label: 'Vehículos', href: '/vehiculos' }]"
  *     userInitials="TS"
- *   />
+ *   >
+ *     <div kf-portal-header-extra>contenido propio, solo visible en el panel mobile</div>
+ *   </kf-portal-header>
  */
 declare class PortalHeader {
     readonly brand: _angular_core.InputSignal<string>;
@@ -1122,8 +1345,23 @@ declare class PortalHeader {
     readonly navItems: _angular_core.InputSignal<PortalHeaderNavItem[]>;
     readonly userInitials: _angular_core.InputSignal<string>;
     readonly sessionClick: _angular_core.OutputEmitterRef<void>;
+    /** Visibilidad del drawer de navegación mobile (bajo los 768px). */
+    protected readonly mobileMenuOpen: _angular_core.WritableSignal<boolean>;
+    /** Cierra el drawer con Escape — mismo patrón que cualquier drawer/modal. */
+    protected onEscape(): void;
+    /**
+     * `ElementRef` real del botón de sesión (el avatar en la esquina
+     * derecha), no de todo el header. Pensado para anclar un `kf-dropdown`
+     * externo — sin esto, el único `ElementRef` disponible desde afuera es el
+     * del host de `PortalHeader`, que ocupa el ancho completo de la pantalla
+     * (logo + nav + sesión), y el overlay del CDK termina "pegado" a la
+     * esquina del header entero en vez de al botón que el usuario clickeó.
+     *
+     *   <kf-dropdown [(open)]="menuOpen" [anchor]="header().sessionButtonRef()">
+     */
+    readonly sessionButtonRef: _angular_core.Signal<ElementRef<any>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, ["[kf-portal-header-extra]"], true, never>;
 }
 
 /**
@@ -1161,10 +1399,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">
@@ -1172,13 +1417,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>;
 }
@@ -1217,18 +1464,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.
  *
- * 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 }[]`.
+ * 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.
+ *
+ * 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>;
@@ -1244,60 +1498,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';
 /**
@@ -1426,6 +1649,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
@@ -1581,5 +1842,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, Divider, 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, DividerOrientation, 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, FolderTabsPanel, 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 };