@editora/ui-core 0.1.9 → 0.1.10

package/dist/stepper.esm.js

@@ -0,0 +1,578 @@
+import { E as b } from "./ElementBase-909688f3.mjs";
+const g = `
+  :host {
+    --ui-stepper-gap: 8px;
+    --ui-stepper-radius: 12px;
+    --ui-stepper-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-stepper-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-stepper-text: var(--ui-color-text, #0f172a);
+    --ui-stepper-muted: var(--ui-color-muted, #64748b);
+    --ui-stepper-accent: var(--ui-color-primary, #2563eb);
+    --ui-stepper-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-stepper-indicator-duration: 1.6s;
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    border: 1px solid var(--ui-stepper-border);
+    border-radius: var(--ui-stepper-radius);
+    background: var(--ui-stepper-bg);
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+    padding: 10px;
+  }
+
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: stretch;
+    gap: var(--ui-stepper-gap);
+    min-inline-size: 0;
+  }
+
+  :host([orientation="vertical"]) .list {
+    flex-direction: column;
+  }
+
+  .item {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    display: grid;
+    gap: 6px;
+  }
+
+  .trigger {
+    min-inline-size: 0;
+    inline-size: 100%;
+    border: 1px solid color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    border-radius: 11px;
+    background: color-mix(in srgb, var(--ui-stepper-bg) 98%, transparent);
+    color: var(--ui-stepper-text);
+    padding: 8px 10px;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease;
+  }
+
+  .trigger:hover {
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 34%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 8%, transparent);
+  }
+
+  .trigger:focus-visible {
+    outline: 2px solid var(--ui-stepper-focus);
+    outline-offset: 1px;
+  }
+
+  .trigger[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .index {
+    position: relative;
+    inline-size: 20px;
+    block-size: 20px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    display: inline-grid;
+    place-items: center;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .item[data-state="current"] .index::after {
+    content: "";
+    position: absolute;
+    inset: -5px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--ui-stepper-accent) 56%, transparent);
+    opacity: 0.45;
+    animation: ui-stepper-current-pulse var(--ui-stepper-indicator-duration) ease-out infinite;
+    pointer-events: none;
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .label,
+  .description {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .label {
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .description {
+    font-size: 11px;
+    color: var(--ui-stepper-muted);
+  }
+
+  .connector {
+    position: relative;
+    inline-size: 100%;
+    block-size: 2px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    overflow: hidden;
+  }
+
+  :host([orientation="vertical"]) .connector {
+    inline-size: 2px;
+    block-size: 14px;
+    margin-inline-start: 9px;
+  }
+
+  .item[data-state="current"] .trigger {
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 46%, transparent);
+    background: color-mix(in srgb, var(--ui-stepper-accent) 13%, transparent);
+  }
+
+  .item[data-state="current"] .index,
+  .item[data-state="complete"] .index {
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 44%, transparent);
+    background: color-mix(in srgb, var(--ui-stepper-accent) 18%, transparent);
+    color: color-mix(in srgb, var(--ui-stepper-accent) 86%, #0f172a 14%);
+  }
+
+  .item[data-state="complete"] .connector {
+    background: color-mix(in srgb, var(--ui-stepper-accent) 52%, transparent);
+  }
+
+  .item[data-state="current"] .connector::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: ui-stepper-connector-flow var(--ui-stepper-indicator-duration) linear infinite;
+    pointer-events: none;
+  }
+
+  :host([orientation="vertical"]) .item[data-state="current"] .connector::after {
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      transparent 100%
+    );
+    transform: translateY(-100%);
+    animation-name: ui-stepper-connector-flow-vertical;
+  }
+
+  .item[data-state="error"] .trigger {
+    border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 50%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-stepper-bg: #0f172a;
+    --ui-stepper-border: #334155;
+    --ui-stepper-text: #e2e8f0;
+    --ui-stepper-muted: #93a4bd;
+    --ui-stepper-accent: #93c5fd;
+    --ui-stepper-focus: #93c5fd;
+  }
+
+  :host([variant="minimal"]) .frame {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([size="sm"]) {
+    --ui-stepper-gap: 6px;
+  }
+
+  :host([size="lg"]) {
+    --ui-stepper-gap: 10px;
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger,
+    .index::after,
+    .connector::after,
+    .frame {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @keyframes ui-stepper-current-pulse {
+    0% {
+      transform: scale(0.9);
+      opacity: 0.45;
+    }
+    70% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes ui-stepper-connector-flow {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes ui-stepper-connector-flow-vertical {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-stepper-border: color-mix(in srgb, var(--ui-stepper-text) 70%, transparent);
+    }
+
+    .frame {
+      box-shadow: none;
+    }
+
+    .trigger {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-stepper-bg: Canvas;
+      --ui-stepper-border: CanvasText;
+      --ui-stepper-text: CanvasText;
+      --ui-stepper-muted: CanvasText;
+      --ui-stepper-accent: Highlight;
+      --ui-stepper-focus: Highlight;
+    }
+
+    .frame,
+    .trigger,
+    .index,
+    .connector {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+
+    .index::after,
+    .connector::after {
+      animation: none !important;
+    }
+
+    .frame,
+    .trigger {
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    .item[data-state="current"] .trigger,
+    .item[data-state="complete"] .trigger {
+      border-color: Highlight;
+    }
+
+    .item[data-state="complete"] .connector {
+      background: Highlight;
+    }
+
+    .index {
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+  }
+`;
+function u(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function f(o) {
+  if (!o)
+    return [];
+  try {
+    const t = JSON.parse(o);
+    return Array.isArray(t) ? t.filter((e) => e && typeof e == "object") : [];
+  } catch {
+    return [];
+  }
+}
+function d(o) {
+  if (o == null)
+    return !1;
+  const t = String(o).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+class m extends b {
+  constructor() {
+    super(), this._observer = null, this._isSyncingValueAttribute = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "steps",
+      "value",
+      "orientation",
+      "variant",
+      "size",
+      "clickable",
+      "linear",
+      "headless",
+      "aria-label"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(() => {
+      this.hasAttribute("steps") || this.requestRender();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0,
+      attributeFilter: ["slot", "data-value", "data-label", "data-description", "data-optional", "data-disabled", "data-state", "disabled"]
+    });
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this._observer && (this._observer.disconnect(), this._observer = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
+      if (t === "value") {
+        this._isSyncingValueAttribute || this._syncValueUi();
+        return;
+      }
+      if (t === "aria-label") {
+        const s = this.root.querySelector(".frame");
+        if (s) {
+          s.setAttribute("aria-label", r || "Stepper");
+          return;
+        }
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  _fromSlots() {
+    return Array.from(this.querySelectorAll('[slot="step"], [data-step]')).map((e, r) => {
+      var p;
+      const s = e.getAttribute("data-value") || String(r + 1), i = e.getAttribute("data-label") || e.getAttribute("title") || ((p = e.textContent) == null ? void 0 : p.trim()) || `Step ${r + 1}`, a = e.getAttribute("data-description") || "", l = d(e.getAttribute("data-optional")), n = e.hasAttribute("disabled") || d(e.getAttribute("data-disabled")), c = e.getAttribute("data-state");
+      return { index: r, value: s, label: i, description: a, optional: l, disabled: n, state: c === "complete" || c === "error" || c === "warning" ? c : "default" };
+    });
+  }
+  _fromAttr() {
+    return f(this.getAttribute("steps")).map((t, e) => {
+      const r = t.state === "complete" || t.state === "error" || t.state === "warning" ? t.state : "default";
+      return {
+        index: e,
+        value: t.value != null ? String(t.value) : String(e + 1),
+        label: t.label != null ? String(t.label) : `Step ${e + 1}`,
+        description: t.description != null ? String(t.description) : "",
+        optional: !!t.optional,
+        disabled: !!t.disabled,
+        state: r
+      };
+    });
+  }
+  _steps() {
+    const t = this._fromAttr();
+    return t.length ? t : this._fromSlots();
+  }
+  _activeIndex(t) {
+    if (!t.length)
+      return -1;
+    const e = this.getAttribute("value") || "";
+    if (e) {
+      const s = t.findIndex((i) => i.value === e);
+      if (s >= 0)
+        return s;
+    }
+    const r = t.find((s) => !s.disabled) || t[0];
+    return r && this.getAttribute("value") !== r.value && this.setAttribute("value", r.value), t.findIndex((s) => s.value === r.value);
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    const e = String(t || "");
+    e ? this.setAttribute("value", e) : this.removeAttribute("value");
+  }
+  goTo(t) {
+    const e = this._steps();
+    if (!e.length)
+      return !1;
+    const r = this._activeIndex(e), s = typeof t == "number" ? t : e.findIndex((i) => i.value === String(t));
+    return !Number.isInteger(s) || s < 0 || s >= e.length ? !1 : this._selectIndex(e, r, s, "api");
+  }
+  next() {
+    const t = this._steps(), e = this._activeIndex(t);
+    if (e < 0)
+      return !1;
+    const r = Math.min(t.length - 1, e + 1);
+    return this._selectIndex(t, e, r, "next");
+  }
+  prev() {
+    const t = this._steps(), e = this._activeIndex(t);
+    if (e < 0)
+      return !1;
+    const r = Math.max(0, e - 1);
+    return this._selectIndex(t, e, r, "prev");
+  }
+  _selectIndex(t, e, r, s) {
+    if (r === e)
+      return !0;
+    const i = t[r];
+    if (!i || i.disabled || this.hasAttribute("linear") && r > e + 1)
+      return !1;
+    const a = t[e], l = new CustomEvent("before-change", {
+      detail: {
+        currentIndex: e,
+        nextIndex: r,
+        currentValue: (a == null ? void 0 : a.value) || "",
+        nextValue: i.value,
+        trigger: s
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    if (!this.dispatchEvent(l))
+      return !1;
+    this.value = i.value;
+    const n = {
+      index: r,
+      value: i.value,
+      label: i.label,
+      trigger: s
+    };
+    return this.dispatchEvent(new CustomEvent("input", { detail: n, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: n, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("select", { detail: n, bubbles: !0, composed: !0 })), !0;
+  }
+  _onClick(t) {
+    const e = t.target, r = e == null ? void 0 : e.closest(".trigger");
+    if (!r || !this.hasAttribute("clickable") && !this.hasAttribute("linear"))
+      return;
+    const s = Number(r.getAttribute("data-index"));
+    if (!Number.isInteger(s))
+      return;
+    const i = this._steps(), a = this._activeIndex(i);
+    this._selectIndex(i, a, s, "click");
+  }
+  _moveFocus(t, e) {
+    const r = Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));
+    if (!r.length)
+      return;
+    const s = r.indexOf(t);
+    if (s < 0)
+      return;
+    const i = (s + e + r.length) % r.length;
+    r[i].focus();
+  }
+  _onKeyDown(t) {
+    const e = t.target, r = e == null ? void 0 : e.closest(".trigger");
+    if (!r)
+      return;
+    const s = this.getAttribute("orientation") === "vertical", i = !s && getComputedStyle(this).direction === "rtl", a = s ? "ArrowDown" : i ? "ArrowLeft" : "ArrowRight", l = s ? "ArrowUp" : i ? "ArrowRight" : "ArrowLeft";
+    if (t.key === a) {
+      t.preventDefault(), this._moveFocus(r, 1);
+      return;
+    }
+    if (t.key === l) {
+      t.preventDefault(), this._moveFocus(r, -1);
+      return;
+    }
+    if (t.key === "Home" || t.key === "End") {
+      const n = Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));
+      if (!n.length)
+        return;
+      t.preventDefault(), (t.key === "Home" ? n[0] : n[n.length - 1]).focus();
+      return;
+    }
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), r.click());
+  }
+  _syncValueUi() {
+    if (!this.isConnected)
+      return;
+    if (!this.root.querySelector(".list")) {
+      this.requestRender();
+      return;
+    }
+    const t = this._steps();
+    if (!t.length)
+      return;
+    this._isSyncingValueAttribute = !0;
+    let e = -1;
+    try {
+      e = this._activeIndex(t);
+    } finally {
+      this._isSyncingValueAttribute = !1;
+    }
+    Array.from(this.root.querySelectorAll(".item")).forEach((s, i) => {
+      const a = t[i];
+      if (!a)
+        return;
+      const l = a.state !== "default" ? a.state : i < e ? "complete" : i === e ? "current" : "upcoming";
+      s.setAttribute("data-state", l), s.setAttribute("data-active", i === e ? "true" : "false");
+      const n = s.querySelector(".trigger");
+      n && n.setAttribute("aria-current", i === e ? "step" : "false");
+      const c = s.querySelector(".index");
+      c && (c.textContent = i < e ? "✓" : String(i + 1));
+    });
+  }
+  render() {
+    const t = this._steps(), e = this._activeIndex(t), r = this.getAttribute("aria-label") || "Stepper", s = t.map((i, a) => `
+          <li class="item" part="item" data-state="${i.state !== "default" ? i.state : a < e ? "complete" : a === e ? "current" : "upcoming"}" data-active="${a === e ? "true" : "false"}">
+            <button
+              type="button"
+              class="trigger"
+              part="trigger"
+              data-index="${a}"
+              aria-current="${a === e ? "step" : "false"}"
+              aria-disabled="${i.disabled ? "true" : "false"}"
+              ${i.disabled ? "disabled" : ""}
+            >
+              <span class="index" part="index">${a < e ? "✓" : a + 1}</span>
+              <span class="meta" part="meta">
+                <span class="label">${u(i.label)}${i.optional ? " (optional)" : ""}</span>
+                ${i.description ? `<span class="description">${u(i.description)}</span>` : ""}
+              </span>
+            </button>
+            ${a < t.length - 1 ? '<span class="connector" part="connector"></span>' : ""}
+          </li>
+        `).join("");
+    this.setContent(`
+      <style>${g}</style>
+      <section class="frame" part="frame" role="group" aria-label="${u(r)}">
+        <ol class="list" part="list">${s}</ol>
+      </section>
+    `);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-stepper") && customElements.define("ui-stepper", m);
+export {
+  m as UIStepper
+};