@erplora/outfitkit 0.1.1

package/dist/components/ok-gauge/ok-gauge.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/** Una zona/umbral cualitativo del gauge. Se aplica hasta el valor `to`. */
+export interface OkGaugeThreshold {
+    /** Límite superior de la zona (en la escala min..max). */
+    to: number;
+    /** Color de la zona (cualquier color CSS válido). */
+    color: string;
+}
+/** Tipo de gauge a renderizar. */
+export type OkGaugeType = 'arc' | 'ring' | 'bullet';
+export declare class OkGauge extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tipo de gauge: semicírculo, anillo o barra bullet. */
+    type: OkGaugeType;
+    /** Valor actual a representar. */
+    value: number;
+    /** Mínimo de la escala. */
+    min: number;
+    /** Máximo de la escala. */
+    max: number;
+    /** Zonas cualitativas (cada una se pinta hasta `to`); también fijan el color del relleno. */
+    thresholds: OkGaugeThreshold[];
+    /** Marcador de objetivo (bullet); si no se da, no se dibuja. */
+    target?: number;
+    /** Etiqueta principal (mayúsculas, muted). */
+    label?: string;
+    /** Texto secundario bajo el valor / a la derecha del valor en bullet. */
+    sublabel?: string;
+    /** Color explícito del relleno; tiene prioridad sobre los thresholds. */
+    color: string;
+    /** Tamaño en px del diámetro (arc/ring); el alto del arc es la mitad. */
+    size: number;
+    /** Sufijo del valor (ej. '%'); por defecto '%'. */
+    unit: string;
+    private get fraction();
+    private get fillColor();
+    private renderValueText;
+    private renderArc;
+    private renderRing;
+    private renderBullet;
+    private zoneTint;
+    private ariaText;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-gauge': OkGauge;
+    }
+}

package/dist/components/ok-heatmap/ok-heatmap.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+export interface OkHeatmapCell {
+    /** Fecha ISO (YYYY-MM-DD) o cualquier cosa parseable por Date; ubica la celda en el calendario. */
+    date?: string;
+    /** Valor crudo; se convierte a tier de intensidad por cuantiles. */
+    value?: number;
+    /** Clave libre para identificar la celda (modo sin fecha). */
+    key?: string;
+    /** Nivel/tier explícito 0..(levels-1); tiene prioridad sobre value. */
+    level?: number;
+    /** Tooltip opcional; si no, se autogenera (fecha · valor). */
+    label?: string;
+}
+export type OkHeatmapLayout = 'weeks' | 'year';
+export declare class OkHeatmap extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Datos a pintar: array de {date,value} o {key,level}. */
+    data: OkHeatmapCell[];
+    /** Número de niveles de intensidad (incluye el nivel 0 = vacío). Por defecto 5 (tiers 0..4). */
+    levels: number;
+    /** Color base de la escala (sobrescribe el token --brand si se da). */
+    scale: string;
+    /** Layout: 'weeks' (flujo por columnas) o 'year' (12 meses). */
+    layout: OkHeatmapLayout;
+    /** Tamaño de celda en px (solo aplica al layout 'weeks'). */
+    cellSize: number;
+    /** Muestra la leyenda Menos → Más. */
+    legend: boolean;
+    private get maxTier();
+    private hostStyle;
+    private thresholds;
+    private tierOf;
+    private titleOf;
+    private resolve;
+    private renderCell;
+    private renderWeeks;
+    private renderYear;
+    private renderLegend;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-heatmap': OkHeatmap;
+    }
+}

package/dist/components/ok-hero/ok-hero.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class OkHero extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-hero': OkHero;
+    }
+}

