@erplora/outfitkit 0.1.1

package/dist/ok-language-select.js

@@ -0,0 +1,188 @@
+import { LitElement, css, html } from "lit";
+import { property, state } 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 = {
+  language: "Language"
+};
+class OkLanguageSelect extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.open = false;
+    this.labels = {};
+    this.currentLabel = "";
+    this.toggle = (e) => {
+      e.stopPropagation();
+      this.open = !this.open;
+    };
+    this.onDocClick = (e) => {
+      if (this.open && !e.composedPath().includes(this)) this.open = false;
+    };
+    this.onKeydown = (e) => {
+      if (e.key === "Escape" && this.open) this.open = false;
+    };
+    this.onPanelClick = (e) => {
+      if (e.target?.closest("a")) this.open = false;
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+      --color: var(--ok-text, var(--ion-text-color, #18181b));
+      --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.6));
+      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
+      --border: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.14));
+      --primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
+      --radius: var(--ok-radius, 12px);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.4rem 0.6rem;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: transparent;
+      color: var(--color);
+      font: inherit;
+      font-size: 0.85rem;
+      cursor: pointer;
+      transition: background-color var(--ok-transition, 150ms ease), border-color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
+    }
+    .globe, .chev { width: 1rem; height: 1rem; flex: none; }
+    .cur { font-weight: 600; }
+    .chev { transition: transform var(--ok-transition, 180ms ease); color: var(--muted); }
+    :host([open]) .chev { transform: rotate(180deg); }
+
+    .panel {
+      position: absolute;
+      top: calc(100% + 0.4rem);
+      right: 0;
+      min-width: 11rem;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.28);
+      padding: 0.35rem;
+      z-index: 60;
+      opacity: 0;
+      transform: translateY(-6px);
+      pointer-events: none;
+      transition: opacity var(--ok-transition, 160ms ease), transform var(--ok-transition, 160ms ease);
+    }
+    :host([open]) .panel { opacity: 1; transform: none; pointer-events: auto; }
+    @media (prefers-reduced-motion: reduce) {
+      .panel, .chev { transition: none; }
+    }
+
+    /* Los <a> de idioma (light DOM) se estilan como ítems de menú. */
+    ::slotted(a) {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.55rem 0.7rem;
+      border-radius: 8px;
+      color: var(--color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: background-color var(--ok-transition, 120ms ease);
+    }
+    @media (hover: hover) {
+      ::slotted(a:hover) { background: color-mix(in oklab, var(--primary) 12%, transparent); }
+    }
+    ::slotted(a.ok-lang-current) {
+      color: var(--primary);
+      font-weight: 600;
+      background: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.onDocClick);
+    document.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.onDocClick);
+    document.removeEventListener("keydown", this.onKeydown);
+  }
+  firstUpdated() {
+    this.resolveCurrent();
+  }
+  /** Decide el idioma activo: value → navegador → primero; marca el <a> y guarda su etiqueta. */
+  resolveCurrent() {
+    const anchors = [...this.querySelectorAll("a[data-lang]")];
+    if (!anchors.length) return;
+    let code = this.value;
+    if (!code) {
+      const nav = (navigator.language || "").slice(0, 2).toLowerCase();
+      if (anchors.some((a) => a.dataset.lang === nav)) code = nav;
+    }
+    if (!code) code = anchors[0].dataset.lang ?? "";
+    for (const a of anchors) {
+      const isCur = a.dataset.lang === code;
+      a.classList.toggle("ok-lang-current", isCur);
+      if (isCur) this.currentLabel = (a.textContent || code).trim();
+    }
+    if (!this.currentLabel) this.currentLabel = code.toUpperCase();
+  }
+  render() {
+    return html`
+      <button
+        class="trigger"
+        type="button"
+        aria-label=${this.t.language}
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        <svg class="globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><path d="M2 12h20" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+        </svg>
+        <span class="cur">${this.currentLabel || this.value.toUpperCase()}</span>
+        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      <div class="panel" role="listbox" @click=${this.onPanelClick}>
+        <slot @slotchange=${() => this.resolveCurrent()}></slot>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkLanguageSelect.prototype, "value");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkLanguageSelect.prototype, "open");
+__decorateClass([
+  property({ attribute: false })
+], OkLanguageSelect.prototype, "labels");
+__decorateClass([
+  state()
+], OkLanguageSelect.prototype, "currentLabel");
+define("ok-language-select", OkLanguageSelect);
+export {
+  OkLanguageSelect
+};

package/dist/ok-lightbox.js

@@ -0,0 +1,490 @@
+import { LitElement, css, render, nothing, html } from "lit";
+import { property, state } 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 = {
+  prev: "Previous",
+  next: "Next",
+  close: "Close",
+  download: "Download",
+  fullscreen: "Fullscreen"
+};
+class OkLightbox extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.index = 0;
+    this.open = false;
+    this.labels = {};
+    this.shown = false;
+    this.portalRoot = null;
+    this.onKeydown = (e) => {
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.requestClose();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this.go(-1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        this.go(1);
+      }
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex/literal. */
+      --overlay-bg: var(--ok-media-bg, rgba(0, 0, 0, 0.92));
+      --fg-soft: var(--ok-media-fg, rgba(255, 255, 255, 0.7));
+      --glass: var(--ok-overlay-glass, rgba(255, 255, 255, 0.1));
+      --glass-hover: var(--ok-overlay-glass-2, rgba(255, 255, 255, 0.18));
+      --brand: var(--ok-primary, var(--ion-color-primary, #e8552a));
+      --media-bg: var(--ok-media-frame, rgba(255, 255, 255, 0.06));
+      --radius-lg: var(--ok-radius-lg, 10px);
+      --radius-sm: var(--ok-radius-sm, 6px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --font-mono: var(--ok-font-mono, ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace);
+    }
+
+    /* Overlay a pantalla completa: columna [cabecera | medio | filmstrip]. */
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      box-sizing: border-box;
+      background: var(--overlay-bg);
+      color: var(--fg-soft);
+      font-family: var(--font);
+      opacity: 0;
+      transition: opacity var(--ok-transition, 200ms ease);
+    }
+    .lightbox.shown {
+      opacity: 1;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .lightbox {
+        transition: none;
+      }
+    }
+
+    /* Cabecera mono: contador + nombre a la izquierda; acciones a la derecha. */
+    .head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--fg-soft);
+    }
+    .head .meta {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .head .count {
+      font-variant-numeric: tabular-nums;
+    }
+    .head .sep {
+      opacity: 0.5;
+      margin: 0 6px;
+    }
+    .head .actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      flex: none;
+    }
+    .icon-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: var(--fg-soft);
+      cursor: pointer;
+      text-decoration: none;
+      transition: background var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .icon-btn:hover {
+        background: var(--glass);
+        color: #fff;
+      }
+    }
+    .icon-btn ion-icon {
+      font-size: 1.25rem;
+    }
+
+    /* Zona central: medio centrado con flechas de navegación absolutas. */
+    .main {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px 0;
+      position: relative;
+      min-height: 0;
+    }
+    .media {
+      max-width: 60%;
+      max-height: 100%;
+      width: auto;
+      object-fit: contain;
+      background: var(--media-bg);
+      border-radius: var(--radius-lg);
+      display: block;
+    }
+    /* Reserva de proporción 16:10 cuando no hay medio o como marco de fondo. */
+    .media-empty {
+      width: 60%;
+      aspect-ratio: 16 / 10;
+      max-height: 100%;
+      background: var(--media-bg);
+      border-radius: var(--radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--fg-soft);
+    }
+    video.media {
+      max-height: 100%;
+    }
+
+    /* Navegación circular glass de 44px. */
+    .nav {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: 0;
+      background: var(--glass);
+      color: #fff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      backdrop-filter: blur(4px);
+      transition: background var(--ok-transition, 150ms ease), opacity var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .nav:hover {
+        background: var(--glass-hover);
+      }
+    }
+    .nav[disabled] {
+      opacity: 0.25;
+      cursor: default;
+      pointer-events: none;
+    }
+    .nav ion-icon {
+      font-size: 1.5rem;
+    }
+    .nav.prev {
+      left: 20px;
+    }
+    .nav.next {
+      right: 20px;
+    }
+
+    /* Filmstrip inferior: miniaturas 50×36, la activa a opacidad total con outline de marca. */
+    .strip {
+      display: flex;
+      gap: 6px;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding-top: 12px;
+      max-height: 96px;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    .thumb {
+      flex: none;
+      width: 50px;
+      height: 36px;
+      padding: 0;
+      border: 0;
+      border-radius: var(--radius-sm);
+      background: var(--media-bg);
+      background-size: cover;
+      background-position: center;
+      cursor: pointer;
+      opacity: 0.5;
+      overflow: hidden;
+      transition: opacity var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .thumb:hover {
+        opacity: 0.8;
+      }
+    }
+    .thumb.active {
+      opacity: 1;
+      outline: 2px solid var(--brand);
+      outline-offset: 2px;
+    }
+    .thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .thumb .vid {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: var(--fg-soft);
+    }
+    .thumb .vid ion-icon {
+      font-size: 1rem;
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unbind();
+    const host = this.portalRoot?.host;
+    this.portalRoot = null;
+    if (host && host.parentNode) host.parentNode.removeChild(host);
+  }
+  bind() {
+    document.addEventListener("keydown", this.onKeydown);
+  }
+  unbind() {
+    document.removeEventListener("keydown", this.onKeydown);
+  }
+  // Crea (una vez) el portal: un div en `document.body` con shadow propio que ADOPTA la misma hoja
+  // de estilos del componente.
+  ensurePortal() {
+    if (this.portalRoot) return this.portalRoot;
+    const host = document.createElement("div");
+    host.setAttribute("data-ok-lightbox-portal", "");
+    document.body.appendChild(host);
+    const root = host.attachShadow({ mode: "open" });
+    const styles = this.constructor.elementStyles ?? [];
+    root.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet).filter((s) => !!s);
+    this.portalRoot = root;
+    return root;
+  }
+  updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        this.bind();
+        requestAnimationFrame(() => requestAnimationFrame(() => this.shown = true));
+      } else {
+        this.unbind();
+        this.shown = false;
+      }
+    }
+    if (!this.open && !this.portalRoot) return;
+    render(this.open ? this.overlayTemplate() : nothing, this.ensurePortal());
+  }
+  // Índice saneado dentro de los límites.
+  get safeIndex() {
+    const n = this.items.length;
+    if (n === 0) return 0;
+    return Math.max(0, Math.min(this.index, n - 1));
+  }
+  prefersReducedMotion() {
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  // Navega delta posiciones (clamp, sin wrap). Emite `ok-index` si cambia.
+  go(delta) {
+    const next = this.safeIndex + delta;
+    if (next < 0 || next >= this.items.length || next === this.safeIndex) return;
+    this.setIndex(next);
+  }
+  setIndex(i) {
+    if (i === this.safeIndex) return;
+    this.index = i;
+    this.dispatchEvent(
+      new CustomEvent("ok-index", { detail: { index: i }, bubbles: true, composed: true })
+    );
+  }
+  // Pide cerrar: anima el fade-out y al terminar emite `ok-close` (el consumidor pone `open=false`).
+  requestClose() {
+    this.unbind();
+    this.shown = false;
+    const box = this.portalRoot?.querySelector(".lightbox");
+    const finish = () => {
+      this.dispatchEvent(new CustomEvent("ok-close", { bubbles: true, composed: true }));
+    };
+    if (box && !this.prefersReducedMotion()) {
+      box.addEventListener("transitionend", finish, { once: true });
+    } else {
+      finish();
+    }
+  }
+  // Nombre de fichero mostrado en la cabecera (alt o último segmento de la URL).
+  fileName(item) {
+    if (!item) return "";
+    if (item.alt) return item.alt;
+    try {
+      const path = item.src.split(/[?#]/)[0];
+      return path.substring(path.lastIndexOf("/") + 1) || item.src;
+    } catch {
+      return item.src;
+    }
+  }
+  render() {
+    return nothing;
+  }
+  // Overlay (cabecera + medio + filmstrip). Se renderiza en el portal de `document.body`.
+  overlayTemplate() {
+    const items = this.items;
+    const i = this.safeIndex;
+    const current = items[i];
+    const isVideo = current?.type === "video";
+    const name = this.fileName(current);
+    const total = items.length;
+    return html`
+      <div
+        class="lightbox ${this.shown ? "shown" : ""}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${name}
+      >
+        <div class="head">
+          <div class="meta">
+            <span class="count">${total ? i + 1 : 0} / ${total}</span>
+            ${name ? html`<span class="sep">·</span><span>${name}</span>` : null}
+          </div>
+          <div class="actions">
+            ${current ? html`<a
+                  class="icon-btn"
+                  href=${current.src}
+                  download
+                  target="_blank"
+                  rel="noopener"
+                  aria-label=${this.t.download}
+                >
+                  <ion-icon name="download-outline"></ion-icon>
+                </a>` : null}
+            <button
+              type="button"
+              class="icon-btn"
+              aria-label=${this.t.fullscreen}
+              @click=${() => this.toggleFullscreen()}
+            >
+              <ion-icon name="expand-outline"></ion-icon>
+            </button>
+            <button
+              type="button"
+              class="icon-btn"
+              aria-label=${this.t.close}
+              @click=${() => this.requestClose()}
+            >
+              <ion-icon name="close-outline"></ion-icon>
+            </button>
+          </div>
+        </div>
+
+        <div class="main">
+          <button
+            type="button"
+            class="nav prev"
+            aria-label=${this.t.prev}
+            ?disabled=${i <= 0}
+            @click=${() => this.go(-1)}
+          >
+            <ion-icon name="chevron-back-outline"></ion-icon>
+          </button>
+
+          ${current ? isVideo ? html`<video
+                  class="media"
+                  src=${current.src}
+                  controls
+                  playsinline
+                  aria-label=${name}
+                ></video>` : html`<img class="media" src=${current.src} alt=${name} />` : html`<div class="media-empty"></div>`}
+
+          <button
+            type="button"
+            class="nav next"
+            aria-label=${this.t.next}
+            ?disabled=${i >= total - 1}
+            @click=${() => this.go(1)}
+          >
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+          </button>
+        </div>
+
+        ${total > 1 ? html`<div class="strip" role="tablist">
+              ${items.map((it, idx) => this.renderThumb(it, idx, idx === i))}
+            </div>` : null}
+      </div>
+    `;
+  }
+  renderThumb(item, idx, active) {
+    const isVideo = item.type === "video";
+    return html`<button
+      type="button"
+      class="thumb ${active ? "active" : ""}"
+      role="tab"
+      aria-selected=${active ? "true" : "false"}
+      aria-label=${this.fileName(item)}
+      @click=${() => this.setIndex(idx)}
+    >
+      ${isVideo ? html`<span class="vid"><ion-icon name="play-outline"></ion-icon></span>` : html`<img src=${item.thumb ?? item.src} alt="" loading="lazy" />`}
+    </button>`;
+  }
+  // Pantalla completa nativa sobre el overlay portado (con fallback silencioso si no se concede).
+  toggleFullscreen() {
+    const box = this.portalRoot?.querySelector(".lightbox");
+    if (!box) return;
+    if (document.fullscreenElement) {
+      void document.exitFullscreen?.();
+    } else {
+      void box.requestFullscreen?.().catch(() => void 0);
+    }
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkLightbox.prototype, "items");
+__decorateClass([
+  property({ type: Number })
+], OkLightbox.prototype, "index");
+__decorateClass([
+  property({ type: Boolean })
+], OkLightbox.prototype, "open");
+__decorateClass([
+  property({ attribute: false })
+], OkLightbox.prototype, "labels");
+__decorateClass([
+  state()
+], OkLightbox.prototype, "shown");
+define("ok-lightbox", OkLightbox);
+export {
+  OkLightbox
+};