@editora/ui-core 0.1.8 → 0.1.10

package/dist/wizard.esm.js

@@ -0,0 +1,1068 @@
+import { E as A } from "./ElementBase-909688f3.mjs";
+const k = `
+  :host {
+    --ui-wizard-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-wizard-surface: color-mix(in srgb, var(--ui-color-surface, #ffffff) 99%, transparent);
+    --ui-wizard-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-wizard-text: var(--ui-color-text, #0f172a);
+    --ui-wizard-muted: var(--ui-color-muted, #64748b);
+    --ui-wizard-accent: var(--ui-color-primary, #2563eb);
+    --ui-wizard-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-wizard-success: var(--ui-color-success, #16a34a);
+    --ui-wizard-warning: var(--ui-color-warning, #d97706);
+    --ui-wizard-danger: var(--ui-color-danger, #dc2626);
+
+    --ui-wizard-radius: 14px;
+    --ui-wizard-gap: 12px;
+    --ui-wizard-padding: 12px;
+    --ui-wizard-step-min-width: 180px;
+    --ui-wizard-duration: 180ms;
+    --ui-wizard-progress: 0%;
+    --ui-wizard-panel-y: 8px;
+    --ui-wizard-panel-scale: 0.985;
+
+    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-wizard-border);
+    border-radius: var(--ui-wizard-radius);
+    background: var(--ui-wizard-bg);
+    color: var(--ui-wizard-text);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 14px 30px rgba(15, 23, 42, 0.08);
+    padding: var(--ui-wizard-padding);
+    display: grid;
+    gap: var(--ui-wizard-gap);
+    transition: border-color var(--ui-wizard-duration) ease, box-shadow var(--ui-wizard-duration) ease;
+  }
+
+  .frame[aria-busy="true"] {
+    cursor: progress;
+  }
+
+  .status {
+    display: grid;
+    gap: 8px;
+  }
+
+  .status[hidden],
+  .title[hidden],
+  .description[hidden],
+  .stepper[hidden],
+  .controls[hidden],
+  .empty[hidden] {
+    display: none;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.35;
+    font-weight: 650;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--ui-wizard-muted);
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .status-step {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .status-value {
+    font-size: 11px;
+    color: var(--ui-wizard-muted);
+    font-weight: 600;
+  }
+
+  .progress {
+    inline-size: 100%;
+    block-size: 6px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-wizard-border) 84%, transparent);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .progress::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    inline-size: var(--ui-wizard-progress);
+    border-radius: inherit;
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--ui-wizard-accent) 72%, #ffffff 28%),
+      var(--ui-wizard-accent)
+    );
+    transition: inline-size var(--ui-wizard-duration) cubic-bezier(0.22, 0.8, 0.2, 1);
+  }
+
+  .stepper {
+    display: flex;
+    align-items: stretch;
+    gap: 10px;
+    min-inline-size: 0;
+    overflow: auto hidden;
+    padding: 2px;
+    scrollbar-gutter: stable both-edges;
+  }
+
+  .step-item {
+    position: relative;
+    flex: 1 1 0;
+    min-inline-size: var(--ui-wizard-step-min-width);
+  }
+
+  .step-item::after {
+    content: "";
+    position: absolute;
+    top: 22px;
+    left: calc(100% + 5px);
+    inline-size: 10px;
+    block-size: 2px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-wizard-border) 84%, transparent);
+  }
+
+  .step-item[data-last="true"]::after {
+    display: none;
+  }
+
+  .step-item[data-complete="true"]::after,
+  .step-item[data-status="success"]::after {
+    background: color-mix(in srgb, var(--ui-wizard-success) 68%, transparent);
+  }
+
+  .step {
+    min-inline-size: 0;
+    inline-size: 100%;
+    border: 1px solid color-mix(in srgb, var(--ui-wizard-border) 88%, transparent);
+    border-radius: 12px;
+    background: var(--ui-wizard-surface);
+    padding: 8px 10px;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    cursor: pointer;
+    color: inherit;
+    text-align: left;
+    transition:
+      border-color var(--ui-wizard-duration) ease,
+      background-color var(--ui-wizard-duration) ease,
+      box-shadow var(--ui-wizard-duration) ease,
+      transform var(--ui-wizard-duration) ease;
+  }
+
+  .step:hover {
+    border-color: color-mix(in srgb, var(--ui-wizard-accent) 34%, var(--ui-wizard-border));
+    background: color-mix(in srgb, var(--ui-wizard-accent) 7%, var(--ui-wizard-surface));
+  }
+
+  .step:active {
+    transform: translateY(1px);
+  }
+
+  .step:focus-visible {
+    outline: 2px solid var(--ui-wizard-focus);
+    outline-offset: 1px;
+  }
+
+  .step[disabled] {
+    opacity: 0.46;
+    cursor: not-allowed;
+  }
+
+  .step[data-active="true"] {
+    border-color: color-mix(in srgb, var(--ui-wizard-accent) 46%, transparent);
+    background: color-mix(in srgb, var(--ui-wizard-accent) 13%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-wizard-accent) 26%, transparent);
+  }
+
+  .step-badge {
+    position: relative;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-wizard-border) 82%, transparent);
+    display: grid;
+    place-items: center;
+    font-size: 11px;
+    line-height: 1;
+    font-weight: 700;
+    background: color-mix(in srgb, var(--ui-wizard-surface) 92%, transparent);
+    color: var(--ui-wizard-muted);
+  }
+
+  .step[data-active="true"] .step-badge::after {
+    content: "";
+    position: absolute;
+    inset: -5px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--ui-wizard-accent) 52%, transparent);
+    opacity: 0.45;
+    animation: ui-wizard-step-pulse 1.8s ease-out infinite;
+    pointer-events: none;
+  }
+
+  .step[data-status="complete"] .step-badge,
+  .step[data-status="success"] .step-badge {
+    border-color: color-mix(in srgb, var(--ui-wizard-success) 54%, transparent);
+    background: color-mix(in srgb, var(--ui-wizard-success) 18%, transparent);
+    color: color-mix(in srgb, var(--ui-wizard-success) 84%, #0f172a 16%);
+  }
+
+  .step[data-status="warning"] .step-badge {
+    border-color: color-mix(in srgb, var(--ui-wizard-warning) 54%, transparent);
+    background: color-mix(in srgb, var(--ui-wizard-warning) 18%, transparent);
+    color: color-mix(in srgb, var(--ui-wizard-warning) 88%, #0f172a 12%);
+  }
+
+  .step[data-status="error"] .step-badge {
+    border-color: color-mix(in srgb, var(--ui-wizard-danger) 56%, transparent);
+    background: color-mix(in srgb, var(--ui-wizard-danger) 20%, transparent);
+    color: color-mix(in srgb, var(--ui-wizard-danger) 90%, #0f172a 10%);
+  }
+
+  .step-main {
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .step-title,
+  .step-description {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .step-title {
+    font-size: 12px;
+    line-height: 1.3;
+    font-weight: 620;
+  }
+
+  .step-description {
+    font-size: 11px;
+    line-height: 1.25;
+    color: var(--ui-wizard-muted);
+  }
+
+  .panel {
+    min-inline-size: 0;
+    border: 1px solid color-mix(in srgb, var(--ui-wizard-border) 78%, transparent);
+    border-radius: calc(var(--ui-wizard-radius) - 4px);
+    background: color-mix(in srgb, var(--ui-wizard-surface) 97%, transparent);
+    padding: 12px;
+    position: relative;
+    overflow: clip;
+  }
+
+  .panel ::slotted([slot="step"]) {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .panel ::slotted([slot="step"][hidden]) {
+    display: none !important;
+  }
+
+  .panel ::slotted([slot="step"][data-keep-mounted="true"]) {
+    transition:
+      opacity var(--ui-wizard-duration) ease,
+      transform var(--ui-wizard-duration) ease,
+      visibility var(--ui-wizard-duration) ease;
+    will-change: opacity, transform;
+  }
+
+  .panel ::slotted([slot="step"][data-keep-mounted="true"][data-visible="true"]) {
+    position: relative;
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(0) translateY(0) scale(1);
+    pointer-events: auto;
+    z-index: 1;
+  }
+
+  .panel ::slotted([slot="step"][data-keep-mounted="true"][data-visible="false"][data-nav-direction="forward"]) {
+    position: absolute;
+    inset: 12px;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(-10px) scale(0.985);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .panel ::slotted([slot="step"][data-keep-mounted="true"][data-visible="false"][data-nav-direction="backward"]) {
+    position: absolute;
+    inset: 12px;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(10px) scale(0.985);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .panel ::slotted([slot="step"][data-keep-mounted="true"][data-visible="false"][data-nav-direction="none"]) {
+    position: absolute;
+    inset: 12px;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(var(--ui-wizard-panel-y)) scale(var(--ui-wizard-panel-scale));
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .empty {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--ui-wizard-muted);
+    text-align: center;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px dashed color-mix(in srgb, var(--ui-wizard-border) 90%, transparent);
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .group {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .btn {
+    border: 1px solid color-mix(in srgb, var(--ui-wizard-border) 84%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-wizard-surface) 98%, transparent);
+    color: var(--ui-wizard-text);
+    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    padding: 9px 13px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition:
+      border-color var(--ui-wizard-duration) ease,
+      background-color var(--ui-wizard-duration) ease,
+      transform var(--ui-wizard-duration) ease,
+      box-shadow var(--ui-wizard-duration) ease;
+  }
+
+  .btn:hover {
+    border-color: color-mix(in srgb, var(--ui-wizard-accent) 34%, var(--ui-wizard-border));
+  }
+
+  .btn:active {
+    transform: translateY(1px);
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid var(--ui-wizard-focus);
+    outline-offset: 1px;
+  }
+
+  .btn[disabled] {
+    opacity: 0.42;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .btn.primary {
+    border-color: color-mix(in srgb, var(--ui-wizard-accent) 44%, transparent);
+    background: color-mix(in srgb, var(--ui-wizard-accent) 16%, transparent);
+    color: color-mix(in srgb, var(--ui-wizard-accent) 86%, #0f172a 14%);
+  }
+
+  .btn.primary[data-loading="true"] {
+    pointer-events: none;
+  }
+
+  .btn.primary[data-loading="true"]::after {
+    content: "";
+    inline-size: 12px;
+    block-size: 12px;
+    border-radius: 999px;
+    border: 1.8px solid color-mix(in srgb, currentColor 22%, transparent);
+    border-top-color: currentColor;
+    animation: ui-wizard-spin 760ms linear infinite;
+  }
+
+  :host([busy]) .step,
+  :host([busy]) .btn {
+    pointer-events: none;
+  }
+
+  :host([orientation="vertical"]) .stepper {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  :host([orientation="vertical"]) .step-item {
+    min-inline-size: 0;
+  }
+
+  :host([orientation="vertical"]) .step-item::after {
+    top: calc(100% + 5px);
+    left: 10px;
+    inline-size: 2px;
+    block-size: 10px;
+  }
+
+  :host([density="compact"]) {
+    --ui-wizard-gap: 8px;
+    --ui-wizard-padding: 10px;
+    --ui-wizard-step-min-width: 160px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-wizard-gap: 14px;
+    --ui-wizard-padding: 14px;
+    --ui-wizard-step-min-width: 196px;
+  }
+
+  :host([shape="square"]) {
+    --ui-wizard-radius: 6px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-wizard-radius: 20px;
+  }
+
+  :host([variant="soft"]) {
+    --ui-wizard-bg: color-mix(in srgb, var(--ui-wizard-accent) 6%, var(--ui-color-surface, #ffffff));
+    --ui-wizard-surface: color-mix(in srgb, var(--ui-wizard-accent) 4%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="glass"]) {
+    --ui-wizard-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 76%, transparent);
+    --ui-wizard-surface: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent);
+  }
+
+  :host([variant="flat"]) .frame {
+    box-shadow: none;
+  }
+
+  :host([variant="minimal"]) .frame {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([variant="minimal"]) .panel {
+    background: transparent;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-wizard-bg: #0f172a;
+    --ui-wizard-surface: #0b1322;
+    --ui-wizard-border: #334155;
+    --ui-wizard-text: #e2e8f0;
+    --ui-wizard-muted: #93a4bd;
+    --ui-wizard-accent: #93c5fd;
+    --ui-wizard-focus: #93c5fd;
+    --ui-wizard-success: #4ade80;
+    --ui-wizard-warning: #fbbf24;
+    --ui-wizard-danger: #f87171;
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  @keyframes ui-wizard-step-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-wizard-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (max-width: 720px) {
+    .stepper {
+      gap: 8px;
+    }
+
+    .step-item {
+      min-inline-size: 148px;
+    }
+
+    .controls {
+      justify-content: stretch;
+    }
+
+    .group {
+      inline-size: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame,
+    .step,
+    .btn,
+    .progress::after,
+    .step-badge::after,
+    .btn.primary::after,
+    .panel ::slotted([slot="step"][data-keep-mounted="true"]) {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      box-shadow: none;
+    }
+
+    .step,
+    .btn,
+    .panel {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-wizard-bg: Canvas;
+      --ui-wizard-surface: Canvas;
+      --ui-wizard-border: CanvasText;
+      --ui-wizard-text: CanvasText;
+      --ui-wizard-muted: CanvasText;
+      --ui-wizard-accent: Highlight;
+      --ui-wizard-focus: Highlight;
+      --ui-wizard-success: Highlight;
+      --ui-wizard-warning: Highlight;
+      --ui-wizard-danger: Highlight;
+    }
+
+    .frame,
+    .step,
+    .panel,
+    .btn,
+    .progress,
+    .progress::after,
+    .step-badge,
+    .step-item::after {
+      forced-color-adjust: none;
+      box-shadow: none;
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .progress::after,
+    .step[data-active="true"] .step-badge::after,
+    .btn.primary[data-loading="true"]::after {
+      animation: none !important;
+      border-color: Highlight;
+      background: Highlight;
+    }
+
+    .step[data-active="true"],
+    .btn.primary {
+      border-color: Highlight;
+      color: Highlight;
+    }
+  }
+`;
+function c(v) {
+  return v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function m(v) {
+  if (v == null)
+    return !1;
+  const t = String(v).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+let $ = 0;
+class C extends A {
+  constructor() {
+    super(), this._observer = null, this._instanceId = ++$, this._isSyncingValueAttribute = !1, this._visited = /* @__PURE__ */ new Set(), this._lastDirection = "none", this._stepButtons = [], this._progressEl = null, this._progressRow = null, this._statusStepEl = null, this._statusValueEl = null, this._prevBtn = null, this._nextBtn = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "linear",
+      "show-stepper",
+      "stepper-position",
+      "hide-controls",
+      "variant",
+      "headless",
+      "keep-mounted",
+      "lazy-mount",
+      "animate",
+      "next-label",
+      "prev-label",
+      "finish-label",
+      "aria-label",
+      "orientation",
+      "density",
+      "shape",
+      "show-progress",
+      "busy",
+      "title",
+      "description",
+      "empty-label"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver((t) => {
+      t.some((i) => {
+        if (i.type === "childList")
+          return i.target === this;
+        if (i.type !== "attributes")
+          return !1;
+        const a = i.target, r = i.attributeName || "";
+        if (r === "slot")
+          return a.getAttribute("slot") === "step" || a.matches('[slot="step"]');
+        const s = a.closest('[slot="step"]');
+        return !s || a !== s ? !1 : r === "data-value" || r === "data-title" || r === "data-description" || r === "data-optional" || r === "data-disabled" || r === "data-state" || r === "data-invalid" || r === "disabled" || r === "invalid";
+      }) && this.requestRender();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: [
+        "slot",
+        "data-value",
+        "data-title",
+        "data-description",
+        "data-optional",
+        "data-disabled",
+        "data-state",
+        "data-invalid",
+        "disabled",
+        "invalid"
+      ]
+    });
+  }
+  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, i) {
+    if (e !== i) {
+      if (t === "value") {
+        this._isSyncingValueAttribute || this._syncValueUi();
+        return;
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    const e = String(t || "");
+    e ? this.setAttribute("value", e) : this.removeAttribute("value");
+  }
+  _isBusy() {
+    return m(this.getAttribute("busy")) || this.hasAttribute("busy");
+  }
+  _isAnimationEnabled() {
+    const t = this.getAttribute("animate");
+    return t == null ? !0 : m(t) || t === "";
+  }
+  _steps() {
+    return Array.from(this.children).filter(
+      (e) => e instanceof HTMLElement && e.getAttribute("slot") === "step"
+    ).map((e, i) => {
+      const a = (e.getAttribute("data-state") || "").trim().toLowerCase(), r = a === "complete" || a === "success" || a === "warning" || a === "error" ? a : "default";
+      return {
+        index: i,
+        value: e.getAttribute("data-value") || String(i + 1),
+        title: e.getAttribute("data-title") || e.getAttribute("title") || `Step ${i + 1}`,
+        description: e.getAttribute("data-description") || "",
+        optional: m(e.getAttribute("data-optional")),
+        disabled: e.hasAttribute("disabled") || m(e.getAttribute("data-disabled")),
+        state: r,
+        node: e
+      };
+    });
+  }
+  _tabId(t) {
+    return `ui-wizard-${this._instanceId}-tab-${t}`;
+  }
+  _panelId(t) {
+    return `ui-wizard-${this._instanceId}-panel-${t}`;
+  }
+  _activeIndex(t) {
+    if (!t.length)
+      return -1;
+    const e = this.getAttribute("value") || "";
+    if (e) {
+      const a = t.findIndex((r) => r.value === e);
+      if (a >= 0)
+        return a;
+    }
+    const i = t.find((a) => !a.disabled) || t[0];
+    return i && this.getAttribute("value") !== i.value && this.setAttribute("value", i.value), t.findIndex((a) => a.value === i.value);
+  }
+  _visualStatus(t, e, i) {
+    return t.state === "error" ? "error" : t.state === "warning" ? "warning" : t.state === "success" ? "success" : t.state === "complete" || e < i ? "complete" : e === i ? "current" : "upcoming";
+  }
+  _markVisited(t, e) {
+    const i = t[e];
+    i && this._visited.add(i.value);
+  }
+  _dispatchBlockedNext(t, e, i, a) {
+    const r = e[i], s = e[a];
+    this.dispatchEvent(
+      new CustomEvent("blocked-next", {
+        detail: {
+          reason: t,
+          currentIndex: i,
+          nextIndex: a,
+          currentValue: (r == null ? void 0 : r.value) || "",
+          nextValue: (s == null ? void 0 : s.value) || ""
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _isStepInvalid(t, e) {
+    if (!t || t.node.hasAttribute("invalid") || m(t.node.getAttribute("data-invalid")))
+      return !0;
+    const i = new CustomEvent("validate-step", {
+      detail: {
+        index: e,
+        value: t.value,
+        title: t.title,
+        node: t.node
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    return !this.dispatchEvent(i);
+  }
+  validateCurrentStep() {
+    const t = this._steps();
+    if (!t.length)
+      return !1;
+    const e = this._activeIndex(t);
+    return e < 0 ? !1 : !this._isStepInvalid(t[e], e);
+  }
+  _syncPanels(t, e) {
+    const i = this.hasAttribute("keep-mounted"), a = this._isAnimationEnabled();
+    this._markVisited(t, e), t.forEach((r, s) => {
+      const l = s === e, n = this._panelId(s), o = this._tabId(s), d = this._visited.has(r.value);
+      r.node.id = n, r.node.setAttribute("role", "tabpanel"), r.node.setAttribute("aria-labelledby", o), r.node.setAttribute("tabindex", l ? "0" : "-1"), r.node.setAttribute("data-active", l ? "true" : "false"), r.node.setAttribute("aria-hidden", l ? "false" : "true"), r.node.setAttribute(
+        "data-keep-mounted",
+        i ? "true" : "false"
+      ), r.node.setAttribute("data-visible", l ? "true" : "false"), r.node.setAttribute("data-visited", d ? "true" : "false"), r.node.setAttribute(
+        "data-nav-direction",
+        a ? this._lastDirection : "none"
+      ), i ? r.node.hidden = !1 : r.node.hidden = !l;
+    });
+  }
+  _attemptChange(t, e, i, a) {
+    if (this._isBusy())
+      return this._dispatchBlockedNext("busy", t, e, i), !1;
+    if (i === e)
+      return !0;
+    if (i < 0 || i >= t.length)
+      return this._dispatchBlockedNext("bounds", t, e, i), !1;
+    const r = t[i];
+    if (!r || r.disabled)
+      return this._dispatchBlockedNext("disabled", t, e, i), !1;
+    if (this.hasAttribute("linear") && i > e + 1)
+      return this._dispatchBlockedNext("linear", t, e, i), !1;
+    const s = t[e], l = i > e;
+    if (l && s && this._isStepInvalid(s, e))
+      return this._dispatchBlockedNext("validation", t, e, i), !1;
+    const n = new CustomEvent("before-change", {
+      detail: {
+        currentIndex: e,
+        nextIndex: i,
+        currentValue: (s == null ? void 0 : s.value) || "",
+        nextValue: r.value,
+        trigger: a
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    if (!this.dispatchEvent(n))
+      return !1;
+    this._lastDirection = l ? "forward" : "backward", this.value = r.value;
+    const o = {
+      index: i,
+      value: r.value,
+      title: r.title,
+      trigger: a
+    };
+    return this.dispatchEvent(
+      new CustomEvent("input", { detail: o, bubbles: !0, composed: !0 })
+    ), this.dispatchEvent(
+      new CustomEvent("change", { detail: o, bubbles: !0, composed: !0 })
+    ), this.dispatchEvent(
+      new CustomEvent("step-change", { detail: o, bubbles: !0, composed: !0 })
+    ), !0;
+  }
+  goTo(t) {
+    const e = this._steps();
+    if (!e.length)
+      return !1;
+    const i = this._activeIndex(e), a = typeof t == "number" ? t : e.findIndex((r) => r.value === String(t));
+    return this._attemptChange(e, i, a, "api");
+  }
+  next() {
+    var i, a;
+    const t = this._steps();
+    if (!t.length)
+      return !1;
+    const e = this._activeIndex(t);
+    if (e >= t.length - 1) {
+      if (this._isBusy())
+        return !1;
+      const r = {
+        index: e,
+        value: ((i = t[e]) == null ? void 0 : i.value) || "",
+        title: ((a = t[e]) == null ? void 0 : a.title) || ""
+      };
+      return this.dispatchEvent(
+        new CustomEvent("complete", { detail: r, bubbles: !0, composed: !0 })
+      ), !0;
+    }
+    return this._attemptChange(t, e, e + 1, "next");
+  }
+  prev() {
+    const t = this._steps();
+    if (!t.length)
+      return !1;
+    const e = this._activeIndex(t);
+    return this._attemptChange(t, e, e - 1, "prev");
+  }
+  _onClick(t) {
+    const e = t.target;
+    if (!e)
+      return;
+    if (e.closest(".btn-prev")) {
+      this.prev();
+      return;
+    }
+    if (e.closest(".btn-next")) {
+      this.next();
+      return;
+    }
+    const i = e.closest(".step");
+    if (!i)
+      return;
+    const a = Number(i.getAttribute("data-index"));
+    if (!Number.isInteger(a))
+      return;
+    const r = this._steps(), s = this._activeIndex(r);
+    this._attemptChange(r, s, a, "stepper");
+  }
+  _onKeyDown(t) {
+    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = e === "horizontal" && getComputedStyle(this).direction === "rtl", a = e === "vertical" ? "ArrowDown" : i ? "ArrowLeft" : "ArrowRight", r = e === "vertical" ? "ArrowUp" : i ? "ArrowRight" : "ArrowLeft";
+    if (t.altKey && t.key === a) {
+      t.preventDefault(), this.next();
+      return;
+    }
+    if (t.altKey && t.key === r) {
+      t.preventDefault(), this.prev();
+      return;
+    }
+    const s = t.target, l = s == null ? void 0 : s.closest(".step");
+    if (!l)
+      return;
+    const n = this._stepButtons.filter((d) => !d.disabled);
+    if (!n.length)
+      return;
+    const o = n.indexOf(l);
+    if (!(o < 0)) {
+      if (t.key === a) {
+        t.preventDefault(), n[(o + 1) % n.length].focus();
+        return;
+      }
+      if (t.key === r) {
+        t.preventDefault(), n[(o - 1 + n.length) % n.length].focus();
+        return;
+      }
+      if (t.key === "Home" || t.key === "End") {
+        t.preventDefault(), (t.key === "Home" ? n[0] : n[n.length - 1]).focus();
+        return;
+      }
+      (t.key === " " || t.key === "Enter") && (t.preventDefault(), l.click());
+    }
+  }
+  _syncValueUi() {
+    var l;
+    if (!this.isConnected)
+      return;
+    if (!this.root.querySelector(".frame")) {
+      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;
+    }
+    this._syncPanels(t, e), this._stepButtons.forEach((n, o) => {
+      const d = o === e, p = this._visualStatus(t[o], o, e);
+      n.setAttribute("data-active", d ? "true" : "false"), n.setAttribute("data-status", p), n.setAttribute("aria-selected", d ? "true" : "false"), n.setAttribute("tabindex", d ? "0" : "-1");
+      const b = n.querySelector(".step-badge");
+      b && (p === "complete" || p === "success" ? b.textContent = "✓" : p === "warning" ? b.textContent = "!" : p === "error" ? b.textContent = "×" : b.textContent = String(o + 1));
+      const h = n.closest(".step-item");
+      h && (h.setAttribute("data-status", p), h.setAttribute(
+        "data-complete",
+        o < e ? "true" : "false"
+      ), h.setAttribute("data-current", d ? "true" : "false"));
+    });
+    const i = t.length, a = i <= 1 || e < 0 ? 0 : Math.round(e / (i - 1) * 100);
+    this._progressEl && this._progressEl.style.setProperty("--ui-wizard-progress", `${a}%`), this._statusStepEl && (this._statusStepEl.textContent = `Step ${Math.max(1, e + 1)} of ${i}`), this._statusValueEl && (this._statusValueEl.textContent = `${a}%`);
+    const r = this._isBusy();
+    if (this._prevBtn && (this._prevBtn.disabled = e <= 0 || r), this._nextBtn) {
+      const n = e >= i - 1, o = this.getAttribute("next-label") || "Next", d = this.getAttribute("finish-label") || "Finish";
+      this._nextBtn.textContent = n ? d : o, this._nextBtn.setAttribute("data-loading", r ? "true" : "false"), this._nextBtn.disabled = r || e < 0 || ((l = t[e]) == null ? void 0 : l.disabled) === !0;
+    }
+    const s = this.root.querySelector(".frame");
+    s && s.setAttribute("aria-busy", r ? "true" : "false"), this._progressRow && (this.getAttribute("show-progress") !== "false" && i > 0 ? this._progressRow.removeAttribute("hidden") : this._progressRow.setAttribute("hidden", ""));
+  }
+  render() {
+    const t = this._steps(), e = this._activeIndex(t);
+    this._markVisited(t, e), this._syncPanels(t, e);
+    const i = this.getAttribute("title") || "", a = this.getAttribute("description") || "", r = this.getAttribute("show-stepper") !== "false" && t.length > 0, s = this.getAttribute("show-progress") !== "false" && t.length > 0, l = this.getAttribute("stepper-position") === "bottom" ? "bottom" : "top", n = this.hasAttribute("hide-controls") || t.length === 0, o = this.getAttribute("prev-label") || "Previous", d = this.getAttribute("next-label") || "Next", p = this.getAttribute("finish-label") || "Finish", b = this.getAttribute("empty-label") || 'No wizard steps configured. Add elements with slot="step".', h = r ? `
+          <div
+            class="stepper"
+            part="stepper"
+            role="tablist"
+            aria-orientation="${this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"}"
+            aria-label="${c(this.getAttribute("aria-label") || "Wizard steps")}"
+          >
+            ${t.map((f, u) => {
+      const g = this._visualStatus(f, u, e), z = this._tabId(u), y = this._panelId(u), _ = g === "complete" || g === "success" ? "✓" : g === "warning" ? "!" : g === "error" ? "×" : String(u + 1);
+      return `
+                  <div class="step-item" part="step-item" data-index="${u}" data-last="${u === t.length - 1 ? "true" : "false"}" data-status="${g}" data-complete="${u < e ? "true" : "false"}" data-current="${u === e ? "true" : "false"}">
+                    <button
+                      type="button"
+                      class="step"
+                      part="step"
+                      id="${z}"
+                      role="tab"
+                      aria-controls="${y}"
+                      data-index="${u}"
+                      data-active="${u === e ? "true" : "false"}"
+                      data-status="${g}"
+                      aria-selected="${u === e ? "true" : "false"}"
+                      aria-disabled="${f.disabled ? "true" : "false"}"
+                      tabindex="${u === e ? "0" : "-1"}"
+                      ${f.disabled ? "disabled" : ""}
+                    >
+                      <span class="step-badge" part="step-badge">${_}</span>
+                      <span class="step-main" part="step-main">
+                        <span class="step-title" part="step-title">${c(f.title)}${f.optional ? " (optional)" : ""}</span>
+                        ${f.description ? `<span class="step-description" part="step-description">${c(f.description)}</span>` : ""}
+                      </span>
+                    </button>
+                  </div>
+                `;
+    }).join("")}
+          </div>
+        ` : '<div class="stepper" hidden></div>', w = e <= 0, x = e >= t.length - 1;
+    this.setContent(`
+      <style>${k}</style>
+      <section class="frame" part="frame" role="group" aria-label="${c(this.getAttribute("aria-label") || "Wizard")}" aria-busy="${this._isBusy() ? "true" : "false"}">
+        <h3 class="title" part="title" ${i ? "" : "hidden"}>${c(i)}</h3>
+        <p class="description" part="description" ${a ? "" : "hidden"}>${c(a)}</p>
+
+        <div class="status" part="status" ${s ? "" : "hidden"}>
+          <div class="status-row">
+            <span class="status-step" part="status-step"></span>
+            <span class="status-value" part="status-value"></span>
+          </div>
+          <div class="progress" part="progress"></div>
+        </div>
+
+        ${l === "top" ? h : ""}
+
+        <div class="panel" part="panel" ${t.length ? "" : "hidden"}>
+          <slot name="step"></slot>
+        </div>
+        <p class="empty" part="empty" ${t.length ? "hidden" : ""}>${c(b)}</p>
+
+        ${l === "bottom" ? h : ""}
+
+        <div class="controls" part="controls" ${n ? "hidden" : ""}>
+          <div class="group" part="controls-start"><slot name="controls-start"></slot></div>
+          <div class="group" part="controls-end">
+            <button type="button" class="btn btn-prev" part="button-prev" ${w ? "disabled" : ""}>${c(o)}</button>
+            <button type="button" class="btn primary btn-next" part="button-next" data-loading="${this._isBusy() ? "true" : "false"}">${c(x ? p : d)}</button>
+            <slot name="controls-end"></slot>
+          </div>
+        </div>
+      </section>
+    `), this._stepButtons = Array.from(
+      this.root.querySelectorAll(".step")
+    ), this._progressEl = this.root.querySelector(
+      ".progress"
+    ), this._progressRow = this.root.querySelector(
+      ".status"
+    ), this._statusStepEl = this.root.querySelector(
+      ".status-step"
+    ), this._statusValueEl = this.root.querySelector(
+      ".status-value"
+    ), this._prevBtn = this.root.querySelector(
+      ".btn-prev"
+    ), this._nextBtn = this.root.querySelector(
+      ".btn-next"
+    ), this._syncValueUi();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-wizard") && customElements.define("ui-wizard", C);
+export {
+  C as UIWizard
+};