@erplora/outfitkit 0.1.1

package/dist/ok-status-dot.js

@@ -0,0 +1,163 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkStatusDot extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "off";
+    this.size = "md";
+    this.pulse = false;
+    this.showLabel = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Átomo inline: ocupa solo su contenido. */
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      /* Tono por defecto (off). Cada variante reescribe --dot-color en :host([tone=...]). */
+      --dot-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --dot-size: 0.625rem;
+      --label-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+    }
+
+    /* ---- Tonos: --ok-* → --ion-color-* → hex (tomados del diseño ux antiguo) ---- */
+    :host([tone='ok']) {
+      --dot-color: var(--ok-color-success, var(--ion-color-success, #4f9d6e));
+    }
+    :host([tone='warn']) {
+      --dot-color: var(--ok-color-warning, var(--ion-color-warning, #d8a23a));
+    }
+    :host([tone='danger']) {
+      --dot-color: var(--ok-color-danger, var(--ion-color-danger, #d8553f));
+    }
+    :host([tone='info']) {
+      --dot-color: var(--ok-color-primary, var(--ion-color-primary, #3880ff));
+    }
+    :host([tone='off']) {
+      --dot-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+    }
+    :host([tone='brand']) {
+      --dot-color: var(--ok-color-secondary, var(--ion-color-secondary, #0091ce));
+    }
+
+    /* ---- Tamaños ---- */
+    :host([size='sm']) {
+      --dot-size: 0.5rem;
+    }
+    :host([size='lg']) {
+      --dot-size: 0.875rem;
+    }
+
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+
+    .dot {
+      position: relative;
+      flex-shrink: 0;
+      width: var(--dot-size);
+      height: var(--dot-size);
+      border-radius: 999px;
+      background: var(--dot-color);
+    }
+
+    /* Aro de pulso: halo que escala y se desvanece como señal "en vivo". */
+    :host([pulse]) .dot::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: var(--dot-color);
+      animation: ok-status-pulse 1.6s ease-out infinite;
+    }
+
+    @keyframes ok-status-pulse {
+      0% {
+        transform: scale(1);
+        opacity: 0.55;
+      }
+      70% {
+        transform: scale(2.6);
+        opacity: 0;
+      }
+      100% {
+        transform: scale(2.6);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([pulse]) .dot::after {
+        animation: none;
+      }
+    }
+
+    .label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--label-color);
+      line-height: 1.2;
+    }
+
+    /* Etiqueta accesible oculta visualmente (sr-only). */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `;
+  }
+  render() {
+    const labelInline = this.label && this.showLabel;
+    const labelSr = this.label && !this.showLabel;
+    return html`
+      <span
+        class="wrap"
+        role="img"
+        aria-label=${this.label ?? this.tone}
+      >
+        <span class="dot"></span>
+        ${labelInline ? html`<span class="label">${this.label}</span>` : null}
+        ${labelSr ? html`<span class="sr-only">${this.label}</span>` : null}
+      </span>
+    `;
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], OkStatusDot.prototype, "tone");
+__decorateClass([
+  property({ reflect: true })
+], OkStatusDot.prototype, "size");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkStatusDot.prototype, "pulse");
+__decorateClass([
+  property()
+], OkStatusDot.prototype, "label");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-label" })
+], OkStatusDot.prototype, "showLabel");
+define("ok-status-dot", OkStatusDot);
+export {
+  OkStatusDot
+};

package/dist/ok-status-pill.js

@@ -0,0 +1,123 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkStatusPill extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "neutral";
+    this.dot = false;
+    this.size = "md";
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex.
+         --tone-color (base: fondo/punto/icono) y --tone-shade (texto) se reasignan por tone abajo. */
+      --tone-color: var(--ok-medium, var(--ion-color-medium, #5f5f5f));
+      --tone-shade: var(--ok-medium, var(--ion-color-medium-shade, #545454));
+      --background-opacity: var(--ok-pill-bg-opacity, 0.14);
+      --border-radius: var(--ok-pill-radius, 999px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Inline: el pill vive en celdas de tabla, cabeceras y listados. */
+      display: inline-flex;
+      vertical-align: middle;
+      font-family: var(--font);
+      box-sizing: border-box;
+    }
+
+    /* Mapa de tonos → color Ionic (base + shade para el texto). */
+    :host([tone='success']) {
+      --tone-color: var(--ok-success, var(--ion-color-success, #2dd55b));
+      --tone-shade: var(--ok-success, var(--ion-color-success-shade, #28bb50));
+    }
+    :host([tone='warning']) {
+      --tone-color: var(--ok-warning, var(--ion-color-warning, #ffc409));
+      --tone-shade: var(--ok-warning-shade, var(--ion-color-warning-shade, #e0ac08));
+    }
+    :host([tone='danger']) {
+      --tone-color: var(--ok-danger, var(--ion-color-danger, #c5000f));
+      --tone-shade: var(--ok-danger, var(--ion-color-danger-shade, #ad000d));
+    }
+    :host([tone='info']) {
+      --tone-color: var(--ok-info, var(--ion-color-secondary, #0163aa));
+      --tone-shade: var(--ok-info, var(--ion-color-secondary-shade, #015896));
+    }
+    :host([tone='primary']) {
+      --tone-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --tone-shade: var(--ok-primary, var(--ion-color-primary-shade, #3171e0));
+    }
+    /* neutral / sin tono → medium (default ya aplicado en :host). */
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4em;
+      padding: 0.25em 0.7em;
+      border-radius: var(--border-radius);
+      /* Fondo tonal: el color del tono con baja opacidad. */
+      background: color-mix(in srgb, var(--tone-color) calc(var(--background-opacity) * 100%), transparent);
+      color: var(--ok-pill-color, var(--tone-shade));
+      font-size: 0.8125rem;
+      font-weight: 600;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+    :host([size='sm']) .pill {
+      font-size: 0.72rem;
+      padding: 0.2em 0.6em;
+    }
+
+    ion-icon {
+      flex: 0 0 auto;
+      font-size: 1.05em;
+      pointer-events: none;
+    }
+
+    /* Punto de color (estilo Linear) en vez de icono. */
+    .dot {
+      flex: 0 0 auto;
+      width: 0.5em;
+      height: 0.5em;
+      border-radius: 50%;
+      background: var(--tone-color);
+    }
+  `;
+  }
+  render() {
+    return html`
+      <span class="pill" part="pill">
+        ${this.dot ? html`<span class="dot" part="dot" aria-hidden="true"></span>` : this.icon ? html`<ion-icon name=${this.icon} aria-hidden="true"></ion-icon>` : null}
+        <slot>${this.label ?? ""}</slot>
+      </span>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkStatusPill.prototype, "tone");
+__decorateClass([
+  property({ type: String })
+], OkStatusPill.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], OkStatusPill.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkStatusPill.prototype, "dot");
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkStatusPill.prototype, "size");
+define("ok-status-pill", OkStatusPill);
+export {
+  OkStatusPill
+};

package/dist/ok-stepper.js

@@ -0,0 +1,299 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  stepCount: "Step {n} of {total}"
+};
+class OkStepper extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.current = 0;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    /* Theming en dos capas: cadena --ok-* → --ion-* → hex (sin variables privadas). */
+    :host {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      /* Colores derivados del tema, overridable por componente al estilo Ionic. */
+      --color-primary: var(--ok-color-primary, var(--ion-color-primary, #3880ff));
+      --color-on-primary: var(--ok-color-primary-contrast, var(--ion-color-primary-contrast, #fff));
+      --color-muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --color-line: var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+      --color-text: var(--ok-text-color, var(--ion-text-color, #1f2937));
+      --circle-size: 2rem;
+      font-family: var(--ok-font-family, var(--ion-font-family, inherit));
+    }
+
+    /* ---------- Vista desktop (horizontal) ---------- */
+    .steps {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1 1 0;
+      min-width: 0;
+      position: relative;
+      text-align: center;
+    }
+
+    /* Botón clicable (todo el bloque círculo+texto). CSP-safe: sin handlers inline. */
+    .step-btn {
+      appearance: none;
+      background: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.375rem;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease), border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    .step-btn:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+      border-radius: 0.5rem;
+    }
+    /* Hover sutil solo con ratón: el círculo se acerca al primary. */
+    @media (hover: hover) {
+      .step-btn:hover .circle {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+    }
+    .step-btn:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .step-btn:active {
+        transform: none;
+      }
+    }
+
+    /* La línea conectora se dibuja a la izquierda de cada círculo (excepto el primero). */
+    .step:not(:first-child) .circle-row::before {
+      content: '';
+      position: absolute;
+      top: calc(var(--circle-size) / 2);
+      right: 50%;
+      left: -50%;
+      height: 2px;
+      background: var(--color-line);
+      z-index: 0;
+    }
+    /* Si el paso es <= current, la línea entrante se pinta como completada. */
+    .step.completed .circle-row::before,
+    .step.active .circle-row::before {
+      background: var(--color-primary);
+    }
+
+    .circle-row {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .circle {
+      position: relative;
+      z-index: 1;
+      width: var(--circle-size);
+      height: var(--circle-size);
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.875rem;
+      font-weight: 600;
+      border: 2px solid var(--color-line);
+      background: var(--ok-background, var(--ion-background-color, #fff));
+      color: var(--color-muted);
+      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    }
+
+    /* Pendiente: muted (por defecto). Completado: relleno primary con check. */
+    .step.completed .circle {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+      color: var(--color-on-primary);
+    }
+    /* Activo: resaltado con anillo. */
+    .step.active .circle {
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    .circle ion-icon {
+      font-size: 1.125rem;
+    }
+
+    .labels {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      padding: 0 0.25rem;
+    }
+    .label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--color-muted);
+      line-height: 1.25;
+      overflow-wrap: anywhere;
+    }
+    .step.active .label {
+      color: var(--color-text);
+      font-weight: 600;
+    }
+    .step.completed .label {
+      color: var(--color-text);
+    }
+    .description {
+      font-size: 0.75rem;
+      color: var(--color-muted);
+      line-height: 1.2;
+    }
+
+    /* ---------- Vista móvil (compacta) ---------- */
+    .compact {
+      display: none;
+      align-items: center;
+      gap: 0.625rem;
+      width: 100%;
+    }
+    .compact .circle {
+      flex: 0 0 auto;
+    }
+    .compact-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+    .compact-count {
+      font-size: 0.75rem;
+      color: var(--color-muted);
+      font-weight: 500;
+    }
+    .compact-label {
+      font-size: 0.9375rem;
+      font-weight: 600;
+      color: var(--color-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Breakpoint: por debajo de 640px colapsamos a la vista compacta. */
+    @media (max-width: 640px) {
+      .steps {
+        display: none;
+      }
+      .compact {
+        display: flex;
+      }
+    }
+  `;
+  }
+  /** Textos efectivos: defaults INGLÉS mezclados con los del consumidor. */
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  /** Emite ok-step-select al pulsar un paso. */
+  _select(index) {
+    this.dispatchEvent(
+      new CustomEvent("ok-step-select", {
+        detail: { index },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /** Estado de un paso respecto al actual. */
+  _stateClass(i) {
+    if (i < this.current) return "completed";
+    if (i === this.current) return "active";
+    return "pending";
+  }
+  render() {
+    const total = this.steps.length;
+    const cur = this.steps[this.current];
+    return html`
+      <!-- Desktop: pasos horizontales conectados -->
+      <ol class="steps" role="list">
+        ${this.steps.map((step, i) => {
+      const state = this._stateClass(i);
+      return html`<li class="step ${state}">
+            <button
+              type="button"
+              class="step-btn"
+              aria-current=${i === this.current ? "step" : "false"}
+              @click=${() => this._select(i)}
+            >
+              <span class="circle-row">
+                <span class="circle">
+                  ${i < this.current ? html`<ion-icon name="checkmark-outline" aria-hidden="true"></ion-icon>` : html`${i + 1}`}
+                </span>
+              </span>
+              <span class="labels">
+                <span class="label">${step.label}</span>
+                ${step.description ? html`<span class="description">${step.description}</span>` : ""}
+              </span>
+            </button>
+          </li>`;
+    })}
+      </ol>
+
+      <!-- Móvil: resumen compacto "Paso X de N · label" -->
+      <div class="compact">
+        <span class="circle">${this.current + 1}</span>
+        <span class="compact-text">
+          <span class="compact-count"
+            >${this.t.stepCount.replace("{n}", String(this.current + 1)).replace("{total}", String(total))}</span
+          >
+          <span class="compact-label">${cur ? cur.label : ""}</span>
+        </span>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkStepper.prototype, "steps");
+__decorateClass([
+  property({ type: Number })
+], OkStepper.prototype, "current");
+__decorateClass([
+  property({ attribute: false })
+], OkStepper.prototype, "labels");
+define("ok-stepper", OkStepper);
+export {
+  OkStepper
+};

package/dist/ok-store.js

@@ -0,0 +1,83 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+import { createStore } from "./store.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkStore extends LitElement {
+  static {
+    this.styles = css`
+    :host { display: contents; }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ensureStore();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unsubscribe?.();
+    this.unsubscribe = void 0;
+  }
+  updated(changed) {
+    if (changed.has("name")) this.ensureStore();
+  }
+  // Crea (o recrea si cambió `name`) el store y se (re)suscribe a sus cambios.
+  ensureStore() {
+    if (this.store && this.currentName === this.name) return;
+    this.unsubscribe?.();
+    this.currentName = this.name;
+    this.store = createStore({ name: this.name });
+    this.unsubscribe = this.store.subscribe((value, key) => {
+      this.dispatchEvent(
+        new CustomEvent("ok-store-change", {
+          detail: { key, value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    void this.store.ready.then(() => {
+      this.dispatchEvent(
+        new CustomEvent("ok-store-ready", { bubbles: true, composed: true })
+      );
+    });
+  }
+  /** Lee un valor del store (SÍNCRONO). */
+  get(key) {
+    return this.store.get(key);
+  }
+  /** Escribe un valor en el store. */
+  set(key, value) {
+    this.store.set(key, value);
+  }
+  /**
+   * 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(key, fn) {
+    this.store.update(key, fn);
+  }
+  /** Borra una clave. */
+  delete(key) {
+    this.store.delete(key);
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+__decorateClass([
+  property()
+], OkStore.prototype, "name");
+define("ok-store", OkStore);
+export {
+  OkStore
+};