@editora/ui-core 0.1.8 → 0.1.10

package/dist/stepper.cjs.js

@@ -0,0 +1,337 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),f=`
+  :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 m(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 b extends g.ElementBase{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 m(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>${f}</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",b);exports.UIStepper=b;