@editora/ui-core 0.1.25 → 0.2.1

package/dist/splitter.cjs.js

@@ -2,9 +2,9 @@
   :host {
     --ui-splitter-size: 10px;
     --ui-splitter-hit-area: 10px;
-    --ui-splitter-line: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
-    --ui-splitter-accent: var(--ui-color-primary, #2563eb);
-    --ui-splitter-handle-bg: color-mix(in srgb, var(--ui-splitter-line) 48%, transparent);
+    --ui-splitter-line: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent));
+    --ui-splitter-accent: var(--ui-color-accent-solid, var(--ui-color-primary, #2563eb));
+    --ui-splitter-handle-bg: var(--ui-color-line-strong, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 90%, #64748b));
     display: block;
     position: relative;
     flex: 0 0 auto;
@@ -32,24 +32,65 @@
     place-items: center;
   }
 
+  /* The divider: a hairline across the whole gap, so the edge between two panels is always visible. */
+  .splitter::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(50% - 0.5px) auto;
+    inline-size: 1px;
+    background: var(--ui-splitter-line);
+    transition: background-color 140ms ease, inline-size 140ms ease, inset-inline-start 140ms ease;
+  }
+
+  :host([orientation="vertical"]) .splitter::before {
+    inset-block: calc(50% - 0.5px) auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: 1px;
+  }
+
+  /* The grip: a short pill in the middle that says "drag me". */
   .line {
-    inline-size: 2px;
-    block-size: 36px;
+    position: relative;
+    inline-size: 4px;
+    block-size: 28px;
     border-radius: 999px;
     background: var(--ui-splitter-handle-bg);
-    transition: background-color 140ms ease, transform 140ms ease;
+    transition: background-color 140ms ease;
   }
 
   :host([orientation="vertical"]) .line {
-    inline-size: 36px;
+    inline-size: 28px;
+    block-size: 4px;
+  }
+
+  :host(:hover) .splitter::before,
+  :host(:focus-visible) .splitter::before,
+  :host([data-dragging="true"]) .splitter::before {
+    background: var(--ui-splitter-accent);
+    inline-size: 2px;
+    inset-inline-start: calc(50% - 1px);
+  }
+
+  :host([orientation="vertical"]:hover) .splitter::before,
+  :host([orientation="vertical"]:focus-visible) .splitter::before,
+  :host([orientation="vertical"][data-dragging="true"]) .splitter::before {
+    inline-size: auto;
     block-size: 2px;
+    inset-inline-start: 0;
+    inset-block-start: calc(50% - 1px);
   }
 
   :host(:hover) .line,
   :host(:focus-visible) .line,
   :host([data-dragging="true"]) .line {
-    background: color-mix(in srgb, var(--ui-splitter-accent) 72%, white 28%);
-    transform: scale(1.04);
+    background: var(--ui-splitter-accent);
+  }
+
+  :host(:focus-visible) .line {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-splitter-accent));
+    outline-offset: 2px;
   }
 
   :host([disabled]) {
@@ -58,7 +99,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .line {
+    .line,
+    .splitter::before {
       transition: none !important;
     }
   }

package/dist/splitter.esm.js

@@ -3,9 +3,9 @@ const r = `
   :host {
     --ui-splitter-size: 10px;
     --ui-splitter-hit-area: 10px;
-    --ui-splitter-line: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
-    --ui-splitter-accent: var(--ui-color-primary, #2563eb);
-    --ui-splitter-handle-bg: color-mix(in srgb, var(--ui-splitter-line) 48%, transparent);
+    --ui-splitter-line: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent));
+    --ui-splitter-accent: var(--ui-color-accent-solid, var(--ui-color-primary, #2563eb));
+    --ui-splitter-handle-bg: var(--ui-color-line-strong, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 90%, #64748b));
     display: block;
     position: relative;
     flex: 0 0 auto;
@@ -33,24 +33,65 @@ const r = `
     place-items: center;
   }
 
