@kaufmann-lab/ui 0.1.16 → 0.1.18

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

@@ -0,0 +1,3288 @@
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SafeResourceUrl } from '@angular/platform-browser';
+
+/**
+ * Nombre de cada ícono del design system. Página 5 del PDF fija un set de
+ * 59; `eye-off` es una extensión propia por fuera de ese set, agregada para
+ * el toggle de mostrar/ocultar contraseña de `Input` — no hay un ícono de
+ * "ojo tachado" en la spec original porque esa interacción no estaba
+ * contemplada ahí.
+ *
+ * Separado de `Icon.ts` a propósito: este type es el contrato público que
+ * comparten `Icon`, `icons/index.ts` (registro) y cualquier componente que
+ * reciba un `IconName` (`Button`, `MetricCard`, etc.) — no debería requerir
+ * importar el componente `Icon` completo solo para tipar una prop.
+ *
+ * `minus`, `maximize`, `minimize`, `crosshair` y `navigation` son una
+ * extensión propia (mismo criterio que `eye-off`): página 5 del PDF no las
+ * incluye, pero los controles flotantes de `kf-map` (zoom, fullscreen,
+ * recenter, follow) los necesitan y ninguno tiene un glyph equivalente ya
+ * en el set — antes de agregarlos se confirmó que no había forma de resolver
+ * esas 5 acciones con un ícono ya existente.
+ *
+ * `message-circle`, `monitor`, `zap` y `pin` son otra extensión propia, mismo
+ * criterio: el selector de canal de entrada de ticket (Llamada/WhatsApp/
+ * Portal/API·agente) de `apps/operations` necesita "burbuja de chat",
+ * "pantalla" y "rayo" y ninguno tiene glyph equivalente en el set (`phone`
+ * ya cubre "Llamada", no hizo falta agregarlo). `pin` es la acción de
+ * fijar/soltar un subheader — se confirmó que no alcanza con reusar
+ * `map-pin`, que en este mismo dominio representa ubicación geográfica real
+ * de vehículos; reusarlo para "fijar" generaría ambigüedad con los markers
+ * de mapa.
+ */
+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' | 'crosshair' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'home' | 'inbox' | 'layers' | 'list' | 'log-out' | 'mail' | 'map' | 'map-pin' | 'maximize' | 'menu' | 'message-circle' | 'mic' | 'mic-off' | 'minimize' | 'minus' | 'monitor' | 'more-vertical' | 'navigation' | 'pause' | 'phone' | 'pin' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x' | 'zap';
+
+type IconSize = 'sm' | 'md' | 'lg';
+/** Ángulos de rotación soportados por `rotate` — cubre los casos reales del
+ * design system (un chevron que apunta en 4 direcciones posibles según
+ * estado, ej. orden ascendente/descendente o un panel abierto/cerrado);
+ * no un `number` libre, para no habilitar ángulos arbitrarios sin caso de
+ * uso ni animación pensada. */
+type IconRotation = 0 | 90 | 180 | 270;
+/**
+ * Ícono de trazo del design system — 71 glyphs (59 de la página 5 + extensiones
+ * propias documentadas en `icon-name.ts`), 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
+ * vez que se renderiza cualquier `<kf-icon>` de toda la aplicación.
+ *
+ * El tamaño se controla con `size` (página 6: "el tamaño se controla con la
+ * prop size"): `sm` (16px), `md` (20px, default) o `lg` (24px). El color
+ * sigue siempre `currentColor` — se hereda del texto del elemento
+ * contenedor, nunca se fija en el propio ícono.
+ *
+ * `rotate` gira el mismo glyph en vez de requerir un ícono aparte por
+ * dirección — útil para un chevron que representa un estado con más de una
+ * orientación (ej. orden ascendente/descendente de una columna, un panel
+ * abierto/cerrado). La rotación transiciona con la misma duración que el
+ * resto de las transiciones cortas del design system.
+ *
+ *   <kf-icon name="alert-triangle" size="sm" />
+ *   <kf-icon name="chevron-down" [rotate]="isOpen() ? 180 : 0" />
+ *   <kf-button icon="calendar">Reservar hora</kf-button> <!-- ver Button -->
+ */
+declare class Icon {
+    readonly name: _angular_core.InputSignal<IconName>;
+    readonly size: _angular_core.InputSignal<IconSize>;
+    readonly rotate: _angular_core.InputSignal<IconRotation>;
+    /**
+     * Rellena el glyph (`fill: currentColor`) en vez de dejarlo solo de trazo.
+     * Pensado para un estado activo/marcado de un ícono usado como toggle (ej.
+     * "fijar" un panel) — un cambio de COLOR únicamente puede no distinguirse
+     * lo suficiente en marcas cuyo `--kf-color-secondary` queda cerca del color
+     * de texto por default; rellenar el área cambia más píxeles y se percibe
+     * con más contraste aunque el tono sea similar. No es el default del
+     * design system (sigue siendo de trazo, página 6 del PDF) — es opt-in por
+     * componente para ese caso puntual.
+     */
+    readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly document;
+    protected readonly pixelSize: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Icon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Icon, "kf-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Dos variantes del mismo concepto — acceso rápido a una sección (página
+ * 35): "Tile de acceso destacado" (`variant="tile"`, default) es un bloque
+ * centrado con ícono grande arriba y título abajo, pensado para una
+ * cuadrícula de accesos (ej. "Todos los certificados"). "Fila de documento"
+ * (`variant="row"`) es horizontal, con ícono a la izquierda y
+ * título+descripción a la derecha, pensada para listas verticales dentro de
+ * un `kf-panel` (ej. "Pagos" / "Revisa tu estado de cuenta y realiza pagos.").
+ *
+ *   <kf-action-tile icon="shield-check" title="Todos los certificados" />
+ *   <kf-action-tile variant="row" icon="download" title="Pagos"
+ *     description="Revisa tu estado de cuenta y realiza pagos." />
+ */
+declare class ActionTile {
+    readonly variant: _angular_core.InputSignal<"tile" | "row">;
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionTile, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionTile, "kf-action-tile", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marca la barra superior como chrome exclusivo de administradores (página
+ * 18) — acento ámbar para diferenciar contexto privilegiado del resto del
+ * portal. Dos variantes: etiqueta aislada (pill), o `inline` para usarse
+ * dentro de la franja de `kf-portal-header` (fondo oscuro, texto ámbar).
+ *
+ *   <kf-admin-badge />
+ *   <kf-admin-badge inline />
+ */
+declare class AdminBadge {
+    /** Para usarse dentro de una superficie oscura (ej. la franja de `kf-portal-header`). */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdminBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdminBadge, "kf-admin-badge", never, { "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Envuelve un `<button>` nativo: mantiene teclado, foco y submit de formulario.
+ * Como es un elemento personalizado, ningún atributo ARIA puesto en el host
+ * llega al `<button>` interno — por eso `disabled`, `type`, `ariaLabel`,
+ * `ariaExpanded` y `ariaPressed` se reenvían a mano.
+ *
+ * Seis variantes: `primary`, `secondary`, `ghost`, `outline`, `danger`,
+ * `surface`. Tres tamaños (`sm`/`md`/`lg`). `icon` agrega un glifo antes del
+ * label proyectado; `block` estira el botón a todo el ancho de su contenedor.
+ *
+ * `surface` es la variante neutra pensada para flotar SOBRE contenido
+ * variable (ej. los controles de `kf-map` sobre un mapa que cambia de tema:
+ * calles, satélite, oscuro) — fondo sólido de `--kf-color-surface` con
+ * sombra, en vez de depender de contraste contra lo que haya debajo (que
+ * `ghost`/`outline`, transparentes, no pueden garantizar ahí).
+ *
+ * `shape="circle"` vuelve el botón cuadrado con esquina `pill` (mismo ancho
+ * y alto, sin padding horizontal extra) — pensado para uso solo-ícono
+ * (`icon` sin contenido proyectado): combinarlo con un label visible
+ * descentra el ícono, no es el caso de uso.
+ *
+ * `(click)` no se reenvía: burbujea del botón interno al host solo.
+ *
+ * `loading` reemplaza el contenido proyectado por `kf-spinner` y fuerza
+ * `disabled`.
+ *
+ * Botón solo-ícono (sin label visible): pasar `ariaLabel` en vez de dejar el
+ * botón sin nombre accesible.
+ *
+ *   <kf-button (click)="save()">Guardar</kf-button>
+ *   <kf-button variant="danger" (click)="remove()">Eliminar</kf-button>
+ *   <kf-button size="sm" icon="external-link" ariaLabel="Expandir" (click)="expand()" />
+ *   <kf-button type="submit" [loading]="submitting()">Ingresar</kf-button>
+ *   <kf-button variant="surface" shape="circle" icon="plus" ariaLabel="Acercar" [ariaPressed]="false" />
+ */
+declare class Button {
+    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger" | "surface">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly shape: _angular_core.InputSignal<"rect" | "circle">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Igual al default nativo: hace submit dentro de un `<form>`. */
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /** Ícono líder, renderizado con `kf-icon` antes del label proyectado. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** Estira el botón a todo el ancho de su contenedor. */
+    readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Reemplaza el contenido proyectado por `kf-spinner` y fuerza `disabled`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nombre accesible del botón interno — obligatorio quien no proyecta
+     * ningún texto visible (botón solo-ícono), porque el host no lo reenvía. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Estado expandido/colapsado para un botón toggle — mismo motivo que
+     * `ariaLabel`, el host no reenvía atributos ARIA al `<button>` interno. */
+    readonly ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /** Estado presionado/no presionado para un botón toggle real (ej. "seguir
+     * vehículo" activo/inactivo) — distinto semánticamente de `ariaExpanded`
+     * (que es para mostrar/ocultar un panel), mismo motivo de reenvío manual.
+     * Con `icon`, presionado (`true`) rellena el glyph (`kf-icon[filled]`) en
+     * vez de solo cambiar de color — un toggle solo-ícono necesita esa señal
+     * más fuerte para leerse activo, y así ningún consumidor tiene que
+     * acordarse de pedirlo aparte. */
+    readonly ariaPressed: _angular_core.InputSignal<boolean | undefined>;
+    /** `ghost`/`outline`/`surface` no tienen fondo oscuro sólido — el anillo
+     * del spinner por defecto ya se lee bien ahí sin variante propia
+     * (`surface` es fondo claro con texto oscuro, mismo motivo que `outline`). */
+    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; }; "shape": { "alias": "shape"; "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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type AlertTone = 'info' | 'ok' | 'warn' | 'error';
+/**
+ * Banner contextual que vive dentro del flujo: validaciones, avisos de
+ * vencimiento, confirmaciones. Persiste hasta que se descarta o hasta que la
+ * condición que lo causó desaparece — para feedback efímero está el toast.
+ *
+ * `open` es two-way: el botón de cerrar lo pone en `false` y el componente
+ * deja de renderizar. El consumidor puede volver a abrirlo poniéndolo en
+ * `true` (ej. cuando la validación falla otra vez).
+ *
+ *   <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
+ *   <kf-alert tone="ok" [(open)]="saved" dismissible>Pago registrado.</kf-alert>
+ */
+declare class Alert {
+    readonly tone: _angular_core.InputSignal<AlertTone>;
+    /** Línea en negrita arriba del mensaje. Vacío deja solo el contenido proyectado. */
+    readonly title: _angular_core.InputSignal<string>;
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Visibilidad, two-way: `[(open)]="hasError"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * `alert` interrumpe al lector de pantalla; se reserva para error/warn.
+     * Los avisos informativos se anuncian sin cortar lo que se esté leyendo.
+     */
+    protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
+    protected readonly toneIcon: _angular_core.Signal<IconName>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "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>;
+}
+
+type AlertRowTone = 'warn' | 'error';
+/**
+ * Fila clickeable de una lista de pendientes/alertas: ícono circular con
+ * tono semántico, texto de una línea, chevron al final. Pensada para
+ * agrupar varias dentro de un `kf-card` (ej. "Tus pendientes" del
+ * dashboard) — no incluye el contenedor en sí.
+ *
+ *   <kf-alert-row icon="file" tone="warn" text="2 cotizaciones esperan tu aprobación" (rowClick)="onNavigate('cotizaciones')" />
+ */
+declare class AlertRow {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<AlertRowTone>;
+    readonly text: _angular_core.InputSignal<string>;
+    readonly rowClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, 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`
+ * controla la forma: circular (por defecto) o cuadrada con radio.
+ *
+ * Con `pill`, el avatar se envuelve en una pastilla azul con un chevron a la
+ * derecha — la "pill de usuario (header)" de la página 18 del design system,
+ * usada en la barra de sesión del Portal Header.
+ *
+ *   <kf-avatar initials="JD" />
+ *   <kf-avatar src="https://…/foto.jpg" [round]="false" />
+ *   <kf-avatar initials="TS" pill />
+ */
+declare class Avatar {
+    readonly initials: _angular_core.InputSignal<string | undefined>;
+    readonly src: _angular_core.InputSignal<string | undefined>;
+    readonly round: _angular_core.InputSignal<boolean>;
+    /** Envuelve el avatar en la pastilla de sesión del header, con chevron. */
+    readonly pill: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Limita a 2 caracteres para que quepan cómodos dentro del círculo. */
+    readonly displayInitials: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Avatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Avatar, "kf-avatar", never, { "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "round": { "alias": "round"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pill chica de fondo suave para un conteo, tag o estado liviano puntual —
+ * no un proceso en vivo (para eso, `kf-status-pill`, con borde en vez de
+ * relleno). Fondo soft y texto del tono fuerte según `tone`; `service` usa
+ * el color base porque `secondary` todavía no tiene variante `-strong`.
+ * `variant` es un eje ortogonal a `tone` (mismo patrón que `kf-button`):
+ * `soft` (default) es el fondo de color sólido de siempre; `glass` es
+ * translúcido con desenfoque, pensado para un badge sobre una superficie
+ * de marca (ej. un header navy), no para un banner suelto. En `glass` el
+ * punto (`dot`) usa el color BASE de cada tono, no `-strong` — ese último
+ * está pensado para texto legible sobre el fondo pastel de `soft` y se ve
+ * apagado sobre una superficie translúcida/oscura.
+ */
+declare class Badge {
+    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error" | "info" | "service">;
+    readonly variant: _angular_core.InputSignal<"soft" | "glass">;
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface BreadcrumbItem {
+    label: string;
+    /** Destino del link. Sin `href` el nivel se rinde como texto plano. */
+    href?: string;
+}
+/**
+ * Ruta de navegación de las vistas internas. El último nivel es la página
+ * actual: nunca es link y lleva `aria-current="page"`, aunque traiga `href`.
+ *
+ * Se rinde como `<nav><ol>` — es una lista ordenada de ancestros, y eso es lo
+ * que los lectores de pantalla anuncian ("navegación, lista de 3 elementos").
+ *
+ * Para apps con router: escuchar `itemClick` y llamar
+ * `event.preventDefault()` antes de `router.navigate(...)`. El `href` se
+ * mantiene igual para que click-medio, "abrir en pestaña nueva" y el hover
+ * de la barra de estado sigan funcionando.
+ *
+ *   <kf-breadcrumb [items]="[{ label: 'Inicio', href: '/' }, { label: 'Mis vehículos' }]" />
+ */
+declare class Breadcrumb {
+    readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    /**
+     * Click en un nivel con `href`. Incluye el `MouseEvent` para que un
+     * consumidor con router pueda cortar la navegación nativa. No se depende
+     * de `@angular/router` acá — sería un peer dep nuevo en la librería para
+     * lo que el consumidor resuelve en una línea.
+     */
+    readonly itemClick: _angular_core.OutputEmitterRef<{
+        item: BreadcrumbItem;
+        index: number;
+        event: MouseEvent;
+    }>;
+    protected readonly lastIndex: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Breadcrumb, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Breadcrumb, "kf-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+/**
+ * Una categoría de la barra — el componente no sabe qué significa "pagada"
+ * o "vencida", solo dibuja proporciones: `count` decide el ancho relativo
+ * del segmento (`flex-grow`) y de la fila de leyenda que lo acompaña.
+ * `color` es cualquier valor CSS válido (pensado para tokens `var(--kf-*)`,
+ * nunca hex suelto desde el consumidor).
+ */
+interface BucketProgressItem {
+    key: string;
+    label: string;
+    count: number;
+    color: string;
+}
+/**
+ * Barra de progreso segmentada en categorías proporcionales — generaliza
+ * el resumen de "Progreso del plan de pagos" de Pagos y Facturas de OTD
+ * (cuotas pagadas/vencidas/próximas/pendientes) sin acoplarse a esas 4
+ * categorías puntuales: el consumidor pasa sus propios `items` con
+ * `{key, label, count, color}`.
+ *
+ * Los segmentos son proporcionales por CANTIDAD (`flex-grow: count`), no
+ * uno por unidad — con 36 cuotas y 6 pagadas, la barra dibuja 2 anchos
+ * distintos (pagado ~17% / resto ~83%), nunca 36 rectángulos idénticos
+ * (hallazgo real de UX: con volumen alto, un segmento por unidad se vuelve
+ * ilegible). Los `items` con `count: 0` no se dibujan (ni segmento ni
+ * fila de leyenda) — no tiene sentido mostrar una categoría vacía.
+ *
+ * La leyenda debajo reproduce el mismo orden y color que la barra, para
+ * que una categoría se pueda mapear a su cantidad de un vistazo (pedido
+ * explícito de UX: "posicionar correctamente los labels").
+ *
+ *   <kf-bucket-progress
+ *     title="Progreso del plan de pagos"
+ *     [summary]="'6 de 30 cuotas pagadas'"
+ *     [items]="[
+ *       { key: 'paid', label: 'pagadas', count: 6, color: 'var(--kf-color-success)' },
+ *       { key: 'overdue', label: 'vencidas', count: 2, color: 'var(--kf-color-error)' },
+ *       { key: 'upcoming', label: 'próxima', count: 1, color: 'var(--kf-color-warning)' },
+ *       { key: 'pending', label: 'pendientes', count: 21, color: 'var(--kf-color-gray-200)' },
+ *     ]"
+ *   />
+ */
+declare class BucketProgress {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Texto libre a la derecha del título (ej. "6 de 30 cuotas pagadas") —
+     * el componente no sabe calcular ese resumen, lo recibe hecho. */
+    readonly summary: _angular_core.InputSignal<string>;
+    readonly items: _angular_core.InputSignal<BucketProgressItem[]>;
+    protected readonly visibleItems: _angular_core.Signal<BucketProgressItem[]>;
+    protected readonly total: _angular_core.Signal<number>;
+    /** Descripción accesible de la barra completa — un solo `role="img"`
+     * con el desglose en texto, en vez de que cada segmento individual
+     * compita por foco/lectura de screen reader. */
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BucketProgress, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BucketProgress, "kf-bucket-progress", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Contenedor base con esquinas redondeadas y sombra sutil — la base visual
+ * de paneles, tarjetas de métrica, tablas y bloques de contenido de todo el
+ * portal (ver página 14 del design system).
+ *
+ * Piensa este componente como el "cimiento": no impone estructura interna
+ * más allá de dos slots opcionales alrededor del contenido libre —
+ * `[media]` para una imagen/ícono destacado arriba, y `[actions]` para una
+ * fila de botones al pie, separada por una línea. El contenido por defecto
+ * (sin selector) queda en el medio, sin ningún layout forzado, para que
+ * cualquier composición (una métrica, una lista, un formulario) pueda vivir
+ * dentro sin pelear con estilos propios del `Card`.
+ *
+ * `gap` controla el espacio entre los hijos directos del cuerpo — `md`
+ * (default) separa bloques con peso propio (un `kf-section-header`
+ * seguido de datos, por ejemplo); `xs`/`sm` para texto corrido o bloques
+ * más compactos, `lg`/`xl` para composiciones con más aire entre secciones.
+ *
+ *   <kf-card>
+ *     <kf-section-header title="Cliente" />
+ *     <dl>…</dl>
+ *   </kf-card>
+ *   <kf-card gap="xs">Texto corrido, sin bloques que separar</kf-card>
+ *   <kf-card flush>Sin sombra — para superficies ya delimitadas por otra card</kf-card>
+ *   <kf-card>
+ *     <img kf-card-media src="..." alt="" />
+ *     <h3>Título</h3>
+ *     <p>Descripción</p>
+ *     <div kf-card-actions>
+ *       <kf-button variant="ghost">Cancelar</kf-button>
+ *       <kf-button>Guardar</kf-button>
+ *     </div>
+ *   </kf-card>
+ */
+declare class Card {
+    /** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
+    readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Espacio entre los hijos directos del cuerpo. `md` es el default. */
+    readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
+}
+
+/**
+ * Slide individual de un `kf-carousel`. Es un contenedor mínimo: solo existe
+ * para que el carrusel pueda detectar, vía `contentChildren`, cuántos slides
+ * se proyectaron y en qué orden — el contenido real es responsabilidad total
+ * de quien lo consume.
+ *
+ *   <kf-carousel-slide>...</kf-carousel-slide>
+ */
+declare class CarouselSlide {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselSlide, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselSlide, "kf-carousel-slide", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Carrusel de slides con flechas, dots y autoplay opcional.
+ *
+ * La spec original de React recibe `slides` como un array de nodos React.
+ * En Angular eso no tiene equivalente directo: en vez de forzar un array de
+ * datos crudos, cada slide se proyecta como contenido declarativo mediante
+ * un `kf-carousel-slide` hijo, y el carrusel los detecta con
+ * `contentChildren(CarouselSlide)`. Esto evita depender de un renderer de
+ * nodos y deja que cada slide use plantillas Angular normales (bindings,
+ * `@if`, `@for`, etc.) tal como se espera en este ecosistema.
+ *
+ *   <kf-carousel [autoplay]="true" [interval]="4000" (indexChange)="onIndex($event)">
+ *     <kf-carousel-slide>...</kf-carousel-slide>
+ *     <kf-carousel-slide>...</kf-carousel-slide>
+ *   </kf-carousel>
+ */
+declare class Carousel implements AfterContentInit {
+    readonly autoplay: _angular_core.InputSignal<boolean>;
+    readonly interval: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly indexChange: _angular_core.OutputEmitterRef<number>;
+    readonly slides: _angular_core.Signal<readonly CarouselSlide[]>;
+    private readonly activeIndexSignal;
+    readonly activeIndex: _angular_core.Signal<number>;
+    private readonly destroyRef;
+    private timer;
+    private autoplayPaused;
+    ngAfterContentInit(): void;
+    next(): void;
+    previous(): void;
+    goTo(index: number): void;
+    pauseAutoplay(): void;
+    resumeAutoplay(): void;
+    private startAutoplay;
+    private stopAutoplay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Carousel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Carousel, "kf-carousel", never, { "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; }, { "indexChange": "indexChange"; }, ["slides"], ["*"], true, never>;
+}
+
+/**
+ * Checkbox accesible con soporte de estado "indeterminate".
+ *
+ * `indeterminate` no existe como atributo HTML: el navegador solo lo expone
+ * como propiedad del elemento nativo, así que se aplica a mano sobre el
+ * `<input>` interno vía `viewChild` + `effect` cada vez que cambia el input.
+ *
+ * Implementa `ControlValueAccessor` para poder usarse con `formControlName` /
+ * `ngModel` igual que un checkbox nativo. En ese modo, `writeValue` controla
+ * el DOM directamente y el input `checked` (pensado para binding manual sin
+ * forms) queda en su valor por defecto — igual que `disabled` combina el
+ * input signal con `setDisabledState` en el resto de la librería.
+ *
+ * `invalid` pinta el recuadro en rojo y setea `aria-invalid` en el `<input>`
+ * nativo — mismo mecanismo que `Input.invalid`, para el caso típico de un
+ * checkbox obligatorio (ej. "Acepto términos y condiciones") sin marcar.
+ *
+ *   <kf-checkbox label="Aceptar términos" [(checked)]="accepted" />
+ *   <kf-checkbox label="Seleccionar todo" [indeterminate]="isPartial()" />
+ *   <kf-checkbox label="Notificaciones" formControlName="notifications" />
+ *   <kf-checkbox label="Acepto los términos y condiciones" [invalid]="submitted() && !accepted()" />
+ */
+declare class Checkbox implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly checked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Recuadro en rojo + aria-invalid — ej. checkbox obligatorio sin marcar. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly inputRef;
+    /** Callbacks registrados por Forms; no-op hasta que registerOnChange/Touched las reemplacen. */
+    private onChangeFn;
+    private onTouchedFn;
+    constructor();
+    onChange(event: Event): void;
+    onTouched(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Checkbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Checkbox, "kf-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Chip de fondo suave con un punto líder que indica estado. Pensado
+ * principalmente para celdas de tabla (estado de fila), pero utilizable
+ * en cualquier lugar donde se necesite una etiqueta de estado compacta.
+ *
+ *   <kf-chip tone="warn">Pendiente</kf-chip>
+ *   <kf-chip tone="ok">Aprobado</kf-chip>
+ *   <kf-chip [dot]="false">4 Unidades</kf-chip>
+ *
+ * `dot` (default `true`) oculta el punto cuando el chip muestra un DATO
+ * (ej. una cantidad — "4 Unidades") y no un ESTADO — antes forzaba a cada
+ * portal a reimplementar el mismo patrón "pill con ícono + texto sin punto
+ * de estado" a mano (visto 2-3 veces idéntico en `web-otd-frontend`:
+ * `quotes-grid.html`/`quote-detail.html` para el conteo de unidades).
+ *
+ * Nota: la spec original define la unión de tonos como "ok" | "warn" |
+ * "error" | "neutral". Internamente se mapean a los tokens semánticos de
+ * projects/ui/src/tokens/base.css: ok -> success, warn -> warning,
+ * error -> error, neutral -> surface/border/text-muted (no existe un
+ * token "neutral" dedicado en base.css, así que se arma con los tokens
+ * de superficie/borde/texto-muted más cercanos).
+ */
+declare class Chip {
+    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error">;
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Bloque colapsable genérico: un header clickeable (título + chevron) que
+ * expande/colapsa contenido proyectado libre, sin saber nada de lo que hay
+ * adentro. Building block para layouts responsive donde un bloque se
+ * muestra inline en desktop pero se colapsa en mobile/tablet para ahorrar
+ * espacio vertical — el primer caso de uso real es un panel de filtros de
+ * tabla que en desktop queda siempre abierto y en mobile arranca cerrado.
+ *
+ * `expanded` es two-way, mismo patrón que `Drawer.open`: el consumidor
+ * decide el estado inicial y puede reaccionar a los cambios, pero el propio
+ * click en el header ya alterna el estado sin que el consumidor tenga que
+ * cablear un `(click)` manual.
+ *
+ *   <kf-collapsible title="Filtros" [(expanded)]="filtersOpen">
+ *     ...
+ *   </kf-collapsible>
+ *
+ * El ícono chevron es un SVG inline fijo (no una prop `icon` configurable)
+ * porque esta librería todavía no tiene un componente `Icon`/sprite
+ * compartido — un solo ícono fijo no amerita esperar esa abstracción.
+ */
+declare class Collapsible {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly panelId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Collapsible, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Collapsible, "kf-collapsible", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Popover de "Datos de contacto" de una persona (asesor, ejecutivo — nombre
+ * genérico a propósito, sin lógica de negocio de ninguna pantalla concreta
+ * adentro). Cada canal (`whatsapp`/`phone`/`email`) se muestra SOLO si
+ * viene con dato — nunca los 3 fijos — y si ninguno viene, un estado vacío
+ * explícito en vez de un panel a medio llenar. Mismo criterio que ya
+ * resolvía `sitio-privado-one-way-frontend` (repo hermano de Chile) para
+ * el asesor de taller, ahora como pieza compartida del design system.
+ *
+ *   <kf-contact-popover
+ *     [name]="advisor.name"
+ *     [whatsapp]="advisor.whatsapp"
+ *     [phone]="advisor.phone"
+ *     [email]="advisor.email"
+ *   />
+ */
+declare class ContactPopover {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly whatsapp: _angular_core.InputSignal<string | null>;
+    readonly phone: _angular_core.InputSignal<string | null>;
+    readonly email: _angular_core.InputSignal<string | null>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly whatsappHref: _angular_core.Signal<string | null>;
+    protected readonly phoneHref: _angular_core.Signal<string | null>;
+    protected readonly emailHref: _angular_core.Signal<string | null>;
+    protected readonly hasContactMethods: _angular_core.Signal<boolean>;
+    protected onToggle(): void;
+    protected onClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContactPopover, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContactPopover, "kf-contact-popover", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "whatsapp": { "alias": "whatsapp"; "required": false; "isSignal": true; }; "phone": { "alias": "phone"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marcador genérico para contenido aún por definir (página 38) — comunica
+ * "contenido disponible para uso" sin parecer un error, a diferencia de
+ * `kf-empty-state` (que comunica ausencia real de datos del usuario).
+ * Pensado para secciones del portal que un negocio todavía no completó.
+ *
+ * `compact` reduce el tamaño de la imagen placeholder y omite el badge de
+ * pie (segunda variante de la página 38, sin la etiqueta "Contenido
+ * disponible para uso" al final).
+ *
+ *   <kf-content-slot title="Contenido disponible"
+ *     description="Espacio reservado para contenido de Divemotor Perú. Disponible para uso." />
+ *   <kf-content-slot compact icon="star" title="Contenido disponible"
+ *     description="Espacio reservado para contenido de Divemotor Perú." />
+ */
+declare class ContentSlot {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentSlot, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSlot, "kf-content-slot", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** En qué estado está la sección. */
+type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
+/** Cómo se dibuja `loading`. Default `'skeleton'`. */
+type ContentStateLoad = 'skeleton' | 'spinner';
+/**
+ * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
+ * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
+ * siempre el mismo slot el que va rotando entre los cuatro.
+ *
+ * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
+ * tres dibuja el placeholder correspondiente y el contenido no se instancia.
+ * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
+ * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
+ *
+ * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
+ * mientras carga, porque no hay nada que reintentar todavía.
+ *
+ *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
+ *                     subtitle="Revisá tu conexión e intentá de nuevo.">
+ *     <kf-button actions (click)="retry()">Reintentar</kf-button>
+ *     <kf-data-table [columns]="cols" [rows]="rows()" />
+ *   </kf-content-state>
+ */
+declare class ContentState {
+    readonly state: _angular_core.InputSignal<ContentStateKind>;
+    /** Forma del estado de carga: silueta (default) o spinner. */
+    readonly load: _angular_core.InputSignal<ContentStateLoad>;
+    /** Título de `empty`/`error`. Ignorado mientras carga. */
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Texto al lado del spinner cuando `load="spinner"`. */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]"], true, never>;
+}
+
+type ContentViewerType = 'image' | 'video' | 'pdf';
+/**
+ * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
+ * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
+ * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
+ * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
+ * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
+ *
+ * `src` acepta lo que venga del backend sin que el consumidor tenga que
+ * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
+ * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
+ * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
+ * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
+ *
+ * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
+ * la barra superior, junto al título.
+ *
+ *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
+ *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
+ *   </kf-content-viewer>
+ */
+declare class ContentViewer {
+    readonly type: _angular_core.InputSignal<ContentViewerType>;
+    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
+    readonly src: _angular_core.InputSignal<string | null>;
+    /** Texto alternativo cuando `type="image"`. */
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly titleId: string;
+    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
+     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
+     * — el backend a veces manda una cosa, a veces la otra. */
+    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
+    protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
+    protected readonly fallbackLabel: _angular_core.Signal<string>;
+    private readonly dialog;
+    private readonly document;
+    private readonly sanitizer;
+    constructor();
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    protected onCancel(event: Event): void;
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     */
+    protected onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
+}
+
+/**
+ * Zona que ocupa la columna en la vista de cards. La vista de tabla ignora
+ * esto (salvo `media`, que igual se rinde como thumbnail en vez de imprimir
+ * la URL):
+ * - `media`: thumbnail a la izquierda del encabezado; el valor de la celda se
+ *   usa como `src` salvo que la columna traiga su `cellTemplates`.
+ * - `title`: título del encabezado (ej. la patente/unidad).
+ * - `status`: chip/estado al lado del título.
+ * - `field` (default): par label/valor en el cuerpo.
+ * - `action`: va al pie, separado del cuerpo por una línea.
+ */
+type DataTableCardRole = 'media' | 'title' | 'status' | 'field' | 'action';
+interface DataTableColumn {
+    key: string;
+    label: string;
+    right?: boolean;
+    className?: string;
+    cardRole?: DataTableCardRole;
+    /** Habilita ordenar por esta columna clickeando su header (solo vista
+     * tabla — en cards no hay header clickeable). Ciclo asc → desc → sin
+     * orden, un click a la vez. */
+    sortable?: boolean;
+    /** Fija la columna a un borde del scroll horizontal — típicamente la
+     * primera (identificador) y/o la última (acciones). Columnas `sticky`
+     * del mismo lado deben ser consecutivas y estar en ese extremo del
+     * array `columns`; el offset de cada una se calcula sumando el ancho
+     * real de las que ya quedaron fijas antes, medido en runtime (no hay
+     * forma de conocer el ancho de antemano, las columnas son de ancho
+     * variable según su contenido). */
+    sticky?: 'left' | 'right';
+    /** Ancho mínimo forzado — evita que una columna angosta (ej. un chip
+     * corto) se comprima más de la cuenta cuando hay poco espacio y otras
+     * columnas compiten por él. */
+    minWidth?: string;
+}
+/** Vistas disponibles cuando `cardable` está activo. */
+type DataTableView = 'table' | 'cards';
+/** Opciones de "filas por página" estándar del portal — 10 como default
+ * cubre bien tanto un dataset chico (ej. Beneficios) como uno con volumen
+ * real (ej. 30+ cuotas en Billing), sin sentirse vacío ni insuficiente; 25
+ * y 50 escalan ~2.5x cada paso, evitando un salto brusco donde la opción
+ * del medio no aporta nada. Cualquier consumidor puede pisar este default
+ * con su propio `pageSizeOptions` si su caso lo justifica — pasar `[]`
+ * explícitamente desactiva el selector aunque `pageSize` esté activo. */
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+/** Densidad de fila: `comfortable` (default, el padding actual) o
+ * `compact` (menos padding vertical, para tablas con muchas filas donde
+ * priorizar cantidad visible sobre aire entre filas). */
+type DataTableDensity = 'comfortable' | 'compact';
+/** `key:direction` — mismo formato que `sort` de `kf-quote-picker`, para
+ * que un consumidor que ya conoce ese patrón no aprenda uno nuevo acá. */
+type DataTableSort = `${string}:${'asc' | 'desc'}`;
+/**
+ * Tabla estandarizada con soporte opcional de toggle tabla/cards.
+ *
+ * El "render" custom por columna de la spec original (una función que
+ * devuelve JSX) se resuelve acá de dos formas, de la más simple a la más
+ * flexible:
+ * - `render`: función `(row) => string` para el caso típico de mostrar un
+ *   valor derivado/formateado de la fila como texto plano.
+ * - `cellTemplates`: mapa `key -> TemplateRef` para cuando un consumidor
+ *   necesita marcado real dentro de una celda (badges, links, botones). Se
+ *   proyecta con `ngTemplateOutlet` y recibe `{ $implicit: row, index }`.
+ * Se eligió esta combinación en vez de content-projection por columna
+ * (ng-content con selector) porque las columnas son dinámicas (vienen de
+ * `columns()`), y `ngTemplateOutlet` es el mecanismo estándar de Angular
+ * para "insertar esta plantilla por cada fila de este array".
+ *
+ * En la vista de cards, `cardRole` por columna reparte el contenido en zonas
+ * — encabezado (thumbnail + título + estado), cuerpo (pares label/valor) y
+ * pie separado por una línea para las acciones. Sin `cardRole`, todas las
+ * columnas caen en el cuerpo, igual que antes.
+ *
+ * El toggle tabla/cards es `kf-view-toggle`, componente standalone propio.
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" (rowClick)="onRowClick($event)">
+ *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
+ *   </kf-data-table>
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
+ *
+ * Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
+ * placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
+ * `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
+ * `[empty]` mientras dura (no sabemos aún si el resultado real estará
+ * vacío), y respeta la vista activa (tabla o cards) para no cambiar el
+ * layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
+ * el header de columnas siguen visibles — solo el cuerpo se reemplaza:
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
+ *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
+ *   </kf-data-table>
+ *
+ * El slot `[footer]` (página 15: "slot de pie para paginación") va siempre
+ * al final, en ambas vistas, separado por una línea — pensado para proyectar
+ * `<kf-pagination>`, que sigue siendo un componente independiente.
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows">
+ *     <kf-pagination footer [page]="page()" [total]="total()" (pageChange)="page.set($event)" />
+ *   </kf-data-table>
+ *
+ * Paginación interna opcional: con `pageSize`, la tabla pagina sola y
+ * agrega su propio `kf-pagination` en el footer nativo (el slot
+ * `[footer]` proyectado sigue disponible en paralelo). El selector de "N
+ * por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
+ * ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
+ * pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
+ * completa el texto informativo ("1–10 de 42 beneficios").
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
+ *
+ * Ordenamiento por columna: cada `DataTableColumn` con `sortable: true`
+ * vuelve su header clickeable, con el mismo formato `key:direction` que
+ * usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
+ * consumidor decide si persiste el valor o lo descarta al desmontar):
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" [sort]="sort()" (sortChange)="sort.set($event)" />
+ *
+ * Columnas fijas: `sticky: 'left' | 'right'` en la columna ancla esa
+ * columna a un borde del scroll horizontal — típicamente el identificador
+ * (izquierda) y/o las acciones (derecha) en una tabla con muchas columnas.
+ *
+ * Densidad: `density="compact"` reduce el padding vertical de cada fila,
+ * para priorizar cantidad de filas visibles sobre aire entre ellas.
+ */
+declare class DataTable<T = unknown> {
+    readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
+    readonly rows: _angular_core.InputSignal<T[]>;
+    /** Placeholder nativo (`kf-skeleton`) mientras los datos reales cargan —
+     * ver el doc-comment de la clase para el detalle. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    private readonly scrollEl;
+    private readonly destroyRef;
+    /**
+     * `.kf-data-table__scroll` tiene `overflow-x: auto` sin ningún indicador
+     * visual — con varias columnas y poco ancho disponible, la tabla se corta
+     * en el borde y nada le avisa al usuario que hay más contenido
+     * scrolleando. `canScrollLeft`/`canScrollRight` alimentan un fade en cada
+     * borde — visible solo cuando de verdad hay algo que revelar de ese lado,
+     * así una tabla que entra completa no muestra fades falsos.
+     */
+    protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
+    constructor();
+    private updateScrollState;
+    /** Default: índice de la fila dentro de `rows`. */
+    readonly rowKey: _angular_core.InputSignal<((row: T, index: number) => string | number) | undefined>;
+    /** Sin borde/sombra de card — para tablas anidadas dentro de otra card. */
+    readonly flush: _angular_core.InputSignal<boolean>;
+    /** Habilita el toggle de vista tabla/cards. */
+    readonly cardable: _angular_core.InputSignal<boolean>;
+    readonly defaultView: _angular_core.InputSignal<DataTableView>;
+    /**
+     * Formateo simple de celda como texto: `(row) => string`. Para marcado
+     * real (badges, links, botones) usar `cellTemplates`.
+     */
+    readonly render: _angular_core.InputSignal<((row: T) => string) | undefined>;
+    /** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. */
+    readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
+        $implicit: T;
+        index: number;
+    }>> | undefined>;
+    /** Densidad de fila — ver `DataTableDensity`. */
+    readonly density: _angular_core.InputSignal<DataTableDensity>;
+    /** Fuerza si la fila entera dispara `rowClick` en la vista de tabla —
+     * ver `rowInteractive` para el cálculo automático cuando no se define. */
+    readonly rowClickable: _angular_core.InputSignal<boolean | null>;
+    readonly rowClick: _angular_core.OutputEmitterRef<{
+        row: T;
+        index: number;
+    }>;
+    /**
+     * Paginación interna opcional — sin `pageSize`, cero cambio de
+     * comportamiento (el consumidor sigue paginando afuera si quiere, vía el
+     * slot `[footer]` con su propio `kf-pagination`, como ya hace Billing).
+     * Con `pageSize`, la tabla pagina `rows()` sola y agrega su propio
+     * `kf-pagination` en el footer nativo — el slot `[footer]` proyectado
+     * sigue disponible para cualquier otra cosa que el consumidor quiera
+     * agregar ahí (no son mutuamente excluyentes).
+     */
+    readonly pageSize: _angular_core.InputSignal<number | null>;
+    /** Default `DEFAULT_PAGE_SIZE_OPTIONS` ([10, 25, 50], estándar del
+     * portal) — pasar `[]` explícitamente desactiva el selector de tamaño
+     * aunque `pageSize` esté activo (paginación sin selector). */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
+     * plural — se agrega al final del texto informativo de la paginación
+     * interna ("1–5 de 7 beneficios"). Sin esto, el texto queda solo con
+     * números ("1–5 de 7"): la librería no impone un idioma ni un nombre
+     * fijo, cada consumidor decide el suyo. */
+    readonly itemLabel: _angular_core.InputSignal<string>;
+    protected readonly page: _angular_core.WritableSignal<number>;
+    private readonly internalPageSize;
+    /** Tamaño de página efectivo: el que el usuario elija en el selector
+     * (si `pageSizeOptions` está activo), o el `pageSize` del consumidor. */
+    protected readonly effectivePageSize: _angular_core.Signal<number | null>;
+    /** Cantidad de filas/cards placeholder mientras `loading` es true — el
+     * `pageSize` efectivo si hay paginación activa (así el placeholder ya
+     * "adivina" cuántas filas reales van a aparecer, sin salto de layout),
+     * o 5 si no hay paginación. */
+    protected readonly skeletonRowIndexes: _angular_core.Signal<number[]>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    /** Texto informativo del footer de paginación interna ("1–5 de 7
+     * beneficios") — se recalcula con cada cambio de página/tamaño/dataset,
+     * nunca queda desactualizado tras filtrar o pasar de página. */
+    protected readonly paginationSummary: _angular_core.Signal<string>;
+    /**
+     * Ordenamiento por columna — mismo formato `key:direction` que `sort` de
+     * `kf-quote-picker`, para que un consumidor que ya conoce ese patrón no
+     * aprenda uno nuevo. Un click en un header `sortable` avanza el ciclo
+     * asc → desc → sin orden; clickear otra columna reinicia el ciclo en esa
+     * columna nueva.
+     */
+    readonly sort: _angular_core.InputSignal<`${string}:desc` | `${string}:asc` | null>;
+    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:desc` | `${string}:asc` | null>;
+    protected readonly sortedRows: _angular_core.Signal<T[]>;
+    /** Filas realmente renderizadas: ordenadas y, si `pageSize` está activo,
+     * recortadas a la página actual. */
+    protected readonly displayedRows: _angular_core.Signal<T[]>;
+    protected sortDirectionFor(column: DataTableColumn): 'asc' | 'desc' | null;
+    /** Ciclo asc → desc → sin orden, disparado al clickear un header `sortable`. */
+    protected toggleSort(column: DataTableColumn): void;
+    protected goToPage(target: number): void;
+    protected setPageSize(size: number | null): void;
+    /** Columnas fijas del lado izquierdo/derecho, con el offset acumulado
+     * (medido en runtime, ver `measureStickyOffsets`) para `position: sticky`. */
+    protected readonly stickyLeftColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly stickyRightColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly stickyOffsets: _angular_core.WritableSignal<Map<string, number>>;
+    protected stickyStyle(column: DataTableColumn): Record<string, string> | null;
+    private readonly internalView;
+    /** Vista activa: la elegida por el usuario, o `defaultView` si no tocó el toggle. */
+    readonly view: _angular_core.Signal<DataTableView>;
+    /** Primera columna de cada rol único; el resto se ignora en el encabezado. */
+    readonly cardMediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    readonly cardTitleColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    readonly cardStatusColumns: _angular_core.Signal<DataTableColumn[]>;
+    readonly cardActionColumns: _angular_core.Signal<DataTableColumn[]>;
+    readonly cardFieldColumns: _angular_core.Signal<DataTableColumn[]>;
+    /**
+     * La card entera es clickeable solo si no tiene acciones propias: un
+     * `role="button"` con botones adentro es inválido y deja el foco ambiguo.
+     * Con columnas `action`, la interacción la manejan esos botones.
+     */
+    readonly cardInteractive: _angular_core.Signal<boolean>;
+    /**
+     * Mismo criterio que `cardInteractive`, para la vista de tabla: la fila
+     * entera dispara `rowClick` solo si no hay una columna `action` que ya
+     * resuelva la interacción con su propio botón — sin esto, un click en
+     * "Ver detalle" dispararía TAMBIÉN el click de la fila por burbujeo.
+     * `rowClickable` fuerza el comportamiento en cualquier sentido si el
+     * consumidor lo necesita.
+     */
+    readonly rowInteractive: _angular_core.Signal<boolean>;
+    setView(next: DataTableView): void;
+    trackRow(row: T, index: number): string | number;
+    cellValue(row: T, column: DataTableColumn): string;
+    onRowClick(row: T, index: number): void;
+    /**
+     * Ancho real de cada columna `sticky` — se mide después de cada render
+     * porque el ancho de una columna depende de su contenido, no hay forma
+     * de conocerlo de antemano. Cada columna fija toma como offset la suma
+     * de anchos de las columnas fijas del MISMO lado que ya quedaron antes
+     * que ella (así "left" apila de izquierda a derecha, "right" de derecha
+     * a izquierda).
+     */
+    protected measureStickyOffsets(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; }, never, ["[empty]", "[footer]"], true, never>;
+}
+
+/**
+ * Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
+ * breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
+ * el ancho dado, la vista de tabla no entra sin scroll horizontal, así que
+ * se fuerza `cards`. Centraliza el patrón `matchMediaSignal` +
+ * `computed<DataTableView>` que cada tabla del portal repetía igual.
+ *
+ *   protected readonly tableView = dataTableViewSignal();
+ *   // con un breakpoint distinto al default de 900px:
+ *   protected readonly tableView = dataTableViewSignal('(max-width: 768px)');
+ */
+declare function dataTableViewSignal(query?: string): Signal<DataTableView>;
+
+type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Separador visual simple entre bloques de contenido. `orientation`
+ * controla si es una línea horizontal (para separar secciones apiladas) o
+ * vertical (para separar elementos en una fila, ej. acciones en una toolbar,
+ * o las columnas de metadata en `kf-company-selector`).
+ *
+ * En `vertical`, el divisor necesita una altura del contexto donde vive —
+ * `:host { align-self: stretch }` lo hace ocupar la altura del contenedor
+ * flex/grid padre sin que el consumidor tenga que fijarla a mano. `flex:
+ * none` evita que el propio divisor se achique a 0 dentro de ese contenedor
+ * flex cuando hay contenido hermano compitiendo por espacio.
+ *
+ *   <kf-divider />
+ *   <kf-divider orientation="vertical" />
+ */
+declare class Divider {
+    readonly orientation: _angular_core.InputSignal<DividerOrientation>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Divider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Color del chip de ícono. Identifica la CLASE de documento de un vistazo
+ * en una lista de nombres de archivo parecidos entre sí. */
+type DocumentRowTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+/**
+ * Fila de un documento descargable: chip de ícono coloreado por tipo,
+ * título, metadata y la acción de descarga al final. Sin `href` rinde
+ * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
+ * la metadata y la acción, como slot para un `kf-badge` de estado.
+ */
+declare class DocumentRow {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<DocumentRowTone>;
+    /** Qué documento es. El nombre humano del tipo, no el del archivo. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Línea secundaria — archivo, fecha, tamaño. El consumidor la arma ya
+     * formateada: la librería no decide en qué unidad se lee un tamaño ni en
+     * qué formato una fecha. */
+    readonly meta: _angular_core.InputSignal<string | undefined>;
+    /** Ausente rinde `pendingLabel` en vez del link de descarga. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    readonly downloadLabel: _angular_core.InputSignal<string>;
+    /** Qué se dice cuando no hay `href`. */
+    readonly pendingLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DocumentRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentRow, "kf-document-row", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; }, {}, 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.
+ *
+ * `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>;
+}
+
+/**
+ * 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`. El disparador real puede vivir en OTRO
+ * componente por completo (ej. el avatar dentro de `kf-portal-header`), y
+ * el panel aparece 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 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;
+    private readonly overlayService;
+    private readonly host;
+    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), así que se
+     * cancelan explícitamente en `detach()` antes de la siguiente `attach()`
+     * — de lo contrario se acumularían N suscripciones activas sobre el
+     * mismo overlay persistente.
+     */
+    private overlaySubscription;
+    constructor();
+    /**
+     * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
+     * 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ú
+     * también llega a `outsidePointerEvents()`, cerrando el panel en el
+     * mismo gesto que lo abrió.
+     */
+    private isEventOnTrigger;
+    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>;
+}
+
+type DropdownItemTone = 'neutral' | 'error';
+/**
+ * Ítem de acción dentro de un `kf-dropdown-panel`. Es un `<button>` nativo
+ * (no un `<a>`): dispara comportamiento en la pantalla actual, no navega.
+ *
+ * `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>;
+    /**
+     * Deshabilita el ítem (ej. una acción cuyo endpoint todavía no existe,
+     * caso real de "Factura" en `kf-row-actions` de Taller). Default `false`
+     * a propósito — ningún consumidor existente (ej. el menú de sesión del
+     * Shell) pasa esta prop hoy, así que no cambia su comportamiento.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItem, 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; }; "disabled": { "alias": "disabled"; "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>`, 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, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], 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
+ * separadas — "Error State" no es una variante de color de "Empty State",
+ * es un estado semánticamente distinto):
+ *
+ * - `neutral` (default): "cero resultados" — cuadro con borde punteado
+ *   discreto, para listas vacías o búsquedas sin coincidencias. No es un
+ *   error, es la ausencia normal de datos.
+ * - `error`: fallo real de carga — sin borde punteado, con un ícono de
+ *   alerta más prominente y texto en el tono de error. Pensado para usarse
+ *   junto a un botón "Reintentar" en el slot por defecto.
+ *
+ *   <kf-empty-state>No se encontraron resultados.</kf-empty-state>
+ *   <kf-empty-state icon="search">Sin coincidencias para tu búsqueda.</kf-empty-state>
+ *   <kf-empty-state tone="error" icon="alert-triangle">
+ *     No pudimos cargar tus vehículos
+ *     <kf-button (click)="retry()">Reintentar</kf-button>
+ *   </kf-empty-state>
+ */
+declare class EmptyState {
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** `neutral` (default): cero resultados. `error`: fallo real de carga. */
+    readonly tone: _angular_core.InputSignal<"neutral" | "error">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "kf-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Color del marcador. Distingue la CLASE de evento de un vistazo en un log
+ * largo — no es un estado de progreso. */
+type EventTimelineTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error' | 'info';
+/** Un evento ya ocurrido. Los tres campos de texto son los tres niveles de
+ * lectura: qué pasó, por qué, y cuándo/quién. */
+interface EventTimelineItem {
+    /** Clave de `track`. */
+    readonly id: string;
+    readonly title: string;
+    readonly detail?: string | null;
+    /** Hora y autor, ya formateados por el consumidor. */
+    readonly meta?: string | null;
+    readonly icon?: IconName;
+    readonly tone?: EventTimelineTone;
+}
+/**
+ * Línea de tiempo de AUDITORÍA: eventos ya ocurridos, en orden, cada uno con
+ * marcador coloreado por CLASE y tres niveles de texto (titular, detalle,
+ * hora + autor). Distinto de `kf-journey-stepper` (de PROGRESO, con pasos
+ * futuros conocidos de antemano): acá todo ya pasó.
+ */
+declare class EventTimeline {
+    readonly items: _angular_core.InputSignal<readonly EventTimelineItem[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EventTimeline, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EventTimeline, "kf-event-timeline", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Bloque promocional sobre fondo oscuro de marca (página 37) — campañas,
+ * accesos directos o el portal de autoatención. Usa `--kf-color-tertiary-deep`
+ * como base del degradado, el mismo azul profundo que el slide destacado de
+ * `kf-carousel` y la barra de `kf-portal-header`.
+ *
+ *   <kf-feature-card badge="Autoatención" badgeIcon="tool" title="Portal de Autoatención"
+ *     description="Con tu patente o VIN accede a soluciones para tu vehículo: mantenciones, repuestos y conectividad en un solo lugar."
+ *     actionLabel="Ir al portal" actionHref="/autoatencion" />
+ */
+declare class FeatureCard {
+    readonly badge: _angular_core.InputSignal<string | undefined>;
+    readonly badgeIcon: _angular_core.InputSignal<IconName | undefined>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly actionLabel: _angular_core.InputSignal<string | undefined>;
+    readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureCard, "kf-feature-card", never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeIcon": { "alias": "badgeIcon"; "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, never, true, never>;
+}
+
+/**
+ * Chip de solo-lectura inline (label/valor) dentro de una caja bordeada.
+ * Se usa en barras de filtro y filas de resumen para mostrar información,
+ * NO para entrada de datos — para eso existe `Input`.
+ *
+ * El valor admite dos formas, igual que en el design system de referencia:
+ * - `value` (string): caso simple, ej. `[value]="'Jul 2026'"`.
+ * - contenido proyectado (`<ng-content>`): cuando se necesita algo más rico
+ *   que un string (un badge, texto con formato, etc.).
+ * `value` tiene prioridad cuando está definido; si no se pasa `value`, se
+ * renderiza el contenido proyectado y, si tampoco hay contenido, `placeholder`.
+ *
+ *   <kf-field icon="calendar" label="Periodo" value="Jul 2026" [select]="true" />
+ *   <kf-field label="Sucursal"><strong>Casa Central</strong></kf-field>
+ */
+declare class Field {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly select: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Estilos inline opcionales aplicados directamente al host. */
+    readonly style: _angular_core.InputSignal<string | undefined>;
+    /**
+     * El placeholder solo tiene sentido cuando no hay `value` ni contenido
+     * proyectado. Angular no expone de forma simple si `<ng-content>` recibió
+     * hijos reales, así que la regla adoptada es puramente declarativa: se
+     * muestra el placeholder cuando hay texto de placeholder y no hay `value`
+     * (ver comentario de clase sobre la prioridad value > proyectado > placeholder).
+     */
+    protected isPlaceholderVisible(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Field, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Field, "kf-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "select": { "alias": "select"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Label superior compartido por todos los campos de formulario del design
+ * system (páginas 11-12: Text Field, Select, Multiselect) — uppercase,
+ * chico, gris, con letter-spacing amplio. El PDF fija un único tratamiento
+ * ("PATENTE O VIN", "SUCURSAL", "SUCURSALES" usan exactamente el mismo
+ * estilo), así que este componente es la única fuente de verdad: antes vivía
+ * copiado por separado en `Input`, `Select`, `SelectMenu` y `MultiSelect`,
+ * y dos de esas copias ya habían divergido del estilo real del PDF.
+ *
+ * No reemplaza al `<label>` nativo — lo envuelve, para no perder la
+ * asociación de accesibilidad `for`/`id` con el control real.
+ *
+ * `required` agrega un asterisco visual en el tono de error, separado del
+ * texto por un espacio y marcado `aria-hidden` — el estado obligatorio real
+ * para lectores de pantalla lo comunica el propio control (`aria-required`
+ * / `required` en el `<input>`/`<select>` asociado), no este label.
+ *
+ *   <kf-field-label [for]="inputId">Patente o VIN</kf-field-label>
+ *   <kf-field-label [for]="inputId" required>Correo electrónico</kf-field-label>
+ */
+declare class FieldLabel {
+    /** `id` del control asociado — se refleja como `for` en el `<label>` interno. */
+    readonly for: _angular_core.InputSignal<string | undefined>;
+    /** Muestra un asterisco visual indicando que el campo es obligatorio. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * 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`).
+ *
+ * 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"
+ *     [options]="branches"
+ *     [values]="selectedBranches()"
+ *     (valuesChange)="selectedBranches.set($event)"
+ *   />
+ *
+ * `width="full"` ocupa el 100% del contenedor — para multi-selects dentro
+ * de layouts flex/grid donde el ancho fijo de `md` no encaja.
+ *
+ *   <kf-multi-select width="full" [options]="branches" [values]="selectedBranches()" (valuesChange)="..." />
+ */
+declare class MultiSelect {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<MultiSelectOption[]>;
+    readonly values: _angular_core.InputSignal<string[]>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Ancho del control. 'md' (240px) es el default histórico y preserva el
+     * comportamiento actual sin cambios para consumidores existentes.
+     * 'full' ocupa el 100% del contenedor — para multi-selects dentro de
+     * layouts flex/grid donde el ancho fijo no encaja (ej. un footer de
+     * sidebar).
+     */
+    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
+    /**
+     * 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
+     * muchas opciones el `text-overflow: ellipsis` del `.kf-multi-select__value`
+     * corta el texto — el badge de conteo siempre queda visible al lado.
+     */
+    readonly summaryText: _angular_core.Signal<string>;
+    private readonly triggerRef;
+    private readonly panelTemplate;
+    private readonly searchInputRef;
+    private readonly overlay;
+    constructor();
+    isSelected(value: string): boolean;
+    toggle(): void;
+    toggleOption(value: string): void;
+    /**
+     * 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;
+    onSearchInput(event: Event): void;
+    /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
+    moveActive(delta: number): void;
+    toggleActive(): void;
+    onEscape(): void;
+    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; }; "width": { "alias": "width"; "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 FilterFieldType = 'select' | 'multi-select' | 'search';
+interface FilterFieldConfig {
+    key: string;
+    type: FilterFieldType;
+    label?: string;
+    placeholder?: string;
+    width?: string;
+    icon?: IconName;
+    showDivider?: boolean;
+}
+type FilterValue = string | string[];
+interface FilterFieldChange {
+    key: string;
+    value: FilterValue;
+}
+/**
+ * Fila de filtros config-driven (select / multi-select / búsqueda) para el
+ * header de una tabla, compuesta con piezas YA existentes de la librería
+ * (`kf-select`, `kf-multi-select`, `kf-input`, `kf-divider`, `kf-collapsible`).
+ *
+ * No tiene lógica de filtrado propia: solo renderiza los controles descritos
+ * por `fields()` y emite `fieldChange` cuando alguno cambia — filtrar filas
+ * sigue siendo responsabilidad de quien lo consume.
+ *
+ * En escritorio los campos se muestran en una fila; en mobile/tablet
+ * (≤768px, mismo breakpoint que `kf-portal-header`) se colapsan dentro de un
+ * `kf-collapsible`.
+ *
+ *   <kf-filter
+ *     [fields]="[
+ *       { key: 'model', type: 'multi-select', label: 'Modelo', placeholder: 'Todos los modelos', showDivider: true },
+ *       { key: 'search', type: 'search', label: 'Buscar vehículo', placeholder: 'Ingresa N° de orden o placa', width: '280px' },
+ *     ]"
+ *     [values]="{ model: selectedModels(), search: searchTerm() }"
+ *     [options]="{ model: modelOptions() }"
+ *     (fieldChange)="onFieldChange($event)"
+ *   />
+ */
+declare class Filter {
+    readonly fields: _angular_core.InputSignal<FilterFieldConfig[]>;
+    readonly values: _angular_core.InputSignal<Record<string, FilterValue>>;
+    readonly options: _angular_core.InputSignal<Record<string, string[]>>;
+    readonly mobileTitle: _angular_core.InputSignal<string>;
+    readonly fieldChange: _angular_core.OutputEmitterRef<FilterFieldChange>;
+    protected readonly multiOptionsByKey: _angular_core.Signal<Record<string, MultiSelectOption[]>>;
+    protected singleValueFor(key: string): string;
+    protected multiValueFor(key: string): string[];
+    protected fieldWidth(field: FilterFieldConfig): string;
+    protected optionsFor(key: string): string[];
+    protected multiOptionsFor(key: string): MultiSelectOption[];
+    protected onFieldChange(key: string, value: FilterValue): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Filter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kf-filter", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "mobileTitle": { "alias": "mobileTitle"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; }, never, never, true, never>;
+}
+
+/** Forma normalizada interna de cada opción, ya resuelta a value/label. */
+interface FilterChipOption {
+    value: string;
+    label: string;
+}
+/**
+ * Fila de chips tipo "pill" para filtros de una sola selección.
+ *
+ * Cada opción puede pasarse como string simple (se usa como value y label
+ * a la vez) o como objeto { value, label } cuando el texto mostrado difiere
+ * del valor interno.
+ *
+ * El chip activo se resalta con `--kf-color-primary` — mismo color de marca
+ * que `kf-tabs`/`kf-select` para su propio estado activo, así el filtro
+ * seleccionado se lee con el color del tema activo, no un negro fijo que
+ * no cambia entre marcas.
+ *
+ *   <kf-filter-chips [options]="['Todos', 'Activos', 'Archivados']"
+ *                     [value]="filtro"
+ *                     (valueChange)="filtro = $event" />
+ *
+ *   <kf-filter-chips [options]="[{ value: 'all', label: 'Todos' }]"
+ *                     [value]="filtro"
+ *                     (valueChange)="filtro = $event" />
+ */
+declare class FilterChips {
+    readonly options: _angular_core.InputSignal<(string | {
+        value: string;
+        label: string;
+    })[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Normaliza cada opción string/objeto a la forma { value, label }. */
+    readonly normalizedOptions: _angular_core.Signal<FilterChipOption[]>;
+    select(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterChips, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterChips, "kf-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, 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>;
+}
+
+/**
+ * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
+ * fondo gris que pasa a blanco con anillo de foco azul al enfocar.
+ *
+ * Implementa ControlValueAccessor, así que funciona con [(ngModel)] y con
+ * Reactive Forms (formControl / formControlName), no es solo un wrapper visual.
+ *
+ *   <kf-input label="Placa" icon="car" placeholder="ABC-123" hint="Formato: 3 letras + 3 números" />
+ *   <input kf-input formControlName="email" type="email" />
+ *
+ * `invalid` + `errorMessage` cubren el estado de error: con `invalid` el
+ * borde pasa a rojo (`--kf-color-error`) y se setea `aria-invalid="true"` en
+ * el `<input>` nativo; `errorMessage` reemplaza el `hint` neutro por un
+ * mensaje en rojo con `role="alert"`, para que un lector de pantalla lo
+ * anuncie apenas aparece (a diferencia de `hint`, que es solo informativo y
+ * nunca interrumpe). Si se pasan ambos, `errorMessage` tiene prioridad
+ * visual sobre `hint` — no tiene sentido mostrar los dos a la vez.
+ *
+ *   <kf-input label="Correo" formControlName="email"
+ *     [invalid]="email.invalid && email.touched"
+ *     [errorMessage]="email.touched && email.hasError('required') ? 'Ingresa tu correo.' : undefined" />
+ *
+ * `toggleable` solo tiene efecto cuando `type="password"`: agrega un botón
+ * de ojo al final del campo que alterna la visibilidad del valor tipeado
+ * (cambia el `type` real del `<input>` nativo entre `password` y `text`,
+ * nunca expone el valor en el DOM de otra forma). El botón es `type="button"`
+ * — nunca dispara submit del form contenedor — y anuncia su acción con
+ * `aria-label` dinámico y `aria-pressed`, ya que es un toggle, no un botón
+ * de una sola acción.
+ *
+ *   <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
+ *
+ * `readonly` es distinto de `disabled`: un campo `disabled` no recibe foco
+ * por teclado ni se puede seleccionar/copiar su texto (y se lee como
+ * "deshabilitado" en un lector de pantalla); un campo `readonly` sí — el
+ * valor se puede ver, enfocar y copiar, solo no se puede editar. Usar
+ * `readonly` para mostrar un dato existente que el usuario puede querer
+ * copiar (ej. un documento de identidad en un formulario de perfil), y
+ * `disabled` para un campo genuinamente inactivo (ej. mientras un guardado
+ * está en vuelo).
+ *
+ *   <kf-input label="DNI" readonly formControlName="documentId" />
+ */
+declare class Input implements ControlValueAccessor, AfterViewInit {
+    private static nextId;
+    private readonly nativeInput;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Marca el label con un asterisco visual y aplica `required` al `<input>`
+     * nativo — el atributo HTML ya expone el estado obligatorio a lectores de
+     * pantalla (mapeo implícito a `aria-required`), sin necesidad de un
+     * `aria-required` explícito redundante. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ícono líder, renderizado vía `kf-icon`. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly suffix: _angular_core.InputSignal<string | undefined>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ver JSDoc de la clase para la diferencia con `disabled`. No pasa por
+     * Reactive Forms (a diferencia de `disabled`, que también puede llegar
+     * vía `FormControl.disable()`) — es siempre una decisión explícita del
+     * consumidor del componente. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
+    readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly inputId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly value: _angular_core.WritableSignal<string>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    /** Deshabilitado por Reactive Forms (formControl.disable()). */
+    private readonly disabledByForm;
+    /** Disabled real: por input() directo o por el FormControl asociado. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Estado interno del toggle — irrelevante si `showPasswordToggle()` es false. */
+    protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
+    /** El botón solo tiene sentido si el campo realmente es de contraseña. */
+    protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
+    /**
+     * `type` real que recibe el `<input>` nativo: igual a `type()` salvo
+     * cuando el toggle está activo y visible, donde pasa a `text` para
+     * mostrar el valor en claro sin cambiar `type()` en sí (evita que un
+     * consumidor que lee `type()` desde afuera vea un valor inconsistente).
+     */
+    protected readonly effectiveType: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    ngAfterViewInit(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(rawValue: string): void;
+    protected onBlur(): void;
+    /**
+     * Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
+     * el botón vive dentro del mismo `.kf-input__field`, así que un click acá
+     * no debe tratarse como si el usuario hubiese abandonado el campo.
+     */
+    protected onTogglePasswordVisibility(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
+    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; }; "readonly": { "alias": "readonly"; "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 JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
+type JourneyStepperSurface = 'dark' | 'card';
+/**
+ * Paleta de color de los estados, independiente de `orientation`:
+ *
+ * - `'brand'` (default): azul de marca para completado/actual, sin
+ *   semántica de semáforo. Para cuando horizontal y vertical representan
+ *   el mismo journey en distintos tamaños de pantalla.
+ * - `'semantic'`: verde/amarillo/rojo real por paso (solo con
+ *   `orientation="vertical"`, la única con 4 estados incluido `delayed`).
+ *   Para cuando cada paso comunica su propio estado puntual.
+ */
+type JourneyStepperColorScheme = 'brand' | 'semantic';
+interface JourneyStep {
+    key: string;
+    label: string;
+    icon: IconName;
+    /** Solo con `orientation="vertical"` — en horizontal el status se calcula desde `currentStep`. */
+    status?: JourneyStepStatus;
+    /** Texto bajo el label — solo con `orientation="vertical"`. */
+    date?: string;
+}
+/**
+ * Progreso de un flujo de N pasos.
+ *
+ * - `orientation` (`'horizontal'` default | `'vertical'`): horizontal
+ *   deriva done/current/pending de `currentStep`; vertical usa
+ *   `steps[].status` explícito, con `delayed` como cuarto estado.
+ * - `surface` (`'dark'` default | `'card'`): fondo sólido oscuro de marca,
+ *   o superficie clara con borde+sombra.
+ * - `colorScheme` (`'brand'` default | `'semantic'`): ver `JourneyStepperColorScheme`.
+ *
+ *   <kf-journey-stepper surface="card" [steps]="steps" [currentStep]="4" (stepClick)="onNavigate($event)" />
+ *   <kf-journey-stepper orientation="vertical" [steps]="unitSteps" />
+ *   <kf-journey-stepper orientation="vertical" colorScheme="semantic" [steps]="unitStepsWithDelays" />
+ */
+declare class JourneyStepper {
+    readonly steps: _angular_core.InputSignal<JourneyStep[]>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly surface: _angular_core.InputSignal<JourneyStepperSurface>;
+    readonly colorScheme: _angular_core.InputSignal<JourneyStepperColorScheme>;
+    /** Índice del paso actual — solo con `orientation="horizontal"`. */
+    readonly currentStep: _angular_core.InputSignal<number>;
+    /** Se emite con `step.key` al clickear un paso — solo activo con `orientation="horizontal"`. */
+    readonly stepClick: _angular_core.OutputEmitterRef<string>;
+    private readonly track;
+    private readonly destroyRef;
+    /** `true` cuando el contenido desborda el ancho visible — controla el fade de los bordes. */
+    protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
+    protected readonly clickable: _angular_core.Signal<boolean>;
+    constructor();
+    private measureOverflow;
+    protected readonly resolvedSteps: _angular_core.Signal<(JourneyStep & {
+        status: JourneyStepStatus;
+    })[]>;
+    protected dotIcon(status: JourneyStepStatus, stepIcon: IconName): IconName;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JourneyStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, 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", o un link real de navegación
+ * como "Ir a pagos →".
+ *
+ * Sin `href` (default) es un `<button type="button">`: dispara una acción
+ * en la misma pantalla, vía `(click)`. Con `href`, es un `<a>` real: navega
+ * a otra URL. `showArrow` agrega un ícono `chevron-right` al final — para
+ * el patrón "texto + flecha" de un link que lleva a otro lado.
+ *
+ * `variant="default"` (color primario, subrayado en hover) es para la
+ * acción de mayor jerarquía relativa de la pantalla; `variant="muted"`
+ * (gris que pasa a primario en hover) es para acciones de retroceso/salida.
+ *
+ *   <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
+ *   <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
+ *   <kf-link href="/pagos" showArrow>Ir a pagos</kf-link>
+ */
+declare class Link {
+    readonly variant: _angular_core.InputSignal<LinkVariant>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Si se pasa, renderiza un `<a>` real en vez de `<button>` — navega en vez de disparar `(click)`. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Ícono `chevron-right` al final — para el patrón "texto + flecha" de un link que lleva a otro lado. */
+    readonly showArrow: _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; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "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
+ * al pie. Pensada para tableros de resumen (ej. "11 Tickets abiertos").
+ *
+ * Compone sobre `kf-card` en vez de duplicar su estilo de contenedor — así
+ * el look de "card" (radio, sombra, borde) tiene una única fuente de verdad
+ * en toda la librería, tal como pide el design system (página 14: "Card...
+ * es la base de paneles, tarjetas de métrica, tablas...").
+ *
+ * Slot `[actions]` opcional (proyectado al pie, después de `foot`) para un
+ * CTA dentro de la card — ej. "Saldo Pendiente" con botón "Pagar Ahora" en
+ * Fase 6 de OTD. Mismo mecanismo de proyección por selector que `[footer]`
+ * en `kf-modal`, no un `<ng-content>` default: así una card sin acciones no
+ * paga ningún espacio extra.
+ *
+ *   <kf-metric-card label="Tickets abiertos" value="11" icon="ticket" foot="+2 hoy" />
+ *   <kf-metric-card label="Tasa de resolución" value="94%" badge="+2%" value-color="var(--kf-color-success)" />
+ *   <kf-metric-card label="Saldo Pendiente" value="$45,000">
+ *     <kf-button actions variant="primary" size="sm">Pagar Ahora</kf-button>
+ *   </kf-metric-card>
+ */
+declare class MetricCard {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<string | number>;
+    readonly unit: _angular_core.InputSignal<string | undefined>;
+    /** Ícono en la esquina superior derecha, renderizado vía `kf-icon`. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly foot: _angular_core.InputSignal<string | undefined>;
+    /** Tinte opcional para el valor grande (ej. un color semántico de estado). */
+    readonly valueColor: _angular_core.InputSignal<string | undefined>;
+    /** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
+    readonly badge: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/**
+ * Diálogo centrado sobre un backdrop: confirmaciones destructivas, formularios
+ * cortos, decisiones que bloquean el flujo.
+ *
+ * Se apoya en el `<dialog>` nativo (`showModal()`), así que el atrapado de
+ * foco, el backdrop, el orden en el top-layer y el cierre con `Escape` los
+ * resuelve el navegador — no hay trampa de foco escrita a mano acá. Lo único
+ * que se agrega es el lock de scroll del body, que `<dialog>` no hace.
+ *
+ * `open` es two-way. Con `dismissible` en `false` (ej. mientras una acción
+ * destructiva está en vuelo) se cancelan `Escape` y el clic en el backdrop:
+ * solo cierra el consumidor poniendo `open` en `false`.
+ *
+ * Las acciones van en el slot `footer` — el atributo `footer` se pone
+ * DIRECTO en cada `kf-button`, sin envolverlos en un `<div footer>`:
+ * `.kf-modal__footer` ya es `display:flex` con `gap` propio entre sus
+ * hijos DIRECTOS. Envolver los botones en un `<div>` intermedio dejaría
+ * ese `<div>` como único hijo del footer — el gap nunca llegaría a
+ * separar los botones entre sí (bug real encontrado en `web-otd-frontend`:
+ * los 2 botones quedaban pegados, con 0px de separación medida, pese a que
+ * el CSS del footer declaraba `gap: var(--kf-space-md)`).
+ *
+ *   <kf-modal [(open)]="confirmOpen" title="Eliminar unidad">
+ *     <p>Esta acción no se puede deshacer.</p>
+ *     <kf-button footer variant="ghost" (click)="confirmOpen.set(false)">Cancelar</kf-button>
+ *     <kf-button footer (click)="remove()">Eliminar</kf-button>
+ *   </kf-modal>
+ *
+ * El footer agrupa todo a la derecha por defecto (`justify-content:
+ * flex-end`) — para una acción secundaria/informativa que debe quedar
+ * separada a la izquierda (ej. un link "Ver documento" junto a un botón
+ * "Cerrar"), agregar la clase `kf-modal__footer-start` AL MISMO elemento
+ * que ya lleva `footer`, no a un wrapper (mismo motivo que el `footer`
+ * directo: un `<div>` intermedio rompe el `gap`):
+ *
+ *   <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
+ *   <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
+ */
+declare class Modal {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Visibilidad, two-way: `[(open)]="confirmOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ancho por defecto: `480px` (sin pasar nada). Un modal con contenido
+     *  tabular/ancho (ej. una lista de varios campos por fila) puede pedir
+     *  más, ej. `width="720px"` — sigue topeado por `100vw` en pantallas
+     *  angostas, mismo `min()` de siempre. */
+    readonly width: _angular_core.InputSignal<string | null>;
+    protected readonly titleId: string;
+    private readonly dialog;
+    private readonly document;
+    private readonly overlayContainer;
+    constructor();
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    protected onCancel(event: Event): void;
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     *
+     * Va como HostListener y no como binding en el template porque un `(click)`
+     * sobre el `<dialog>` dispara las reglas a11y de click-sin-teclado; acá el
+     * equivalente de teclado es `Escape`, que el `<dialog>` nativo ya maneja.
+     */
+    protected onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Modal, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "kf-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[footer]"], true, never>;
+}
+
+/** Color de la franja izquierda y del fondo. */
+type NoteBlockTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+/**
+ * Bloque de texto atribuido a una PERSONA: encabezado, prosa y firma al pie,
+ * con fondo suave y franja de color — la anatomía de una cita, distinta de
+ * `kf-alert` (que interrumpe el flujo con `role="alert"`). El texto va como
+ * contenido proyectado y respeta los saltos de línea del autor.
+ */
+declare class NoteBlock {
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Segunda pieza del encabezado, en la misma línea del `title`. */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /** Pie de atribución — quién escribió y cuándo, ya formateado. */
+    readonly signature: _angular_core.InputSignal<string | undefined>;
+    readonly tone: _angular_core.InputSignal<NoteBlockTone>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NoteBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NoteBlock, "kf-note-block", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "signature": { "alias": "signature"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, 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' | 'overline' | 'overline-strong';
+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.
+ *
+ * `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
+ * junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
+ * `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
+ * suelto en al menos 7 componentes con tamaños/pesos ligeramente distintos
+ * entre sí. `overline` (peso 600) es para labels sin chrome propio;
+ * `overline-strong` (peso 700) es para el texto de un badge/pill que ya trae
+ * su propio fondo. Ninguna de las dos fija color — como el resto de los
+ * variants, el color se resuelve con `tone`.
+ *
+ *   <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>
+ *   <kf-text as="span" variant="overline">RUC</kf-text>
+ *   <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</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. Cada valor mapea 1:1 a una variante `title-*` de
+ * `kf-text`; `xl`/`xxl` son para títulos protagonistas (ej. bienvenida del
+ * home). Bajo los 900px, el tamaño efectivo baja un escalón (ver
+ * `MOBILE_STEP_DOWN`).
+ */
+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
+ * `<ng-content select="[actions]">`.
+ *
+ *   <kf-page-header title="Vehículos" subtitle="Gestión de la flota activa">
+ *     <button actions>Nuevo vehículo</button>
+ *   </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>;
+    private readonly isMobile;
+    protected readonly resolvedTitleVariant: _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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/** Un número de página clickeable o un separador "…" no interactivo. */
+type PaginationItem = {
+    type: 'page';
+    page: number;
+} | {
+    type: 'ellipsis';
+};
+/**
+ * Paginador numerado con elipsis + prev/next.
+ *
+ * Algoritmo de elipsis estándar: siempre se muestran la primera página, la
+ * última, la página actual y un par de vecinas alrededor de la actual; el
+ * resto de los huecos se colapsa en un separador "…". Cuando el hueco entre
+ * dos números visibles es de exactamente una página, se muestra ese número
+ * en vez de un "…" (no tiene sentido colapsar un solo elemento).
+ *
+ * El contenido proyectado (`<ng-content>`) es para el texto informativo
+ * opcional (ej. "21–40 de 273"), a la izquierda de los controles.
+ *
+ *   <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event">
+ *     21–40 de 273
+ *   </kf-pagination>
+ *
+ * Con `pageSizeOptions`, agrega un select de "N por página" entre el texto
+ * informativo y los controles de navegación — el consumidor decide el
+ * tamaño real vía `pageSize`/`pageSizeChange` (two-way opcional, ninguno de
+ * los dos es requerido si no se usa el selector):
+ *
+ *   <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event"
+ *     [pageSizeOptions]="[10, 25, 50]" [(pageSize)]="pageSize">
+ *     21–40 de 273
+ *   </kf-pagination>
+ */
+declare class Pagination {
+    readonly page: _angular_core.InputSignal<number>;
+    readonly pages: _angular_core.InputSignal<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    /** Opciones del selector "N por página" — sin esto, el selector no se
+     * renderiza (mismo criterio que `[footer]`/`[actions]` de otros
+     * componentes: ausente por default, nunca forzado). `kf-select` en
+     * `variant="compact"` no impone un máximo de opciones, a diferencia de
+     * `kf-segmented` (pensado solo para 2-3). */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageSize: _angular_core.ModelSignal<number | null>;
+    /** Lista de números de página y separadores a renderizar, ya resuelta por el algoritmo de elipsis. */
+    readonly items: _angular_core.Signal<PaginationItem[]>;
+    /** Con una sola página (o ninguna), el `<nav>` de prev/next+números no
+     * aporta nada navegable — antes se dejaba en el DOM igual (oculto solo
+     * por un hack `::ng-deep` del consumidor, ver `route-assistance-monorepo`)
+     * y el footer quedaba con el selector "Filas" descoordinado, como si le
+     * faltara una pieza. Sacar el `<nav>` del DOM (no `display:none`) resuelve
+     * esto para cualquier consumidor de `kf-pagination`, no solo para quien ya
+     * tenía el hack. El `divider` reusa el mismo criterio: sin `nav` no hay
+     * nada del otro lado que separar, así que tampoco corresponde dejarlo. */
+    protected readonly hasNav: _angular_core.Signal<boolean>;
+    /** `kf-select` trabaja con `value: string` — cada tamaño numérico se
+     * mapea a su representación en texto, ida y vuelta. */
+    protected readonly pageSizeSelectOptions: _angular_core.Signal<string[]>;
+    protected readonly pageSizeValue: _angular_core.Signal<string>;
+    protected setPageSize(value: string): void;
+    goTo(target: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "kf-pagination", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "pages": { "alias": "pages"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSize": "pageSizeChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Tarjeta contenedora con título, enlace de acción opcional a la derecha, y
+ * cuerpo con contenido libre — página 33: "Base de la mayoría de bloques del
+ * portal". Compone sobre `kf-card` para compartir la misma superficie
+ * (radio, sombra, borde) que el resto de la librería.
+ *
+ *   <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>;
+    readonly actionLabel: _angular_core.InputSignal<string | undefined>;
+    readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Panel, never>;
+    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. `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 {
+    label: string;
+    href: string;
+}
+/**
+ * Cabecera completa del portal (página 31) — franja de administrador
+ * (acento ámbar, solo admins), barra de marca con logo, navegación y
+ * pastilla de sesión. Compone `kf-admin-badge` para la franja y `kf-avatar
+ * pill` para la sesión, en vez de reimplementar ambos.
+ *
+ * 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
+ * `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`.
+ *
+ * `PortalHeader` no sabe qué es ninguno de los dos contenidos, solo les da
+ * el lugar correcto dentro del drawer ya desplegado (ver `Drawer.ts`).
+ *
+ *   <kf-portal-header
+ *     [isAdmin]="true"
+ *     [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
+ *     [navItems]="[{ label: 'Home', href: '/', active: true, icon: 'grid' }, { label: 'Vehículos', href: '/vehiculos', icon: 'truck' }]"
+ *     tagline="Portal privado"
+ *     userInitials="TS"
+ *     userName="Tomás Soto"
+ *     [showCart]="true"
+ *     (cartClick)="onCartClick()"
+ *   >
+ *     <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 {
+    readonly brand: _angular_core.InputSignal<string>;
+    /** URL del logo como imagen. Sin ella (default), se mantiene el texto de `brand`. */
+    readonly logoSrc: _angular_core.InputSignal<string | undefined>;
+    /** `alt` del logo cuando se usa `logoSrc`. Sin ella, cae en `brand()`. */
+    readonly logoAlt: _angular_core.InputSignal<string | undefined>;
+    readonly isAdmin: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly adminActions: _angular_core.InputSignal<PortalHeaderAdminAction[]>;
+    readonly navItems: _angular_core.InputSignal<PortalHeaderNavItem[]>;
+    readonly userInitials: _angular_core.InputSignal<string>;
+    /** Texto junto al logo (ej. "Portal privado"), con separador vertical. Sin
+     * separador ni texto si queda vacío. */
+    readonly tagline: _angular_core.InputSignal<string>;
+    /** Nombre completo para el bloque "HOLA / {nombre}" dentro de la pastilla
+     * de sesión. Vacío (default) mantiene la pastilla como hoy: solo avatar,
+     * sin bloque de texto ni chevron — retrocompatible con cualquier
+     * consumidor que no pase este input. */
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly showCart: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly sessionClick: _angular_core.OutputEmitterRef<void>;
+    readonly cartClick: _angular_core.OutputEmitterRef<void>;
+    /** 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>;
+    /**
+     * `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>>;
+    /**
+     * Ancla real de cada `<a>` del `<nav>` horizontal (una por `navItems()`,
+     * mismo orden — `@for` trackea por `item.label`, así que la lista no se
+     * recrea en cada cambio de ruta, solo cambia qué índice trae
+     * `active: true`). Sirve para medir dónde poner la cápsula deslizante
+     * (`thumbStyle`, ver abajo) sin duplicar el layout del nav en JS.
+     */
+    private readonly navItemAnchors;
+    /** Fuerza recalcular `thumbStyle` en un resize — un resize de ventana no
+     * cambia ningún signal de los que `thumbStyle` ya lee (`navItems`,
+     * `navItemAnchors`), pero sí puede correr el layout de los `<a>` bajo un
+     * ancho de columna distinto (texto largo pasando a otra línea, etc.). */
+    private readonly resizeTick;
+    protected onWindowResize(): void;
+    /**
+     * Posición/ancho de la cápsula blanca del ítem activo del `<nav>`, como
+     * un elemento propio (`.kf-portal-header__nav-thumb`) que se desliza con
+     * `transition` en vez de que cada `<a>` traiga su propio fondo blanco
+     * (eso hacía que el fondo "saltara" de un ítem a otro sin animación,
+     * porque son elementos DOM distintos — no hay nada que Angular pueda
+     * animar entre ellos).
+     */
+    protected readonly thumbStyle: _angular_core.Signal<Record<string, string>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "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; }; "tagline": { "alias": "tagline"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "showCart": { "alias": "showCart"; "required": false; "isSignal": true; }; }, { "sessionClick": "sessionClick"; "cartClick": "cartClick"; }, never, ["[kf-portal-header-extra]", "[kf-portal-header-footer]"], true, never>;
+}
+
+/** Mismo vocabulario que `Badge.tone`/`TextTone` (menos `info`/`service`,
+ * que no aplican a un valor de progreso): `neutral` es el color de marca
+ * por defecto (sin implicar buen/mal estado), `ok`/`warn`/`error` sí
+ * comunican severidad. La librería no conoce el dominio que produce ese
+ * valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
+type ProgressTone = 'neutral' | 'ok' | 'warn' | 'error';
+/**
+ * Barra de progreso de un solo valor (0-100%) con color por severidad —
+ * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
+ * dibuja varias categorías proporcionales en la misma barra.
+ *
+ *   <kf-progress [value]="80" tone="ok" label="80%" />
+ *   <kf-progress [value]="ratio()" [tone]="severityTone()" />
+ *
+ * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
+ * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
+ * ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
+ * "80%"); sin él, no se renderiza ningún texto, solo la barra.
+ */
+declare class Progress {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly tone: _angular_core.InputSignal<ProgressTone>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    protected readonly clampedValue: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Punto que emite ondas concéntricas en bucle, para marcar un dato que
+ * necesita atención inmediata sin depender de que el operador lo vea por
+ * casualidad — el mismo rol que un punto rojo estático ya cumple en varios
+ * lugares del producto (ver `.now__d`/`.board-alerts__dot` en
+ * `operations-final.html`), llevado a movimiento porque el color solo
+ * compite por atención con todo lo demás en pantalla; el movimiento no.
+ *
+ * Es una primitiva de énfasis, no un indicador de estado — para eso está
+ * `kf-status-pill` (punto estático + texto). Este componente no tiene
+ * texto ni tono semántico de "ok/warn/error": una sola apariencia (rojo,
+ * el color reservado para lo urgente en el design system), porque emitir
+ * ondas por algo que no es urgente banalizaría la señal la próxima vez que
+ * sí lo sea.
+ *
+ *   <kf-pulse-dot />
+ *   <kf-pulse-dot size="lg" />
+ *
+ * Respeta `prefers-reduced-motion` (ver PulseDot.css): la onda deja de
+ * animarse y el punto queda como un punto estático, sin perder la
+ * información de "esto es urgente" que da el color.
+ */
+declare class PulseDot {
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PulseDot, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PulseDot, "kf-pulse-dot", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type RowActionKind = 'link' | 'button';
+/**
+ * Una acción de fila — mismo shape que ya usaba `WorkshopRowAction` en
+ * `web-portal-latam-frontend` antes de este componente (Taller, tab
+ * "Trabajos terminados"), ahora compartido: `kind: 'link'` navega (necesita
+ * `href`, `onClick` se ignora), `kind: 'button'` dispara `onClick` en la
+ * pantalla actual. `disabled` aplica a ambos — un link sin `href` (o
+ * explícitamente `disabled`) se renderiza inerte en vez de clickeable, en
+ * vez de omitirse del todo: el consumidor decide que la acción EXISTE pero
+ * no está disponible todavía (ej. "Factura" mientras no exista el endpoint
+ * de descarga).
+ */
+interface RowAction {
+    readonly kind: RowActionKind;
+    readonly icon: IconName;
+    readonly label: string;
+    readonly href?: string | null;
+    readonly disabled?: boolean;
+    readonly onClick?: () => void;
+}
+type RowActionsMode = 'auto' | 'inline' | 'menu';
+/**
+ * Columna "Acciones" de cualquier tabla del ecosistema. Decide su propia
+ * forma según cuántas acciones recibe — no hace falta que cada tabla elija
+ * a mano entre "botones sueltos" y "menú":
+ *
+ * - `inline` (`actions().length <= inlineLimit()`, default 2): un
+ *   ícono-botón de 32px por acción, sin texto — el `label` vive en un
+ *   `kfTooltip`. Todas las acciones quedan visibles sin clic extra.
+ * - `menu` (más de `inlineLimit()`): un único botón "kebab" que abre un
+ *   `kf-dropdown-panel` con una fila por acción.
+ *
+ * `mode` fuerza uno de los dos modos sin importar cuántas acciones haya
+ * (ej. una tabla que prefiere el kebab siempre, aunque tenga una sola
+ * acción, por consistencia visual con otra columna).
+ *
+ *   <kf-row-actions [actions]="rowActions(row)" />
+ *   <kf-row-actions [actions]="rowActions(row)" mode="menu" />
+ */
+declare class RowActions {
+    readonly actions: _angular_core.InputSignal<readonly RowAction[]>;
+    readonly mode: _angular_core.InputSignal<RowActionsMode>;
+    /** Desde cuántas acciones el modo `auto` pasa de `inline` a `menu`. */
+    readonly inlineLimit: _angular_core.InputSignal<number>;
+    protected readonly menuOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly effectiveMode: _angular_core.Signal<"menu" | "inline">;
+    protected onToggleMenu(): void;
+    protected onButtonAction(action: RowAction): void;
+    protected onMenuLinkClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RowActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RowActions, "kf-row-actions", never, { "actions": { "alias": "actions"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "inlineLimit": { "alias": "inlineLimit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Título de sub-sección con chip de ícono, pensado para anidarse dentro de
+ * cards o paneles (a diferencia de `PageHeader`, que encabeza una página
+ * completa). Un área de acciones opcional se proyecta vía
+ * `<ng-content select="[actions]">` para no acoplar el componente a un set
+ * fijo de botones.
+ *
+ * `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. `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">
+ *     <button actions>Editar</button>
+ *   </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" | "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>;
+}
+
+/**
+ * Contenedor de navegación por secciones dentro de una misma pantalla —
+ * agrupa `kf-section-nav-item` y resuelve su layout fusionado según
+ * viewport, con un breakpoint PROPIO de 1024px (no el $mobile:900px
+ * compartido del resto de la librería — ver el comentario en
+ * `SectionNav.scss`):
+ *
+ * - Desktop (≥1024px): columna de botones a la izquierda + panel de
+ *   contenido separado a la derecha, mostrando el contenido del ítem (o
+ *   sub-ítem) activo.
+ * - Mobile y tablet (<1024px): acordeón — el contenido del ítem activo se
+ *   despliega inline, justo debajo de su propio botón.
+ *
+ * El cambio entre ambos layouts es solo CSS (`SectionNav.scss` +
+ * `SectionNavItem.scss`, ver comentarios ahí): cada `kf-section-nav-item`
+ * proyecta su contenido una única vez y es la grilla la que lo reposiciona
+ * visualmente, sin recrearlo ni duplicarlo en el DOM.
+ *
+ * A diferencia de `kf-tabs` (selector de vista plano, sin contenido propio)
+ * y de `kf-sidebar-shell` (rail persistente ENTRE rutas, colapsable, fondo
+ * oscuro): esto es navegación DENTRO de una sola pantalla, con paneles de
+ * contenido rico por sección.
+ *
+ * La exclusividad entre ítems (y entre sub-ítems, dentro de cada uno) la
+ * decide quien consume el componente, igual que cada `kf-section-nav-item`
+ * por separado — `kf-section-nav` no guarda ningún estado de selección.
+ *
+ *   <kf-section-nav>
+ *     <kf-section-nav-item label="Mis datos personales" icon="user"
+ *       [active]="openSection() === 'datos'" (toggled)="openSection.set('datos')">
+ *       <app-personal-data />
+ *     </kf-section-nav-item>
+ *     <kf-section-nav-item label="Mis empresas" icon="layers"
+ *       [active]="openSection() === 'empresas'" (toggled)="openSection.set('empresas')">
+ *       <app-my-companies />
+ *     </kf-section-nav-item>
+ *   </kf-section-nav>
+ */
+declare class SectionNav {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNav, "kf-section-nav", never, {}, {}, never, ["*"], true, never>;
+}
+
+interface SectionNavSubsectionData {
+    key: string;
+    label: string;
+    icon: IconName;
+    disabled?: boolean;
+}
+/**
+ * Ítem de nivel superior de `kf-section-nav`: header clickeable (ícono
+ * identificador opcional + label + chevron) que expande/colapsa contenido
+ * proyectado. La exclusividad entre ítems la decide quien consume el
+ * componente — cada click solo emite `toggled` y el padre resuelve qué
+ * ítem queda `active`, igual que `kf-folder-tabs` con `value`.
+ *
+ * `subsections` agrega un segundo nivel de navegación DENTRO del ítem
+ * (solo visible cuando el ítem está `active`), cada uno con su propio
+ * estado activo (`activeSubsection`) independiente del padre. El contenido
+ * de cada sub-ítem se proyecta envolviéndolo en `<kf-section-nav-subsection
+ * key="...">` dentro del mismo slot por defecto — ver esa clase.
+ *
+ * El contenido proyectado usa `[hidden]`, no `@if`: un ítem puede envolver
+ * un formulario con estado que el usuario ya completó, y colapsar/expandir
+ * (o cruzar el breakpoint propio de 1024px, ver `SectionNav.scss`) no debe
+ * destruir ese subárbol.
+ *
+ *   <kf-section-nav-item
+ *     label="Mis datos personales"
+ *     icon="user"
+ *     [active]="openSection() === 'datos'"
+ *     (toggled)="openSection.set('datos')"
+ *   >
+ *     ...
+ *   </kf-section-nav-item>
+ */
+declare class SectionNavItem {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly toggled: _angular_core.OutputEmitterRef<void>;
+    /** Sub-ítems navegables de este ítem, visibles solo mientras `active()`. */
+    readonly subsections: _angular_core.InputSignal<SectionNavSubsectionData[]>;
+    /** `key` del sub-ítem actualmente activo — ver `SectionNavSubsectionData`. */
+    readonly activeSubsection: _angular_core.InputSignal<string | undefined>;
+    readonly subsectionSelected: _angular_core.OutputEmitterRef<string>;
+    protected readonly showSubsections: _angular_core.Signal<boolean>;
+    protected onSubsectionClick(key: string, disabled: boolean | undefined, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavItem, "kf-section-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "subsections": { "alias": "subsections"; "required": false; "isSignal": true; }; "activeSubsection": { "alias": "activeSubsection"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; "subsectionSelected": "subsectionSelected"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Envoltorio de contenido para UN sub-ítem de `kf-section-nav-item`. Varios
+ * pueden proyectarse juntos, uno por `key` de `subsections()` del padre —
+ * cada uno queda montado siempre (mismo criterio `[hidden]` que el propio
+ * `kf-section-nav-item`), y solo se muestra el que coincide con
+ * `activeSubsection()` del padre.
+ *
+ *   <kf-section-nav-item [subsections]="subs" [activeSubsection]="active()" ...>
+ *     <kf-section-nav-subsection key="general"><app-general /></kf-section-nav-subsection>
+ *     <kf-section-nav-subsection key="seguridad"><app-seguridad /></kf-section-nav-subsection>
+ *   </kf-section-nav-item>
+ */
+declare class SectionNavSubsection {
+    readonly key: _angular_core.InputSignal<string>;
+    private readonly parent;
+    protected readonly isActive: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavSubsection, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavSubsection, "kf-section-nav-subsection", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface SegmentedOption {
+    value: string;
+    label: string;
+}
+/**
+ * Control de segmentos relleno, tipo "iOS segmented control": 2-3 opciones
+ * con un thumb que se desliza detrás de la opción activa.
+ *
+ * La posición del thumb se resuelve con una variable CSS (--kf-segmented-index)
+ * y `transform: translateX()`, así la transición queda a cargo de CSS puro
+ * (mismo criterio que Tabs), sin medir el DOM desde TypeScript.
+ *
+ *   <kf-segmented [options]="options" [value]="value" (valueChange)="onChange($event)" />
+ */
+declare class Segmented {
+    readonly options: _angular_core.InputSignal<SegmentedOption[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Índice de la opción activa; -1 si `value` no matchea ninguna opción. */
+    readonly selectedIndex: _angular_core.Signal<number>;
+    select(nextValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Segmented, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Segmented, "kf-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Normalized shape used internally once `options` (string[] or object[]) is resolved. */
+interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * 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.
+ *
+ * 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)" />
+ *
+ * `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
+ * techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
+ * ese máximo, truncando con ellipsis si no entra) y reduce padding/tamaño de
+ * fuente — pensado para selectores cortos embebidos en una barra (ej. "Filas
+ * por página" en el footer de `kf-data-table`), nunca para un campo de
+ * formulario largo, que sigue usando el `variant="field"` por defecto. El
+ * panel flotante siempre mide el ancho real del trigger en cada apertura
+ * (`SelectOverlay.attach`), así que se angosta solo sin cambios adicionales.
+ *
+ *   <kf-select variant="compact" [options]="['5', '10', '25']" [value]="pageSize()" (valueChange)="..." />
+ *
+ * `width="full"` ocupa el 100% del contenedor — para selects dentro de
+ * layouts flex/grid donde el ancho fijo de `md` no encaja.
+ *
+ *   <kf-select width="full" [options]="branches" [value]="branch()" (valueChange)="..." />
+ */
+declare class Select {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<string[] | SelectOption[]>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"`, debajo del trigger. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly variant: _angular_core.InputSignal<"field" | "compact">;
+    /**
+     * Ancho del control. 'md' (240px) es el default histórico y preserva el
+     * comportamiento actual sin cambios para consumidores existentes.
+     * 'full' ocupa el 100% del contenedor — para selects dentro de layouts
+     * flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
+     */
+    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
+    /**
+     * 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 errorId: 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 overlay;
+    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;
+    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;
+    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; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+interface SelectableCardOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+/**
+ * Radio group real (`role="radiogroup"` + `role="radio"` + `aria-checked`),
+ * con apariencia de cards apiladas verticalmente — para una decisión ÚNICA Y
+ * EXCLUYENTE dentro de un flujo (ej. método de pago, tipo de documento a
+ * subir), no para filtrar una lista.
+ *
+ * Distinto de `kf-filter-chips` a propósito: `FilterChips` es semántica y
+ * visualmente un FILTRO (chips horizontales, se resaltan con `--kf-color-ink`
+ * — pensado para "Todos/Activos/Archivados" sobre una lista, donde elegir
+ * una opción cambia qué se MUESTRA). Acá la elección es la respuesta misma
+ * a una pregunta del flujo ("¿con qué método pagás?"), no un filtro — por
+ * eso necesita affordance de radio (círculo con punto, más peso visual por
+ * opción) en vez de un pill de filtro reciclado.
+ *
+ * Réplica fiel del patrón ya resuelto en el Design System de referencia
+ * (`otd-pagos.jsx` / `otd.css`: `.otd-pay-method` + `.radio`) — apilado
+ * vertical con gap 10px, radio de 18px con punto interno vía `::after`,
+ * borde+fondo+ícono cambian de color al seleccionar. Se agrega manejo de
+ * teclado (flechas arriba/abajo, Home/End) y `:focus-visible` real, ninguno
+ * de los dos presentes en el mockup original — mínimos de accesibilidad que
+ * no dependen de fidelidad visual al mockup.
+ *
+ *   <kf-selectable-card-group
+ *     [options]="[{ value: 'card', label: 'Tarjeta', icon: 'credit-card' }]"
+ *     [value]="method()"
+ *     (valueChange)="method.set($event)"
+ *   />
+ */
+declare class SelectableCardGroup {
+    readonly options: _angular_core.InputSignal<SelectableCardOption[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    /** Accesible: describe qué está eligiendo el usuario (ej. "Método de pago"). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    select(value: string): void;
+    protected onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectableCardGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectableCardGroup, "kf-selectable-card-group", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Contrato de datos de `kf-sidebar-shell.navItems`. `icon` es requerido:
+ * en el sidebar persistente el ícono es parte permanente del diseño.
+ * `groupLabel` opcional agrupa ítems consecutivos bajo un separador con
+ * título (ej. "Beneficios", "Documentos") — ver `SidebarShell` para cómo
+ * decide cuándo pintar el separador. Ausente en items sin agrupar (el
+ * caso de siempre, retrocompatible con cualquier consumidor existente). */
+interface SidebarNavItemData {
+    icon: IconName;
+    label: string;
+    href: string;
+    active?: boolean;
+    groupLabel?: string;
+}
+
+/**
+ * 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, incompatible
+ * con el texto claro de `kf-sidebar-nav-item` (pensado para el gradiente
+ * oscuro), y duplicaría el árbol de navegación en un segundo lugar del
+ * DOM. 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[]>;
+    /**
+     * `navItems()` con el separador de grupo resuelto: solo el PRIMER ítem
+     * de cada tramo consecutivo con el mismo `groupLabel` lo pinta — así el
+     * consumidor no tiene que calcular a mano "es el primero de su grupo"
+     * ni repetir el label en cada ítem. Un ítem sin `groupLabel` nunca pinta
+     * separador (retrocompatible: un `navItems` sin la propiedad se
+     * comporta exactamente igual que antes).
+     */
+    protected readonly itemsWithGroupHeader: _angular_core.Signal<{
+        item: SidebarNavItemData;
+        showGroupLabel: boolean;
+    }[]>;
+    /** 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. */
+    private readonly isMobileViewport;
+    /**
+     * Estado de colapso EFECTIVO — el que ya considera el viewport, no el
+     * `collapsed` crudo. Es lo que usa el propio rail para sus nav-items y
+     * el botón de colapso; se expone público para que el consumidor le
+     * pase el mismo valor a lo que proyecte en `[kf-sidebar-footer]` (ej.
+     * `kf-drawer-session`) — así un footer proyectado no queda colapsado
+     * dentro del panel deslizado de mobile mientras el resto del rail ya
+     * muestra todo expandido.
+     */
+    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. */
+type SkeletonVariant = 'text' | 'circle' | 'rect';
+/**
+ * Bloque placeholder con shimmer para contenido que todavía carga: una línea
+ * de texto, un avatar o un área de card/imagen, según `variant`.
+ *
+ * Es decorativo (`aria-hidden`): quien lo usa debería marcar el contenedor con
+ * `aria-busy="true"` mientras carga, así el lector de pantalla anuncia el
+ * estado una vez en vez de leer N placeholders vacíos.
+ *
+ * `circle` usa `aspect-ratio`, así que alcanza con darle `width`.
+ *
+ *   <kf-skeleton />
+ *   <kf-skeleton variant="circle" width="40px" />
+ *   <kf-skeleton variant="rect" width="100%" height="120px" />
+ */
+declare class Skeleton {
+    readonly variant: _angular_core.InputSignal<SkeletonVariant>;
+    /** Ancho CSS. Default `'100%'`. */
+    readonly width: _angular_core.InputSignal<string>;
+    /** Alto CSS. Vacío deja el alto/aspect-ratio propio de la variante. */
+    readonly height: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Skeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Skeleton, "kf-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * Indicador de carga indeterminado: inline, dentro de un botón, o como único
+ * contenido de una sección mientras llega la data.
+ *
+ * Cuando se conoce la forma del contenido que viene, preferir `kf-skeleton`
+ * (dibuja la silueta). El spinner es para "algo está pasando" sin forma
+ * conocida — guardar, enviar, reintentar.
+ *
+ * Lleva `role="status"`, así que el lector de pantalla anuncia el `label`
+ * cuando aparece. Sin `label` cae en un texto accesible por defecto.
+ *
+ *   <kf-spinner />
+ *   <kf-spinner size="sm" label="Cargando…" />
+ *   <kf-spinner onDark />
+ */
+declare class Spinner {
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    /** Texto al lado del anillo. Vacío deja solo el anillo (y el texto para lectores). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Invierte los colores para fondos oscuros. */
+    readonly onDark: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Spinner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "kf-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onDark": { "alias": "onDark"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
+/**
+ * Card de estadística horizontal: ícono circular grande a la izquierda,
+ * valor + label + nota apilados al centro, chevron opcional al final si es
+ * clickeable. Distinta de `kf-metric-card` (layout vertical, label arriba +
+ * ícono a la derecha) — este es el patrón real del dashboard de OTD ("Bonos
+ * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
+ *
+ *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
+ */
+declare class StatCard {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<StatCardTone>;
+    readonly value: _angular_core.InputSignal<string | number>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly note: _angular_core.InputSignal<string | undefined>;
+    /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
+    readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+}
+
+/** Vocabulario semántico único de tono, compartido con `TextTone`. */
+type StatTileTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+type StatTileVariant = 'inline' | 'card';
+/**
+ * Indicador numérico compacto: label + valor grande con ícono, para grillas
+ * densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
+ * llamada a la acción (título, descripción y link, sin tono ni número).
+ * `variant="inline"` quita fondo/borde para una fila horizontal donde el
+ * consumidor pone sus propios separadores.
+ *
+ * `hasProjectedValue` reemplaza el valor de texto por contenido proyectado
+ * (`[valueContent]`) cuando el dato no es un número/string medido — el
+ * caso típico es un estado con su propio `kf-badge`, que necesita su
+ * tono/dot propios en vez del tono del tile:
+ *
+ *   <kf-stat-tile label="Estado" hasProjectedValue>
+ *     <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
+ *   </kf-stat-tile>
+ */
+declare class StatTile {
+    readonly cta: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.InputSignal<string | number | undefined>;
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly variant: _angular_core.InputSignal<StatTileVariant>;
+    readonly tone: _angular_core.InputSignal<StatTileTone>;
+    /** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
+    readonly note: _angular_core.InputSignal<string | null | undefined>;
+    /** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
+     * pasar el motivo real de SU dato ausente, no un texto genérico. */
+    readonly notePlaceholder: _angular_core.InputSignal<string | undefined>;
+    /** Rinde el valor como ausencia, no como dato medido. */
+    readonly valueMissing: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** El valor es contenido proyectado (`<ng-content select="[valueContent]">`,
+     * ej. un `kf-badge` de estado) en vez del texto de `value()` — para un
+     * dato cuya representación natural no es un número/string medido. */
+    readonly hasProjectedValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly actionLabel: _angular_core.InputSignal<string | undefined>;
+    readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /** Texto real de la nota. `null` significa "no reservar la línea": pasa
+     * solo cuando el consumidor no declaró ni nota ni placeholder. */
+    protected readonly noteText: _angular_core.Signal<string | null>;
+    protected readonly noteIsPlaceholder: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[valueContent]"], true, never>;
+}
+
+/**
+ * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
+ * de estado únicos y prominentes (ej. "ESTADO TÉCNICO"). El fondo es siempre
+ * transparente; el color de borde/texto/punto depende de `tone`.
+ *
+ *   <kf-status-pill tone="ok">Operativo</kf-status-pill>
+ *   <kf-status-pill tone="error" dot>Fuera de servicio</kf-status-pill>
+ */
+declare class StatusPill {
+    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "blue">;
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusPill, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusPill, "kf-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface TabOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+/**
+ * Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
+ * La posición se mide (`offsetLeft`/`offsetWidth`) después de cada render,
+ * ya que las pestañas tienen ancho de contenido variable.
+ *
+ *   <kf-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
+ */
+declare class Tabs {
+    readonly options: _angular_core.InputSignal<TabOption[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    private readonly track;
+    private readonly destroyRef;
+    private readonly activeRect;
+    protected readonly indicatorTransform: _angular_core.Signal<string>;
+    protected readonly indicatorWidth: _angular_core.Signal<number>;
+    constructor();
+    private measure;
+    select(value: string): void;
+    protected onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
+    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>;
+}
+
+interface FolderTabOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+/**
+ * Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su panel.
+ *
+ *   <div kfFolderTabsPanel>...</div>
+ */
+declare class FolderTabsPanel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kfFolderTabsPanel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tabs con forma de "carpeta": borde superior redondeado, la pestaña activa
+ * se funde visualmente con el panel de contenido de abajo. El panel
+ * (`kfFolderTabsPanel`) es opcional — sin él, se renderiza solo la fila de
+ * pestañas.
+ *
+ *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
+ *     <div kfFolderTabsPanel>contenido de la pestaña activa</div>
+ *   </kf-folder-tabs>
+ *
+ *   <!-- o, sin contenido: -->
+ *   <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>;
+    /** Id del panel único — todos los tabs lo referencian vía `aria-controls`. */
+    protected readonly panelId: string;
+    private readonly projectedPanel;
+    protected readonly hasPanel: _angular_core.Signal<boolean>;
+    select(value: string): void;
+    protected 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"], ["[kfFolderTabsPanel]"], true, never>;
+}
+
+/**
+ * Textarea de formulario apilado: mismo patrón visual y de integración que
+ * `kf-input` (label arriba, `ControlValueAccessor`, funciona con
+ * `[(ngModel)]` y con Reactive Forms) para el caso de texto libre
+ * multilínea (notas, comentarios, descripciones).
+ *
+ *   <kf-textarea label="Notas" formControlName="notes" />
+ *   <kf-textarea label="Comentario" [(ngModel)]="comment" [minRows]="2" [maxRows]="10" />
+ *
+ * `minRows`/`maxRows` (3 y 6 por defecto) acotan el crecimiento: el campo
+ * crece con el contenido pero nunca pasa de `maxRows` — superado ese tope el
+ * contenido hace scroll interno (`overflow-y: auto`) en vez de seguir
+ * empujando el layout. Reemplaza el `resize: vertical` nativo (deshabilitado
+ * a propósito) porque un resize manual sin tope es exactamente el problema
+ * que motivó este componente: un `<textarea>` a mano podía crecer hasta
+ * tapar los botones del footer de un modal.
+ *
+ *   <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
+ *
+ * `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
+ * contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
+ * estados.
+ */
+declare class Textarea implements ControlValueAccessor, AfterViewInit {
+    private static nextId;
+    private readonly nativeTextarea;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Marca el label con un asterisco visual y aplica `required` al
+     * `<textarea>` nativo — el atributo HTML ya expone el estado obligatorio a
+     * lectores de pantalla (mapeo implícito a `aria-required`), sin necesidad
+     * de un `aria-required` explícito redundante. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ver JSDoc de `kf-input` para la diferencia con `disabled`. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Filas mínimas visibles en reposo — define la altura de arranque del campo. */
+    readonly minRows: _angular_core.InputSignal<number>;
+    /** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
+    readonly maxRows: _angular_core.InputSignal<number>;
+    protected readonly textareaId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly value: _angular_core.WritableSignal<string>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    /** Deshabilitado por Reactive Forms (formControl.disable()). */
+    private readonly disabledByForm;
+    /** Disabled real: por input() directo o por el FormControl asociado. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    ngAfterViewInit(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(rawValue: string): void;
+    protected onBlur(): void;
+    /**
+     * Recalcula la altura según el contenido real (`scrollHeight`), acotada
+     * entre `minRows` y `maxRows` medidos con el line-height ya calculado del
+     * propio elemento — así el tope se mantiene correcto sin importar qué
+     * font-size/line-height termine aplicando cada tema. Superado `maxRows`
+     * el resto del contenido hace scroll interno en vez de seguir creciendo.
+     */
+    private adjustHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Textarea, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "kf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Da forma al valor de un campo MIENTRAS el usuario escribe — ej.
+ * inserta el guion de un RUT chileno automáticamente, sin que el
+ * usuario tenga que tipearlo — reposicionando el cursor para que
+ * seguir escribiendo se sienta natural (sin esto, cualquier inserción
+ * de caracteres empuja el cursor al final del campo en cada tecla).
+ *
+ * Se aplica junto a `formControlName`/`[formControl]`/`[(ngModel)]`
+ * sobre cualquier input que implemente `ControlValueAccessor` (incluye
+ * `kf-input`, pero no depende de él — funciona igual sobre un
+ * `<input>` nativo):
+ *
+ *   <kf-input formControlName="documentId" [kfFormatInput]="formatChileanRut" />
+ *
+ * La función de formateo recibe el valor crudo tecleado y devuelve el
+ * valor con forma — debe ser determinística e idempotente (aplicarla
+ * dos veces seguidas da el mismo resultado), como `formatChileanRut`
+ * en este mismo archivo (`./format.ts`).
+ */
+declare class FormatInputDirective {
+    private readonly ngControl;
+    /** La función de formateo a aplicar — sin valor, el directive no
+     * hace nada (permite pasar `undefined` condicionalmente sin tener
+     * que quitar el directive del template entero). */
+    readonly kfFormatInput: _angular_core.InputSignal<((value: string) => string) | undefined>;
+    protected onInput(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormatInputDirective, "[kfFormatInput]", never, { "kfFormatInput": { "alias": "kfFormatInput"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Grilla de tiles que escalona columnas solo entre DIVISORES de `columns`
+ * (4 → 2 → 1, nunca 3), para que ninguna fila quede huérfana. Mide el
+ * contenedor (`container-type: inline-size`), no el viewport, porque el
+ * mismo bloque se rinde tanto en un drawer angosto como en una página
+ * completa bajo el mismo viewport.
+ */
+declare class TileGrid {
+    /** Columnas en el ancho máximo. Se acota a 1-6: por encima de 6 un tile
+     * deja de tener ancho para su propio label. */
+    readonly columns: _angular_core.InputSignalWithTransform<number, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileGrid, "kf-tile-grid", never, { "columns": { "alias": "columns"; "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
+ * indeterminate bar instead of a countdown — pair it with
+ * {@link ToastService.promise}. It reuses the `info` tokens, the closest
+ * semantic role to "work in progress".
+ */
+type ToastTone = 'success' | 'error' | 'warning' | 'info' | 'loading';
+/** Acción opcional (call-to-action) renderizada dentro del toast, junto al botón de cerrar. */
+interface ToastAction {
+    /** Label corto, ej. "Ver ticket" — 1-3 palabras, el toast mide solo 360px de ancho. */
+    label: string;
+    /** Se invoca al hacer click; el toast se cierra solo después, sin que el llamador tenga que llamar `dismiss()`. */
+    onClick: () => void;
+}
+/** Options for {@link ToastService.show}. */
+interface ToastOptions {
+    /** Color tone. Defaults to `'info'`. */
+    tone?: ToastTone;
+    /** Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. Defaults to `2800`. */
+    duration?: number;
+    /** Botón de acción opcional, ej. ir al registro sobre el que avisa el toast. */
+    action?: ToastAction;
+}
+/** Messages for each leg of {@link ToastService.promise}. */
+interface ToastPromiseMessages<T = unknown> {
+    loading?: string;
+    success?: string | ((value: T) => string);
+    error?: string | ((error: unknown) => string);
+}
+/** The single active toast, as rendered by `kf-toast-host`. */
+interface ToastState {
+    id: number;
+    message: string;
+    tone: ToastTone;
+    duration: number;
+    leaving: boolean;
+    action?: ToastAction;
+}
+/** What's currently holding the auto-dismiss timer paused. Tracked as a set so hover and
+ * focus can overlap (e.g. mouse leaves while focus is still on the action button) without
+ * resuming the timer early. */
+type ToastPauseSource = 'hover' | 'focus';
+/**
+ * Shows one toast at a time — a new `show()` call replaces whatever is
+ * currently up (this mirrors a global status line, not a notification stack).
+ *
+ * Angular has no global function that can mount UI on its own, so the
+ * imperative `showToast(...)` of the reference design system becomes a
+ * root-provided service holding signal state: `ToastService.show(...)` sets
+ * the active toast and `ToastHost` (standalone, mounted once in the app
+ * shell) renders it.
+ *
+ * @example
+ * ```ts
+ * // app.ts
+ * imports: [ToastHost]
+ * template: `<kf-toast-host />`
+ *
+ * // anywhere else
+ * private readonly toast = inject(ToastService);
+ * this.toast.show('Vehículo guardado', { tone: 'success' });
+ *
+ * // chains a `loading` toast into the promise's outcome:
+ * this.toast.promise(this.api.save(vehicle), {
+ *   loading: 'Guardando…',
+ *   success: 'Vehículo guardado',
+ *   error: 'No se pudo guardar',
+ * });
+ * ```
+ */
+declare class ToastService {
+    private readonly _current;
+    private nextId;
+    private dismissTimer?;
+    private removeTimer?;
+    /** Wall-clock time the running `dismissTimer` is due to fire; used to compute how much
+     * time is left when {@link pause} interrupts it. */
+    private dismissDueAt?;
+    /** Time left on the auto-dismiss countdown while paused. `undefined` when no countdown
+     * is currently paused. */
+    private remainingMs?;
+    private readonly pauseSources;
+    /** The single active toast, or `null`. */
+    readonly current: _angular_core.Signal<ToastState | null>;
+    /** Shows a toast, replacing whatever is currently shown. Returns its id. */
+    show(message: string, options?: ToastOptions): number;
+    private scheduleDismiss;
+    /**
+     * Pauses the auto-dismiss countdown for `id` while `source` (pointer hover or focus) is
+     * active on it, so a user reaching for the action/dismiss button never loses the toast
+     * mid-interaction (WCAG 2.2.1). No-op when `id` isn't the active toast, it's leaving, or
+     * it has no running countdown (persistent or `loading` toasts, or already paused by
+     * another source).
+     */
+    pause(id: number, source: ToastPauseSource): void;
+    /**
+     * Resumes a countdown paused by {@link pause}, honoring the time already elapsed before
+     * the pause. No-op while another pause `source` is still active, or nothing is paused.
+     */
+    resume(id: number, source: ToastPauseSource): void;
+    /**
+     * Starts the exit animation, then removes the toast. No-op when `id` is no
+     * longer the active toast, so a stale timer never kills a newer toast.
+     */
+    dismiss(id?: number): void;
+    /**
+     * Shows a `loading` toast, then swaps it for a `success`/`error` toast once
+     * `work` settles. Re-throws `work`'s rejection so callers can still react to
+     * the failure.
+     */
+    promise<T>(work: Promise<T>, messages?: ToastPromiseMessages<T>): Promise<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToastService>;
+}
+/**
+ * Renders whatever `ToastService` currently holds, fixed bottom-right. Mount
+ * one instance in the app shell (e.g. next to the router outlet); it takes no
+ * inputs and re-renders itself from the service state.
+ *
+ *   <kf-toast-host />
+ */
+declare class ToastHost {
+    private readonly toastService;
+    /** 0-or-1 wrapper so `@for track t.id` remounts the node on every new toast, restarting its animations. */
+    protected readonly toastList: _angular_core.Signal<ToastState[]>;
+    protected toastIcon(tone: ToastTone): IconName;
+    protected dismiss(id: number): void;
+    /** Pauses the toast's auto-dismiss timer while the pointer or keyboard focus is on it. */
+    protected pause(t: ToastState, source: ToastPauseSource): void;
+    /** Resumes the toast's auto-dismiss timer once neither the pointer nor focus is on it. */
+    protected resume(t: ToastState, source: ToastPauseSource): void;
+    /** Ejecuta la acción del toast (ej. "Ver ticket") y lo cierra — el
+     * llamador no tiene que acordarse de descartarlo desde su propio handler. */
+    protected runAction(t: ToastState): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastHost, never>;
+    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 readonly contentId;
+    private overlayRef;
+    /**
+     * `focusin` (no `focus`) a propósito: `focus` no burbujea, así que un
+     * disparador que ENVUELVE al elemento realmente enfocable (ej.
+     * `<kf-button>`, cuyo `<button>` nativo vive en el template del hijo, fuera
+     * de alcance de este host) nunca vería el evento — el tooltip quedaría
+     * mudo por teclado justo en el caso de uso que más lo necesita (un botón
+     * solo-ícono). `focusin` SÍ burbujea y sigue disparando igual para el caso
+     * ya cubierto (un `<a>`/`<button>` nativo que es él mismo el host, ver
+     * `Tooltip.spec.ts`) — sin regresión ahí.
+     */
+    protected show(): void;
+    protected hide(): void;
+    /**
+     * `focusout` (no `blur`, mismo motivo que `show()` usa `focusin`): además,
+     * a diferencia de `mouseleave`/Escape, acá SÍ hace falta revisar
+     * `relatedTarget` — si el host envuelve más de un elemento enfocable, un
+     * foco que se mueve de uno a otro DENTRO del mismo host no debería cerrar
+     * el tooltip (no "salió" del disparador). `Node` en vez de `EventTarget`:
+     * `Node.contains()` es lo que existe para chequear pertenencia al árbol.
+     */
+    protected onFocusOut(event: FocusEvent): 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>;
+}
+
+type ViewToggleOption = 'table' | 'cards';
+/**
+ * Switch de dos posiciones para alternar entre vista de tabla y vista de
+ * tarjetas. Pensado para usarse dentro de DataTable, pero es standalone e
+ * independiente: no asume nada sobre el componente que lo contiene.
+ *
+ * Se implementa como un grupo de radio (role="radiogroup") en vez de dos
+ * botones sueltos: semánticamente es una única selección excluyente entre
+ * dos estados, no dos acciones independientes. Esto también habilita
+ * navegación con flechas izquierda/derecha, igual que un <input type="radio">
+ * nativo agrupado.
+ *
+ *   <kf-view-toggle [view]="view" (viewChange)="view = $event" />
+ */
+declare class ViewToggle {
+    readonly view: _angular_core.InputSignal<ViewToggleOption>;
+    readonly viewChange: _angular_core.OutputEmitterRef<ViewToggleOption>;
+    select(next: ViewToggleOption): void;
+    /** Navegación estándar de ARIA radiogroup: flechas mueven foco y seleccionan. */
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewToggle, never>;
+    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, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MetricCard, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal };
+export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };