@editora/ui-core 0.2.0 → 0.2.1

package/dist/dock.esm.js

@@ -639,7 +639,7 @@ class G extends M {
       const { el: i, iconEl: c, labelEl: o, badgeEl: l, sticky: h } = n;
       i.setAttribute("data-ui-dock-item", ""), i.style.setProperty("position", "relative"), i.style.setProperty("display", "inline-flex"), i.style.setProperty("align-items", "center"), i.style.setProperty("justify-content", "center"), i.style.setProperty("inline-size", "var(--ui-dock-item-size)"), i.style.setProperty("block-size", "var(--ui-dock-item-size)"), i.style.setProperty("min-inline-size", "var(--ui-dock-item-size)"), i.style.setProperty("min-block-size", "var(--ui-dock-item-size)"), i.style.setProperty("flex", "0 0 var(--ui-dock-item-size)"), i.style.setProperty("box-sizing", "border-box"), i.style.setProperty("background", "transparent"), i.style.setProperty("border", "none"), i.style.setProperty("padding", "0"), i.style.setProperty("margin", "0"), i.style.setProperty("color", "inherit"), i.style.setProperty("text-decoration", "none"), i.style.setProperty("outline", "none"), i.style.setProperty("cursor", n.disabled ? "not-allowed" : "pointer"), i.style.setProperty("transform-origin", a === "horizontal" ? "center bottom" : "center center"), i.style.setProperty("touch-action", "manipulation"), i.hasAttribute("tabindex") || (i.tabIndex = -1);
       const r = i.getAttribute("aria-label"), d = this._itemNames.get(i), u = d && d.composed === r ? d.base : r || o?.textContent?.trim() || i.getAttribute("data-label") || i.getAttribute("title") || "", m = l?.textContent?.trim() ?? "", f = u && m && !u.includes(m) ? `${u}, ${m}` : u;
-      f && (f !== r && i.setAttribute("aria-label", f), this._itemNames.set(i, { base: u, composed: f })), h ? i.setAttribute("data-dock-current", "true") : i.removeAttribute("data-dock-current"), c && (c.style.setProperty("display", "inline-flex"), c.style.setProperty("align-items", "center"), c.style.setProperty("justify-content", "center"), c.style.setProperty("inline-size", "100%"), c.style.setProperty("block-size", "100%"), c.style.setProperty("border-radius", "var(--ui-dock-item-radius)"), c.style.setProperty("background", "var(--ui-dock-item-bg)"), c.style.setProperty("border", "1px solid var(--ui-dock-item-border)"), c.style.setProperty("box-shadow", "var(--ui-dock-item-shadow)"), c.style.setProperty("backdrop-filter", "var(--ui-dock-item-backdrop)"), c.style.setProperty("font-size", "var(--ui-dock-icon-size)"), c.style.setProperty("color", "inherit"), c.style.setProperty("overflow", "hidden"), c.style.setProperty("box-sizing", "border-box")), o && (o.setAttribute("aria-hidden", "true"), o.style.setProperty("position", "absolute"), o.style.setProperty("pointer-events", "none"), o.style.setProperty("white-space", "nowrap"), o.style.setProperty("padding", "var(--ui-dock-label-padding)"), o.style.setProperty("border-radius", "var(--ui-dock-label-radius)"), o.style.setProperty("background", "var(--ui-dock-label-bg)"), o.style.setProperty("color", "var(--ui-dock-label-color)"), o.style.setProperty("border", "1px solid var(--ui-dock-label-border)"), o.style.setProperty("box-shadow", "var(--ui-dock-label-shadow)"), o.style.setProperty("backdrop-filter", "var(--ui-dock-label-backdrop)"), o.style.setProperty("font-size", "var(--ui-dock-label-font-size)"), o.style.setProperty("font-weight", "var(--ui-dock-label-font-weight)"), o.style.setProperty("line-height", "1.2"), o.style.setProperty("letter-spacing", "0.01em"), o.style.setProperty("min-inline-size", "max-content"), o.style.setProperty("z-index", "3"), o.style.setProperty("display", t === "none" ? "none" : "inline-flex"), o.style.removeProperty("top"), o.style.removeProperty("bottom"), o.style.removeProperty("left"), o.style.removeProperty("right"), e === "top" ? (o.style.setProperty("left", "50%"), o.style.setProperty("bottom", "calc(100% + var(--ui-dock-label-offset))")) : e === "bottom" ? (o.style.setProperty("left", "50%"), o.style.setProperty("top", "calc(100% + var(--ui-dock-label-offset))")) : e === "start" ? (o.style.setProperty("right", "calc(100% + var(--ui-dock-label-offset))"), o.style.setProperty("top", "50%")) : (o.style.setProperty("left", "calc(100% + var(--ui-dock-label-offset))"), o.style.setProperty("top", "50%"))), l && (l.setAttribute("aria-hidden", "true"), l.style.setProperty("position", "absolute"), l.style.setProperty("inset-inline-end", "-2px"), l.style.setProperty("inset-block-start", "-2px"), l.style.setProperty("display", "inline-flex"), l.style.setProperty("align-items", "center"), l.style.setProperty("justify-content", "center"), l.style.setProperty("min-inline-size", "18px"), l.style.setProperty("min-block-size", "18px"), l.style.setProperty("padding", "0 6px"), l.style.setProperty("border-radius", "999px"), l.style.setProperty("background", "var(--ui-dock-accent)"), l.style.setProperty("color", "#ffffff"), l.style.setProperty("font-size", "11px"), l.style.setProperty("font-weight", "700"), l.style.setProperty("box-shadow", "none"), l.style.setProperty("z-index", "4"));
+      f && (f !== r && i.setAttribute("aria-label", f), this._itemNames.set(i, { base: u, composed: f })), h ? i.setAttribute("data-dock-current", "true") : i.removeAttribute("data-dock-current"), c && (c.style.setProperty("display", "inline-flex"), c.style.setProperty("align-items", "center"), c.style.setProperty("justify-content", "center"), c.style.setProperty("inline-size", "100%"), c.style.setProperty("block-size", "100%"), c.style.setProperty("border-radius", "var(--ui-dock-item-radius)"), c.style.setProperty("background", "var(--ui-dock-item-bg)"), c.style.setProperty("border", "1px solid var(--ui-dock-item-border)"), c.style.setProperty("box-shadow", "var(--ui-dock-item-shadow)"), c.style.setProperty("backdrop-filter", "var(--ui-dock-item-backdrop)"), c.style.setProperty("font-size", "var(--ui-dock-icon-size)"), c.style.setProperty("color", "inherit"), c.style.setProperty("overflow", "hidden"), c.style.setProperty("box-sizing", "border-box")), o && (o.setAttribute("aria-hidden", "true"), o.style.setProperty("position", "absolute"), o.style.setProperty("pointer-events", "none"), o.style.setProperty("white-space", "nowrap"), o.style.setProperty("padding", "var(--ui-dock-label-padding)"), o.style.setProperty("border-radius", "var(--ui-dock-label-radius)"), o.style.setProperty("background", "var(--ui-dock-label-bg)"), o.style.setProperty("color", "var(--ui-dock-label-color)"), o.style.setProperty("border", "1px solid var(--ui-dock-label-border)"), o.style.setProperty("box-shadow", "var(--ui-dock-label-shadow)"), o.style.setProperty("backdrop-filter", "var(--ui-dock-label-backdrop)"), o.style.setProperty("font-size", "var(--ui-dock-label-font-size)"), o.style.setProperty("font-weight", "var(--ui-dock-label-font-weight)"), o.style.setProperty("line-height", "1.2"), o.style.setProperty("letter-spacing", "0.01em"), o.style.setProperty("min-inline-size", "max-content"), o.style.setProperty("z-index", "3"), o.style.setProperty("display", t === "none" ? "none" : "inline-flex"), o.style.removeProperty("top"), o.style.removeProperty("bottom"), o.style.removeProperty("left"), o.style.removeProperty("right"), e === "top" ? (o.style.setProperty("left", "50%"), o.style.setProperty("bottom", "calc(100% + var(--ui-dock-label-offset))")) : e === "bottom" ? (o.style.setProperty("left", "50%"), o.style.setProperty("top", "calc(100% + var(--ui-dock-label-offset))")) : e === "start" ? (o.style.setProperty("right", "calc(100% + var(--ui-dock-label-offset))"), o.style.setProperty("top", "50%")) : (o.style.setProperty("left", "calc(100% + var(--ui-dock-label-offset))"), o.style.setProperty("top", "50%"))), l && (l.setAttribute("aria-hidden", "true"), l.style.setProperty("position", "absolute"), l.style.setProperty("inset-inline-end", "-2px"), l.style.setProperty("inset-block-start", "-2px"), l.style.setProperty("display", "inline-flex"), l.style.setProperty("align-items", "center"), l.style.setProperty("justify-content", "center"), l.style.setProperty("min-inline-size", "18px"), l.style.setProperty("min-block-size", "18px"), l.style.setProperty("padding", "0 6px"), l.style.setProperty("border-radius", "999px"), l.style.setProperty("background", "var(--ui-dock-accent)"), l.style.setProperty("color", "var(--ui-color-foreground-on-primary, #ffffff)"), l.style.setProperty("font-size", "11px"), l.style.setProperty("font-weight", "700"), l.style.setProperty("box-shadow", "none"), l.style.setProperty("z-index", "4"));
     });
   }
   _syncTabIndices() {

package/dist/dropdown.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),w=require("./overlay-motion-B56x1GoY.js"),k=require("./trigger-DkPsKxsP.js"),A=require("./menu-item-styles-B4onAr4C.js"),l=['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", "),S=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),w=require("./overlay-motion-B56x1GoY.js"),k=require("./trigger-DkPsKxsP.js"),A=require("./menu-item-styles-DUdyjQ7i.js"),l=['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", "),S=`
   ${w.OVERLAY_MOTION_CSS}
 
   :host {

package/dist/dropdown.esm.js

@@ -1,7 +1,7 @@
 import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
 import { O as x, s as y } from "./overlay-motion-BX3dPLay.mjs";
 import { r as k } from "./trigger-BjnxLCeQ.mjs";
-import { c as A } from "./menu-item-styles-IGSFLAHu.mjs";
+import { c as A } from "./menu-item-styles-CdqxPUuw.mjs";
 const l = [
   '[role="menuitem"]',
   '[role="menuitemcheckbox"]',

package/dist/field-error.cjs.js

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-DxbvhLJs.js"),u=`
   :host {
-    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-field-error-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-field-error-size: 12px;
     --ui-field-error-weight: 600;
     --ui-field-error-line-height: 1.45;

package/dist/field-error.esm.js

@@ -1,7 +1,7 @@
 import { E as d } from "./ElementBase-BeZT54Hj.mjs";
 const l = `
   :host {
-    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-field-error-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-field-error-size: 12px;
     --ui-field-error-weight: 600;
     --ui-field-error-line-height: 1.45;
@@ -76,8 +76,8 @@ function u(e, r) {
 function c(e) {
   return Array.from(new Set(e.filter(Boolean)));
 }
-function a(e, r, i, t) {
-  const o = (e.getAttribute(r) || "").split(/\s+/).filter(Boolean), s = t ? c([...o, i]) : o.filter((n) => n !== i);
+function a(e, r, t, i) {
+  const o = (e.getAttribute(r) || "").split(/\s+/).filter(Boolean), s = i ? c([...o, t]) : o.filter((n) => n !== t);
   s.length ? e.setAttribute(r, s.join(" ")) : e.removeAttribute(r);
 }
 class f extends d {
@@ -93,8 +93,8 @@ class f extends d {
   disconnectedCallback() {
     this._clearAssociation(), super.disconnectedCallback();
   }
-  attributeChangedCallback(r, i, t) {
-    i !== t && (r === "for" || r === "active" || r === "hidden") && this._syncAssociation();
+  attributeChangedCallback(r, t, i) {
+    t !== i && (r === "for" || r === "active" || r === "hidden") && this._syncAssociation();
   }
   render() {
     this.setContent(`
@@ -105,8 +105,8 @@ class f extends d {
   _resolveTarget() {
     const r = this.getAttribute("for");
     if (!r) return null;
-    const i = this.getRootNode();
-    return i instanceof Document || i instanceof ShadowRoot ? i.getElementById(r) : document.getElementById(r);
+    const t = this.getRootNode();
+    return t instanceof Document || t instanceof ShadowRoot ? t.getElementById(r) : document.getElementById(r);
   }
   _clearAssociation() {
     this._target && this._errorId && (a(this._target, "aria-describedby", this._errorId, !1), this._target.getAttribute("aria-errormessage") === this._errorId && this._target.removeAttribute("aria-errormessage"), this._target.getAttribute("aria-invalid") === "true" && !this._target.hasAttribute("data-ui-invalid-persist") && this._target.removeAttribute("aria-invalid")), this._target = null;

package/dist/field.cjs.js

@@ -9,7 +9,7 @@
     --ui-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-field-error-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-field-border: 0;
     --ui-field-shadow:

package/dist/field.esm.js

@@ -10,7 +10,7 @@ const N = `
     --ui-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-field-error-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-field-border: 0;
     --ui-field-shadow:
@@ -386,13 +386,13 @@ function C(r) {
 }
 function A(r) {
   if (!r) return !1;
-  const i = r.assignedNodes({ flatten: !0 });
-  return i.length ? i.some((t) => t.nodeType === Node.TEXT_NODE ? !!t.textContent?.trim() : t.nodeType === Node.ELEMENT_NODE) : !1;
+  const t = r.assignedNodes({ flatten: !0 });
+  return t.length ? t.some((i) => i.nodeType === Node.TEXT_NODE ? !!i.textContent?.trim() : i.nodeType === Node.ELEMENT_NODE) : !1;
 }
 function x(r) {
   if (r.hasAttribute("disabled") || r.getAttribute("aria-disabled") === "true" || r.getAttribute("tabindex") === "-1") return !1;
-  const i = window.getComputedStyle(r);
-  return !(i.display === "none" || i.visibility === "hidden");
+  const t = window.getComputedStyle(r);
+  return !(t.display === "none" || t.visibility === "hidden");
 }
 function D(r) {
   return !!r.closest(
@@ -431,25 +431,25 @@ class M extends $ {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("slotchange", this._onSlotChange), super.disconnectedCallback();
   }
-  attributeChangedCallback(i, t, l) {
-    if (t !== l) {
-      if (i === "for" && this._invalidateControlCache(), i === "label-width") {
+  attributeChangedCallback(t, i, l) {
+    if (i !== l) {
+      if (t === "for" && this._invalidateControlCache(), t === "label-width") {
         const o = this.getAttribute("label-width");
         o ? this.style.setProperty("--ui-field-label-width", o) : this.style.removeProperty("--ui-field-label-width");
       }
-      if (i === "label" || i === "description" || i === "error" || i === "required" || i === "for") {
+      if (t === "label" || t === "description" || t === "error" || t === "required" || t === "for") {
         this.isConnected && this.requestRender();
         return;
       }
-      i === "invalid" && this._scheduleDerivedStateSync();
+      t === "invalid" && this._scheduleDerivedStateSync();
     }
   }
   _onSlotChange() {
     this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  _onRootClick(i) {
-    const t = i.target;
-    t && t.closest(".label") && (D(t) || this._focusControl());
+  _onRootClick(t) {
+    const i = t.target;
+    i && i.closest(".label") && (D(i) || this._focusControl());
   }
   _invalidateControlCache() {
     this._controlCache = null;
@@ -460,20 +460,20 @@ class M extends $ {
     }));
   }
   _focusControl() {
-    const i = this._resolveControlElement();
-    if (i)
+    const t = this._resolveControlElement();
+    if (t)
       try {
-        i.focus({ preventScroll: !0 });
+        t.focus({ preventScroll: !0 });
       } catch {
-        i.focus();
+        t.focus();
       }
   }
   _resolveControlElement() {
     if (this._controlCache && this._controlCache.isConnected && x(this._controlCache))
       return this._controlCache;
-    const i = this.getAttribute("for");
-    if (i) {
-      const e = document.getElementById(i);
+    const t = this.getAttribute("for");
+    if (t) {
+      const e = document.getElementById(t);
       if (e instanceof HTMLElement && x(e))
         return this._controlCache = e, e;
     }
@@ -490,9 +490,9 @@ class M extends $ {
     return o && x(o) ? (this._controlCache = o, o) : null;
   }
   _syncDerivedState() {
-    const i = this.root.querySelector('slot[name="label"]'), t = this.root.querySelector('slot[name="actions"]'), l = this.root.querySelector('slot[name="description"]'), o = this.root.querySelector('slot[name="error"]'), e = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), y = (this.getAttribute("error") || "").trim(), n = !!e || A(i), d = A(t), h = !!a || A(l), b = !!y || A(o), w = n || d || h, E = n || d, c = this.root.querySelector(".meta"), p = this.root.querySelector(".label-row"), g = this.root.querySelector(".label"), v = this.root.querySelector(".actions"), u = this.root.querySelector(".description"), m = this.root.querySelector(".error");
+    const t = this.root.querySelector('slot[name="label"]'), i = this.root.querySelector('slot[name="actions"]'), l = this.root.querySelector('slot[name="description"]'), o = this.root.querySelector('slot[name="error"]'), e = (this.getAttribute("label") || "").trim(), a = (this.getAttribute("description") || "").trim(), y = (this.getAttribute("error") || "").trim(), n = !!e || A(t), d = A(i), h = !!a || A(l), b = !!y || A(o), w = n || d || h, E = n || d, c = this.root.querySelector(".meta"), p = this.root.querySelector(".label-row"), g = this.root.querySelector(".label"), v = this.root.querySelector(".actions"), u = this.root.querySelector(".description"), m = this.root.querySelector(".error");
     c && (w ? c.removeAttribute("hidden") : c.setAttribute("hidden", "")), p && (E ? p.removeAttribute("hidden") : p.setAttribute("hidden", "")), g && (n ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), v && (d ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), u && (h ? u.removeAttribute("hidden") : u.setAttribute("hidden", "")), m && (b ? m.removeAttribute("hidden") : m.setAttribute("hidden", ""));
-    const T = i ? i.assignedNodes({ flatten: !0 }).map((f) => f.textContent || "").join(" ") : "", s = (f) => f.replace(/\s+/g, " ").trim(), q = (f) => f ? f.assignedNodes({ flatten: !0 }).map((B) => B.textContent || "").join(" ") : "", I = h ? s(a || q(l)) : "", R = b ? s(y || q(o)) : "";
+    const T = t ? t.assignedNodes({ flatten: !0 }).map((f) => f.textContent || "").join(" ") : "", s = (f) => f.replace(/\s+/g, " ").trim(), q = (f) => f ? f.assignedNodes({ flatten: !0 }).map((B) => B.textContent || "").join(" ") : "", I = h ? s(a || q(l)) : "", R = b ? s(y || q(o)) : "";
     this._syncControlA11y(
       n,
       s(e || T),
@@ -500,13 +500,13 @@ class M extends $ {
       b
     );
   }
-  _syncControlA11y(i, t, l, o) {
+  _syncControlA11y(t, i, l, o) {
     const e = this._resolveControlElement();
     if (!e) return;
     const a = `${this._uid}-label`, y = `${this._uid}-description`, n = `${this._uid}-error`, d = (e.getAttribute("aria-labelledby") || "").split(/\s+/).filter((s) => s && s !== a), h = e.getRootNode(), b = d.some((s) => !!h.getElementById?.(s)), w = k(d);
     w.length ? e.setAttribute("aria-labelledby", w.join(" ")) : e.removeAttribute("aria-labelledby");
     const E = e.hasAttribute("aria-label") && !e.hasAttribute(_), c = e.labels, p = (e.getAttribute("label") || "").trim().length > 0, g = (e.textContent || "").trim().length > 0, v = b || E || p || g || !!(c && c.length > 0);
-    i && t && !v ? (e.setAttribute("aria-label", t), e.setAttribute(_, "")) : e.hasAttribute(_) && (e.removeAttribute("aria-label"), e.removeAttribute(_));
+    t && i && !v ? (e.setAttribute("aria-label", i), e.setAttribute(_, "")) : e.hasAttribute(_) && (e.removeAttribute("aria-label"), e.removeAttribute(_));
     const u = k(
       (e.getAttribute("aria-describedby") || "").split(/\s+/).filter((s) => s && s !== y && s !== n)
     );
@@ -515,20 +515,20 @@ class M extends $ {
     l && !m ? (e.setAttribute("aria-description", l), e.setAttribute(S, "")) : e.hasAttribute(S) && (e.removeAttribute("aria-description"), e.removeAttribute(S)), this.hasAttribute("invalid") || o ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), this.hasAttribute("required") ? e.setAttribute("aria-required", "true") : e.removeAttribute("aria-required");
   }
   render() {
-    const i = this.getAttribute("label") || "", t = this.getAttribute("description") || "", l = this.getAttribute("error") || "", o = this.hasAttribute("required"), e = this.getAttribute("for") || "";
+    const t = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = this.getAttribute("error") || "", o = this.hasAttribute("required"), e = this.getAttribute("for") || "";
     this.setContent(`
       <style>${N}</style>
       <div class="frame" part="field">
         <div class="meta" part="meta">
           <div class="label-row" part="top">
             <label class="label" id="${this._uid}-label" ${e ? `for="${C(e)}"` : ""}>
-              <slot name="label">${C(i)}</slot>
+              <slot name="label">${C(t)}</slot>
               ${o ? '<span class="required" aria-hidden="true">*</span>' : ""}
             </label>
             <div class="actions" part="actions"><slot name="actions"></slot></div>
           </div>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${C(t)}</slot>
+            <slot name="description">${C(i)}</slot>
           </p>
         </div>
 
@@ -543,8 +543,8 @@ class M extends $ {
       </div>
     `), this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  shouldRenderOnAttributeChange(i, t, l) {
-    return i === "label" || i === "description" || i === "error" || i === "required" || i === "for";
+  shouldRenderOnAttributeChange(t, i, l) {
+    return t === "label" || t === "description" || t === "error" || t === "required" || t === "for";
   }
 }
 typeof customElements < "u" && !customElements.get("ui-field") && customElements.define("ui-field", M);

package/dist/fieldset.cjs.js

@@ -5,7 +5,7 @@
     --ui-fieldset-bg: transparent;
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-fieldset-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-fieldset-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent));
     --ui-fieldset-border: 0;
     --ui-fieldset-shadow: none;
@@ -193,7 +193,7 @@
       box-shadow: none;
     }
   }
-`;function a(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function d(i,e){return i.id||(i.id=`ui-fieldset-${e}-${Math.random().toString(36).slice(2,9)}`),i.id}function q(i){return Array.from(new Set(i.filter(Boolean)))}class m extends S.ElementBase{constructor(){super(...arguments),this._stateSyncQueued=!1,this._onSlotChange=()=>{this._updateVisibility(),this._scheduleStateSync()}}static get observedAttributes(){return["legend","description","error","required","invalid","orientation","variant","tone","density","shape","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleStateSync()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="legend"||e==="description"||e==="error"||e==="required"){this.isConnected&&this.requestRender();return}e==="invalid"&&this._scheduleStateSync()}}render(){const e=this.getAttribute("legend")||"",t=this.getAttribute("description")||"",r=this.getAttribute("error")||"",o=this.hasAttribute("required");this.setContent(`
+`;function a(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(r){if(!r)return!1;const e=r.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function d(r,e){return r.id||(r.id=`ui-fieldset-${e}-${Math.random().toString(36).slice(2,9)}`),r.id}function q(r){return Array.from(new Set(r.filter(Boolean)))}class m extends S.ElementBase{constructor(){super(...arguments),this._stateSyncQueued=!1,this._onSlotChange=()=>{this._updateVisibility(),this._scheduleStateSync()}}static get observedAttributes(){return["legend","description","error","required","invalid","orientation","variant","tone","density","shape","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleStateSync()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(e==="legend"||e==="description"||e==="error"||e==="required"){this.isConnected&&this.requestRender();return}e==="invalid"&&this._scheduleStateSync()}}render(){const e=this.getAttribute("legend")||"",t=this.getAttribute("description")||"",i=this.getAttribute("error")||"",o=this.hasAttribute("required");this.setContent(`
       <style>${A}</style>
       <fieldset class="frame" part="frame">
         <div class="legend-row">
@@ -212,10 +212,10 @@
           <slot></slot>
         </div>
         <p class="error" part="error">
-          <slot name="error">${r?a(r):""}</slot>
+          <slot name="error">${i?a(i):""}</slot>
         </p>
         <div class="footer" part="footer">
           <slot name="footer"></slot>
         </div>
       </fieldset>
-    `),this._updateVisibility(),this._syncAria()}_scheduleStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncAria()}))}_updateVisibility(){const e=this.root.querySelector('slot[name="legend"]'),t=this.root.querySelector('slot[name="description"]'),r=this.root.querySelector('slot[name="actions"]'),o=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="footer"]'),l=!!this.getAttribute("legend")||s(e),v=!!this.getAttribute("description")||s(t),c=s(r),y=!!this.getAttribute("error")||s(o),x=s(n),u=this.root.querySelector(".legend-row"),f=this.root.querySelector(".legend"),h=this.root.querySelector(".actions"),g=this.root.querySelector(".description"),p=this.root.querySelector(".error"),b=this.root.querySelector(".footer");u&&u.toggleAttribute("hidden",!l&&!c),f&&f.toggleAttribute("hidden",!l),h&&h.toggleAttribute("hidden",!c),g&&g.toggleAttribute("hidden",!v),p&&p.toggleAttribute("hidden",!y),b&&b.toggleAttribute("hidden",!x)}_syncAria(){const e=this.root.querySelector(".frame"),t=this.root.querySelector(".legend"),r=this.root.querySelector(".description"),o=this.root.querySelector(".error");if(!e)return;t&&!t.hasAttribute("hidden")?e.setAttribute("aria-labelledby",d(t,"legend")):e.removeAttribute("aria-labelledby");const n=q([r&&!r.hasAttribute("hidden")?d(r,"description"):"",o&&!o.hasAttribute("hidden")?d(o,"error"):""]);n.length?e.setAttribute("aria-describedby",n.join(" ")):e.removeAttribute("aria-describedby"),this.hasAttribute("invalid")||o&&!o.hasAttribute("hidden")?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")}}typeof customElements<"u"&&!customElements.get("ui-fieldset")&&customElements.define("ui-fieldset",m);exports.UIFieldset=m;
+    `),this._updateVisibility(),this._syncAria()}_scheduleStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncAria()}))}_updateVisibility(){const e=this.root.querySelector('slot[name="legend"]'),t=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="actions"]'),o=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="footer"]'),l=!!this.getAttribute("legend")||s(e),v=!!this.getAttribute("description")||s(t),c=s(i),y=!!this.getAttribute("error")||s(o),x=s(n),u=this.root.querySelector(".legend-row"),f=this.root.querySelector(".legend"),h=this.root.querySelector(".actions"),g=this.root.querySelector(".description"),p=this.root.querySelector(".error"),b=this.root.querySelector(".footer");u&&u.toggleAttribute("hidden",!l&&!c),f&&f.toggleAttribute("hidden",!l),h&&h.toggleAttribute("hidden",!c),g&&g.toggleAttribute("hidden",!v),p&&p.toggleAttribute("hidden",!y),b&&b.toggleAttribute("hidden",!x)}_syncAria(){const e=this.root.querySelector(".frame"),t=this.root.querySelector(".legend"),i=this.root.querySelector(".description"),o=this.root.querySelector(".error");if(!e)return;t&&!t.hasAttribute("hidden")?e.setAttribute("aria-labelledby",d(t,"legend")):e.removeAttribute("aria-labelledby");const n=q([i&&!i.hasAttribute("hidden")?d(i,"description"):"",o&&!o.hasAttribute("hidden")?d(o,"error"):""]);n.length?e.setAttribute("aria-describedby",n.join(" ")):e.removeAttribute("aria-describedby"),this.hasAttribute("invalid")||o&&!o.hasAttribute("hidden")?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")}}typeof customElements<"u"&&!customElements.get("ui-fieldset")&&customElements.define("ui-fieldset",m);exports.UIFieldset=m;

package/dist/fieldset.esm.js

@@ -6,7 +6,7 @@ const S = `
     --ui-fieldset-bg: transparent;
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
+    --ui-fieldset-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #c81e1e)));
     --ui-fieldset-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent));
     --ui-fieldset-border: 0;
     --ui-fieldset-shadow: none;
@@ -280,8 +280,8 @@ class w extends x {
     }));
   }
   _updateVisibility() {
-    const e = this.root.querySelector('slot[name="legend"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="actions"]'), o = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="footer"]'), l = !!this.getAttribute("legend") || s(e), m = !!this.getAttribute("description") || s(t), c = s(i), v = !!this.getAttribute("error") || s(o), y = s(n), u = this.root.querySelector(".legend-row"), f = this.root.querySelector(".legend"), h = this.root.querySelector(".actions"), p = this.root.querySelector(".description"), g = this.root.querySelector(".error"), b = this.root.querySelector(".footer");
-    u && u.toggleAttribute("hidden", !l && !c), f && f.toggleAttribute("hidden", !l), h && h.toggleAttribute("hidden", !c), p && p.toggleAttribute("hidden", !m), g && g.toggleAttribute("hidden", !v), b && b.toggleAttribute("hidden", !y);
+    const e = this.root.querySelector('slot[name="legend"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="actions"]'), o = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="footer"]'), l = !!this.getAttribute("legend") || s(e), m = !!this.getAttribute("description") || s(t), c = s(i), v = !!this.getAttribute("error") || s(o), y = s(n), u = this.root.querySelector(".legend-row"), f = this.root.querySelector(".legend"), h = this.root.querySelector(".actions"), g = this.root.querySelector(".description"), p = this.root.querySelector(".error"), b = this.root.querySelector(".footer");
+    u && u.toggleAttribute("hidden", !l && !c), f && f.toggleAttribute("hidden", !l), h && h.toggleAttribute("hidden", !c), g && g.toggleAttribute("hidden", !m), p && p.toggleAttribute("hidden", !v), b && b.toggleAttribute("hidden", !y);
   }
   _syncAria() {
     const e = this.root.querySelector(".frame"), t = this.root.querySelector(".legend"), i = this.root.querySelector(".description"), o = this.root.querySelector(".error");

package/dist/file-upload.cjs.js

@@ -7,8 +7,8 @@
     --ui-file-upload-text: var(--ui-color-text, #0f172a);
     --ui-file-upload-muted: var(--ui-color-muted, #526175);
     --ui-file-upload-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-file-upload-danger: var(--ui-color-danger, #dc2626);
-    --ui-file-upload-success: var(--ui-color-success, #15803d);
+    --ui-file-upload-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-file-upload-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;

package/dist/file-upload.esm.js

@@ -8,8 +8,8 @@ const M = `
     --ui-file-upload-text: var(--ui-color-text, #0f172a);
     --ui-file-upload-muted: var(--ui-color-muted, #526175);
     --ui-file-upload-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-file-upload-danger: var(--ui-color-danger, #dc2626);
-    --ui-file-upload-success: var(--ui-color-success, #15803d);
+    --ui-file-upload-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-file-upload-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;

package/dist/flex.cjs.js

@@ -8,7 +8,7 @@
     --ui-flex-gap: 0px;
     --ui-flex-row-gap: var(--ui-flex-gap);
     --ui-flex-column-gap: var(--ui-flex-gap);
-    --ui-flex-color: var(--ui-color-text, inherit);
+    --ui-flex-color: inherit;
     color-scheme: light dark;
     display: var(--ui-flex-display);
     color: var(--ui-flex-color);
@@ -49,6 +49,6 @@
       --ui-flex-color: CanvasText;
     }
   }
-`;function x(i){if(!i)return null;const e=i.trim();if(!e.startsWith("{"))return null;try{const s=JSON.parse(e);return!s||typeof s!="object"?null:s}catch{return null}}function f(i){return v[i]||i}function d(i,e){switch(i){case"display":return{"--ui-flex-display":e};case"direction":return{"--ui-flex-direction":e};case"align":return{"--ui-flex-align":e};case"justify":return{"--ui-flex-justify":e};case"wrap":return{"--ui-flex-wrap":e};case"gap":return{"--ui-flex-gap":f(e)};case"rowgap":return{"--ui-flex-row-gap":f(e)};case"columngap":return{"--ui-flex-column-gap":f(e)};default:return{}}}class m extends h.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const e=this.getAttribute("classname")||"";e!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(s=>{s&&this.classList.remove(s)}),e&&e.split(/\s+/).forEach(s=>{s&&this.classList.add(s)}),this._lastClassname=e)}_applyInlineStyles(){this._appliedInlineProps.forEach(e=>this.style.removeProperty(e)),this._appliedInlineProps.clear(),p.forEach(e=>{const s=this.getAttribute(e);if(!s||x(s))return;const o=d(e,s);Object.entries(o).forEach(([n,u])=>{this.style.setProperty(n,u),this._appliedInlineProps.add(n)})})}_buildResponsiveCss(){const e={},s={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),t=x(l);if(!t)return;const a=(c,g)=>{Object.assign(c,d(r,g))};typeof t.initial=="string"&&a(e,t.initial),typeof t.sm=="string"&&a(s.sm,t.sm),typeof t.md=="string"&&a(s.md,t.md),typeof t.lg=="string"&&a(s.lg,t.lg),typeof t.xl=="string"&&a(s.xl,t.xl)});const o=(r,l)=>{const t=Object.entries(l);return t.length?`${r} { ${t.map(([a,c])=>`${a}: ${c};`).join(" ")} }`:""},n=[],u=o(":host",e);return u&&n.push(u),Object.keys(s).forEach(r=>{const l=o(":host",s[r]);l&&n.push(`@media (min-width: ${y[r]}) { ${l} }`)}),n.join(`
+`;function x(i){if(!i)return null;const e=i.trim();if(!e.startsWith("{"))return null;try{const s=JSON.parse(e);return!s||typeof s!="object"?null:s}catch{return null}}function f(i){return v[i]||i}function d(i,e){switch(i){case"display":return{"--ui-flex-display":e};case"direction":return{"--ui-flex-direction":e};case"align":return{"--ui-flex-align":e};case"justify":return{"--ui-flex-justify":e};case"wrap":return{"--ui-flex-wrap":e};case"gap":return{"--ui-flex-gap":f(e)};case"rowgap":return{"--ui-flex-row-gap":f(e)};case"columngap":return{"--ui-flex-column-gap":f(e)};default:return{}}}class m extends h.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const e=this.getAttribute("classname")||"";e!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(s=>{s&&this.classList.remove(s)}),e&&e.split(/\s+/).forEach(s=>{s&&this.classList.add(s)}),this._lastClassname=e)}_applyInlineStyles(){this._appliedInlineProps.forEach(e=>this.style.removeProperty(e)),this._appliedInlineProps.clear(),p.forEach(e=>{const s=this.getAttribute(e);if(!s||x(s))return;const o=d(e,s);Object.entries(o).forEach(([a,u])=>{this.style.setProperty(a,u),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const e={},s={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),t=x(l);if(!t)return;const n=(c,g)=>{Object.assign(c,d(r,g))};typeof t.initial=="string"&&n(e,t.initial),typeof t.sm=="string"&&n(s.sm,t.sm),typeof t.md=="string"&&n(s.md,t.md),typeof t.lg=="string"&&n(s.lg,t.lg),typeof t.xl=="string"&&n(s.xl,t.xl)});const o=(r,l)=>{const t=Object.entries(l);return t.length?`${r} { ${t.map(([n,c])=>`${n}: ${c};`).join(" ")} }`:""},a=[],u=o(":host",e);return u&&a.push(u),Object.keys(s).forEach(r=>{const l=o(":host",s[r]);l&&a.push(`@media (min-width: ${y[r]}) { ${l} }`)}),a.join(`
 `)}render(){this._syncLegacyClassname(),this._applyInlineStyles();const e=this._buildResponsiveCss();this.setContent(`<style>${b}${e?`
 ${e}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(e,s,o){return!0}}typeof customElements<"u"&&!customElements.get("ui-flex")&&customElements.define("ui-flex",m);exports.UIFlex=m;

package/dist/flex.esm.js

@@ -4,7 +4,7 @@ const h = {
   md: "var(--ui-breakpoint-md, 768px)",
   lg: "var(--ui-breakpoint-lg, 1024px)",
   xl: "var(--ui-breakpoint-xl, 1280px)"
-}, p = ["display", "direction", "align", "justify", "wrap", "gap", "rowgap", "columngap"], y = {
+}, c = ["display", "direction", "align", "justify", "wrap", "gap", "rowgap", "columngap"], y = {
   xs: "var(--ui-space-xs, 4px)",
   sm: "var(--ui-space-sm, 8px)",
   md: "var(--ui-space-md, 12px)",
@@ -20,7 +20,7 @@ const h = {
     --ui-flex-gap: 0px;
     --ui-flex-row-gap: var(--ui-flex-gap);
     --ui-flex-column-gap: var(--ui-flex-gap);
-    --ui-flex-color: var(--ui-color-text, inherit);
+    --ui-flex-color: inherit;
     color-scheme: light dark;
     display: var(--ui-flex-display);
     color: var(--ui-flex-color);
@@ -103,7 +103,7 @@ class b extends g {
     super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set();
   }
   static get observedAttributes() {
-    return ["classname", "headless", ...p];
+    return ["classname", "headless", ...c];
   }
   _syncLegacyClassname() {
     const e = this.getAttribute("classname") || "";
@@ -114,7 +114,7 @@ class b extends g {
     }), this._lastClassname = e);
   }
   _applyInlineStyles() {
-    this._appliedInlineProps.forEach((e) => this.style.removeProperty(e)), this._appliedInlineProps.clear(), p.forEach((e) => {
+    this._appliedInlineProps.forEach((e) => this.style.removeProperty(e)), this._appliedInlineProps.clear(), c.forEach((e) => {
       const s = this.getAttribute(e);
       if (!s || x(s)) return;
       const o = d(e, s);
@@ -130,17 +130,17 @@ class b extends g {
       lg: {},
       xl: {}
     };
-    p.forEach((r) => {
+    c.forEach((r) => {
       const l = this.getAttribute(r), t = x(l);
       if (!t) return;
-      const a = (c, m) => {
-        Object.assign(c, d(r, m));
+      const a = (p, m) => {
+        Object.assign(p, d(r, m));
       };
       typeof t.initial == "string" && a(e, t.initial), typeof t.sm == "string" && a(s.sm, t.sm), typeof t.md == "string" && a(s.md, t.md), typeof t.lg == "string" && a(s.lg, t.lg), typeof t.xl == "string" && a(s.xl, t.xl);
     });
     const o = (r, l) => {
       const t = Object.entries(l);
-      return t.length ? `${r} { ${t.map(([a, c]) => `${a}: ${c};`).join(" ")} }` : "";
+      return t.length ? `${r} { ${t.map(([a, p]) => `${a}: ${p};`).join(" ")} }` : "";
     }, n = [], u = o(":host", e);
     return u && n.push(u), Object.keys(s).forEach((r) => {
       const l = o(":host", s[r]);

package/dist/form.cjs.js

@@ -133,25 +133,25 @@
   .status[data-tone="warning"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-warning, #b45309) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-warning, #b45309) 90%, #111827 10%);
+    --ui-form-status-text: var(--ui-color-warning-text, color-mix(in srgb, var(--ui-color-warning, #b45309) 90%, #111827 10%));
   }
 
   .status[data-tone="error"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-danger, #dc2626) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 88%, #111827 12%);
+    --ui-form-status-text: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 88%, #111827 12%));
   }
 
   .status[data-tone="success"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-success, #15803d) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-success, #15803d) 90%, #111827 10%);
+    --ui-form-status-text: var(--ui-color-success-text, color-mix(in srgb, var(--ui-color-success, #15803d) 90%, #111827 10%));
   }
 
   .status[data-tone="loading"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-form-accent) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-form-accent) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-form-accent) 90%, #111827 10%);
+    --ui-form-status-text: color-mix(in srgb, var(--ui-form-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .footer {

package/dist/form.esm.js

@@ -174,25 +174,25 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
   .status[data-tone="warning"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-warning, #b45309) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-warning, #b45309) 90%, #111827 10%);
+    --ui-form-status-text: var(--ui-color-warning-text, color-mix(in srgb, var(--ui-color-warning, #b45309) 90%, #111827 10%));
   }
 
   .status[data-tone="error"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-danger, #dc2626) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 88%, #111827 12%);
+    --ui-form-status-text: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 88%, #111827 12%));
   }
 
   .status[data-tone="success"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-color-success, #15803d) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-color-success, #15803d) 90%, #111827 10%);
+    --ui-form-status-text: var(--ui-color-success-text, color-mix(in srgb, var(--ui-color-success, #15803d) 90%, #111827 10%));
   }
 
   .status[data-tone="loading"] {
     --ui-form-status-bg: color-mix(in srgb, var(--ui-form-accent) 12%, transparent);
     --ui-form-status-border: color-mix(in srgb, var(--ui-form-accent) 44%, var(--ui-form-border-color));
-    --ui-form-status-text: color-mix(in srgb, var(--ui-form-accent) 90%, #111827 10%);
+    --ui-form-status-text: color-mix(in srgb, var(--ui-form-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .footer {

package/dist/gantt.cjs.js

@@ -7,6 +7,7 @@
     --ui-gantt-text: var(--ui-color-text, #0f172a);
     --ui-gantt-muted: var(--ui-color-muted, #526175);
     --ui-gantt-accent: var(--ui-color-primary, #2563eb);
+    --ui-gantt-accent-text: var(--ui-color-accent-text, var(--ui-gantt-accent));
     --ui-gantt-selected: color-mix(in srgb, var(--ui-gantt-accent) 10%, transparent);
     display: block;
     min-inline-size: 0;
@@ -222,7 +223,7 @@
 
   .head-button:hover,
   .head-button[aria-sort]:not([aria-sort="none"]) {
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
   }
 
   .grid-head span:last-child,
@@ -312,7 +313,7 @@
   }
 
   .tick.today-cell {
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
     background: color-mix(in srgb, var(--ui-gantt-accent) 9%, transparent);
   }
 
@@ -511,7 +512,7 @@
 
   .expander:hover {
     background: color-mix(in srgb, var(--ui-gantt-accent) 9%, transparent);
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
   }
 
   .rename {
@@ -922,8 +923,8 @@
     padding: 0 6px;
     block-size: 14px;
     border-radius: 7px;
-    background: var(--ui-color-danger, #dc2626);
-    color: #ffffff;
+    background: var(--ui-color-danger-solid, var(--ui-color-danger, #dc2626));
+    color: var(--ui-color-foreground-on-danger, #ffffff);
     font-size: 10px;
     font-weight: 750;
     line-height: 14px;
@@ -991,6 +992,7 @@
     --ui-gantt-text: #e2e8f0;
     --ui-gantt-muted: #93a4bd;
     --ui-gantt-accent: #60a5fa;
+    --ui-gantt-accent-text: #93c5fd;
     --ui-gantt-selected: rgba(96, 165, 250, 0.13);
   }
 

package/dist/gantt.esm.js

@@ -141,6 +141,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
     --ui-gantt-text: var(--ui-color-text, #0f172a);
     --ui-gantt-muted: var(--ui-color-muted, #526175);
     --ui-gantt-accent: var(--ui-color-primary, #2563eb);
+    --ui-gantt-accent-text: var(--ui-color-accent-text, var(--ui-gantt-accent));
     --ui-gantt-selected: color-mix(in srgb, var(--ui-gantt-accent) 10%, transparent);
     display: block;
     min-inline-size: 0;
@@ -356,7 +357,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
 
   .head-button:hover,
   .head-button[aria-sort]:not([aria-sort="none"]) {
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
   }
 
   .grid-head span:last-child,
@@ -446,7 +447,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
   }
 
   .tick.today-cell {
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
     background: color-mix(in srgb, var(--ui-gantt-accent) 9%, transparent);
   }
 
@@ -645,7 +646,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
 
   .expander:hover {
     background: color-mix(in srgb, var(--ui-gantt-accent) 9%, transparent);
-    color: var(--ui-gantt-accent);
+    color: var(--ui-gantt-accent-text);
   }
 
   .rename {
@@ -1056,8 +1057,8 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
     padding: 0 6px;
     block-size: 14px;
     border-radius: 7px;
-    background: var(--ui-color-danger, #dc2626);
-    color: #ffffff;
+    background: var(--ui-color-danger-solid, var(--ui-color-danger, #dc2626));
+    color: var(--ui-color-foreground-on-danger, #ffffff);
     font-size: 10px;
     font-weight: 750;
     line-height: 14px;
@@ -1125,6 +1126,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
     --ui-gantt-text: #e2e8f0;
     --ui-gantt-muted: #93a4bd;
     --ui-gantt-accent: #60a5fa;
+    --ui-gantt-accent-text: #93c5fd;
     --ui-gantt-selected: rgba(96, 165, 250, 0.13);
   }