+  /* The divider: a hairline across the whole gap, so the edge between two panels is always visible. */
+  .splitter::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(50% - 0.5px) auto;
+    inline-size: 1px;
+    background: var(--ui-splitter-line);
+    transition: background-color 140ms ease, inline-size 140ms ease, inset-inline-start 140ms ease;
+  }
+
+  :host([orientation="vertical"]) .splitter::before {
+    inset-block: calc(50% - 0.5px) auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: 1px;
+  }
+
+  /* The grip: a short pill in the middle that says "drag me". */
   .line {
-    inline-size: 2px;
-    block-size: 36px;
+    position: relative;
+    inline-size: 4px;
+    block-size: 28px;
     border-radius: 999px;
     background: var(--ui-splitter-handle-bg);
-    transition: background-color 140ms ease, transform 140ms ease;
+    transition: background-color 140ms ease;
   }
 
   :host([orientation="vertical"]) .line {
-    inline-size: 36px;
+    inline-size: 28px;
+    block-size: 4px;
+  }
+
+  :host(:hover) .splitter::before,
+  :host(:focus-visible) .splitter::before,
+  :host([data-dragging="true"]) .splitter::before {
+    background: var(--ui-splitter-accent);
+    inline-size: 2px;
+    inset-inline-start: calc(50% - 1px);
+  }
+
+  :host([orientation="vertical"]:hover) .splitter::before,
+  :host([orientation="vertical"]:focus-visible) .splitter::before,
+  :host([orientation="vertical"][data-dragging="true"]) .splitter::before {
+    inline-size: auto;
     block-size: 2px;
+    inset-inline-start: 0;
+    inset-block-start: calc(50% - 1px);
   }
 
   :host(:hover) .line,
   :host(:focus-visible) .line,
   :host([data-dragging="true"]) .line {
-    background: color-mix(in srgb, var(--ui-splitter-accent) 72%, white 28%);
-    transform: scale(1.04);
+    background: var(--ui-splitter-accent);
+  }
+
+  :host(:focus-visible) .line {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-splitter-accent));
+    outline-offset: 2px;
   }
 
   :host([disabled]) {
@@ -59,12 +100,13 @@ const r = `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .line {
+    .line,
+    .splitter::before {
       transition: none !important;
     }
   }
 `;
-class n extends s {
+class l extends s {
   static get observedAttributes() {
     return ["orientation", "disabled", "aria-label"];
   }
@@ -99,7 +141,7 @@ class n extends s {
     `), this._syncAccessibility();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-splitter") && customElements.define("ui-splitter", n);
+typeof customElements < "u" && !customElements.get("ui-splitter") && customElements.define("ui-splitter", l);
 export {
-  n as UISplitter
+  l as UISplitter
 };

package/dist/stepper.cjs.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-DxbvhLJs.js"),b=`
   :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-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-stepper-bg: transparent;
+    --ui-stepper-border: var(--ui-color-line, 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, #526175);
     --ui-stepper-accent: var(--ui-color-primary, #2563eb);
@@ -17,11 +17,10 @@
   }
 
   .frame {
-    border: 1px solid var(--ui-stepper-border);
+    border: 0;
     border-radius: var(--ui-stepper-radius);
     background: var(--ui-stepper-bg);
-    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
-    padding: 10px;
+    padding: 0;
   }
 
   .list {
@@ -48,9 +47,9 @@
   .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);
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    background: transparent;
     color: var(--ui-stepper-text);
     padding: 8px 10px;
     display: grid;
@@ -63,13 +62,12 @@
   }
 
   .trigger:hover {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 20%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent));
   }
 
   .trigger:focus-visible {
-    outline: 2px solid var(--ui-stepper-focus);
-    outline-offset: 1px;
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-stepper-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   .trigger[disabled] {
@@ -79,27 +77,17 @@
 
   .index {
     position: relative;
-    inline-size: 20px;
-    block-size: 20px;
+    inline-size: 24px;
+    block-size: 24px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    border: 1px solid var(--ui-stepper-border);
     display: inline-grid;
     place-items: center;
-    font-size: 11px;
-    font-weight: 700;
+    font-size: 12px;
+    font-weight: 500;
     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) 34%, transparent);
-    opacity: 0.18;
-    pointer-events: none;
-  }
-
   .meta {
     min-inline-size: 0;
     display: grid;
@@ -115,8 +103,8 @@
   }
 
   .label {
-    font-size: 12px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .description {
@@ -129,7 +117,7 @@
     inline-size: 100%;
     block-size: 2px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    background: var(--ui-stepper-border);
     overflow: hidden;
   }
 
@@ -139,45 +127,23 @@
     margin-inline-start: 9px;
   }
 
-  .item[data-state="current"] .trigger {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 7%, transparent);
+  /* Done is a soft accent fill; the current step is a solid one. */
+  .item[data-state="complete"] .index {
+    border-color: transparent;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-stepper-accent) 14%, transparent));
+    color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%));
   }
 
-  .item[data-state="current"] .index,
-  .item[data-state="complete"] .index {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%);
+  .item[data-state="current"] .index {
+    border-color: transparent;
+    background: var(--ui-stepper-accent);
+    color: var(--ui-color-foreground-on-primary, #ffffff);
   }
 
   .item[data-state="complete"] .connector {
     background: color-mix(in srgb, var(--ui-stepper-accent) 32%, 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) 24%, transparent) 50%,
-      transparent 100%
-    );
-    opacity: 0.45;
-    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) 24%, transparent) 50%,
-      transparent 100%
-    );
-  }
-
   .item[data-state="error"] .trigger {
     border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 50%, transparent);
   }
