@kaufmann-lab/ui 0.1.9 → 0.1.11

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

@@ -14,11 +14,11 @@ import { ControlValueAccessor } from '@angular/forms';
  * 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 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' | 'home' | 'inbox' | 'layers' | 'list' | 'log-out' | '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 — 60 glyphs (59 de la página 5 + `eye-off`), grilla 24×24,
+ * Ícono de trazo del design system — 61 glyphs (59 de la página 5 + `eye-off` y `log-out`), 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
@@ -157,6 +157,71 @@ declare class Alert {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Layout a pantalla completa para cualquier pantalla de autenticación
+ * (login, recuperar contraseña, confirmación de envío) — split marca a la
+ * izquierda / contenido libre a la derecha en desktop, formulario a
+ * pantalla completa en mobile (el panel de marca completo se oculta, no se
+ * apila arriba: en una pantalla angosta el usuario vino a loguearse, no a
+ * leer la tagline). Un logo compacto (o wordmark de respaldo) sí se
+ * mantiene visible arriba del formulario en mobile — el usuario nunca
+ * pierde de vista qué portal está usando, mismo criterio que ya sigue el
+ * resto del ecosistema (ver la topbar mobile de `css/otd.css`, que muestra
+ * el logo aunque el sidebar completo se oculte).
+ *
+ * Este componente resuelve el "cascarón" — nunca el formulario en sí. Cada
+ * portal arma su propio `<form>` con los componentes de la librería
+ * (`kf-input`, `kf-checkbox`, `kf-button`, `kf-alert`) y lo proyecta en el
+ * slot por defecto. Es la misma separación de responsabilidad que ya usa
+ * `kf-card`: un componente da la estructura visual, el consumidor decide
+ * qué va adentro.
+ *
+ * Antes de este componente, cada portal (LATAM primero, ahora OTD) hubiera
+ * tenido que reimplementar este mismo split desde cero — la librería
+ * había pospuesto esta abstracción a propósito hasta tener un segundo
+ * consumidor real que confirmara qué parte es realmente compartida (el
+ * cascarón) y qué parte es de cada portal (el formulario). OTD es ese
+ * segundo consumidor.
+ *
+ * Ningún input tiene valor por defecto propio de ningún portal — `brand`
+ * es obligatorio (`input.required`) y el resto de props de marca son
+ * opcionales sin fallback hardcodeado, precisamente para que cada
+ * consumidor (LATAM, OTD, Star, o el ERP de Asistencia en Ruta con sus
+ * propios temas) traiga su propio logo/tagline sin que la librería asuma
+ * cuál.
+ *
+ *   <kf-auth-layout
+ *     brand="Mi Portal"
+ *     brandLogoSrc="images/mi-portal-logo-white.png"
+ *     brandLogoMobileSrc="images/mi-portal-logo-black.png"
+ *     brandTagline="Frase corta de marca, propia de cada portal."
+ *   >
+ *     <form (ngSubmit)="onSubmit()">
+ *       <kf-input label="Correo" type="email" />
+ *       <kf-input label="Contraseña" type="password" toggleable />
+ *       <kf-button type="submit">Ingresar</kf-button>
+ *     </form>
+ *   </kf-auth-layout>
+ */
+declare class AuthLayout {
+    /** Nombre de marca/portal, usado como wordmark de respaldo si no hay ningún logo, y como `alt` de ambos logos. */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Logo en blanco para el panel oscuro de desktop — si no se pasa, se muestra `brand()` como wordmark tipográfico. */
+    readonly brandLogoSrc: _angular_core.InputSignal<string | undefined>;
+    /** Frase corta bajo el logo — opcional, cada portal decide su propio texto de marca. */
+    readonly brandTagline: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Logo compacto para mobile, sobre el fondo claro del panel de contenido
+     * — normalmente la variante oscura/negra del mismo logo, ya que
+     * `brandLogoSrc` suele ser la variante blanca pensada para el gradiente
+     * oscuro. Si no se pasa, reutiliza `brandLogoSrc`; si tampoco hay logo en
+     * absoluto, cae al wordmark tipográfico igual que en desktop.
+     */
+    readonly brandLogoMobileSrc: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AuthLayout, "kf-auth-layout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "brandLogoSrc": { "alias": "brandLogoSrc"; "required": false; "isSignal": true; }; "brandTagline": { "alias": "brandTagline"; "required": false; "isSignal": true; }; "brandLogoMobileSrc": { "alias": "brandLogoMobileSrc"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Avatar de usuario: muestra una foto (`src`) o, si no hay foto, las
  * iniciales (`initials`) sobre un fondo con gradiente de marca. `round`
@@ -621,84 +686,209 @@ declare class Divider {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type DrawerSide = 'left' | 'right';
+/**
+ * Panel lateral genérico, agnóstico de contenido — no sabe qué es navegación
+ * ni qué es sesión, solo da tres lugares para proyectar contenido
+ * (`[kf-drawer-header]`, default, `[kf-drawer-footer]`) y resuelve lo que
+ * cualquier drawer necesita resolver igual sin importar qué haya adentro:
+ * overlay con blur que cierra al click, `Escape`, atrapado de foco real y
+ * devolución de foco al cerrar.
+ *
+ * Extraído de `PortalHeader`, que hasta acá reimplementaba su propio drawer
+ * embebido (navegación hardcodeada + slot único al final). Cualquier
+ * consumidor que necesite un panel lateral — no solo `PortalHeader` — puede
+ * usar este componente directamente.
+ *
+ * `open` es two-way, mismo patrón que `Dropdown`/`Modal`: el consumidor
+ * decide qué dispara la apertura (un botón de hamburguesa, por ejemplo) y
+ * qué hace con el cierre.
+ *
+ * Foco: al abrir, se crea un `FocusTrap` del CDK sobre el panel (la misma
+ * pieza que usa Angular Material para `mat-sidenav`/`mat-dialog`) — Tab y
+ * Shift+Tab ciclan solo entre los elementos focuseables del drawer, sin
+ * escapar al contenido de fondo. Al cerrar, el foco vuelve al elemento que
+ * tenía el foco antes de abrir (guardado en `document.activeElement`), no
+ * se pierde en el `<body>`.
+ *
+ * `[kf-drawer-header]` tiene fondo oscuro propio (`--kf-color-tertiary-deep`),
+ * distinto del body (`--kf-color-white`) — pensado para contener
+ * `kf-drawer-session`, que asume ese fondo y no lo trae él mismo (ver
+ * `DrawerSession.ts`). Si el slot queda vacío, el contenedor colapsa
+ * (`display: none`) y no deja una franja oscura sin contenido.
+ *
+ *   <kf-drawer [(open)]="menuOpen" ariaLabel="Menú de navegación">
+ *     <div kf-drawer-header>
+ *       <kf-drawer-session name="Tomás Soto" email="tomas@kaufmann.com" (logoutClick)="onLogout()" />
+ *     </div>
+ *     <a href="/">Home</a>
+ *     <a href="/vehiculos">Vehículos</a>
+ *   </kf-drawer>
+ */
+declare class Drawer {
+    /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Borde de anclaje del panel. `left` (default) es la convención dominante
+     * (Material/iOS/Android): el botón que abre el drawer y el propio panel
+     * quedan del mismo lado. */
+    readonly side: _angular_core.InputSignal<DrawerSide>;
+    /** `aria-label` del `<nav>` interno — describe el propósito del panel para
+     * lectores de pantalla (ej. "Menú de navegación"). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly panelRef;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private focusTrap;
+    private lastFocusedElement;
+    constructor();
+    /** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
+    protected onEscape(): void;
+    private getOrCreateFocusTrap;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "kf-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-drawer-header]", "*", "[kf-drawer-footer]"], true, never>;
+}
+
+/**
+ * Botón de cerrar sesión, pensado para proyectarse dentro de
+ * `[kf-drawer-footer]` de `kf-drawer`, o junto a `kf-drawer-session` dentro
+ * de `[kf-sidebar-footer]` de `kf-sidebar-shell` — separado de
+ * `kf-drawer-session` (que solo muestra identidad: brand, avatar, nombre,
+ * email), no anidado dentro de ella.
+ *
+ * Reproduce el mismo botón que antes vivía embebido en `DrawerSession`:
+ * ícono `log-out` + label, color `--kf-color-error` con hover en
+ * `--kf-color-error-soft` y foco visible con `--kf-shadow-focus`. Se separó
+ * en un componente propio porque identidad y logout son responsabilidades
+ * distintas — `kf-drawer-session` no debería saber que existe un botón de
+ * cerrar sesión, y el footer del drawer ya tiene su propio padding/borde
+ * superior (ver `Drawer.ts`) que reemplaza el borde que antes traía el botón
+ * mismo.
+ *
+ * No sabe nada de autenticación real — solo emite `logoutClick` cuando el
+ * consumidor debe cerrar la sesión real.
+ *
+ * `collapsed` oculta el label y centra el ícono, exponiéndolo vía `title`
+ * — mismo criterio que `SidebarNavItem.collapsed` y
+ * `DrawerSession.collapsed`, para cuando este botón vive dentro de un
+ * `kf-sidebar-shell` colapsado.
+ *
+ *   <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
+ */
+declare class DrawerLogout {
+    /** Label del botón, en español neutro por defecto. Input opcional por si
+     * algún consumidor futuro necesita otro texto. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Oculta el label y centra el ícono — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly logoutClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerLogout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerLogout, "kf-drawer-logout", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "logoutClick": "logoutClick"; }, never, never, true, never>;
+}
+
+/**
+ * Bloque de identidad para `[kf-drawer-header]` de `kf-drawer` o
+ * `[kf-sidebar-footer]` de `kf-sidebar-shell`: avatar + nombre + email,
+ * brand opcional arriba. Solo identidad — el logout vive aparte, en
+ * `kf-drawer-logout`.
+ *
+ * `collapsed` oculta brand/nombre/email y deja solo el avatar (para un
+ * `kf-sidebar-shell` colapsado). `interactive` convierte la tarjeta en un
+ * botón real que emite `cardClick`, para cuando la identidad es el
+ * disparador de un menú de acciones (ej. envuelta en `kf-dropdown`).
+ *
+ *   <kf-dropdown [(open)]="menuOpen">
+ *     <kf-drawer-session interactive name="Juan Pérez" email="juan@empresa.com" (cardClick)="menuOpen.set(!menuOpen())" />
+ *     <kf-dropdown-panel variant="dark">
+ *       <kf-dropdown-item icon="log-out" tone="error" (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
+ *     </kf-dropdown-panel>
+ *   </kf-dropdown>
+ */
+declare class DrawerSession {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    readonly initials: _angular_core.InputSignal<string>;
+    readonly avatarUrl: _angular_core.InputSignal<string>;
+    /** Label superior opcional, ej. "Portal Kaufmann LATAM". */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Oculta brand/nombre/email y centra el avatar — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Convierte la tarjeta en un botón real con ícono de kebab — ver comentario de la clase. */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Se emite al clickear la tarjeta, solo cuando `interactive` es `true`. */
+    readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    /** Si no se pasa `initials`, se derivan de `name`: primera letra de cada
+     * una de las primeras 2 palabras, en mayúscula. */
+    protected readonly displayInitials: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerSession, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerSession, "kf-drawer-session", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, 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.
+ * (no un `<a>`): dispara comportamiento en la pantalla actual, no navega.
  *
- *   <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ * `icon` es opcional — sin él, el ítem es solo texto.
+ *
+ *   <kf-dropdown-item icon="log-out" (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
  */
 declare class DropdownItem {
     readonly tone: _angular_core.InputSignal<DropdownItemTone>;
+    /** Ícono opcional al inicio de la fila. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItem, "kf-dropdown-item", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+type DropdownPanelVariant = 'solid' | 'dark';
 /**
  * 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>
+ * (`<ng-template>`, 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 permite que el panel aparezca pegado al host de
+ * `Dropdown` sin importar dónde esté ese host en la página.
+ *
+ * `variant`: `'solid'` (default, fondo blanco) o `'dark'` (fondo sólido
+ * oscuro, mismo tono que `[kf-drawer-header]`) para cuando el trigger vive
+ * sobre una superficie oscura de marca.
+ *
+ * `dark` es sólida a propósito, no semitransparente: el CDK Overlay
+ * reposiciona el panel según dónde entra en el viewport y puede terminar
+ * cayendo sobre fondo blanco en vez de sobre el rail oscuro — un color
+ * sólido se ve intencional sin importar dónde lo posicione el CDK.
  */
 declare class DropdownPanel {
+    readonly variant: _angular_core.InputSignal<DropdownPanelVariant>;
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, 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.
+ * `mat-menu`/`mat-select`.
  *
- *   <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>
+ * Se apoya en el CDK en vez de un `position: absolute` casero (a diferencia
+ * de `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.
+ *
+ * `open` es two-way: el consumidor decide qué dispara la apertura —
+ * `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>...</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()">
+     * de `Dropdown`. Sin esto, `Dropdown` asume que ÉL MISMO es el
+     * disparador. Útil cuando el disparador real vive dentro de OTRO
+     * componente que no se puede envolver sin ensanchar el área de click
+     * (ej. el avatar de sesión dentro de `PortalHeader`).
      */
     readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
     private readonly panel;
@@ -707,18 +897,41 @@ declare class Dropdown {
     private readonly viewContainerRef;
     private readonly destroyRef;
     private overlayRef;
+    /**
+     * Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
+     * ACTUALMENTE adjunto. `getOrCreateOverlayRef()` reutiliza el mismo
+     * `overlayRef` entre aperturas (no lo recrea cada vez) — sin esto,
+     * `attach()` se resuscribía a esos observables en cada apertura sin
+     * cancelar la suscripción de la vez anterior, acumulando N suscripciones
+     * activas sobre el mismo overlay persistente. Eso causaba el bug real de
+     * "clicks seguidos": al abrir de nuevo, el propio pointerdown que originó
+     * la apertura llegaba a más de una suscripción acumulada, disparando
+     * `open.set(false)` de forma errática en el mismo tick (patrón observado:
+     * abre cada 2 clicks, cierra cada 1). Se cancelan explícitamente en
+     * `detach()`, antes de la siguiente `attach()`.
+     */
+    private overlaySubscription;
     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.
+     * ve teclas con el foco DENTRO del panel. Si el foco queda en el botón
+     * disparador (caso común), `keydownEvents()` nunca dispara — este
+     * listener a nivel de documento cubre ese caso.
      */
     onDocumentEscape(): void;
     private attach;
+    /**
+     * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
+     * ver comentario de la clase) vive FUERA del overlay a propósito: el
+     * overlay recién se crea/adjunta cuando `open` pasa a `true`, así que el
+     * CDK no tiene forma de saber que ese elemento externo "es parte" de su
+     * disparador. Sin este filtro, el mismo `pointerdown` que abre el menú
+     * (el trigger no es hijo del overlay) también llega a
+     * `outsidePointerEvents()`, cerrando el panel en el mismo gesto que lo
+     * abrió — bug real reproducido con Playwright: "abre y cierra" en
+     * clicks consecutivos rápidos sobre la tarjeta de sesión del sidebar.
+     */
+    private isEventOnTrigger;
     private detach;
     private getOrCreateOverlayRef;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
@@ -890,11 +1103,11 @@ interface FolderTabOption {
  * atributo porque el panel no necesita comportamiento propio, solo marcar
  * su presencia).
  *
- *   <div kf-folder-tabs-panel>...</div>
+ *   <div kfFolderTabsPanel>...</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>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kfFolderTabsPanel]", never, {}, {}, never, never, true, never>;
 }
 /**
  * Tabs con forma de "carpeta": el borde superior queda redondeado y el borde
@@ -936,7 +1149,7 @@ declare class FolderTabsPanel {
  * 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>
+ *     <div kfFolderTabsPanel>contenido de la pestaña activa</div>
  *   </kf-folder-tabs>
  *
  *   <!-- o, sin contenido, como antes: -->
@@ -948,7 +1161,7 @@ declare class FolderTabs {
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     /**
      * Detecta si el consumidor proyectó contenido marcado con
-     * `kf-folder-tabs-panel` — sin `.required`, así que es `undefined`
+     * `kfFolderTabsPanel` — 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
@@ -960,7 +1173,39 @@ declare class FolderTabs {
     /** 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"; }, ["projectedPanel"], ["[kf-folder-tabs-panel]"], 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"], ["[kfFolderTabsPanel]"], true, never>;
+}
+
+/** Un link del pie — legales, contacto, soporte. */
+interface FooterLink {
+    label: string;
+    href?: string;
+}
+/**
+ * Pie de página general del portal (página 38): logo + copyright a la
+ * izquierda, links legales/soporte empujados a la derecha. Logo y copyright
+ * son inputs (cada portal del ecosistema — LATAM, OTD, Star — trae su
+ * propia marca y texto legal); `links` es la lista de accesos, típicamente
+ * placeholders hasta que existan destinos reales.
+ *
+ *   <kf-footer
+ *     logoSrc="images/logo-kaufmann-dark.png"
+ *     logoAlt="Grupo Kaufmann"
+ *     copyright="© 2026 Kaufmann LATAM · Todos los derechos reservados"
+ *     [links]="[
+ *       { label: 'Políticas de privacidad' },
+ *       { label: 'Contacto' },
+ *       { label: 'Sugerencias y reclamos' },
+ *     ]"
+ *   />
+ */
+declare class Footer {
+    readonly logoSrc: _angular_core.InputSignal<string | undefined>;
+    readonly logoAlt: _angular_core.InputSignal<string>;
+    readonly copyright: _angular_core.InputSignal<string>;
+    readonly links: _angular_core.InputSignal<FooterLink[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Footer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "kf-footer", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": true; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -1165,18 +1410,25 @@ interface MultiSelectOption {
     label: string;
 }
 /**
- * Dropdown de selección múltiple con checkboxes internos, siguiendo el mismo
- * patrón de panel flotante que `SelectMenu` (panel 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.
- *
- * A diferencia de `SelectMenu`, el disparador no muestra un único valor sino
- * los nombres seleccionados junto a un badge circular con el conteo (página
- * 12: "Sucursal Norte, Lima Centro" + badge "2"), y cada opción del panel se
- * marca/desmarca con un checkbox sin cerrar el panel. Incluye una opción
- * "Todas" al inicio de la lista, con estado `indeterminate` cuando hay
- * selección parcial — el mismo patrón de "seleccionar todos" de `Checkbox`.
+ * Dropdown de selección múltiple con checkboxes internos. El panel flotante
+ * se conecta al trigger vía `@angular/cdk/overlay` — el mismo mecanismo que
+ * `Select` (ver `../select/Select.ts`) y `Dropdown` (`../dropdown/Dropdown.ts`).
+ *
+ * Hasta la `0.1.9` este panel vivía con `position: absolute` manual sobre el
+ * propio host, sin depender del CDK Overlay. Se migró para unificar el
+ * mecanismo de posicionamiento/cierre con el resto de los dropdowns flotantes
+ * de la librería (4 posiciones de fallback, `withViewportMargin`, `withPush`,
+ * cierre por `outsidePointerEvents()`/`keydownEvents()` en vez de un
+ * `@HostListener('document:click')` manual).
+ *
+ * A diferencia de `Select`, el disparador no muestra un único valor sino los
+ * nombres seleccionados junto a un badge circular con el conteo, y cada
+ * opción del panel se marca/desmarca con un checkbox sin cerrar el panel.
+ * Incluye una opción "Todas" al inicio de la lista, con estado
+ * `indeterminate` cuando hay selección parcial — el mismo patrón de
+ * "seleccionar todos" de `Checkbox`. "Todas" nunca se filtra por el buscador:
+ * queda siempre visible y sigue actuando sobre el universo COMPLETO de
+ * `options()`, no sobre el subconjunto filtrado (ver JSDoc de `toggleAll()`).
  *
  *   <kf-multi-select
  *     label="Sucursales"
@@ -1195,14 +1447,27 @@ declare class MultiSelect {
     readonly values: _angular_core.InputSignal<string[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
+     * se activa solo cuando `options().length` supera `searchThreshold()`. Si
+     * el consumidor define `true`/`false` explícitamente, ese valor manda por
+     * sobre el umbral automático. Mismo criterio que `Select`.
+     */
+    readonly searchable: _angular_core.InputSignal<boolean | undefined>;
+    readonly searchThreshold: _angular_core.InputSignal<number>;
     readonly valuesChange: _angular_core.OutputEmitterRef<string[]>;
     private readonly instanceId;
     readonly triggerId: string;
     readonly listboxId: string;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
     readonly selectedCount: _angular_core.Signal<number>;
     readonly allSelected: _angular_core.Signal<boolean>;
     readonly isPartiallySelected: _angular_core.Signal<boolean>;
+    readonly showSearch: _angular_core.Signal<boolean>;
+    /** Opciones visibles tras aplicar el filtro de búsqueda ("Todas" nunca se filtra). */
+    readonly filteredOptions: _angular_core.Signal<MultiSelectOption[]>;
     /**
      * Texto del disparador: placeholder si no hay selección, o los nombres
      * seleccionados unidos por coma (el conteo va aparte, en el badge). Con
@@ -1210,18 +1475,88 @@ declare class MultiSelect {
      * corta el texto — el badge de conteo siempre queda visible al lado.
      */
     readonly summaryText: _angular_core.Signal<string>;
-    private readonly host;
+    private readonly triggerRef;
+    private readonly panelTemplate;
+    private readonly searchInputRef;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly destroyRef;
+    private overlayRef;
+    constructor();
     isSelected(value: string): boolean;
     toggle(): void;
     toggleOption(value: string): void;
-    /** Alterna entre "todas seleccionadas" y "ninguna seleccionada". */
+    /**
+     * Alterna entre "todas seleccionadas" y "ninguna seleccionada". Actúa
+     * siempre sobre el universo COMPLETO de `options()`, no sobre
+     * `filteredOptions()` — con un buscador activo, "Todas" no se filtra ni
+     * cambia de significado: seguir marcando/desmarcando únicamente lo visible
+     * sería sorprendente para quien ya tenía otras opciones (no visibles en el
+     * filtro actual) seleccionadas de antes.
+     */
     toggleAll(): void;
-    onDocumentClick(event: MouseEvent): void;
+    onSearchInput(event: Event): void;
+    /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
+    moveActive(delta: number): void;
+    toggleActive(): void;
     onEscape(): void;
+    private attach;
+    private detach;
+    private getOrCreateOverlayRef;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
 }
 
+type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
+type TextVariant = 'title-xxl' | 'title-xl' | 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption';
+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á.
+ *
+ * `title-xl`/`title-xxl` son un tier aparte de `title-lg|md|sm`: no vienen
+ * de la auditoría de contenido de página (esa cerró en 2.125rem), son para
+ * títulos protagonistas de pantalla completa (ej. bienvenida del home vía
+ * `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
+ *
+ *   <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>;
+}
+
+/**
+ * Tamaño del título — `md` es el tamaño de siempre (no rompe a nadie que no
+ * lo especifique). Cada valor mapea 1:1 a una variante `title-*` de
+ * `kf-text` (ver `Text.ts`); `xl`/`xxl` son el tier "hero" de esa escala,
+ * pensado para casos de un título más protagonista (ej. bienvenida del home).
+ */
+type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 /**
  * Bloque de título al tope de una página: chip de ícono opcional, título (h1),
  * subtítulo opcional y un área de acciones opcional proyectada vía
@@ -1233,13 +1568,17 @@ declare class MultiSelect {
  *   </kf-page-header>
  *
  *   <kf-page-header icon="settings" title="Configuración" />
+ *
+ *   <kf-page-header size="xl" title="Bienvenido de nuevo" />
  */
 declare class PageHeader {
     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<PageHeaderTitleSize>;
+    protected readonly titleVariant: _angular_core.Signal<TextVariant>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-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; }; }, {}, never, ["[actions]"], true, never>;
 }
 
 /** Un número de página clickeable o un separador "…" no interactivo. */
@@ -1285,6 +1624,13 @@ declare class Pagination {
  *   <kf-panel title="Mis documentos por pagar" actionLabel="Ir a pagos" actionHref="/pagos">
  *     <kf-action-tile-row icon="download" title="Pagos" description="Revisa tu estado de cuenta y realiza pagos." />
  *   </kf-panel>
+ *
+ * El host y el `kf-card` interno son flex column con `flex:1` de punta a
+ * punta — si un grid/flex externo estira `kf-panel` a la altura de un
+ * hermano más alto, el contenido proyectado hereda esa altura en vez de
+ * dejar un hueco vacío bajo el `kf-card`. Sin esa presión externa (altura
+ * "auto" del contenedor), `flex:1` no tiene espacio extra que repartir y el
+ * panel se comporta igual que antes.
  */
 declare class Panel {
     readonly title: _angular_core.InputSignal<string>;
@@ -1294,11 +1640,14 @@ declare class Panel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/** Un ítem de navegación de la barra de marca. */
+/** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
+ * usa en el drawer mobile (columna, ver template) — el `<nav>` horizontal de
+ * escritorio se mantiene solo texto, sin ícono ni chevron. */
 interface PortalHeaderNavItem {
     label: string;
     href: string;
     active?: boolean;
+    icon?: IconName;
 }
 /** Una acción de la franja de administrador (ej. "Consultar deuda clientes"). */
 interface PortalHeaderAdminAction {
@@ -1321,21 +1670,43 @@ interface PortalHeaderAdminAction {
  *
  * 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-drawer` (panel lateral genérico, ver `Drawer.ts`) anclado al borde
+ * IZQUIERDO — mismo lado que el botón que lo abre, convención dominante
+ * Material/iOS/Android — con los mismos `navItems` en columna dentro del
+ * body (fondo claro) de ese drawer.
+ *
+ * `PortalHeader` expone dos slots propios pensados para que el consumidor
+ * proyecte contenido que en escritorio vive en otro lugar:
+ * - `<ng-content select="[kf-portal-header-extra]">`: identidad de sesión
+ *   (ej. `kf-drawer-session`). Cae en `[kf-drawer-header]` de `kf-drawer` —
+ *   el único contenedor con fondo oscuro (`--kf-color-tertiary-deep`, ver
+ *   `Drawer.ts`) que `kf-drawer-session` espera como fondo (no trae uno
+ *   propio, ver `DrawerSession.ts`).
+ * - `<ng-content select="[kf-portal-header-footer]">`: acciones separadas del
+ *   resto (ej. `kf-drawer-logout`). Cae en `[kf-drawer-footer]` de
+ *   `kf-drawer`, mismo criterio de "no reimplementar nada del drawer": el
+ *   footer ya trae su propio padding/separador (ver `Drawer.ts`).
+ *
+ * `PortalHeader` no sabe qué es ninguno de los dos contenidos ni cómo se
+ * abren, solo les da el lugar correcto dentro del drawer ya desplegado.
+ * `kf-drawer` resuelve overlay con blur, cierre con click-afuera/`Escape`,
+ * atrapado de foco real y devolución de foco al cerrar — `PortalHeader` no
+ * reimplementa nada de eso, solo controla su `open` desde el botón de
+ * hamburguesa.
  *
  *   <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' }]"
+ *     [navItems]="[{ label: 'Home', href: '/', active: true, icon: 'grid' }, { label: 'Vehículos', href: '/vehiculos', icon: 'truck' }]"
  *     userInitials="TS"
  *   >
- *     <div kf-portal-header-extra>contenido propio, solo visible en el panel mobile</div>
+ *     <kf-drawer-session
+ *       kf-portal-header-extra
+ *       brand="Portal Kaufmann LATAM"
+ *       name="Tomás Soto"
+ *       email="tomas.soto@kaufmann.com"
+ *     />
+ *     <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
  *   </kf-portal-header>
  */
 declare class PortalHeader {
@@ -1345,10 +1716,10 @@ 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). */
+    /** Visibilidad del drawer de navegación mobile (bajo los 768px). Se pasa a
+     * `kf-drawer` como `[(open)]` — `PortalHeader` ya no implementa overlay,
+     * `Escape` ni atrapado de foco por su cuenta, eso vive en `Drawer`. */
     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`
@@ -1361,7 +1732,7 @@ declare class PortalHeader {
      */
     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, ["[kf-portal-header-extra]"], 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]", "[kf-portal-header-footer]"], true, never>;
 }
 
 /**
@@ -1375,7 +1746,12 @@ declare class PortalHeader {
  * invitación + las acciones como un bloque compuesto propio del dominio
  * "taller", no un placeholder de una sola pieza.
  *
- *   <kf-reserve-block emptyLabel="No tienes reservas de taller"
+ * `grow` estira el panel de invitación para llenar el espacio vertical
+ * disponible — solo cuando el consumidor comparte fila con una tarjeta más
+ * alta (ej. junto a "Total de vehículos"); en un lugar sin esa presión
+ * (home, debajo del carousel) se deja en su alto natural.
+ *
+ *   <kf-reserve-block emptyLabel="No tienes reservas de taller" grow
  *     title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
  *     actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
  *     <kf-button actions icon="calendar">Reservar hora</kf-button>
@@ -1388,8 +1764,10 @@ declare class ReserveBlock {
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly actionLabel: _angular_core.InputSignal<string | undefined>;
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
+    readonly grow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReserveBlock, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
 }
 
 /**
@@ -1490,16 +1868,30 @@ declare class Select {
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
+     * se activa solo cuando `options().length` supera `searchThreshold()`. Si
+     * el consumidor define `true`/`false` explícitamente, ese valor manda por
+     * sobre el umbral automático.
+     */
+    readonly searchable: _angular_core.InputSignal<boolean | undefined>;
+    readonly searchThreshold: _angular_core.InputSignal<number>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     private readonly instanceId;
     readonly triggerId: string;
     readonly listboxId: string;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
     /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
+    readonly showSearch: _angular_core.Signal<boolean>;
+    /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
+    readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
     private readonly triggerRef;
     private readonly panelTemplate;
+    private readonly searchInputRef;
     private readonly overlayService;
     private readonly viewContainerRef;
     private readonly destroyRef;
@@ -1514,11 +1906,107 @@ declare class Select {
     onDocumentEscape(): void;
     toggle(): void;
     select(option: SelectOption): void;
+    onSearchInput(event: Event): void;
+    /**
+     * Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp
+     * simple (sin wraparound): llegar al final o al principio de la lista se
+     * queda ahí en vez de dar la vuelta — es el comportamiento más predecible
+     * cuando se combina con un buscador que puede reducir la lista a 1 opción.
+     */
+    moveActive(delta: number): void;
+    selectActive(): 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>;
+    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; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Tipo que consume `kf-sidebar-shell.navItems`. `icon` es requerido: en el
+ * sidebar persistente el ícono es parte permanente del diseño. */
+interface SidebarNavItemData {
+    icon: IconName;
+    label: string;
+    href: string;
+    active?: boolean;
+}
+/**
+ * Ítem de navegación de `kf-sidebar-shell` — ícono + label en fila, estado
+ * activo, sin agrupación. Es el equivalente vertical/persistente del `<a>`
+ * que arma `kf-portal-header` para su `<nav>` horizontal.
+ *
+ * `collapsed` se recibe como input explícito (no vía `:host-context`): el
+ * componente no necesita saber cómo funciona el estado de colapso del
+ * shell, solo qué hacer cuando `collapsed` es `true`.
+ *
+ * No sabe nada de routing — emite `href` como cualquier link y deja que el
+ * consumidor intercepte el click para integrarlo con el Router.
+ */
+declare class SidebarNavItem {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly href: _angular_core.InputSignal<string>;
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Oculta el label y centra el ícono — lo controla `kf-sidebar-shell` según su propio estado de colapso. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarNavItem, "kf-sidebar-nav-item", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Shell de layout con navegación lateral persistente — el complemento
+ * vertical de `kf-portal-header` (navbar horizontal). Pensado para
+ * portales tipo "aplicación interna" (Portal OTD, Servicio Star).
+ *
+ * `navItems` se recibe como array de datos (no como contenido proyectado):
+ * el componente no sabe nada de routing, emite `navItemClick` con el ítem
+ * clickeado y deja que el consumidor decida cómo navegar.
+ *
+ * Slots: `[kf-sidebar-brand]` (logo del rail expandido, visible en desktop
+ * y en el panel mobile — es el MISMO rail), `[kf-sidebar-brand-collapsed]`
+ * (reemplazo opcional cuando el rail está colapsado en desktop),
+ * `[kf-sidebar-brand-mobile]` (logo de la topbar angosta de mobile, fondo
+ * claro) y `[kf-sidebar-footer]` (tarjeta de usuario / acciones al pie).
+ *
+ * Botón de colapso: vive como último ítem de la propia lista de
+ * navegación, no flotando en el borde del rail — mismo criterio de
+ * tap-target grande y predecible que el resto de los ítems.
+ *
+ * Responsive: bajo los 900px el sidebar NO se reemplaza por un panel
+ * distinto — es el MISMO rail el que pasa a `position: fixed` fuera de la
+ * pantalla (`translateX(-100%)`) y se desliza a la vista (`translateX(0)`)
+ * sobre un backdrop cuando `mobileOpen` es `true`. Una topbar angosta con
+ * botón de hamburguesa reemplaza al rail en el flujo del documento
+ * mientras el panel está cerrado.
+ *
+ * A propósito NO reutiliza `kf-drawer` (el panel lateral genérico de la
+ * librería): `kf-drawer` tiene su propio fondo claro fijo y duplicaría el
+ * árbol de navegación en un segundo lugar del DOM. Bug de contraste ya
+ * corregido en el historial: los `kf-sidebar-nav-item`, con texto claro
+ * pensado para el gradiente oscuro, quedaban invisibles sobre el fondo
+ * blanco de `kf-drawer`. Acá hay un solo rail, un solo árbol de nav, que
+ * cambia de posición según el viewport.
+ */
+declare class SidebarShell {
+    /** Ítems del menú del rail. */
+    readonly navItems: _angular_core.InputSignal<SidebarNavItemData[]>;
+    /** Estado de colapso del rail en desktop, two-way. Sin efecto bajo los 900px (ver estilos). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Visibilidad del rail deslizado como panel en mobile, two-way. */
+    readonly mobileOpen: _angular_core.ModelSignal<boolean>;
+    /** Se emite al clickear un ítem — el consumidor decide cómo navegar (ej. `router.navigateByUrl`). */
+    readonly navItemClick: _angular_core.OutputEmitterRef<SidebarNavItemData>;
+    /** `true` bajo los 900px — sin esto, un rail dejado colapsado en desktop
+     * seguía ocultando el label de cada ítem al abrir el panel en mobile. */
+    private readonly isMobileViewport;
+    /** Estado de colapso que efectivamente se le pasa a cada `kf-sidebar-nav-item`
+     * y al propio botón de colapso. */
+    protected readonly itemsCollapsed: _angular_core.Signal<boolean>;
+    /** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
+    protected onEscape(): void;
+    protected onNavItemClick(event: Event, item: SidebarNavItemData): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarShell, "kf-sidebar-shell", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "navItemClick": "navItemClick"; }, never, ["[kf-sidebar-brand]", "[kf-sidebar-brand-collapsed]", "[kf-sidebar-footer]", "[kf-sidebar-brand-mobile]"], true, never>;
 }
 
 /** Forma del placeholder. */
@@ -1649,44 +2137,6 @@ 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
@@ -1784,6 +2234,34 @@ declare class ToastHost {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastHost, "kf-toast-host", never, {}, {}, never, never, true, never>;
 }
 
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Tooltip de hover/focus — reemplaza el atributo `title` nativo del
+ * navegador (lento en aparecer, sin estilo, inconsistente entre
+ * navegadores/SO) por un panel propio, mismo mecanismo de
+ * `@angular/cdk/overlay` que ya usa `Dropdown`.
+ *
+ * Pensado para el caso "ícono sin label visible necesita comunicar qué
+ * es" (ej. `kf-sidebar-nav-item` colapsado). No es two-way: a diferencia
+ * de `Dropdown`, esto se abre/cierra solo con hover/focus, nunca por click.
+ *
+ *   <a [kfTooltip]="label()" kfTooltipPosition="right">…</a>
+ */
+declare class TooltipDirective {
+    text: string;
+    kfTooltipPosition: TooltipPosition;
+    private readonly host;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private overlayRef;
+    protected show(): void;
+    protected hide(): void;
+    private positionsFor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[kfTooltip]", never, { "text": { "alias": "kfTooltip"; "required": false; }; "kfTooltipPosition": { "alias": "kfTooltipPosition"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Estado puntual mostrado junto a la identidad del vehículo (ej. "En ruta",
  * "Mantenimiento", "Fuera de servicio"). `tone` define el color semántico:
@@ -1842,5 +2320,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, 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 };
+export { ActionTile, AdminBadge, Alert, AuthLayout, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Drawer, DrawerLogout, DrawerSession, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, FolderTabsPanel, Footer, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SidebarNavItem, SidebarShell, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, TooltipDirective, VehicleHeader, ViewToggle };
+export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, DividerOrientation, DrawerSide, DropdownItemTone, DropdownPanelVariant, FolderTabOption, FooterLink, IconName, IconSize, LinkVariant, MultiSelectOption, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, TabOption, TextAs, TextTone, TextVariant, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, VehicleHeaderStatus, ViewToggleOption };