@erplora/outfitkit 0.1.1

package/dist/ok-footer.js

@@ -0,0 +1,67 @@
+import { LitElement, css, html } from "lit";
+import { define } from "./define.js";
+class OkFooter extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      --background: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.55));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.12));
+      --border-color-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.07));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --max-width: var(--ok-container-max, 1140px);
+      --padding: var(--ok-spacing, var(--ion-padding, 16px));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: block;
+      background: var(--background);
+      border-top: 1px solid var(--border-color);
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .wrap {
+      max-width: var(--max-width);
+      margin-inline: auto;
+      padding: 2rem var(--padding);
+      display: grid;
+      gap: 1.5rem;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    }
+    .bottom {
+      border-top: 1px solid var(--border-color-soft);
+      padding: 1rem var(--padding);
+      text-align: center;
+      color: var(--color-muted);
+      font-size: 0.85rem;
+      max-width: var(--max-width);
+      margin-inline: auto;
+    }
+    ::slotted(a) {
+      color: var(--color-muted);
+      text-decoration: none;
+      /* Micro-interacción: transición sutil en color al hacer hover. */
+      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;
+    }
+    /* Hover de enlaces solo con ratón (evita estados pegados en táctil). */
+    @media (hover: hover) {
+      ::slotted(a:hover) { color: var(--primary-color); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      ::slotted(a):active { transform: none; }
+    }
+  `;
+  }
+  render() {
+    return html`
+      <footer>
+        <div class="wrap"><slot></slot></div>
+        <div class="bottom"><slot name="bottom"></slot></div>
+      </footer>
+    `;
+  }
+}
+define("ok-footer", OkFooter);
+export {
+  OkFooter
+};

package/dist/ok-funnel.js

@@ -0,0 +1,181 @@
+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 OkFunnel extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.minWidth = 12;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --brand: var(--ok-color-primary, var(--ion-color-primary, #0091ce));
+      --brand-fg: var(
+        --ok-color-primary-contrast,
+        var(--ion-color-primary-contrast, #ffffff)
+      );
+      --leaf: var(--ok-color-success, var(--ion-color-success, #2dd36f));
+      --leaf-fg: var(
+        --ok-color-success-contrast,
+        var(--ion-color-success-contrast, #ffffff)
+      );
+      --warn: var(--ok-color-warning, var(--ion-color-warning, #ffc409));
+      --warn-fg: var(
+        --ok-color-warning-contrast,
+        var(--ion-color-warning-contrast, #1f2933)
+      );
+      --bg-3: var(--ok-color-step-150, var(--ion-color-step-150, #e6e8ec));
+      --ink: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --ink-2: var(--ok-color-medium, var(--ion-color-medium, #6b7280));
+      --ink-3: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --radius: var(--ok-border-radius, var(--ion-border-radius, 6px));
+    }
+
+    .funnel {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .step {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .bar {
+      height: 32px;
+      box-sizing: border-box;
+      background: linear-gradient(
+        90deg,
+        var(--brand),
+        color-mix(in oklch, var(--brand) 60%, var(--bg-3))
+      );
+      border-radius: var(--radius);
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      color: var(--brand-fg);
+      font-size: 12px;
+      font-weight: 500;
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      transition: width 0.25s ease;
+    }
+
+    .bar--leaf {
+      background: linear-gradient(
+        90deg,
+        var(--leaf),
+        color-mix(in oklch, var(--leaf) 60%, var(--bg-3))
+      );
+      color: var(--leaf-fg);
+    }
+
+    .bar--warn {
+      background: linear-gradient(
+        90deg,
+        var(--warn),
+        color-mix(in oklch, var(--warn) 60%, var(--bg-3))
+      );
+      color: var(--warn-fg);
+    }
+
+    .bar--mute {
+      background: var(--bg-3);
+      color: var(--ink-2);
+    }
+
+    .meta {
+      font-size: 11.5px;
+      color: var(--ink-3);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    .meta b {
+      color: var(--ink);
+      font-weight: 600;
+    }
+  `;
+  }
+  /** Formatea un número absoluto con separadores de miles. */
+  fmtCount(n) {
+    return new Intl.NumberFormat(this.locale).format(n);
+  }
+  /** Formatea un porcentaje con un decimal. */
+  fmtPct(n) {
+    return new Intl.NumberFormat(this.locale, {
+      maximumFractionDigits: 1
+    }).format(n);
+  }
+  render() {
+    const steps = this.steps ?? [];
+    const top = steps.length ? steps[0].value : 0;
+    return html`
+      <div
+        class="funnel"
+        role="list"
+        aria-label="Embudo de conversión"
+      >
+        ${steps.map((s, i) => {
+      const ratio = top > 0 ? s.value / top : 0;
+      const width = Math.max(this.minWidth, Math.round(ratio * 100));
+      const globalPct = top > 0 ? s.value / top * 100 : 0;
+      const prev = i > 0 ? steps[i - 1].value : s.value;
+      const stepPct = prev > 0 ? s.value / prev * 100 : 0;
+      const variant = s.color ?? "brand";
+      const cls = variant === "brand" ? "bar" : `bar bar--${variant}`;
+      return html`
+            <div
+              class="step"
+              role="listitem"
+              aria-label=${`${s.label}: ${this.fmtCount(
+        s.value
+      )} (${this.fmtPct(globalPct)}%)`}
+            >
+              <div class=${cls} style=${`width:${width}%`} title=${s.label}>
+                ${s.label}
+              </div>
+              <span class="meta">
+                <b>${this.fmtCount(s.value)}</b> ·
+                ${i === 0 ? `${this.fmtPct(globalPct)}%` : `${this.fmtPct(stepPct)}%`}
+              </span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkFunnel.prototype, "steps");
+__decorateClass([
+  property()
+], OkFunnel.prototype, "locale");
+__decorateClass([
+  property({ type: Number, attribute: "min-width" })
+], OkFunnel.prototype, "minWidth");
+define("ok-funnel", OkFunnel);
+export {
+  OkFunnel
+};