@@ -279,7 +245,7 @@
       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 p(o){if(o==null)return!1;const t=String(o).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}class d extends b.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)=>{const s=e.getAttribute("data-value")||String(r+1),i=e.getAttribute("data-label")||e.getAttribute("title")||e.textContent?.trim()||`Step ${r+1}`,a=e.getAttribute("data-description")||"",l=p(e.getAttribute("data-optional")),n=e.hasAttribute("disabled")||p(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?.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 r=t.target?.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 r=t.target?.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)=>`
+`;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 p(o){if(o==null)return!1;const t=String(o).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}class d 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)=>{const s=e.getAttribute("data-value")||String(r+1),i=e.getAttribute("data-label")||e.getAttribute("title")||e.textContent?.trim()||`Step ${r+1}`,a=e.getAttribute("data-description")||"",l=p(e.getAttribute("data-optional")),n=e.hasAttribute("disabled")||p(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?.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 r=t.target?.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 r=t.target?.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"
@@ -299,7 +265,7 @@
             ${a<t.length-1?'<span class="connector" part="connector"></span>':""}
           </li>
         `).join("");this.setContent(`
-      <style>${g}</style>
+      <style>${b}</style>
       <section class="frame" part="frame" role="group" aria-label="${u(r)}">
         <ol class="list" part="list">${s}</ol>
       </section>

package/dist/stepper.esm.js

@@ -1,10 +1,10 @@
 import { E as d } from "./ElementBase-BeZT54Hj.mjs";
-const b = `
+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-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-stepper-bg: transparent;
+    --ui-stepper-border: var(--ui-color-line, 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, #526175);
     --ui-stepper-accent: var(--ui-color-primary, #2563eb);
@@ -18,11 +18,10 @@ const b = `
   }
 
   .frame {
-    border: 1px solid var(--ui-stepper-border);
+    border: 0;
     border-radius: var(--ui-stepper-radius);
     background: var(--ui-stepper-bg);
-    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
-    padding: 10px;
+    padding: 0;
   }
 
   .list {
@@ -49,9 +48,9 @@ const b = `
   .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);
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    background: transparent;
     color: var(--ui-stepper-text);
     padding: 8px 10px;
     display: grid;
@@ -64,13 +63,12 @@ const b = `
   }
 
   .trigger:hover {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 20%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent));
   }
 
   .trigger:focus-visible {
-    outline: 2px solid var(--ui-stepper-focus);
-    outline-offset: 1px;
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-stepper-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   .trigger[disabled] {
@@ -80,27 +78,17 @@ const b = `
 
   .index {
     position: relative;
-    inline-size: 20px;
-    block-size: 20px;
+    inline-size: 24px;
+    block-size: 24px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    border: 1px solid var(--ui-stepper-border);
     display: inline-grid;
     place-items: center;
-    font-size: 11px;
-    font-weight: 700;
+    font-size: 12px;
+    font-weight: 500;
     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) 34%, transparent);
-    opacity: 0.18;
-    pointer-events: none;
-  }
-
   .meta {
     min-inline-size: 0;
     display: grid;
@@ -116,8 +104,8 @@ const b = `
   }
 
   .label {
-    font-size: 12px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .description {
@@ -130,7 +118,7 @@ const b = `
     inline-size: 100%;
     block-size: 2px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-stepper-border) 82%, transparent);
+    background: var(--ui-stepper-border);
     overflow: hidden;
   }
 
@@ -140,45 +128,23 @@ const b = `
     margin-inline-start: 9px;
   }
 
-  .item[data-state="current"] .trigger {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 7%, transparent);
+  /* Done is a soft accent fill; the current step is a solid one. */
+  .item[data-state="complete"] .index {
+    border-color: transparent;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-stepper-accent) 14%, transparent));
+    color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%));
   }
 
-  .item[data-state="current"] .index,
-  .item[data-state="complete"] .index {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%);
+  .item[data-state="current"] .index {
+    border-color: transparent;
+    background: var(--ui-stepper-accent);
+    color: var(--ui-color-foreground-on-primary, #ffffff);
   }
 
   .item[data-state="complete"] .connector {
     background: color-mix(in srgb, var(--ui-stepper-accent) 32%, 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) 24%, transparent) 50%,
-      transparent 100%
-    );
-    opacity: 0.45;
-    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) 24%, transparent) 50%,
-      transparent 100%
-    );
-  }
-
   .item[data-state="error"] .trigger {
     border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 50%, transparent);
   }
@@ -284,7 +250,7 @@ const b = `
 function u(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function g(o) {
+function b(o) {
   if (!o) return [];
   try {
     const t = JSON.parse(o);
@@ -352,7 +318,7 @@ class f extends d {
     });
   }
   _fromAttr() {
-    return g(this.getAttribute("steps")).map((t, e) => {
+    return b(this.getAttribute("steps")).map((t, e) => {
       const r = t.state === "complete" || t.state === "error" || t.state === "warning" ? t.state : "default";
       return {
         index: e,
@@ -514,7 +480,7 @@ class f extends d {
           </li>
         `).join("");
     this.setContent(`
-      <style>${b}</style>
+      <style>${g}</style>
       <section class="frame" part="frame" role="group" aria-label="${u(r)}">
         <ol class="list" part="list">${s}</ol>
       </section>