package/dist/components/ok-hover-card/ok-hover-card.d.ts

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+export interface OkHoverCardStat {
+    /** Cifra destacada (negrita, tabular). */
+    value: string;
+    /** Etiqueta muted bajo la cifra. */
+    label: string;
+}
+export interface OkHoverCardAction {
+    /** Identificador del botón (se emite en `ok-action`). */
+    id: string;
+    /** Texto del botón. */
+    label: string;
+    /** Si está, al hacer click navega a esta URL en lugar de emitir evento. */
+    href?: string;
+    /** Realce de marca (botón primario). */
+    brand?: boolean;
+}
+export type OkHoverCardPlacement = 'bottom' | 'top';
+export interface OkHoverCardLabels {
+    /** aria-label de la tarjeta (cuando no hay título). */
+    card: string;
+}
+export declare class OkHoverCard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nombre mostrado (título de la tarjeta). */
+    name?: string;
+    /** Badge opcional junto al título (p. ej. rol). */
+    badge?: string;
+    /** @handle / línea secundaria (mono, muted). */
+    handle?: string;
+    /** Iniciales o texto del avatar (si no hay `avatarSrc`). */
+    avatar?: string;
+    /** URL de imagen del avatar (sobrescribe `avatar`). */
+    avatarSrc?: string;
+    /** Texto del cuerpo (si no se usa `slot="content"`). */
+    body?: string;
+    /** Fila de cifras tabulares (hasta 3). */
+    stats: OkHoverCardStat[];
+    /** Botones del pie (hasta 2). */
+    actions: OkHoverCardAction[];
+    /** Colocación preferida (se voltea si no cabe). */
+    placement: OkHoverCardPlacement;
+    /** Retardo (ms) antes de abrir al entrar el hover. */
+    openDelay: number;
+    /** Retardo (ms) antes de cerrar al salir el hover. */
+    closeDelay: number;
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkHoverCardLabels>;
+    private open;
+    private shown;
+    private end;
+    private above;
+    private cardEl?;
+    private triggerEl?;
+    private openTimer?;
+    private closeTimer?;
+    private get t();
+    disconnectedCallback(): void;
+    private clearTimers;
+    private scheduleOpen;
+    private scheduleClose;
+    private show;
+    private hide;
+    private anchor;
+    private fitsBelow;
+    private prefersReducedMotion;
+    private readonly onKeydown;
+    private runAction;
+    private renderAvatar;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-hover-card': OkHoverCard;
+    }
+}

package/dist/components/ok-icon-tile/ok-icon-tile.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export type OkIconTileColor = 'brand' | 'leaf' | 'warn' | 'danger' | 'info' | 'neutral';
+export type OkIconTileSize = 'md' | 'lg';
+export type OkIconTileShape = 'rounded' | 'circle';
+export declare class OkIconTile extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nombre del icono (Iconify, p.ej. "ion:home-outline" o "home-outline"). */
+    icon?: string;
+    /** Par de color (fondo soft + color del icono). */
+    color: OkIconTileColor;
+    /** Tamaño del tile. */
+    size: OkIconTileSize;
+    /** Forma del recorte. */
+    shape: OkIconTileShape;
+    /** Etiqueta accesible; si falta, el tile es decorativo (aria-hidden). */
+    label?: string;
+    private renderIcon;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-icon-tile': OkIconTile;
+    }
+}

package/dist/components/ok-image/ok-image.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+/** Relación de aspecto del marco. */
+export type OkImageRatio = '16:9' | 'square' | 'portrait' | 'free';
+/** Radio de las esquinas. */
+export type OkImageRadius = 'sm' | 'md' | 'lg';
+/** Modo de zoom/interacción. */
+export type OkImageZoom = 'none' | 'lens' | 'lightbox';
+export declare class OkImage extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** URL de la imagen. */
+    src: string;
+    /** Texto alternativo (accesibilidad). */
+    alt: string;
+    /** Relación de aspecto del marco. */
+    ratio: OkImageRatio;
+    /** Caption opcional pinned abajo con degradado. */
+    caption?: string;
+    /** Radio de esquinas. */
+    radius: OkImageRadius;
+    /** Modo de zoom/interacción. */
+    zoom: OkImageZoom;
+    /** Texto del placeholder mientras carga. */
+    placeholderText: string;
+    /** true cuando la imagen ha cargado (fade-in). */
+    private loaded;
+    /** true si la imagen falló al cargar. */
+    private errored;
+    /** true mientras el cursor está sobre la imagen en modo lens. */
+    private zooming;
+    /** true mientras el overlay lightbox está abierto. */
+    private lightboxOpen;
+    /** Posición (%) de la lente, seguida con el puntero. */
+    private lensX;
+    private lensY;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private onLoad;
+    private onError;
+    private onPointerMove;
+    private onFrameClick;
+    private onPointerEnter;
+    private onPointerLeave;
+    private openLightbox;
+    private closeLightbox;
+    private onKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderLens;
+    private renderLightboxHint;
+    private renderLightbox;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-image': OkImage;
+    }
+}

