@editora/ui-core 0.1.9 → 0.1.10

package/dist/wizard.cjs.js

@@ -0,0 +1,677 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),$=`
+  :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 C=0;class w extends k.ElementBase{constructor(){super(),this._observer=null,this._instanceId=++C,this._isSyncingValueAttribute=!1,this._visited=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),y=this._tabId(u),_=this._panelId(u),A=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="${y}"
+                      role="tab"
+                      aria-controls="${_}"
+                      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">${A}</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>',x=e<=0,z=e>=t.length-1;this.setContent(`
+      <style>${$}</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" ${x?"disabled":""}>${c(o)}</button>
+            <button type="button" class="btn primary btn-next" part="button-next" data-loading="${this._isBusy()?"true":"false"}">${c(z?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",w);exports.UIWizard=w;