@editora/ui-core 0.1.21 → 0.1.22

package/dist/{ui-button-Q0GNNWKC.mjs → ui-button-rfiuUnUD.mjs}

@@ -1,6 +1,6 @@
-import { E as P } from "./ElementBase-YlTLMsGk.mjs";
-import "./ui-icon-YI6lyuqU.mjs";
-const D = `
+import { E as D } from "./ElementBase-YlTLMsGk.mjs";
+import "./ui-icon-BSi_GtqO.mjs";
+const P = `
   :host {
     --ui-btn-radius: var(--ui-control-radius, var(--ui-radius, 4px));
     --ui-btn-min-height: var(--ui-control-min-height, var(--base-button-height-md, 40px));
@@ -19,7 +19,7 @@ const D = `
     --ui-btn-surface: var(--ui-color-surface, #ffffff);
     --ui-btn-surface-alt: var(--ui-color-surface-alt, #f8fafc);
     --ui-btn-text: var(--ui-color-text, #0f172a);
-    --ui-btn-muted: var(--ui-color-muted, #64748b);
+    --ui-btn-muted: var(--ui-color-muted, #526175);
     --ui-btn-ring: var(--ui-color-focus-ring, #2563eb);
 
     display: inline-flex;
@@ -35,7 +35,7 @@ const D = `
   }
 
   :host([tone="neutral"]) {
-    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #526175) 74%, var(--ui-color-text, #0f172a) 26%);
   }
 
   :host([tone="info"]) {
@@ -43,11 +43,11 @@ const D = `
   }
 
   :host([tone="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-btn-accent: var(--ui-color-warning, #d97706);
+    --ui-btn-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -59,7 +59,7 @@ const D = `
   }
 
   :host([state="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([theme="dark"]) {
@@ -87,8 +87,8 @@ const D = `
   }
 
   :host([recipe="soft"]) {
-    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, white);
-    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, white);
+    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, var(--ui-color-surface, #ffffff));
   }
 
   :host([recipe="soft"]) .btn--secondary {
@@ -231,7 +231,8 @@ const D = `
 
   .btn--primary {
     background: var(--ui-btn-accent);
-    color: #ffffff;
+    /* The theme's text colour for a primary fill: the default theme's amber needs dark text. */
+    color: var(--ui-color-foreground-on-primary, #ffffff);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 74%, #0f172a 26%);
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
   }
@@ -242,7 +243,7 @@ const D = `
 
   .btn--secondary {
     background: var(--ui-btn-surface);
-    color: color-mix(in srgb, var(--ui-btn-accent) 78%, var(--ui-btn-text) 22%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 22%, var(--ui-btn-muted));
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
   }
@@ -253,7 +254,7 @@ const D = `
 
   .btn--ghost {
     background: transparent;
-    color: color-mix(in srgb, var(--ui-btn-accent) 80%, var(--ui-btn-text) 20%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: transparent;
     box-shadow: none;
   }
@@ -274,25 +275,25 @@ const D = `
   }
 
   .btn--success {
-    background: var(--ui-color-success, #16a34a);
+    background: var(--ui-color-success, #15803d);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #16a34a) 20%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #15803d) 20%, transparent);
   }
 
   .btn--success:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-success, #16a34a) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-success, #15803d) 86%, #0f172a 14%);
   }
 
   .btn--warning {
-    background: var(--ui-color-warning, #d97706);
+    background: var(--ui-color-warning, #b45309);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #d97706) 18%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #b45309) 18%, transparent);
   }
 
   .btn--warning:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-warning, #d97706) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-warning, #b45309) 86%, #0f172a 14%);
   }
 
   :host([size="sm"]) {
@@ -320,7 +321,7 @@ const D = `
   }
 
   :host([state="success"]) .btn:not([disabled]) {
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #15803d) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
   }
 
   :host([data-animation]) .btn:not([disabled]):hover {
@@ -504,22 +505,22 @@ const D = `
     }
   }
 `;
-function _(t) {
+function S(t) {
   return t !== null && t.toLowerCase() !== "false" && t !== "0";
 }
-function F(t) {
+function U(t) {
   return t === "secondary" || t === "ghost" || t === "danger" || t === "success" || t === "warning" ? t : "primary";
 }
-function U(t) {
+function I(t) {
   return t === "sm" || t === "lg" ? t : "md";
 }
-function S(t) {
+function C(t) {
   return t === "scale" || t === "pulse" || t === "none" ? t : null;
 }
-function I(t) {
+function N(t) {
   return t === "neutral" || t === "info" || t === "success" || t === "warning" || t === "danger" ? t : null;
 }
-function N(t) {
+function W(t) {
   return t === "loading" || t === "error" || t === "success" ? t : "idle";
 }
 function $(t) {
@@ -547,14 +548,14 @@ function r(t, n) {
 }
 function c(t, n) {
   const e = t.getAttribute(n);
-  if (e != null) return _(e);
+  if (e != null) return S(e);
   const i = t[n];
-  return typeof i == "boolean" ? i : typeof i == "string" ? _(i) : !1;
+  return typeof i == "boolean" ? i : typeof i == "string" ? S(i) : !1;
 }
 function u(t) {
   return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function L(t, n) {
+function E(t, n) {
   return !!t.querySelector(`[slot="${n}"]`);
 }
 function V(t, n) {
@@ -572,7 +573,8 @@ function V(t, n) {
   const i = new Event("submit", { bubbles: !0, cancelable: !0 });
   e.dispatchEvent(i);
 }
-class W extends P {
+const T = ["aria-expanded", "aria-haspopup", "aria-pressed"];
+class X extends D {
   constructor() {
     super(), this._slots = [], this._contentObserver = null, this._onRootClick = this._onRootClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onContentMutations = this._onContentMutations.bind(this);
   }
@@ -595,7 +597,10 @@ class W extends P {
       "radius",
       "scale",
       "loading-label",
-      "aria-label"
+      "aria-label",
+      "aria-expanded",
+      "aria-haspopup",
+      "aria-pressed"
     ];
   }
   connectedCallback() {
@@ -607,12 +612,24 @@ class W extends P {
   attributeChangedCallback(n, e, i) {
     if (e !== i) {
       if (n === "animation") {
-        const o = S(i);
+        const o = C(i);
         o ? this.setAttribute("data-animation", o) : this.removeAttribute("data-animation");
       }
+      if (T.includes(n)) {
+        this._syncForwardedState();
+        return;
+      }
       this.isConnected && this.requestRender();
     }
   }
+  _syncForwardedState() {
+    const n = this.root.querySelector('button[data-ui-button="true"]');
+    if (n)
+      for (const e of T) {
+        const i = this.getAttribute(e);
+        i == null || i === "" ? n.removeAttribute(e) : n.getAttribute(e) !== i && n.setAttribute(e, i);
+      }
+  }
   _onRootClick(n) {
     const i = n.target?.closest('button[data-ui-button="true"]');
     if (!i || i.disabled) return;
@@ -634,32 +651,32 @@ class W extends P {
     this.requestRender();
   }
   render() {
-    const n = c(this, "disabled"), e = c(this, "loading"), i = r(this, "state"), o = N(i), s = e || o === "loading", l = r(this, "icon"), E = F(r(this, "variant")), b = r(this, "size"), d = U(b), h = S(r(this, "animation")), a = r(this, "theme"), p = a === "dark" || a === "brand" ? a : null, f = r(this, "tone"), g = I(f), q = c(this, "block"), R = c(this, "headless"), T = $(r(this, "type")), m = G(r(this, "recipe")), x = r(this, "shape"), v = J(x), M = r(this, "radius"), y = Q(M), w = K(r(this, "scale")), k = r(this, "aria-label"), B = r(this, "loading-label") || "Loading";
-    h ? this.setAttribute("data-animation", h) : this.removeAttribute("data-animation"), q ? this.setAttribute("block", "") : this.removeAttribute("block"), R ? this.setAttribute("headless", "") : this.removeAttribute("headless"), f != null && (g ? this.setAttribute("tone", g) : this.removeAttribute("tone")), b != null && (d === "md" ? this.removeAttribute("size") : this.setAttribute("size", d)), a != null && (p ? this.setAttribute("theme", p) : this.removeAttribute("theme")), i != null && (o === "idle" ? this.removeAttribute("state") : this.setAttribute("state", o)), m ? this.setAttribute("recipe", m) : this.removeAttribute("recipe"), x != null && (v ? this.setAttribute("shape", v) : this.removeAttribute("shape")), y ? this.style.setProperty("--ui-btn-radius", y) : this.style.removeProperty("--ui-btn-radius"), w ? this.setAttribute("scale", w) : this.removeAttribute("scale");
-    const z = n || s;
-    z ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), s ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const j = L(this, "prefix"), H = L(this, "suffix"), A = !s && l ? `<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>` : "", C = s ? '<span class="spinner" aria-hidden="true" part="spinner"></span>' : "", O = C || A || j ? `<span class="slot slot--prefix" part="prefix">${C}${A}${s ? "" : '<slot name="prefix"></slot>'}</span>` : "", Y = H ? '<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>' : "";
+    const n = c(this, "disabled"), e = c(this, "loading"), i = r(this, "state"), o = W(i), s = e || o === "loading", l = r(this, "icon"), L = U(r(this, "variant")), b = r(this, "size"), d = I(b), h = C(r(this, "animation")), a = r(this, "theme"), p = a === "dark" || a === "brand" ? a : null, f = r(this, "tone"), g = N(f), R = c(this, "block"), q = c(this, "headless"), M = $(r(this, "type")), m = G(r(this, "recipe")), x = r(this, "shape"), v = J(x), B = r(this, "radius"), y = Q(B), w = K(r(this, "scale")), k = r(this, "aria-label"), O = r(this, "loading-label") || "Loading";
+    h ? this.setAttribute("data-animation", h) : this.removeAttribute("data-animation"), R ? this.setAttribute("block", "") : this.removeAttribute("block"), q ? this.setAttribute("headless", "") : this.removeAttribute("headless"), f != null && (g ? this.setAttribute("tone", g) : this.removeAttribute("tone")), b != null && (d === "md" ? this.removeAttribute("size") : this.setAttribute("size", d)), a != null && (p ? this.setAttribute("theme", p) : this.removeAttribute("theme")), i != null && (o === "idle" ? this.removeAttribute("state") : this.setAttribute("state", o)), m ? this.setAttribute("recipe", m) : this.removeAttribute("recipe"), x != null && (v ? this.setAttribute("shape", v) : this.removeAttribute("shape")), y ? this.style.setProperty("--ui-btn-radius", y) : this.style.removeProperty("--ui-btn-radius"), w ? this.setAttribute("scale", w) : this.removeAttribute("scale");
+    const A = n || s;
+    A ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), s ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
+    const j = E(this, "prefix"), F = E(this, "suffix"), z = !s && l ? `<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>` : "", _ = s ? '<span class="spinner" aria-hidden="true" part="spinner"></span>' : "", H = _ || z || j ? `<span class="slot slot--prefix" part="prefix">${_}${z}${s ? "" : '<slot name="prefix"></slot>'}</span>` : "", Y = F ? '<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>' : "";
     this.setContent(`
-      <style>${D}</style>
+      <style>${P}</style>
       <button
-        class="btn btn--${E}"
+        class="btn btn--${L}"
         part="button"
         type="button"
         data-ui-button="true"
-        data-request-type="${T}"
+        data-request-type="${M}"
         aria-busy="${s ? "true" : "false"}"
         ${k ? `aria-label="${u(k)}"` : ""}
-        ${z ? "disabled" : ""}
+        ${A ? "disabled" : ""}
       >
-        ${O}
+        ${H}
         <span class="slot slot--label" part="label"><slot></slot></span>
         ${Y}
-        ${s ? `<span class="sr-only">${u(B)}</span>` : ""}
+        ${s ? `<span class="sr-only">${u(O)}</span>` : ""}
       </button>
-    `), this._attachSlotListeners();
+    `), this._syncForwardedState(), this._attachSlotListeners();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-button") && customElements.define("ui-button", W);
+typeof customElements < "u" && !customElements.get("ui-button") && customElements.define("ui-button", X);
 export {
-  W as U
+  X as U
 };

package/dist/{ui-icon-YI6lyuqU.mjs → ui-icon-BSi_GtqO.mjs}

@@ -189,8 +189,8 @@ const z = `
   }
 
   :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
-  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
   :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
 
   :host([shape="square"]) { --ui-icon-radius: 4px; }

package/dist/{ui-icon-BzVNC_lr.js → ui-icon-Bvt9oIIR.js}

@@ -1,4 +1,4 @@
-"use strict";const k=require("./ElementBase-EV6mVBUV.js"),l=require("@editora/icons"),a=new Map,d=new Map;function c(i){return String(i||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(i,e){if(!e)return`${i}::default`;const r=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),s=e.absoluteStrokeWidth?"1":"0",b=e.strokeLinecap||"",f=e.strokeLinejoin||"",m=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[i,r,t,n,o,s,b,f,m,v,x].join("::")}function z(i,e){const r=c(i);r&&a.set(r,e)}function w(i){const e=c(i);e&&a.delete(e)}function C(){a.clear()}function I(i){const e=c(i);return e?a.has(e)?!0:l.hasIcon(e):!1}function A(i,e){return u(i,{variant:e})}function u(i,e){const r=c(i);if(!r)return"";const t=a.get(r);if(t)return t;if(!l.hasIcon(r))return"";const n=y(r,e),o=d.get(n);if(o)return o;const s=l.renderIconSvg(r,{variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0});return s&&d.set(n,s),s}const W=`
+"use strict";const k=require("./ElementBase-EV6mVBUV.js"),l=require("@editora/icons"),a=new Map,d=new Map;function c(i){return String(i||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(i,e){if(!e)return`${i}::default`;const r=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),s=e.absoluteStrokeWidth?"1":"0",g=e.strokeLinecap||"",f=e.strokeLinejoin||"",m=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[i,r,t,n,o,s,g,f,m,v,x].join("::")}function z(i,e){const r=c(i);r&&a.set(r,e)}function w(i){const e=c(i);e&&a.delete(e)}function C(){a.clear()}function I(i){const e=c(i);return e?a.has(e)?!0:l.hasIcon(e):!1}function A(i,e){return u(i,{variant:e})}function u(i,e){const r=c(i);if(!r)return"";const t=a.get(r);if(t)return t;if(!l.hasIcon(r))return"";const n=y(r,e),o=d.get(n);if(o)return o;const s=l.renderIconSvg(r,{variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0});return s&&d.set(n,s),s}const W=`
   :host {
     --ui-icon-size: 1em;
     --ui-icon-color: currentColor;
@@ -124,8 +124,8 @@
   }
 
   :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
-  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
   :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
 
   :host([shape="square"]) { --ui-icon-radius: 4px; }
@@ -195,7 +195,7 @@
       border-color: Canvas;
     }
   }
-`;function h(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(i){if(!i)return null;const e=i.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function p(i){if(!i)return;const e=Number(i);return Number.isFinite(e)?e:void 0}class g extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const r=this.getAttribute("color");r?this.style.setProperty("--ui-icon-color",r):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",r=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:p(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:p(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,s=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(r||e||"icon")}"`;this.setContent(`
+`;function h(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(i){if(!i)return null;const e=i.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function p(i){if(!i)return;const e=Number(i);return Number.isFinite(e)?e:void 0}class b extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const r=this.getAttribute("color");r?this.style.setProperty("--ui-icon-color",r):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",r=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:p(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:p(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,s=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(r||e||"icon")}"`;this.setContent(`
       <style>${W}</style>
       <span class="icon" part="icon" ${s}>
         <span class="glyph" part="glyph">
@@ -204,4 +204,4 @@
         </span>
         ${this.hasAttribute("badge")?'<span class="badge" part="badge" aria-hidden="true"></span>':""}
       </span>
-    `),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",g);exports.UIIcon=g;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;
+    `),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",b);exports.UIIcon=b;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;

package/dist/wizard.cjs.js

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-EV6mVBUV.js"),$=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-EV6mVBUV.js"),C=`
   :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-muted: var(--ui-color-muted, #526175);
     --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-success: var(--ui-color-success, #15803d);
+    --ui-wizard-warning: var(--ui-color-warning, #b45309);
     --ui-wizard-danger: var(--ui-color-danger, #dc2626);
 
     --ui-wizard-radius: 14px;
@@ -608,7 +608,7 @@
       color: Highlight;
     }
   }
-`;function c(g){return g.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function v(g){if(g==null)return!1;const t=String(g).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 o=a.closest('[slot="step"]');return!o||a!==o?!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 v(this.getAttribute("busy"))||this.hasAttribute("busy")}_isAnimationEnabled(){const t=this.getAttribute("animate");return t==null?!0:v(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:v(e.getAttribute("data-optional")),disabled:e.hasAttribute("disabled")||v(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],o=e[a];this.dispatchEvent(new CustomEvent("blocked-next",{detail:{reason:t,currentIndex:i,nextIndex:a,currentValue:r?.value||"",nextValue:o?.value||""},bubbles:!0,composed:!0}))}_isStepInvalid(t,e){if(!t||t.node.hasAttribute("invalid")||v(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,o)=>{const s=o===e,n=this._panelId(o),l=this._tabId(o),d=this._visited.has(r.value);r.node.id=n,r.node.setAttribute("role","tabpanel"),r.node.setAttribute("aria-labelledby",l),r.node.setAttribute("tabindex",s?"0":"-1"),r.node.setAttribute("data-active",s?"true":"false"),r.node.setAttribute("aria-hidden",s?"false":"true"),r.node.setAttribute("data-keep-mounted",i?"true":"false"),r.node.setAttribute("data-visible",s?"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=!s})}_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 o=t[e],s=i>e;if(s&&o&&this._isStepInvalid(o,e))return this._dispatchBlockedNext("validation",t,e,i),!1;const n=new CustomEvent("before-change",{detail:{currentIndex:e,nextIndex:i,currentValue:o?.value||"",nextValue:r.value,trigger:a},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(n))return!1;this._lastDirection=s?"forward":"backward",this.value=r.value;const l={index:i,value:r.value,title:r.title,trigger:a};return this.dispatchEvent(new CustomEvent("input",{detail:l,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("step-change",{detail:l,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(){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 i={index:e,value:t[e]?.value||"",title:t[e]?.title||""};return this.dispatchEvent(new CustomEvent("complete",{detail:i,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(),o=this._activeIndex(r);this._attemptChange(r,o,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?.closest(".step");if(!s)return;const n=this._stepButtons.filter(d=>!d.disabled);if(!n.length)return;const l=n.indexOf(s);if(!(l<0)){if(t.key===a){t.preventDefault(),n[(l+1)%n.length].focus();return}if(t.key===r){t.preventDefault(),n[(l-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(),s.click())}}_syncValueUi(){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((s,n)=>{const l=n===e,d=this._visualStatus(t[n],n,e);s.setAttribute("data-active",l?"true":"false"),s.setAttribute("data-status",d),s.setAttribute("aria-selected",l?"true":"false"),s.setAttribute("tabindex",l?"0":"-1");const p=s.querySelector(".step-badge");p&&(d==="complete"||d==="success"?p.textContent="✓":d==="warning"?p.textContent="!":d==="error"?p.textContent="×":p.textContent=String(n+1));const h=s.closest(".step-item");h&&(h.setAttribute("data-status",d),h.setAttribute("data-complete",n<e?"true":"false"),h.setAttribute("data-current",l?"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 s=e>=i-1,n=this.getAttribute("next-label")||"Next",l=this.getAttribute("finish-label")||"Finish";this._nextBtn.textContent=s?l:n,this._nextBtn.setAttribute("data-loading",r?"true":"false"),this._nextBtn.disabled=r||e<0||t[e]?.disabled===!0}const o=this.root.querySelector(".frame");o&&o.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,o=this.getAttribute("show-progress")!=="false"&&t.length>0,s=this.getAttribute("stepper-position")==="bottom"?"bottom":"top",n=this.hasAttribute("hide-controls")||t.length===0,l=this.getAttribute("prev-label")||"Previous",d=this.getAttribute("next-label")||"Next",p=this.getAttribute("finish-label")||"Finish",h=this.getAttribute("empty-label")||'No wizard steps configured. Add elements with slot="step".',m=r?`
+`;function c(g){return g.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function v(g){if(g==null)return!1;const t=String(g).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}let $=0;const w="data-ui-wizard-auto-label";class x extends k.ElementBase{constructor(){super(),this._observer=null,this._instanceId=++$,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 o=a.closest('[slot="step"]');return!o||a!==o?!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 v(this.getAttribute("busy"))||this.hasAttribute("busy")}_isAnimationEnabled(){const t=this.getAttribute("animate");return t==null?!0:v(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:v(e.getAttribute("data-optional")),disabled:e.hasAttribute("disabled")||v(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],o=e[a];this.dispatchEvent(new CustomEvent("blocked-next",{detail:{reason:t,currentIndex:i,nextIndex:a,currentValue:r?.value||"",nextValue:o?.value||""},bubbles:!0,composed:!0}))}_isStepInvalid(t,e){if(!t||t.node.hasAttribute("invalid")||v(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,o)=>{const s=o===e,n=this._panelId(o),l=this._tabId(o),d=this._visited.has(r.value);r.node.id=n,r.node.setAttribute("role","tabpanel"),r.node.getAttribute("aria-labelledby")===l&&r.node.removeAttribute("aria-labelledby"),!(r.node.hasAttribute("aria-labelledby")||r.node.hasAttribute("aria-label")&&!r.node.hasAttribute(w))&&r.title&&(r.node.setAttribute("aria-label",r.title),r.node.setAttribute(w,"")),r.node.setAttribute("tabindex",s?"0":"-1"),r.node.setAttribute("data-active",s?"true":"false"),r.node.setAttribute("aria-hidden",s?"false":"true"),r.node.setAttribute("data-keep-mounted",i?"true":"false"),r.node.setAttribute("data-visible",s?"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=!s})}_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 o=t[e],s=i>e;if(s&&o&&this._isStepInvalid(o,e))return this._dispatchBlockedNext("validation",t,e,i),!1;const n=new CustomEvent("before-change",{detail:{currentIndex:e,nextIndex:i,currentValue:o?.value||"",nextValue:r.value,trigger:a},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(n))return!1;this._lastDirection=s?"forward":"backward",this.value=r.value;const l={index:i,value:r.value,title:r.title,trigger:a};return this.dispatchEvent(new CustomEvent("input",{detail:l,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("step-change",{detail:l,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(){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 i={index:e,value:t[e]?.value||"",title:t[e]?.title||""};return this.dispatchEvent(new CustomEvent("complete",{detail:i,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(),o=this._activeIndex(r);this._attemptChange(r,o,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?.closest(".step");if(!s)return;const n=this._stepButtons.filter(d=>!d.disabled);if(!n.length)return;const l=n.indexOf(s);if(!(l<0)){if(t.key===a){t.preventDefault(),n[(l+1)%n.length].focus();return}if(t.key===r){t.preventDefault(),n[(l-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(),s.click())}}_syncValueUi(){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((s,n)=>{const l=n===e,d=this._visualStatus(t[n],n,e);s.setAttribute("data-active",l?"true":"false"),s.setAttribute("data-status",d),s.setAttribute("aria-selected",l?"true":"false"),s.setAttribute("tabindex",l?"0":"-1");const p=s.querySelector(".step-badge");p&&(d==="complete"||d==="success"?p.textContent="✓":d==="warning"?p.textContent="!":d==="error"?p.textContent="×":p.textContent=String(n+1));const h=s.closest(".step-item");h&&(h.setAttribute("data-status",d),h.setAttribute("data-complete",n<e?"true":"false"),h.setAttribute("data-current",l?"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 s=e>=i-1,n=this.getAttribute("next-label")||"Next",l=this.getAttribute("finish-label")||"Finish";this._nextBtn.textContent=s?l:n,this._nextBtn.setAttribute("data-loading",r?"true":"false"),this._nextBtn.disabled=r||e<0||t[e]?.disabled===!0}const o=this.root.querySelector(".frame");o&&o.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,o=this.getAttribute("show-progress")!=="false"&&t.length>0,s=this.getAttribute("stepper-position")==="bottom"?"bottom":"top",n=this.hasAttribute("hide-controls")||t.length===0,l=this.getAttribute("prev-label")||"Previous",d=this.getAttribute("next-label")||"Next",p=this.getAttribute("finish-label")||"Finish",h=this.getAttribute("empty-label")||'No wizard steps configured. Add elements with slot="step".',m=r?`
           <div
             class="stepper"
             part="stepper"
@@ -616,15 +616,14 @@
             aria-orientation="${this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}"
             aria-label="${c(this.getAttribute("aria-label")||"Wizard steps")}"
           >
-            ${t.map((b,u)=>{const f=this._visualStatus(b,u,e),y=this._tabId(u),_=this._panelId(u),A=f==="complete"||f==="success"?"✓":f==="warning"?"!":f==="error"?"×":String(u+1);return`
+            ${t.map((b,u)=>{const f=this._visualStatus(b,u,e),_=this._tabId(u);this._panelId(u);const A=f==="complete"||f==="success"?"✓":f==="warning"?"!":f==="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="${f}" data-complete="${u<e?"true":"false"}" data-current="${u===e?"true":"false"}">
                     <button
                       type="button"
                       class="step"
                       part="step"
-                      id="${y}"
+                      id="${_}"
                       role="tab"
-                      aria-controls="${_}"
                       data-index="${u}"
                       data-active="${u===e?"true":"false"}"
                       data-status="${f}"
@@ -642,8 +641,8 @@
                   </div>
                 `}).join("")}
           </div>
-        `:'<div class="stepper" hidden></div>',x=e<=0,z=e>=t.length-1;this.setContent(`
-      <style>${$}</style>
+        `:'<div class="stepper" hidden></div>',z=e<=0,y=e>=t.length-1;this.setContent(`
+      <style>${C}</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>
@@ -668,10 +667,10 @@
         <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(l)}</button>
-            <button type="button" class="btn primary btn-next" part="button-next" data-loading="${this._isBusy()?"true":"false"}">${c(z?p:d)}</button>
+            <button type="button" class="btn btn-prev" part="button-prev" ${z?"disabled":""}>${c(l)}</button>
+            <button type="button" class="btn primary btn-next" part="button-next" data-loading="${this._isBusy()?"true":"false"}">${c(y?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;
+    `),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",x);exports.UIWizard=x;

package/dist/wizard.esm.js

@@ -5,11 +5,11 @@ const k = `
     --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-muted: var(--ui-color-muted, #526175);
     --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-success: var(--ui-color-success, #15803d);
+    --ui-wizard-warning: var(--ui-color-warning, #b45309);
     --ui-wizard-danger: var(--ui-color-danger, #dc2626);
 
     --ui-wizard-radius: 14px;
@@ -618,10 +618,11 @@ function v(g) {
   const t = String(g).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-let $ = 0;
-class C extends A {
+let C = 0;
+const w = "data-ui-wizard-auto-label";
+class $ 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);
+    super(), this._observer = null, this._instanceId = ++C, 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 [
@@ -787,7 +788,7 @@ class C extends A {
     const i = this.hasAttribute("keep-mounted"), a = this._isAnimationEnabled();
     this._markVisited(t, e), t.forEach((r, o) => {
       const s = o === e, n = this._panelId(o), l = this._tabId(o), d = this._visited.has(r.value);
-      r.node.id = n, r.node.setAttribute("role", "tabpanel"), r.node.setAttribute("aria-labelledby", l), r.node.setAttribute("tabindex", s ? "0" : "-1"), r.node.setAttribute("data-active", s ? "true" : "false"), r.node.setAttribute("aria-hidden", s ? "false" : "true"), r.node.setAttribute(
+      r.node.id = n, r.node.setAttribute("role", "tabpanel"), r.node.getAttribute("aria-labelledby") === l && r.node.removeAttribute("aria-labelledby"), !(r.node.hasAttribute("aria-labelledby") || r.node.hasAttribute("aria-label") && !r.node.hasAttribute(w)) && r.title && (r.node.setAttribute("aria-label", r.title), r.node.setAttribute(w, "")), r.node.setAttribute("tabindex", s ? "0" : "-1"), r.node.setAttribute("data-active", s ? "true" : "false"), r.node.setAttribute("aria-hidden", s ? "false" : "true"), r.node.setAttribute(
         "data-keep-mounted",
         i ? "true" : "false"
       ), r.node.setAttribute("data-visible", s ? "true" : "false"), r.node.setAttribute("data-visited", d ? "true" : "false"), r.node.setAttribute(
@@ -964,16 +965,17 @@ class C extends A {
             aria-label="${c(this.getAttribute("aria-label") || "Wizard steps")}"
           >
             ${t.map((b, u) => {
-      const f = this._visualStatus(b, u, e), z = this._tabId(u), y = this._panelId(u), _ = f === "complete" || f === "success" ? "✓" : f === "warning" ? "!" : f === "error" ? "×" : String(u + 1);
+      const f = this._visualStatus(b, u, e), y = this._tabId(u);
+      this._panelId(u);
+      const _ = f === "complete" || f === "success" ? "✓" : f === "warning" ? "!" : f === "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="${f}" data-complete="${u < e ? "true" : "false"}" data-current="${u === e ? "true" : "false"}">
                     <button
                       type="button"
                       class="step"
                       part="step"
-                      id="${z}"
+                      id="${y}"
                       role="tab"
-                      aria-controls="${y}"
                       data-index="${u}"
                       data-active="${u === e ? "true" : "false"}"
                       data-status="${f}"
@@ -992,7 +994,7 @@ class C extends A {
                 `;
     }).join("")}
           </div>
-        ` : '<div class="stepper" hidden></div>', w = e <= 0, x = e >= t.length - 1;
+        ` : '<div class="stepper" hidden></div>', x = e <= 0, z = 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"}">
@@ -1019,8 +1021,8 @@ class C extends A {
         <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(l)}</button>
-            <button type="button" class="btn primary btn-next" part="button-next" data-loading="${this._isBusy() ? "true" : "false"}">${c(x ? p : d)}</button>
+            <button type="button" class="btn btn-prev" part="button-prev" ${x ? "disabled" : ""}>${c(l)}</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>
@@ -1042,7 +1044,7 @@ class C extends A {
     ), this._syncValueUi();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-wizard") && customElements.define("ui-wizard", C);
+typeof customElements < "u" && !customElements.get("ui-wizard") && customElements.define("ui-wizard", $);
 export {
-  C as UIWizard
+  $ as UIWizard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/ui-core",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Framework-agnostic Web Components and primitives for the Editora UI ecosystem",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",