package/dist/components/ok-inline-feedback/ok-inline-feedback.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export type OkInlineFeedbackTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface OkInlineFeedbackLabels {
+    /** aria-label del botón de cierre. */
+    dismiss: string;
+}
+export declare class OkInlineFeedback extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tono del banner: define color e icono por defecto. */
+    tone: OkInlineFeedbackTone;
+    /** Título en negrita (opcional). */
+    heading?: string;
+    /** Nombre de icono ion-icon que sobrescribe el icono por defecto del tono (opcional). */
+    icon?: string;
+    /** Muestra el botón de cierre. */
+    dismissible: boolean;
+    /** Oculta el banner (reflejado para CSS y consumidores externos). */
+    hidden: boolean;
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkInlineFeedbackLabels>;
+    private get t();
+    /** Marca si el slot de actions tiene contenido (para colapsar el contenedor vacío). */
+    private hasActions;
+    private defaultIcon;
+    private onActionsSlotChange;
+    private dismiss;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-inline-feedback': OkInlineFeedback;
+    }
+}

package/dist/components/ok-invoice/ok-invoice.d.ts

@@ -0,0 +1,137 @@
+import { LitElement } from 'lit';
+import '../ok-qr/ok-qr.js';
+/** Parte fiscal (emisor o receptor). */
+export interface InvoiceParty {
+    name: string;
+    /** NIF / CIF / VAT. */
+    tax_id?: string;
+    address?: string;
+    city?: string;
+    postal_code?: string;
+    country?: string;
+    email?: string;
+    phone?: string;
+}
+/** Una línea de factura. */
+export interface InvoiceLine {
+    description: string;
+    qty: number;
+    unit_price: number;
+    /** % de descuento sobre la línea (opcional). */
+    discount_percent?: number;
+    /** % de impuesto aplicado a la línea (informativo; el cálculo va en `taxes`). */
+    tax_rate?: number;
+    /** Importe de la línea (neto tras descuento, sin impuesto). */
+    total: number;
+}
+/** Resumen de un tipo impositivo. */
+export interface InvoiceTaxLine {
+    /** Etiqueta (p.ej. "IVA 21%"). */
+    label: string;
+    /** Tipo en % (p.ej. 21). */
+    rate?: number;
+    base: number;
+    amount: number;
+}
+export interface OkInvoiceLabels {
+    /** Mensaje cuando no hay datos de factura. */
+    empty: string;
+    /** Título del documento (cabecera derecha). */
+    invoice: string;
+    /** Etiqueta del nº de factura. */
+    number: string;
+    /** Etiqueta de la fecha de emisión. */
+    date: string;
+    /** Etiqueta de la fecha de vencimiento. */
+    dueDate: string;
+    /** Cabecera del bloque receptor. */
+    billTo: string;
+    /** Cabecera de columna: descripción. */
+    description: string;
+    /** Cabecera de columna: cantidad. */
+    qty: string;
+    /** Cabecera de columna: precio unitario. */
+    price: string;
+    /** Cabecera de columna: descuento. */
+    discount: string;
+    /** Cabecera de columna: impuesto. */
+    tax: string;
+    /** Cabecera de columna: importe de línea. */
+    amount: string;
+    /** Mensaje cuando no hay líneas. */
+    noLines: string;
+    /** Etiqueta de la base imponible. */
+    taxBase: string;
+    /** Etiqueta del descuento total. */
+    discountTotal: string;
+    /** Etiqueta del total. */
+    total: string;
+    /** Cabecera de la forma de pago. */
+    paymentMethod: string;
+}
+/** JSON completo de la factura. */
+export interface InvoiceData {
+    /** Emisor (con logo opcional). */
+    issuer: InvoiceParty & {
+        logo_url?: string;
+    };
+    /** Receptor / cliente. */
+    customer: InvoiceParty;
+    /** Tipo fiscal (p.ej. 'F1' completa, 'F2' simplificada, 'R1' rectificativa). */
+    type?: string;
+    /** Nº de factura (serie + número). */
+    number: string;
+    /** Fecha de emisión (ya formateada o ISO legible). */
+    issue_date: string;
+    /** Fecha de vencimiento (opcional). */
+    due_date?: string;
+    lines: InvoiceLine[];
+    /** Base imponible total (suma de netos). */
+    subtotal: number;
+    /** Descuento total agregado (opcional). */
+    discount_total?: number;
+    /** Resumen de impuestos por tipo. */
+    taxes: InvoiceTaxLine[];
+    /** Suma de impuestos. */
+    tax_total: number;
+    /** Total a pagar. */
+    total: number;
+    /** Símbolo de moneda (def. '€'). */
+    currency?: string;
+    /** Método de pago (p.ej. "Transferencia", "Tarjeta"). */
+    payment_method?: string;
+    /** Condiciones de pago / IBAN / vencimiento textual. */
+    payment_terms?: string;
+    /** Notas libres. */
+    notes?: string;
+    /** Pie legal (LOPD, registro mercantil, etc.). */
+    footer?: string;
+    /** Payload del QR (VeriFactu / verificación). Si vacío, no se pinta. */
+    qr?: string;
+    /** Leyenda bajo el QR. */
+    qr_note?: string;
+}
+export declare class OkInvoice extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** JSON de la factura a renderizar. */
+    invoice?: InvoiceData;
+    /** Tamaño del QR en px (lado). */
+    qrSize: number;
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkInvoiceLabels>;
+    private get t();
+    private cur;
+    private money;
+    render(): import("lit").TemplateResult<1>;
+    private party;
+    private renderTop;
+    private renderBillTo;
+    private renderLines;
+    private renderSummary;
+    private renderFoot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-invoice': OkInvoice;
+    }
+}

