@erplora/outfitkit 0.1.20 → 0.1.22

package/dist/ok-drawer.js

@@ -1,358 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
-import { define } from "./define.js";
-import { o as okIcon, v as iconCloseOutline } from "./shared/icons.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 = {
-  close: "Close"
-};
-const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), ion-button:not([disabled]), ion-input, ion-searchbar, [tabindex]:not([tabindex="-1"])';
-class OkDrawer extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.side = "end";
-    this.width = "420px";
-    this.scrim = true;
-    this.dismissible = true;
-    this.labels = {};
-    this.previousFocus = null;
-    this.hasFooter = false;
-    this.onDocKeydown = (e) => {
-      if (!this.open) return;
-      if (e.key === "Escape") {
-        if (this.dismissible) {
-          e.preventDefault();
-          this.requestClose("esc");
-        }
-        return;
-      }
-      if (e.key === "Tab") this.trapFocus(e);
-    };
-  }
-  static {
-    this.styles = css`
-    :host {
-      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
-      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
-      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.6));
-      --panel-bg: var(--ok-drawer-bg, var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff))));
-      --scrim-bg: var(--ok-scrim, rgba(0, 0, 0, 0.4));
-      --border-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.08));
-      --shadow: var(--ok-shadow-md, 0 10px 40px rgba(0, 0, 0, 0.22));
-      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
-
-      /* El host no ocupa caja: scrim y panel van a position:fixed sobre todo. */
-      display: contents;
-    }
-
-    /* Scrim a pantalla completa (cierra al click si dismissible). */
-    .scrim {
-      position: fixed;
-      inset: 0;
-      z-index: 2000;
-      background: var(--scrim-bg);
-      animation: fade-in 180ms ease;
-    }
-
-    /* Panel lateral fijo: columna header · body (scroll) · footer. */
-    .panel {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      z-index: 2001;
-      /* Cadena: token global → prop width (inyectada como var local) → 420px. */
-      width: var(--ok-drawer-width, var(--drawer-width, 420px));
-      max-width: 100vw;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      background: var(--panel-bg);
-      box-shadow: var(--shadow);
-      font-family: var(--font);
-      color: var(--color);
-      /* Lado por defecto: end (derecha en LTR). */
-      inset-inline-end: 0;
-      border-inline-start: 1px solid var(--border-soft);
-      animation: slide-in-end 200ms ease;
-    }
-    :host([side='start']) .panel {
-      inset-inline-end: auto;
-      inset-inline-start: 0;
-      border-inline-start: 0;
-      border-inline-end: 1px solid var(--border-soft);
-      animation: slide-in-start 200ms ease;
-    }
-
-    @keyframes fade-in {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    @keyframes slide-in-end {
-      from { transform: translateX(100%); }
-      to { transform: translateX(0); }
-    }
-    @keyframes slide-in-start {
-      from { transform: translateX(-100%); }
-      to { transform: translateX(0); }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .scrim,
-      .panel {
-        animation: none;
-      }
-    }
-
-    /* Cabecera: icono + título + acciones extra + botón X. */
-    .header {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      gap: 0.6rem;
-      padding: 0.85rem 1rem;
-      border-bottom: 1px solid var(--border-soft);
-    }
-    .header > ion-icon {
-      flex: 0 0 auto;
-      font-size: 1.25rem;
-      color: var(--color-muted);
-    }
-    .heading {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin: 0;
-      font-size: 1.05rem;
-      font-weight: 600;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /* Acciones extra de cabecera (slot header-actions) + botón cerrar. */
-    .header-actions {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-    }
-    .close {
-      flex: 0 0 auto;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border: 0;
-      border-radius: 8px;
-      background: none;
-      color: var(--color-muted);
-      font-size: 1.25rem;
-      cursor: pointer;
-      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease);
-    }
-    @media (hover: hover) {
-      .close:hover {
-        background: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
-        color: var(--color);
-      }
-    }
-
-    /* Cuerpo: scroll interno. */
-    .body {
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow-y: auto;
-      padding: 1rem;
-      box-sizing: border-box;
-    }
-
-    /* Pie fijo opcional (se oculta si el slot está vacío). */
-    .footer {
-      flex: 0 0 auto;
-      padding: 0.75rem 1rem;
-      border-top: 1px solid var(--border-soft);
-    }
-    .footer.empty {
-      display: none;
-    }
-
-    /* En móvil el panel ocupa todo el ancho. */
-    @media (max-width: 640px) {
-      .panel {
-        width: 100%;
-        border: 0;
-      }
-    }
-  `;
-  }
-  /** Textos efectivos (defaults inglés + overrides). */
-  get t() {
-    return { ...DEFAULT_LABELS, ...this.labels };
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("keydown", this.onDocKeydown);
-  }
-  // ── Apertura / cierre ──────────────────────────────────────────────────────
-  updated(changed) {
-    if (!changed.has("open")) return;
-    const was = changed.get("open");
-    if (this.open && !was) this.afterOpen();
-    else if (!this.open && was) this.afterClose();
-  }
-  // Al abrir: guarda el foco actual, enfoca el panel y arma el teclado global.
-  afterOpen() {
-    this.previousFocus = document.activeElement ?? null;
-    document.addEventListener("keydown", this.onDocKeydown);
-    this.updateComplete.then(() => {
-      const first = this.focusables()[0];
-      (first ?? this.panel)?.focus();
-    });
-    this.dispatchEvent(
-      new CustomEvent("ok-open", { detail: { open: true }, bubbles: true, composed: true })
-    );
-  }
-  // Al cerrar: desarma el teclado y restaura el foco previo.
-  afterClose() {
-    document.removeEventListener("keydown", this.onDocKeydown);
-    this.previousFocus?.focus?.();
-    this.previousFocus = null;
-  }
-  /**
-   * Gesto de cierre (scrim/esc/botón): emite `ok-close` CANCELABLE con la razón. Si nadie hace
-   * `preventDefault()` se auto-cierra (fallback no-controlado); un padre controlado puede vetar.
-   */
-  requestClose(reason) {
-    const ev = new CustomEvent("ok-close", {
-      detail: { reason },
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    const proceed = this.dispatchEvent(ev);
-    if (proceed) this.open = false;
-  }
-  /** Abre el drawer (azúcar imperativo; equivale a `open = true`). */
-  show() {
-    this.open = true;
-  }
-  /** Cierra el drawer sin pasar por el gesto cancelable (azúcar imperativo). */
-  hide() {
-    this.open = false;
-  }
-  // ── Focus trap ─────────────────────────────────────────────────────────────
-  // Enfocables del panel (shadow) + del contenido slotted (light DOM del host).
-  focusables() {
-    const inShadow = this.panel ? Array.from(this.panel.querySelectorAll(FOCUSABLE)) : [];
-    const inLight = Array.from(this.querySelectorAll(FOCUSABLE));
-    return [...inShadow, ...inLight].filter((el) => el.offsetParent !== null || el === document.activeElement);
-  }
-  // Mantiene Tab/Shift+Tab ciclando dentro del drawer mientras está abierto.
-  trapFocus(e) {
-    const list = this.focusables();
-    if (!list.length) {
-      e.preventDefault();
-      this.panel?.focus();
-      return;
-    }
-    const active = this.shadowRoot?.activeElement ?? document.activeElement;
-    const idx = active ? list.indexOf(active) : -1;
-    if (e.shiftKey) {
-      if (idx <= 0) {
-        e.preventDefault();
-        list[list.length - 1].focus();
-      }
-    } else if (idx === -1 || idx === list.length - 1) {
-      e.preventDefault();
-      list[0].focus();
-    }
-  }
-  // ── Interacción ────────────────────────────────────────────────────────────
-  // Cierra al click en el scrim (solo si dismissible).
-  onScrimClick() {
-    if (this.dismissible) this.requestClose("scrim");
-  }
-  onFooterSlotChange(e) {
-    const slot = e.target;
-    const has = slot.assignedNodes({ flatten: true }).length > 0;
-    if (has !== this.hasFooter) {
-      this.hasFooter = has;
-      this.requestUpdate();
-    }
-  }
-  // ── Render ─────────────────────────────────────────────────────────────────
-  render() {
-    if (!this.open) return html``;
-    return html`
-      ${this.scrim ? html`<div class="scrim" @click=${() => this.onScrimClick()}></div>` : ""}
-      <aside
-        class="panel"
-        style="--drawer-width:${this.width}"
-        role="dialog"
-        aria-modal="true"
-        aria-label=${this.heading ?? "drawer"}
-        tabindex="-1"
-      >
-        <header class="header">
-          ${this.icon ? html`<ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>` : ""}
-          ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : html`<span class="heading"></span>`}
-          <div class="header-actions">
-            <slot name="header-actions"></slot>
-            ${this.dismissible ? html`<button
-                  class="close"
-                  type="button"
-                  aria-label=${this.t.close}
-                  title=${this.t.close}
-                  @click=${() => this.requestClose("button")}
-                >
-                  <ion-icon .icon=${iconCloseOutline} aria-hidden="true"></ion-icon>
-                </button>` : ""}
-          </div>
-        </header>
-        <div class="body"><slot></slot></div>
-        <footer class=${this.hasFooter ? "footer" : "footer empty"}>
-          <slot name="footer" @slotchange=${(e) => this.onFooterSlotChange(e)}></slot>
-        </footer>
-      </aside>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OkDrawer.prototype, "open");
-__decorateClass([
-  property({ reflect: true })
-], OkDrawer.prototype, "side");
-__decorateClass([
-  property()
-], OkDrawer.prototype, "width");
-__decorateClass([
-  property()
-], OkDrawer.prototype, "heading");
-__decorateClass([
-  property()
-], OkDrawer.prototype, "icon");
-__decorateClass([
-  property({ type: Boolean })
-], OkDrawer.prototype, "scrim");
-__decorateClass([
-  property({ type: Boolean })
-], OkDrawer.prototype, "dismissible");
-__decorateClass([
-  property({ attribute: false })
-], OkDrawer.prototype, "labels");
-__decorateClass([
-  query(".panel")
-], OkDrawer.prototype, "panel");
-define("ok-drawer", OkDrawer);
-export {
-  OkDrawer
-};

package/dist/ok-range-dual.js

@@ -1,280 +0,0 @@
-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 OkRangeDual extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.min = 0;
-    this.max = 100;
-    this.step = 1;
-    this.low = 0;
-    this.high = 100;
-    this.prefix = "";
-    this.suffix = "";
-    this.disabled = false;
-  }
-  static {
-    this.styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
-      --track-color: var(--ok-range-track, var(--ion-color-step-150, #e0e2e6));
-      --fill-color: var(--ok-range-fill, var(--ion-color-primary, #3880ff));
-      --thumb-bg: var(--ok-range-thumb-bg, var(--ion-background-color, #ffffff));
-      --thumb-border: var(--ok-range-thumb-border, var(--ion-color-primary, #3880ff));
-      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
-      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
-      --value-bg: var(--ok-range-value-bg, var(--ion-color-step-100, #f1f2f4));
-      --focus-ring: var(--ok-range-focus, var(--ion-color-primary-tint, #4c8dff));
-    }
-
-    .block {
-      display: grid;
-      gap: 6px;
-      width: 100%;
-    }
-
-    .head {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      font-size: 0.8125rem;
-    }
-
-    .label {
-      color: var(--label-color);
-      font-weight: 500;
-    }
-
-    .readout {
-      color: var(--value-color);
-      font-variant-numeric: tabular-nums;
-      background: var(--value-bg);
-      padding: 1px 8px;
-      border-radius: 6px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-
-    /* Pista + thumbs apilados */
-    .range {
-      position: relative;
-      height: 24px;
-    }
-
-    .track {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 4px;
-      transform: translateY(-50%);
-      background: var(--track-color);
-      border-radius: 999px;
-      pointer-events: none;
-    }
-
-    .fill {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 4px;
-      border-radius: 999px;
-      background: var(--fill-color);
-      pointer-events: none;
-    }
-
-    /* Ambos inputs ocupan toda la pista; solo el thumb captura el puntero */
-    input[type='range'] {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      appearance: none;
-      -webkit-appearance: none;
-      background: transparent;
-      pointer-events: none;
-      margin: 0;
-    }
-
-    input[type='range']::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--thumb-bg);
-      border: 2px solid var(--thumb-border);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-      pointer-events: auto;
-      cursor: grab;
-      transition: transform 0.12s ease;
-    }
-    input[type='range']::-webkit-slider-thumb:hover {
-      transform: scale(1.15);
-    }
-    input[type='range']:active::-webkit-slider-thumb {
-      cursor: grabbing;
-    }
-
-    input[type='range']::-moz-range-thumb {
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      background: var(--thumb-bg);
-      border: 2px solid var(--thumb-border);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-      pointer-events: auto;
-      cursor: grab;
-    }
-
-    input[type='range']::-webkit-slider-runnable-track {
-      background: transparent;
-      height: 100%;
-    }
-    input[type='range']::-moz-range-track {
-      background: transparent;
-      height: 100%;
-    }
-
-    input[type='range']:focus-visible::-webkit-slider-thumb {
-      outline: 2px solid var(--focus-ring);
-      outline-offset: 3px;
-    }
-    input[type='range']:focus-visible::-moz-range-thumb {
-      outline: 2px solid var(--focus-ring);
-      outline-offset: 3px;
-    }
-
-    :host([disabled]) {
-      opacity: 0.55;
-      pointer-events: none;
-    }
-  `;
-  }
-  // Clampa low<=high respetando min/max.
-  clamp() {
-    const lo = Math.min(Math.max(this.low, this.min), this.max);
-    const hi = Math.min(Math.max(this.high, this.min), this.max);
-    return { low: Math.min(lo, hi), high: Math.max(lo, hi) };
-  }
-  onLow(e) {
-    const v = Number(e.target.value);
-    this.low = Math.min(v, this.high);
-    this.high = Math.max(this.low, this.high);
-    this.emit();
-  }
-  onHigh(e) {
-    const v = Number(e.target.value);
-    this.high = Math.max(v, this.low);
-    this.low = Math.min(this.low, this.high);
-    this.emit();
-  }
-  emit() {
-    const { low, high } = this.clamp();
-    this.dispatchEvent(
-      new CustomEvent("ok-change", {
-        detail: { low, high },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  // Formatea un valor con prefijo/sufijo.
-  fmt(v) {
-    return `${this.prefix}${v}${this.suffix}`;
-  }
-  render() {
-    const { low, high } = this.clamp();
-    const span = this.max - this.min || 1;
-    const leftPct = (low - this.min) / span * 100;
-    const rightPct = (this.max - high) / span * 100;
-    return html`
-      <div class="block">
-        <div class="head">
-          ${this.label ? html`<span class="label">${this.label}</span>` : html`<span></span>`}
-          <span class="readout" aria-live="polite">${this.fmt(low)} – ${this.fmt(high)}</span>
-        </div>
-        <div class="range">
-          <div class="track"></div>
-          <div
-            class="fill"
-            style="left:${leftPct}%; right:${rightPct}%"
-          ></div>
-          <input
-            type="range"
-            .min=${String(this.min)}
-            .max=${String(this.max)}
-            .step=${String(this.step)}
-            .value=${String(low)}
-            ?disabled=${this.disabled}
-            role="slider"
-            aria-label=${(this.label ? this.label + " " : "") + "mínimo"}
-            aria-valuemin=${this.min}
-            aria-valuemax=${this.max}
-            aria-valuenow=${low}
-            aria-valuetext=${this.fmt(low)}
-            @input=${this.onLow}
-          />
-          <input
-            type="range"
-            .min=${String(this.min)}
-            .max=${String(this.max)}
-            .step=${String(this.step)}
-            .value=${String(high)}
-            ?disabled=${this.disabled}
-            role="slider"
-            aria-label=${(this.label ? this.label + " " : "") + "máximo"}
-            aria-valuemin=${this.min}
-            aria-valuemax=${this.max}
-            aria-valuenow=${high}
-            aria-valuetext=${this.fmt(high)}
-            @input=${this.onHigh}
-          />
-        </div>
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property()
-], OkRangeDual.prototype, "label");
-__decorateClass([
-  property({ type: Number })
-], OkRangeDual.prototype, "min");
-__decorateClass([
-  property({ type: Number })
-], OkRangeDual.prototype, "max");
-__decorateClass([
-  property({ type: Number })
-], OkRangeDual.prototype, "step");
-__decorateClass([
-  property({ type: Number })
-], OkRangeDual.prototype, "low");
-__decorateClass([
-  property({ type: Number })
-], OkRangeDual.prototype, "high");
-__decorateClass([
-  property()
-], OkRangeDual.prototype, "prefix");
-__decorateClass([
-  property()
-], OkRangeDual.prototype, "suffix");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OkRangeDual.prototype, "disabled");
-define("ok-range-dual", OkRangeDual);
-export {
-  OkRangeDual
-};