package/dist/ok-gallery.js

@@ -0,0 +1,293 @@
+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 OkGallery extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.images = [];
+    this.selectable = false;
+    this.selected = [];
+    this.minSize = 160;
+    this.columns = 0;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens overridables estilo Ionic: cadena --ok-* → --ion-* → hex. */
+      --gap: var(--ok-gallery-gap, 8px);
+      --radius: var(--ok-gallery-radius, var(--ion-border-radius, 10px));
+      --brand: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --brand-contrast: var(
+        --ok-primary-contrast,
+        var(--ion-color-primary-contrast, #ffffff)
+      );
+      --placeholder-bg: var(--ok-gallery-ph, var(--ion-color-light, #e6e8ec));
+      --placeholder-bg-2: var(
+        --ok-gallery-ph-2,
+        var(--ion-color-light-shade, #cfd2d8)
+      );
+      --placeholder-ink: var(
+        --ok-gallery-ph-ink,
+        var(--ion-color-medium, #92949c)
+      );
+      --caption-color: var(--ok-gallery-caption, #ffffff);
+      --min-size: 160px;
+      --columns: 0;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
+      gap: var(--gap);
+      width: 100%;
+    }
+    /* Cuando se fuerza un número fijo de columnas. */
+    :host([columns]) .grid {
+      grid-template-columns: repeat(var(--columns), 1fr);
+    }
+
+    .item {
+      position: relative;
+      aspect-ratio: 1;
+      background: var(--placeholder-bg);
+      border-radius: var(--radius);
+      overflow: hidden;
+      cursor: pointer;
+      transition: transform 180ms ease-out;
+      padding: 0;
+      border: none;
+      width: 100%;
+      display: block;
+      font: inherit;
+      color: inherit;
+      text-align: left;
+    }
+    .item:hover {
+      transform: scale(1.02);
+    }
+    .item:focus-visible {
+      outline: 2px solid var(--brand);
+      outline-offset: 2px;
+    }
+
+    .item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    /* Placeholder de rayas diagonales para imágenes sin src. */
+    .item--ph {
+      background: repeating-linear-gradient(
+        45deg,
+        var(--placeholder-bg) 0 8px,
+        var(--placeholder-bg-2) 8px 16px
+      );
+    }
+    .ph-label {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--ok-font-mono, ui-monospace, monospace);
+      font-size: 10.5px;
+      color: var(--placeholder-ink);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      padding: 4px;
+      text-align: center;
+    }
+
+    /* Caption inferior con gradiente, aparece al hover. */
+    .caption {
+      position: absolute;
+      inset: auto 0 0 0;
+      padding: 24px 10px 8px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
+      color: var(--caption-color);
+      font-size: 11.5px;
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 180ms ease-out;
+      pointer-events: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .item:hover .caption,
+    .item:focus-visible .caption {
+      opacity: 1;
+    }
+
+    /* Badge circular de selección arriba-derecha. */
+    .select {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.45);
+      border: 2px solid #ffffff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      opacity: 0;
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 180ms ease-out, background 180ms ease-out;
+    }
+    .select svg {
+      width: 13px;
+      height: 13px;
+      display: none;
+    }
+    .item:hover .select,
+    .item:focus-within .select {
+      opacity: 1;
+    }
+    .select:focus-visible {
+      opacity: 1;
+      outline: 2px solid var(--brand-contrast);
+      outline-offset: 1px;
+    }
+
+    /* Estado seleccionado: badge relleno de marca + outline en el item. */
+    .item--selected .select {
+      opacity: 1;
+      background: var(--brand);
+      border-color: var(--brand);
+      color: var(--brand-contrast);
+    }
+    .item--selected .select svg {
+      display: block;
+    }
+    .item--selected {
+      outline: 2px solid var(--brand);
+      outline-offset: -2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .item,
+      .caption,
+      .select {
+        transition: none;
+      }
+      .item:hover {
+        transform: none;
+      }
+    }
+  `;
+  }
+  // Devuelve la clave de selección de una imagen: su id, o el índice como fallback.
+  keyOf(img, index) {
+    return img.id ?? index;
+  }
+  isSelected(key) {
+    return this.selected.includes(key);
+  }
+  // Alterna la selección y emite `ok-select` con la nueva lista.
+  toggle(img, index, ev) {
+    ev.stopPropagation();
+    const key = this.keyOf(img, index);
+    const next = this.isSelected(key) ? this.selected.filter((k) => k !== key) : [...this.selected, key];
+    this.selected = next;
+    this.dispatchEvent(
+      new CustomEvent("ok-select", {
+        detail: { id: key, index, selected: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Abre la imagen (para emparejar con ok-lightbox). Emite `ok-open`.
+  open(img, index) {
+    this.dispatchEvent(
+      new CustomEvent("ok-open", {
+        detail: { id: this.keyOf(img, index), index, image: img },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <div
+        class="grid"
+        role="${this.selectable ? "listbox" : "list"}"
+        aria-multiselectable="${this.selectable ? "true" : "false"}"
+        style="--min-size:${this.minSize}px;--columns:${this.columns};"
+      >
+        ${this.images.map((img, index) => {
+      const key = this.keyOf(img, index);
+      const sel = this.selectable && this.isSelected(key);
+      const isPh = !img.src;
+      return html`
+            <button
+              type="button"
+              class="item ${isPh ? "item--ph" : ""} ${sel ? "item--selected" : ""}"
+              role="${this.selectable ? "option" : "listitem"}"
+              aria-selected="${this.selectable ? String(sel) : "undefined"}"
+              aria-label="${img.alt || img.label || `Imagen ${index + 1}`}"
+              @click=${() => this.open(img, index)}
+            >
+              ${isPh ? html`<span class="ph-label">${img.label || ""}</span>` : html`<img src="${img.src}" alt="${img.alt || ""}" loading="lazy" />`}
+              ${img.label ? html`<span class="caption">${img.label}</span>` : null}
+              ${this.selectable ? html`<span
+                    class="select"
+                    role="checkbox"
+                    aria-checked="${String(sel)}"
+                    aria-label="Seleccionar"
+                    tabindex="0"
+                    @click=${(e) => this.toggle(img, index, e)}
+                    @keydown=${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          this.toggle(img, index, e);
+        }
+      }}
+                    >${selectIcon}</span
+                  >` : null}
+            </button>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkGallery.prototype, "images");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkGallery.prototype, "selectable");
+__decorateClass([
+  property({ attribute: false })
+], OkGallery.prototype, "selected");
+__decorateClass([
+  property({ type: Number, attribute: "min-size" })
+], OkGallery.prototype, "minSize");
+__decorateClass([
+  property({ type: Number, reflect: true })
+], OkGallery.prototype, "columns");
+const selectIcon = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M5 13l4 4L19 7" />
+</svg>`;
+define("ok-gallery", OkGallery);
+export {
+  OkGallery
+};