package/dist/components/ok-json-viewer/ok-json-viewer.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/** Tamaño visual del visor. */
+export type OkJsonViewerSize = 'compact' | 'default' | 'lg';
+/** Valor JSON cualquiera (recursivo). */
+export type OkJsonValue = string | number | boolean | null | OkJsonValue[] | {
+    [key: string]: OkJsonValue;
+};
+export declare class OkJsonViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Datos a visualizar: valor JSON, o un string JSON que se parsea. */
+    data: OkJsonValue | string;
+    /** Tamaño visual: compact | default | lg. */
+    size: OkJsonViewerSize;
+    /** Profundidad inicial expandida (default 1; usa -1 para expandir todo). */
+    expandedDepth: number;
+    private collapsed;
+    private get value();
+    private static hasChildren;
+    private isExpanded;
+    private toggle;
+    private static caretSvg;
+    private static renderLeaf;
+    private static countLabel;
+    private renderRow;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-json-viewer': OkJsonViewer;
+    }
+}

package/dist/components/ok-kanban/ok-kanban.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+export interface OkKanbanCard {
+    /** Identificador único de la tarjeta (clave de movimiento/click). */
+    id: string;
+    /** Título principal de la tarjeta. */
+    title: string;
+    /** Texto secundario opcional bajo el título. */
+    subtitle?: string;
+    /** Etiquetas opcionales mostradas como chips. */
+    tags?: string[];
+}
+export interface OkKanbanColumn {
+    /** Identificador único de la columna. */
+    id: string;
+    /** Título visible en la cabecera. */
+    title: string;
+    /** Color de acento opcional (cualquier valor CSS) para la franja/cabecera. */
+    color?: string;
+    /** Tarjetas de la columna, en orden. */
+    cards: OkKanbanCard[];
+}
+export interface OkKanbanLabels {
+    /** Mensaje de columna sin tarjetas. */
+    empty: string;
+}
+export declare class OkKanban extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Columnas del tablero (con sus tarjetas). El componente mantiene una copia interna `view`. */
+    columns: OkKanbanColumn[];
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkKanbanLabels>;
+    private get t();
+    private view;
+    private drag;
+    private overColumn;
+    private overCardId;
+    private overAfter;
+    private lastColumnsRef;
+    private syncFromProp;
+    private onDragStart;
+    private onDragEnd;
+    private onColumnDragOver;
+    private onCardDragOver;
+    private onColumnDrop;
+    private onCardDrop;
+    private commitMove;
+    private onCardClick;
+    private renderCard;
+    private renderColumn;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-kanban': OkKanban;
+    }
+}

package/dist/components/ok-kbd/ok-kbd.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/** Tamaño del keycap. */
+export type OkKbdSize = 'sm' | 'md';
+export declare class OkKbd extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Teclas separadas por espacio (p.ej. "cmd k" o "ctrl shift n"). */
+    keys: string;
+    /** Tamaño del keycap. */
+    size: OkKbdSize;
+    /** Si es combo, inserta separadores "+" entre teclas. Por defecto true. */
+    combo: boolean;
+    private parseKeys;
+    private isMod;
+    private label;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-kbd': OkKbd;
+    }
+}

package/dist/components/ok-keyboard/ok-keyboard.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/** Distribución del teclado. */
+export type OkKeyboardLayout = 'qwerty' | 'numeric' | 'symbol';
+/** Densidad: touch (kiosko, teclas grandes) o compact (denso, mobile). */
+export type OkKeyboardDensity = 'touch' | 'compact';
+export declare class OkKeyboard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Distribución: qwerty (texto completo), numeric (rejilla 3-col), symbol. */
+    layout: OkKeyboardLayout;
+    /** Densidad de las teclas. */
+    density: OkKeyboardDensity;
+    /** Valor actual del campo (controlado o no). */
+    value: string;
+    /** Muestra la tira de display companion (label + valor + caret). */
+    showDisplay: boolean;
+    /** Etiqueta de la tira de display. */
+    displayLabel: string;
+    /** Estado de shift (mayúsculas). Reflejado para CSS. */
+    isShift: boolean;
+    /** Layout interno activo cuando el usuario alterna 123/ABC. */
+    private activeLayout;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private get rows();
+    private emit;
+    private setValue;
+    private handleKey;
+    private renderKey;
+    private renderDisplay;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-keyboard': OkKeyboard;
+    }
+}

package/dist/components/ok-kpi/ok-kpi.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+type OkKpiTrend = 'up' | 'down' | 'flat';
+export declare class OkKpi extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Etiqueta (muted, uppercase). */
+    label?: string;
+    /** Valor principal (grande, bold). */
+    value?: string;
+    /** Variación, p.ej. '+12%'. */
+    delta?: string;
+    /** Tendencia: 'up' | 'down' | 'flat'. Controla color y flecha del delta. */
+    trend: OkKpiTrend;
+    /** Nombre de un ion-icon opcional mostrado junto al label. */
+    icon?: string;
+    /** Devuelve el ion-icon de flecha según la tendencia. */
+    private trendIcon;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-kpi': OkKpi;
+    }
+}
+export {};

package/dist/components/ok-language-select/ok-language-select.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export interface OkLanguageSelectLabels {
+    /** aria-label del trigger que abre el desplegable de idiomas. */
+    language: string;
+}
+export declare class OkLanguageSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Código del idioma activo (p.ej. "es"). Si vacío, se usa el del navegador. */
+    value: string;
+    /** Estado del desplegable (reflejado para :host([open])). */
+    open: boolean;
+    /** Textos i18n (parcial; se mezclan sobre los defaults en inglés). */
+    labels: Partial<OkLanguageSelectLabels>;
+    private get t();
+    private currentLabel;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /** Decide el idioma activo: value → navegador → primero; marca el <a> y guarda su etiqueta. */
+    private resolveCurrent;
+    private toggle;
+    private onDocClick;
+    private onKeydown;
+    private onPanelClick;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-language-select': OkLanguageSelect;
+    }
+}