@kaufmann-lab/ui 0.1.0

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

@@ -0,0 +1,1499 @@
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, TemplateRef, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/** Nombre de cada uno de los 59 íconos del design system (página 5). */
+type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+type IconSize = 'sm' | 'md' | 'lg';
+/**
+ * Ícono de trazo del design system — 59 glyphs (página 5), grilla 24×24,
+ * 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.
+ *
+ *   <kf-icon name="alert-triangle" size="sm" />
+ *   <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>;
+    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; }; }, {}, 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>;
+}
+
+/**
+ * Wraps a native `<button>`, so keyboard handling, focus and form submission
+ * keep working. The cost of the wrapper is forwarding `disabled` and `type` by
+ * hand: as attributes on a custom element they have no native effect.
+ *
+ * Five variants (page 9 of the design system): `primary` (main action, blue),
+ * `secondary` (service actions, orange), `ghost` (low-emphasis, no fill),
+ * `outline` (medium-emphasis, bordered) and `danger` (destructive
+ * confirmations — red, see the Confirmation Modal pattern on page 30). Three
+ * sizes (`sm`/`md`/`lg`). `icon` renders a leading glyph (`kf-icon`) before
+ * the projected label; `block` stretches the button to the full width of its
+ * container.
+ *
+ * `(click)` is not forwarded — it bubbles from the inner button to the host.
+ *
+ *   <kf-button (click)="save()">Save</kf-button>
+ *   <kf-button variant="ghost" disabled>Cancel</kf-button>
+ *   <kf-button variant="danger" (click)="remove()">Delete</kf-button>
+ *   <kf-button size="sm" icon="calendar" block>Reservar hora</kf-button>
+ */
+declare class Button {
+    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Matches the native default: submits when inside a `<form>`. */
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /** Leading icon, rendered via `kf-icon` before the projected label. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    /** Stretches the button to the full width of its container. */
+    readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+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).
+ *
+ * ponytail: los glifos van inline en vez de venir de un componente Icon —
+ * son 4 paths fijos, uno por tono, y no existe todavía `kf-icon` en la
+ * librería. Cuando exista, se reemplaza este `@switch` por `<kf-icon>`.
+ *
+ *   <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">;
+    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>;
+}
+
+/**
+ * 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 />
+ *
+ * Pendiente: si en el futuro se agrega un ícono de fallback (persona
+ * genérica) para cuando no hay ni `src` ni `initials`, depende del
+ * componente Icon / sprite SVG que todavía no existe en esta librería.
+ */
+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 (soft) para un conteo, tag o estado liviano
+ * puntual (no un proceso en vivo — para eso existe `kf-status-pill`, que usa
+ * borde en vez de relleno). El color de fondo/texto/punto depende de `tone`.
+ *
+ * El PDF (página 10) fija seis tonos con fondo soft y texto del tono fuerte
+ * — nunca fondo saturado con texto blanco, que es más apto para un botón
+ * que para una etiqueta de lectura rápida en una lista densa.
+ *
+ *   <kf-badge tone="ok" dot>Al día</kf-badge>
+ *   <kf-badge tone="error">3</kf-badge>
+ *
+ * Mapeo de `tone` a los seis conceptos de la página 10 y sus tokens
+ * semánticos en projects/ui/src/tokens/base.css:
+ * neutral -> Neutral (border/text-muted), info -> Información (info-soft/-strong),
+ * ok -> Activo (success-soft/-strong), warn -> Pendiente (warning-soft/-strong),
+ * error -> Vencido (error-soft/-strong), service -> Servicio (secondary-soft,
+ * no existe un `-strong` para secondary todavía — usa el color base).
+ */
+declare class Badge {
+    readonly tone: _angular_core.InputSignal<"info" | "ok" | "warn" | "error" | "neutral" | "service">;
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+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.
+     *
+     * ponytail: no dependemos 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>;
+}
+
+/**
+ * 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`.
+ *
+ *   <kf-card>Contenido simple</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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "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.
+ *
+ *   <kf-checkbox label="Aceptar términos" [(checked)]="accepted" />
+ *   <kf-checkbox label="Seleccionar todo" [indeterminate]="isPartial()" />
+ *   <kf-checkbox label="Notificaciones" formControlName="notifications" />
+ */
+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>;
+    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; }; }, { "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>
+ *
+ * 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<"ok" | "warn" | "error" | "neutral">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Metadato clave mostrado junto al selector (RUC, identificación, sucursal). */
+interface CompanySelectorMeta {
+    label: string;
+    value: string;
+}
+/**
+ * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
+ * la pantalla de inicio del portal. Compone `kf-select` para el propio
+ * selector (mismo panel propio, sin `<select>` nativo) y proyecta hasta 3
+ * pares label/valor (RUC, Identificación, Sucursal en el ejemplo del PDF).
+ *
+ *   <kf-company-selector
+ *     label="Selecciona empresa"
+ *     [companies]="['TRANSPORTES DEL SUR S.A.C.', 'ANDES MAQ LTDA.']"
+ *     [value]="activeCompany()"
+ *     (valueChange)="activeCompany.set($event)"
+ *     [meta]="[
+ *       { label: 'RUC', value: '20448712359' },
+ *       { label: 'Identificación', value: '0004002232' },
+ *       { label: 'Sucursal', value: 'Sucursal Norte' },
+ *     ]"
+ *   />
+ */
+declare class CompanySelector {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly companies: _angular_core.InputSignal<string[]>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompanySelector, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompanySelector, "kf-company-selector", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "companies": { "alias": "companies"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, 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>;
+}
+
+/**
+ * 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;
+}
+/** Vistas disponibles cuando `cardable` está activo. */
+type DataTableView = 'table' | 'cards';
+/**
+ * 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 modo `cards` no depende de un componente ViewToggle separado: expone
+ * un control de segmentos mínimo inline (mismo patrón visual que
+ * kf-segmented) para no acoplarse a un componente que otro agente puede
+ * estar construyendo en paralelo — ver nota en el resumen de la tarea.
+ *
+ *   <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" />
+ *
+ * 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>
+ */
+declare class DataTable<T = unknown> {
+    readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
+    readonly rows: _angular_core.InputSignal<T[]>;
+    /** 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>;
+    readonly rowClick: _angular_core.OutputEmitterRef<{
+        row: T;
+        index: number;
+    }>;
+    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>;
+    setView(next: DataTableView): void;
+    trackRow(row: T, index: number): string | number;
+    cellValue(row: T, column: DataTableColumn): string;
+    onRowClick(row: T, index: number): 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; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, ["[empty]", "[footer]"], true, never>;
+}
+
+/**
+ * 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<"error" | "neutral">;
+    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>;
+}
+
+/**
+ * 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.
+ *
+ *   <kf-field-label [for]="inputId">Patente o VIN</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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; }, {}, 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 el color "ink" oscuro (--kf-color-ink), no
+ * con el color primario de marca: así lo define el sistema de diseño de
+ * referencia para este componente en particular.
+ *
+ *   <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>;
+}
+
+interface FolderTabOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+/**
+ * Tabs con forma de "carpeta": el borde superior queda redondeado y el borde
+ * inferior de la pestaña activa se funde visualmente con el panel de
+ * contenido que va debajo (misma superficie, sin línea divisoria).
+ *
+ * Al cambiar de pestaña, la que se activa se "abre": gira sobre su borde
+ * inferior (hinge 3D) y sube con un pequeño rebote. Es CSS solo: la clase
+ * `--active` se mueve de un botón a otro, y eso vuelve a disparar el keyframe
+ * sin tocar JS.
+ *
+ * El consumidor es responsable de renderizar el panel de contenido debajo;
+ * este componente solo resuelve la fila de pestañas y emite `valueChange`.
+ *
+ *   <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>;
+    select(value: string): void;
+    /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
+    onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * 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" />
+ *
+ * Nota sobre "icon": todavía no existe un componente Icon / sprite SVG en esta
+ * librería. El prop se acepta igual para no romper el contrato de la spec,
+ * pero por ahora solo reserva el espacio visual (placeholder vacío) — no
+ * renderiza ningún glyph real.
+ */
+declare class Input implements ControlValueAccessor, AfterViewInit {
+    private static nextId;
+    private readonly nativeInput;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Nombre de ícono líder. Ver nota de clase: sin componente Icon todavía. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    readonly suffix: _angular_core.InputSignal<string | undefined>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    protected readonly inputId: string;
+    protected readonly hintId: 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;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, 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...").
+ *
+ *   <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)" />
+ */
+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, never, 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`.
+ *
+ *   <kf-modal [(open)]="confirmOpen" title="Eliminar unidad">
+ *     <p>Esta acción no se puede deshacer.</p>
+ *     <div footer>
+ *       <kf-button variant="ghost" (click)="confirmOpen.set(false)">Cancelar</kf-button>
+ *       <kf-button (click)="remove()">Eliminar</kf-button>
+ *     </div>
+ *   </kf-modal>
+ */
+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>;
+    protected readonly titleId: string;
+    private readonly dialog;
+    private readonly document;
+    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; }; }, { "open": "openChange"; }, never, ["*", "[footer]"], true, never>;
+}
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Dropdown de selección múltiple con checkboxes internos, siguiendo el mismo
+ * patrón de panel flotante que `SelectMenu` (panel con `position: absolute`
+ * sobre el host, sin Angular CDK Overlay, que no es dependencia del proyecto).
+ * Se abre y cierra por click en el disparador, y se cierra al hacer click
+ * afuera o al presionar Escape.
+ *
+ * A diferencia de `SelectMenu`, el disparador no muestra un único valor sino
+ * los nombres seleccionados junto a un badge circular con el conteo (página
+ * 12: "Sucursal Norte, Lima Centro" + badge "2"), y cada opción del panel se
+ * marca/desmarca con un checkbox sin cerrar el panel. Incluye una opción
+ * "Todas" al inicio de la lista, con estado `indeterminate` cuando hay
+ * selección parcial — el mismo patrón de "seleccionar todos" de `Checkbox`.
+ *
+ *   <kf-multi-select
+ *     label="Sucursales"
+ *     [options]="branches"
+ *     [values]="selectedBranches()"
+ *     (valuesChange)="selectedBranches.set($event)"
+ *   />
+ *
+ * Pendiente: el prop `icon` de otros componentes del design system requiere
+ * un componente Icon / sprite SVG que esta librería todavía no tiene — este
+ * componente no usa iconos, así que no aplica acá.
+ */
+declare class 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>;
+    readonly valuesChange: _angular_core.OutputEmitterRef<string[]>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly listboxId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly selectedCount: _angular_core.Signal<number>;
+    readonly allSelected: _angular_core.Signal<boolean>;
+    readonly isPartiallySelected: _angular_core.Signal<boolean>;
+    /**
+     * 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 host;
+    isSelected(value: string): boolean;
+    toggle(): void;
+    toggleOption(value: string): void;
+    /** Alterna entre "todas seleccionadas" y "ninguna seleccionada". */
+    toggleAll(): void;
+    onDocumentClick(event: MouseEvent): 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; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+}
+
+/**
+ * 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]">`, para no acoplar el componente a un set
+ * fijo de botones.
+ *
+ *   <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" />
+ */
+declare class PageHeader {
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/** 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>
+ */
+declare class Pagination {
+    readonly page: _angular_core.InputSignal<number>;
+    readonly pages: _angular_core.InputSignal<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    /** Lista de números de página y separadores a renderizar, ya resuelta por el algoritmo de elipsis. */
+    readonly items: _angular_core.Signal<PaginationItem[]>;
+    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; }; }, { "pageChange": "pageChange"; }, 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>
+ */
+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. */
+interface PortalHeaderNavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+/** 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.
+ *
+ *   <kf-portal-header
+ *     [isAdmin]="true"
+ *     [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
+ *     [navItems]="[{ label: 'Home', href: '/', active: true }, { label: 'Vehículos', href: '/vehiculos' }]"
+ *     userInitials="TS"
+ *   />
+ */
+declare class PortalHeader {
+    readonly brand: _angular_core.InputSignal<string>;
+    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>;
+    readonly sessionClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, never, true, never>;
+}
+
+/**
+ * Estado vacío de reservas en taller con llamada a agendar (página 36):
+ * barra de estado vacío arriba ("No tienes reservas de taller"), panel de
+ * invitación al medio (ícono en círculo azul, título, descripción, link) y
+ * una fila de dos acciones al pie — un slot `[actions]` proyectado, para no
+ * acoplar el componente a botones fijos.
+ *
+ * Distinto de `kf-empty-state` genérico: este combina la barra + la
+ * invitación + las acciones como un bloque compuesto propio del dominio
+ * "taller", no un placeholder de una sola pieza.
+ *
+ *   <kf-reserve-block emptyLabel="No tienes reservas de taller"
+ *     title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
+ *     actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
+ *     <kf-button actions icon="calendar">Reservar hora</kf-button>
+ *     <kf-button actions variant="outline" icon="list">Ver agenda</kf-button>
+ *   </kf-reserve-block>
+ */
+declare class ReserveBlock {
+    readonly emptyLabel: _angular_core.InputSignal<string>;
+    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<ReserveBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/**
+ * 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="sm"` reduce tipografía y espaciado para usarse dentro de cards ya
+ * compactas. `solid` rellena el chip de ícono con el color primario sólido
+ * en vez del tratamiento "soft" (fondo tenue) — pensado para superficies que
+ * ya tienen un tinte de color propio, donde el chip "soft" perdería contraste.
+ *
+ *   <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" />
+ */
+declare class SectionHeader {
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | undefined>;
+    readonly solid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    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>;
+}
+
+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 (ver el mismo problema ya resuelto en `SelectMenu`, del que
+ * este componente reutiliza el patrón completo: trigger + panel flotante
+ * propio, cerrado con click-afuera y Escape).
+ *
+ * Pensado para sets simples y cortos. Para listas más ricas o con más
+ * opciones, es el mismo componente que `SelectMenu` — la diferencia es
+ * solo de estilo (label uppercase, fondo gris que pasa a blanco al foco,
+ * a tono con `Input`) y que acepta `options` como `string[]` además de
+ * `{ value, label }[]`.
+ *
+ *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
+ *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
+ */
+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>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly listboxId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
+    readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
+    readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
+    private readonly host;
+    toggle(): void;
+    select(option: SelectOption): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): 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; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+interface SelectMenuOption {
+    value: string;
+    label: string;
+}
+/**
+ * Dropdown de selección simple pero con panel propio (no usa `<select>` nativo),
+ * para cuando se necesita más control visual que un `<select>` estándar permite.
+ *
+ * El panel flotante se implementa con `position: absolute` sobre el host
+ * (sin Angular CDK Overlay, que no es dependencia del proyecto). Se abre y
+ * cierra por click en el disparador, y se cierra al hacer click afuera o al
+ * presionar Escape.
+ *
+ *   <kf-select-menu
+ *     label="País"
+ *     [options]="countries"
+ *     [value]="selectedCountry()"
+ *     (valueChange)="selectedCountry.set($event)"
+ *   />
+ *
+ * Pendiente: el prop `icon` de otros componentes del design system requiere
+ * un componente Icon / sprite SVG que esta librería todavía no tiene — este
+ * componente no usa iconos, así que no aplica acá.
+ */
+declare class SelectMenu {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<SelectMenuOption[]>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly listboxId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly selectedOption: _angular_core.Signal<SelectMenuOption | undefined>;
+    private readonly host;
+    toggle(): void;
+    select(option: SelectMenuOption): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectMenu, "kf-select-menu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Forma del placeholder. */
+type SkeletonVariant = 'text' | 'circle' | 'rect';
+/**
+ * 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>;
+}
+
+/**
+ * Indicador numérico compacto (página 34): label + valor grande, con un
+ * ícono a la derecha del label — más chico y sin badge de esquina que
+ * `kf-metric-card`, pensado para grillas densas de KPIs simples ("Total
+ * vehículos: 4", "En taller: 1"), no para dashboards con tendencia.
+ *
+ * Con `cta` en vez de `value`, se convierte en la variante de llamada a la
+ * acción: un bloque de fondo suave con título, descripción y un link — sin
+ * número, para promover el siguiente paso (ej. "¿Necesitas mantención?").
+ *
+ *   <kf-stat-tile label="Total vehículos" value="4" icon="car" />
+ *   <kf-stat-tile cta title="¿Necesitas mantención?"
+ *     description="Tenemos la mejor red de talleres."
+ *     actionLabel="Agenda aquí" actionHref="/taller/agendar" />
+ */
+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 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>;
+    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; }; "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, never, 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 único indicador se desliza horizontalmente hasta
+ * la pestaña activa. Como las pestañas tienen ancho de contenido (labels de
+ * largo distinto), la posición no se puede resolver con CSS puro: se mide el
+ * `offsetLeft`/`offsetWidth` de la pestaña activa después de cada render y la
+ * transición del `transform`/`width` queda a cargo de CSS.
+ *
+ *   <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;
+    /** Geometría de la pestaña activa; `null` mientras no haya una medición válida. */
+    private readonly activeRect;
+    protected readonly indicatorTransform: _angular_core.Signal<string>;
+    protected readonly indicatorWidth: _angular_core.Signal<number>;
+    constructor();
+    private measure;
+    select(value: string): void;
+    /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
+    onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<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>;
+}
+
+/**
+ * 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';
+/** 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;
+}
+/** 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;
+}
+/**
+ * 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?;
+    /** 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;
+    /**
+     * 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;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastHost, "kf-toast-host", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Estado puntual mostrado junto a la identidad del vehículo (ej. "En ruta",
+ * "Mantenimiento", "Fuera de servicio"). `tone` define el color semántico:
+ * "crit" no tiene token propio en base.css, se mapea a var(--kf-color-error).
+ */
+interface VehicleHeaderStatus {
+    label: string;
+    tone?: 'ok' | 'warn' | 'crit';
+    icon?: IconName;
+}
+/**
+ * Header de identidad de un vehículo de flota: unidad (patente/id), modelo
+ * (como badge, no texto plano — página 24: "ABC-123" junto a un badge
+ * "TITAN 4X2"), VIN en fuente mono y un estado opcional. Un área de acciones
+ * opcional se proyecta vía `<ng-content select="[actions]">` para no acoplar
+ * el componente a un set fijo de botones — el patrón real de la spec es
+ * `kf-button variant="outline"` (ej. "Llamar", con ícono) + un `primary`
+ * (ej. "Crear Ticket", con ícono "+"):
+ *
+ *   <kf-vehicle-header unit="AB123CD" model="Sprinter 415" vin="9BW..."
+ *     [status]="{ label: 'En ruta', tone: 'ok' }">
+ *     <kf-button actions variant="outline" icon="phone">Llamar</kf-button>
+ *     <kf-button actions icon="plus">Crear Ticket</kf-button>
+ *   </kf-vehicle-header>
+ */
+declare class VehicleHeader {
+    readonly unit: _angular_core.InputSignal<string>;
+    readonly model: _angular_core.InputSignal<string | undefined>;
+    readonly vin: _angular_core.InputSignal<string | undefined>;
+    readonly status: _angular_core.InputSignal<VehicleHeaderStatus | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VehicleHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VehicleHeader, "kf-vehicle-header", never, { "unit": { "alias": "unit"; "required": true; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "vin": { "alias": "vin"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], 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, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
+export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, FolderTabOption, IconName, IconSize, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SelectMenuOption, SkeletonVariant, SpinnerSize, TabOption, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };