@erplora/outfitkit 0.1.1

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export declare class OkSparkline extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Serie de datos a representar. */
+    values: number[];
+    /** Tipo de gráfico: línea o barras. */
+    type: 'line' | 'bar';
+    /** Color del trazo/relleno; cae al token del componente si no se da. */
+    color: string;
+    /** Ancho del SVG en px. */
+    width: number;
+    /** Alto del SVG en px. */
+    height: number;
+    /** En modo línea, rellena el área bajo la curva. */
+    filled: boolean;
+    private get pad();
+    private get stroke();
+    private points;
+    private renderLine;
+    private renderBars;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-sparkline': OkSparkline;
+    }
+}

package/dist/components/ok-split-button/ok-split-button.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+export interface OkSplitButtonItem {
+    /** Identificador único del item (clave de selección). */
+    id: string;
+    /** Texto visible del item. */
+    label: string;
+    /** Nombre de un ionicon opcional, mostrado antes del label. */
+    icon?: string;
+}
+export interface OkSplitButtonLabels {
+    /** aria-label del botón caret que abre el menú. */
+    more: string;
+    /** aria-label del menú desplegable. */
+    menu: string;
+    /** Texto mostrado cuando no hay items. */
+    empty: string;
+}
+export declare class OkSplitButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Texto del botón principal. */
+    label: string;
+    /** Color Ionic propagado a los `ion-button` (primary, danger, …). */
+    color: string;
+    /** Fill Ionic propagado a los `ion-button` (solid | outline | clear). */
+    fill: 'solid' | 'outline' | 'clear' | 'default';
+    /** Items del menú desplegable. */
+    items: OkSplitButtonItem[];
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkSplitButtonLabels>;
+    private get t();
+    private open;
+    private readonly onDocClick;
+    private readonly onKeydown;
+    disconnectedCallback(): void;
+    private bind;
+    private unbind;
+    private toggle;
+    private openMenu;
+    private close;
+    private mainClick;
+    private selectItem;
+    private renderItem;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-split-button': OkSplitButton;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+export type OkSplitterOrientation = 'horizontal' | 'vertical';
+export type OkSplitterCollapsed = 'none' | 'start' | 'end';
+export declare class OkSplitter extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Orientación: horizontal (paneles lado a lado) o vertical (apilados). */
+    orientation: OkSplitterOrientation;
+    /** Tamaño del primer panel en % (0–100). */
+    size: number;
+    /** Mínimo % permitido para el primer panel. */
+    min: number;
+    /** Máximo % permitido para el primer panel. */
+    max: number;
+    /** Colapsar un panel: none | start | end. */
+    collapsed: OkSplitterCollapsed;
+    /** Estado de arrastre (reflejado para CSS). */
+    dragging: boolean;
+    private _size;
+    private _splitEl;
+    private _pointerId;
+    connectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private _clamp;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onKeyDown;
+    private _setSize;
+    private _emit;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-splitter': OkSplitter;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class OkStat extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Etiqueta de la métrica (muted). */
+    label?: string;
+    /** Valor de la métrica. */
+    value?: string;
+    /** Texto secundario opcional (muted) bajo el valor. */
+    hint?: string;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-stat': OkStat;
+    }
+}

package/dist/components/ok-status-dot/ok-status-dot.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/** Tono semántico del dot. */
+export type OkStatusDotTone = 'ok' | 'warn' | 'danger' | 'info' | 'off' | 'brand';
+/** Tamaño del dot. */
+export type OkStatusDotSize = 'sm' | 'md' | 'lg';
+export declare class OkStatusDot extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tono semántico: ok | warn | danger | info | off | brand. */
+    tone: OkStatusDotTone;
+    /** Tamaño: sm | md | lg. */
+    size: OkStatusDotSize;
+    /** Animación de pulso "en vivo". */
+    pulse: boolean;
+    /** Texto descriptivo del estado (para accesibilidad y/o visible). */
+    label?: string;
+    /** Si hay label, mostrarlo inline junto al dot (si no, queda solo sr-only). */
+    showLabel: boolean;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-status-dot': OkStatusDot;
+    }
+}

package/dist/components/ok-status-pill/ok-status-pill.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export type OkStatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'neutral';
+export type OkStatusPillSize = 'sm' | 'md';
+export declare class OkStatusPill extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tono semántico del pill. */
+    tone: OkStatusPillTone;
+    /** Texto del pill (alternativa al slot; útil al crearlo por JS en renders de celda). */
+    label?: string;
+    /** Nombre de icono ion-icon opcional a la izquierda. */
+    icon?: string;
+    /** Punto de color en vez de icono (estilo Linear). */
+    dot: boolean;
+    /** Tamaño. */
+    size: OkStatusPillSize;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-status-pill': OkStatusPill;
+    }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/** Un paso del stepper/wizard. */
+export interface OkStep {
+    /** Etiqueta corta del paso. */
+    label: string;
+    /** Descripción opcional bajo la etiqueta (solo desktop). */
+    description?: string;
+}
+export interface OkStepperLabels {
+    /** Resumen compacto (móvil); `{n}` = paso actual (1-based), `{total}` = total de pasos. */
+    stepCount: string;
+}
+export declare class OkStepper extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Lista de pasos a mostrar. */
+    steps: OkStep[];
+    /** Índice (0-based) del paso activo. */
+    current: number;
+    /** Textos humanos sobreescribibles (i18n). Default INGLÉS. */
+    labels: Partial<OkStepperLabels>;
+    /** Textos efectivos: defaults INGLÉS mezclados con los del consumidor. */
+    private get t();
+    /** Emite ok-step-select al pulsar un paso. */
+    private _select;
+    /** Estado de un paso respecto al actual. */
+    private _stateClass;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-stepper': OkStepper;
+    }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import { type Store } from '../../store/store.js';
+export declare class OkStore extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nombre de la base de datos IndexedDB que posee este elemento (default: 'outfitkit'). */
+    name?: string;
+    /** La instancia de store que posee este elemento. Disponible tras la creación. */
+    store: Store;
+    private unsubscribe?;
+    private currentName?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private ensureStore;
+    /** Lee un valor del store (SÍNCRONO). */
+    get<T = unknown>(key: string): T | undefined;
+    /** Escribe un valor en el store. */
+    set<T = unknown>(key: string, value: T): void;
+    /**
+     * Actualiza un valor a partir del previo. Se llama `updateValue` (no `update`) porque `update`
+     * es un método reservado del ciclo de vida de LitElement; usa el `.store.update()` directamente
+     * si prefieres el nombre corto.
+     */
+    updateValue<T = unknown>(key: string, fn: (prev: T | undefined) => T): void;
+    /** Borra una clave. */
+    delete(key: string): void;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-store': OkStore;
+    }
+}

package/dist/components/ok-tag-input/ok-tag-input.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export interface OkTagInputLabels {
+    /** Texto guía del input cuando no hay tags. */
+    placeholder: string;
+    /** aria-label del botón × de cada chip. Variable: {tag}. */
+    removeLabel: string;
+}
+export declare class OkTagInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tags actuales. */
+    value: string[];
+    /** Texto guía del campo. Si se deja vacío, usa `labels.placeholder` (inglés por defecto). */
+    placeholder: string;
+    /** Sugerencias opcionales para el dropdown. */
+    suggestions?: string[];
+    /** Textos i18n (default inglés); pasa solo las claves que quieras sobreescribir. */
+    labels: Partial<OkTagInputLabels>;
+    private get t();
+    private get effectivePlaceholder();
+    private draft;
+    private open;
+    private activeIndex;
+    private onDocClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private close;
+    private get filteredSuggestions();
+    private emitChange;
+    private addTag;
+    private removeAt;
+    private handleInput;
+    private handleKeydown;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-tag-input': OkTagInput;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export declare class OkTestimonial extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nº de estrellas (0–5). Si 0/undefined no se muestran. */
+    rating: number;
+    /** Nombre del autor. */
+    author?: string;
+    /** Rol / empresa del autor (atributo HTML: author-role; `role` está reservado por ARIA). */
+    authorRole?: string;
+    /** URL del avatar. Si no hay, se muestran las iniciales del autor. */
+    avatar?: string;
+    /** Cristal esmerilado. */
+    glass: boolean;
+    private initials;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-testimonial': OkTestimonial;
+    }
+}

package/dist/components/ok-time-picker/ok-time-picker.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+export declare class OkTimePicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Valor canónico "HH:MM" (24h). */
+    value: string;
+    /** Paso de minutos para la lista de minutos (default 5). */
+    step: number;
+    /** Presentación 12h con segmento AM/PM (el valor sigue siendo 24h). */
+    useAmpm: boolean;
+    /** Hora mínima seleccionable "HH:MM" (inclusive). */
+    min: string;
+    /** Hora máxima seleccionable "HH:MM" (inclusive). */
+    max: string;
+    /** Desactiva la interacción. */
+    disabled: boolean;
+    private open;
+    private end;
+    private above;
+    private readonly onDocPointer;
+    private readonly onKeydown;
+    disconnectedCallback(): void;
+    private bind;
+    private unbind;
+    private get current();
+    private get minMin();
+    private get maxMin();
+    private inRange;
+    private toggle;
+    private openPanel;
+    private close;
+    private reanchor;
+    private scrollToSelected;
+    private commit;
+    private pickHour;
+    private pickMinute;
+    private pickMeridiem;
+    private hourOptions;
+    private minuteOptions;
+    private displayHour;
+    private displayMinute;
+    private hourLabel;
+    private get isPm();
+    render(): unknown;
+    private panelTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-time-picker': OkTimePicker;
+    }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export interface OkTimelineItem {
+    /** Identificador único del item. */
+    id: string;
+    /** Título visible del hito. */
+    title: string;
+    /** Texto secundario opcional bajo el título. */
+    description?: string;
+    /** Marca temporal/etiqueta opcional (se muestra atenuada). */
+    time?: string;
+    /** Nombre de un ionicon opcional, dibujado dentro del punto. */
+    icon?: string;
+    /** Color del punto (token Ionic p.ej. 'primary' o cualquier valor CSS p.ej. '#3880ff'). */
+    color?: string;
+    /** Estado del hito; afecta al color por defecto y al resaltado del `current`. */
+    status?: 'done' | 'current' | 'pending';
+}
+export declare class OkTimeline extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Items de la línea de tiempo (en orden cronológico de arriba a abajo). */
+    items: OkTimelineItem[];
+    /** Disposición: 'left' (todo a la derecha de la línea) o 'alternate' (zig-zag en desktop). */
+    align: 'left' | 'alternate';
+    private dotColor;
+    private emitClick;
+    private renderItem;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-timeline': OkTimeline;
+    }
+}

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

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+export interface OkTreeNode {
+    /** Identificador único del nodo (clave de selección/expansión). */
+    id: string;
+    /** Texto visible del nodo. */
+    label: string;
+    /** Nombre de un ionicon opcional, mostrado antes del label. */
+    icon?: string;
+    /** Hijos del nodo; si tiene, se dibuja chevron expandible. */
+    children?: OkTreeNode[];
+    /** Estado inicial de expansión (se copia al estado interno la primera vez). */
+    expanded?: boolean;
+    /** Deshabilita la interacción (no expande ni selecciona). */
+    disabled?: boolean;
+}
+export interface OkTreeLabels {
+    /** aria-label del chevron cuando el nodo está colapsado. */
+    expand: string;
+    /** aria-label del chevron cuando el nodo está expandido. */
+    collapse: string;
+}
+export declare class OkTree extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nodos raíz del árbol (recursivo vía `children`). */
+    nodes: OkTreeNode[];
+    /** Si está activo, las filas son clicables y emiten `ok-select`. */
+    selectable: boolean;
+    /** Id del nodo resaltado. */
+    activeId: string;
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkTreeLabels>;
+    private get t();
+    private expandedIds;
+    private seeded;
+    private seedExpanded;
+    private isExpanded;
+    private toggle;
+    private select;
+    private renderNode;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-tree': OkTree;
+    }
+}

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+export interface OkVideoLabels {
+    /** aria-label del botón cuando está pausado (acción: reproducir). */
+    play: string;
+    /** aria-label del botón cuando reproduce (acción: pausar). */
+    pause: string;
+    /** aria-label del botón de mute cuando hay sonido (acción: silenciar). */
+    mute: string;
+    /** aria-label del botón de mute cuando está silenciado (acción: activar sonido). */
+    unmute: string;
+    /** aria-label del slider de volumen. */
+    volume: string;
+    /** aria-label del botón de pantalla completa. */
+    fullscreen: string;
+}
+export declare class OkVideo extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** URL del vídeo a reproducir. */
+    src: string;
+    /** Imagen de previsualización opcional. */
+    poster: string;
+    /** Textos i18n (parcial; se mezclan sobre los defaults en inglés). */
+    labels: Partial<OkVideoLabels>;
+    private get t();
+    private playing;
+    private current;
+    private duration;
+    private volume;
+    private muted;
+    private videoEl;
+    private stageEl;
+    private togglePlay;
+    private onPlay;
+    private onPause;
+    private onEnded;
+    private onTimeUpdate;
+    private onLoadedMeta;
+    private seek;
+    private onVolume;
+    private toggleMute;
+    private toggleFullscreen;
+    private fmt;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-video': OkVideo;
+    }
+}

package/dist/components/ok-widget-board/ok-widget-board.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+/** Tamaño de celda en la rejilla de 12 columnas (desktop): sm=3, md=6, lg=8. */
+export type WidgetSize = 'sm' | 'md' | 'lg';
+/** Definición de un widget del catálogo. */
+export interface WidgetDef {
+    /** Id estable (clave de activación/orden/persistencia). */
+    id: string;
+    /** Título legible (se muestra en el selector). */
+    title: string;
+    /** Icono ionicons para el selector. */
+    icon?: string;
+    /** Categoría/grupo (se muestra como subtítulo en el selector). */
+    category?: string;
+    /** Tamaño de celda (def 'md'). */
+    size?: WidgetSize;
+    /** Monta el cuerpo del widget DENTRO de `cell` (el host añade sus ok/ion con sus datos). */
+    render: (cell: HTMLElement) => void;
+}
+/** Preset = conjunto recomendado de widgets para un sector/rol. */
+export interface WidgetPreset {
+    id: string;
+    label: string;
+    widgets: string[];
+}
+/** Textos del selector (default inglés; override por `.labels`). */
+export interface OkWidgetBoardLabels {
+    customize: string;
+    close: string;
+    presets: string;
+    active: string;
+    available: string;
+    empty: string;
+}
+export declare class OkWidgetBoard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Catálogo de widgets disponibles. */
+    widgets: WidgetDef[];
+    /** Presets por sector/rol (opcional). */
+    presets: WidgetPreset[];
+    /** Ids activos y ordenados. Si no se pasa, deriva del 1er preset o de todos. */
+    value: string[];
+    /** Muestra el botón ⋮ de configuración. */
+    editable: boolean;
+    /** Si se da, persiste el `value` en localStorage bajo `okwb:{storageKey}`. */
+    storageKey: string;
+    /** Textos del selector (parcial; lo no pasado cae al default inglés). */
+    labels: Partial<OkWidgetBoardLabels>;
+    private initialized;
+    private modal?;
+    private reorderEl?;
+    private availEl?;
+    private get t();
+    private get byId();
+    private get active();
+    willUpdate(): void;
+    private persist;
+    /** Cambia el estado activo, persiste, re-renderiza el selector y emite `ok-change`. */
+    private setValue;
+    render(): import("lit").TemplateResult<1>;
+    updated(): void;
+    private openConfig;
+    private buildModal;
+    /** Repinta las listas de activos/disponibles del modal según `value`. */
+    private refreshModal;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-widget-board': OkWidgetBoard;
+    }
+}

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { type OkStep } from '../ok-stepper/ok-stepper.js';
+export type { OkStep } from '../ok-stepper/ok-stepper.js';
+export declare class OkWizard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Lista de pasos (misma forma que ok-stepper). */
+    steps: OkStep[];
+    /** Índice (0-based) del paso actual. */
+    current: number;
+    /** Etiqueta del botón Atrás. Default INGLÉS. */
+    backLabel: string;
+    /** Etiqueta del botón Siguiente. Default INGLÉS. */
+    nextLabel: string;
+    /** Etiqueta del botón Finalizar (último paso). Default INGLÉS. */
+    finishLabel: string;
+    /** Cambia al índice dado (con clamp) y emite ok-step-change si realmente cambia. */
+    private _goTo;
+    /** Retrocede un paso. */
+    private _back;
+    /** Avanza un paso, o emite ok-finish si es el último. */
+    private _next;
+    /** Navegación desde el stepper (clic en un paso). */
+    private _onStepSelect;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-wizard': OkWizard;
+    }
+}

package/dist/define.js

@@ -0,0 +1,8 @@
+function define(tag, ctor) {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
+    customElements.define(tag, ctor);
+  }
+}
+export {
+  define
+};