@editora/ui-core 0.1.20 → 0.1.22

package/dist/toggle-group.esm.js

@@ -118,24 +118,24 @@ const w = `
     }
   }
 `, S = /* @__PURE__ */ new Set(["multiple", "orientation", "aria-label", "required", "disabled"]);
-function E(n) {
-  return String(n).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function E(u) {
+  return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function C(n) {
+function C(u) {
   try {
-    return JSON.parse(n);
+    return JSON.parse(u);
   } catch {
     return;
   }
 }
-function I(n, t) {
-  if (!t) return n || "";
-  if (!n) return [];
-  const e = C(n);
-  return Array.isArray(e) ? Array.from(new Set(e.map((i) => String(i)).filter(Boolean))) : n.includes(",") ? Array.from(new Set(n.split(",").map((i) => i.trim()).filter(Boolean))) : [n];
+function I(u, t) {
+  if (!t) return u || "";
+  if (!u) return [];
+  const e = C(u);
+  return Array.isArray(e) ? Array.from(new Set(e.map((i) => String(i)).filter(Boolean))) : u.includes(",") ? Array.from(new Set(u.split(",").map((i) => i.trim()).filter(Boolean))) : [u];
 }
-function A(n, t) {
-  return t ? JSON.stringify(Array.isArray(n) ? n : [String(n)]) : String(n || "");
+function A(u, t) {
+  return t ? JSON.stringify(Array.isArray(u) ? u : [String(u)]) : String(u || "");
 }
 class k extends _ {
   constructor() {
@@ -222,8 +222,8 @@ class k extends _ {
     return Array.isArray(t) ? new Set(t.map((e) => String(e))) : t ? /* @__PURE__ */ new Set([String(t)]) : /* @__PURE__ */ new Set();
   }
   _setGroupValue(t, e = !0) {
-    const i = A(t, this.multiple), a = this.getAttribute("value") || "";
-    if (!this.multiple && !i && !a || a === i) {
+    const i = A(t, this.multiple), l = this.getAttribute("value") || "";
+    if (!this.multiple && !i && !l || l === i) {
       this._syncChildren();
       return;
     }
@@ -236,27 +236,27 @@ class k extends _ {
     this.dispatchEvent(new CustomEvent("input", { detail: r, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: r, bubbles: !0, composed: !0 }));
   }
   _syncChildren() {
-    const t = this._toggles(), e = this.hasAttribute("disabled"), i = this._selectedSet(), a = this.multiple, r = (d, s, o) => {
-      const u = d.hasAttribute(s);
-      o && !u && d.setAttribute(s, ""), !o && u && d.removeAttribute(s);
-    }, g = (d, s, o) => {
-      d.getAttribute(s) !== o && d.setAttribute(s, o);
+    const t = this._toggles(), e = this.hasAttribute("disabled"), i = this._selectedSet(), l = this.multiple, r = (g, s, o) => {
+      const a = g.hasAttribute(s);
+      o && !a && g.setAttribute(s, ""), !o && a && g.removeAttribute(s);
+    }, c = (g, s, o) => {
+      g.getAttribute(s) !== o && g.setAttribute(s, o);
     };
-    let c = -1, l = -1;
+    let d = -1, n = -1;
     this._isSyncing = !0;
     try {
       t.forEach((s, o) => {
-        const u = this._toggleValue(s, o), h = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", y = e || h;
+        const a = this._toggleValue(s, o), h = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", y = e || h;
         r(s, "data-group-item", !0), y ? (r(s, "disabled", !0), r(s, "data-group-disabled", e && !h)) : s.hasAttribute("data-group-disabled") && (r(s, "disabled", !1), r(s, "data-group-disabled", !1));
-        const b = i.has(u);
-        r(s, "pressed", b), g(s, "role", a ? "checkbox" : "radio"), g(s, "aria-checked", b ? "true" : "false"), b && l < 0 && (l = o), !s.hasAttribute("disabled") && c < 0 && (c = o);
+        const b = i.has(a);
+        r(s, "pressed", b), c(s, "role", l ? "checkbox" : "radio"), c(s, "aria-checked", b ? "true" : "false"), b && n < 0 && (n = o), !s.hasAttribute("disabled") && d < 0 && (d = o);
       });
-      const d = m(t, {
+      const g = m(t, {
         activeIndex: this._focusIndex,
-        selectedIndex: l >= 0 ? l : c,
+        selectedIndex: n >= 0 ? n : d,
         getDisabled: (s) => s.hasAttribute("disabled")
       });
-      this._focusIndex = d, p(t, t[d] || null, { activeAttribute: null });
+      this._focusIndex = g, p(t, t[g] || null, { activeAttribute: null });
     } finally {
       this._isSyncing = !1;
     }
@@ -264,78 +264,79 @@ class k extends _ {
   _onToggleEvent(t) {
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-toggle" || this.hasAttribute("disabled")) return;
-    const a = this._toggles().indexOf(e);
-    if (a < 0) return;
-    const r = this._toggleValue(e, a), g = t.detail?.pressed ?? e.hasAttribute("pressed");
-    if (this._focusIndex = a, this.multiple) {
-      const l = this._selectedSet();
-      g ? l.add(r) : l.delete(r), this._setGroupValue(Array.from(l), !0);
+    const l = this._toggles().indexOf(e);
+    if (l < 0) return;
+    const r = this._toggleValue(e, l), c = t.detail?.pressed ?? e.hasAttribute("pressed");
+    if (this._focusIndex = l, this.multiple) {
+      const n = this._selectedSet();
+      c ? n.add(r) : n.delete(r), this._setGroupValue(Array.from(n), !0);
       return;
     }
-    const c = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
-    if (g) {
+    const d = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
+    if (c) {
       this._setGroupValue(r, !0);
       return;
     }
-    if (c) this._setGroupValue("", !0);
+    if (d) this._setGroupValue("", !0);
     else {
-      const l = String(this.value || "");
-      this._setGroupValue(l || r, !1);
+      const n = String(this.value || "");
+      this._setGroupValue(n || r, !1);
     }
   }
   _onKeyDown(t) {
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-toggle") return;
-    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("activation") === "manual" ? "manual" : "auto", r = this._toggles().filter((o) => !o.hasAttribute("disabled"));
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", l = this.getAttribute("activation") === "manual" ? "manual" : "auto", r = this._toggles().filter((o) => !o.hasAttribute("disabled"));
     if (r.length < 2) return;
-    const g = r.indexOf(e);
-    if (g < 0) return;
-    const c = this._isHorizontalRtl(), l = (o) => {
-      const u = x(r, g, o, {
+    const c = r.indexOf(e);
+    if (c < 0) return;
+    const d = this._isHorizontalRtl(), n = (o) => {
+      const a = x(r, c, o, {
         wrap: !0,
-        fallbackIndex: m(r, { activeIndex: g, getDisabled: () => !1 }),
+        fallbackIndex: m(r, { activeIndex: c, getDisabled: () => !1 }),
         getDisabled: () => !1
       });
-      if (u < 0) return;
-      const h = r[u];
-      this._focusIndex = this._toggles().indexOf(h), p(r, h, { activeAttribute: null }), f(h), a === "auto" && h.toggle?.(!0);
-    }, d = i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown", s = i === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || i === "vertical" && t.key === "ArrowUp";
-    if (d) {
-      t.preventDefault(), l(1);
+      if (a < 0) return;
+      const h = r[a];
+      this._focusIndex = this._toggles().indexOf(h), p(r, h, { activeAttribute: null }), f(h), l === "auto" && h.toggle?.(!0);
+    }, g = i === "horizontal" && (t.key === "ArrowRight" && !d || t.key === "ArrowLeft" && d) || i === "vertical" && t.key === "ArrowDown", s = i === "horizontal" && (t.key === "ArrowLeft" && !d || t.key === "ArrowRight" && d) || i === "vertical" && t.key === "ArrowUp";
+    if (g) {
+      t.preventDefault(), n(1);
       return;
     }
     if (s) {
-      t.preventDefault(), l(-1);
+      t.preventDefault(), n(-1);
       return;
     }
     if (t.key === "Home") {
       t.preventDefault();
       const o = v(r, "first", () => !1);
       if (o < 0) return;
-      const u = r[o];
-      this._focusIndex = this._toggles().indexOf(u), p(r, u, { activeAttribute: null }), f(u), a === "auto" && u.toggle?.(!0);
+      const a = r[o];
+      this._focusIndex = this._toggles().indexOf(a), p(r, a, { activeAttribute: null }), f(a), l === "auto" && a.toggle?.(!0);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
       const o = v(r, "last", () => !1);
       if (o < 0) return;
-      const u = r[o];
-      this._focusIndex = this._toggles().indexOf(u), p(r, u, { activeAttribute: null }), f(u), a === "auto" && u.toggle?.(!0);
+      const a = r[o];
+      this._focusIndex = this._toggles().indexOf(a), p(r, a, { activeAttribute: null }), f(a), l === "auto" && a.toggle?.(!0);
     }
   }
   render() {
-    const t = this.multiple ? "group" : "radiogroup", e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = this.getAttribute("aria-label") || "Toggle group", a = this.hasAttribute("required"), r = this.hasAttribute("disabled");
+    const t = this.multiple ? "group" : "radiogroup";
+    this.getAttribute("orientation");
+    const e = this.getAttribute("aria-label") || "Toggle group", i = this.hasAttribute("required"), l = this.hasAttribute("disabled");
     this.setContent(`
       <style>${w}</style>
       <div
         class="group"
         part="group"
         role="${t}"
-        aria-label="${E(i)}"
-        aria-orientation="${e}"
-        aria-disabled="${r ? "true" : "false"}"
-        aria-required="${a ? "true" : "false"}"
+        aria-label="${E(e)}"
+        aria-disabled="${l ? "true" : "false"}"
+        aria-required="${i ? "true" : "false"}"
       >
         <slot></slot>
       </div>
@@ -344,8 +345,10 @@ class k extends _ {
   _syncGroupA11y() {
     const t = this.root.querySelector(".group");
     if (!t) return;
-    const e = this.multiple ? "group" : "radiogroup", i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toggle group", r = this.hasAttribute("required"), g = this.hasAttribute("disabled");
-    t.getAttribute("role") !== e && t.setAttribute("role", e), t.getAttribute("aria-label") !== a && t.setAttribute("aria-label", a), t.getAttribute("aria-orientation") !== i && t.setAttribute("aria-orientation", i), t.setAttribute("aria-disabled", g ? "true" : "false"), t.setAttribute("aria-required", r ? "true" : "false");
+    const e = this.multiple ? "group" : "radiogroup";
+    this.getAttribute("orientation");
+    const i = this.getAttribute("aria-label") || "Toggle group", l = this.hasAttribute("required"), r = this.hasAttribute("disabled");
+    t.getAttribute("role") !== e && t.setAttribute("role", e), t.getAttribute("aria-label") !== i && t.setAttribute("aria-label", i), t.removeAttribute("aria-orientation"), t.setAttribute("aria-disabled", r ? "true" : "false"), t.setAttribute("aria-required", l ? "true" : "false");
   }
   _isHorizontalRtl() {
     if (this.getAttribute("orientation") === "vertical") return !1;

package/dist/toggle.cjs.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-EV6mVBUV.js"),c=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-EV6mVBUV.js"),c=`
   :host {
     --ui-toggle-radius: 10px;
     --ui-toggle-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-toggle-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-toggle-color: var(--ui-color-text, #0f172a);
     --ui-toggle-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-toggle-active-color: var(--ui-color-primary-foreground, #ffffff);
+    --ui-toggle-active-color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 72%, #0f172a 28%);
-    --ui-toggle-muted: var(--ui-color-muted, #64748b);
+    --ui-toggle-muted: var(--ui-color-muted, #526175);
     --ui-toggle-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-toggle-shadow:
       none;
@@ -66,7 +66,7 @@
 
   :host([pressed]) .control,
   .control[aria-pressed="true"] {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 88%, #ffffff 12%);
+    background: var(--ui-toggle-active-bg);
     border-color: var(--ui-toggle-active-border);
     color: var(--ui-toggle-active-color);
   }
@@ -160,17 +160,22 @@
   }
 
   :host([tone="success"]) {
-    --ui-toggle-active-bg: var(--ui-color-success, #16a34a);
+    --ui-toggle-active-bg: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-toggle-active-bg: var(--ui-color-warning, #d97706);
+    --ui-toggle-active-bg: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
     --ui-toggle-active-bg: var(--ui-color-danger, #dc2626);
   }
 
+  /* The contrast variant draws dark text on its pressed fill, so the tones need light fills there. */
+  :host([variant="contrast"][tone="success"]) { --ui-toggle-active-bg: #86efac; }
+  :host([variant="contrast"][tone="warning"]) { --ui-toggle-active-bg: #fcd34d; }
+  :host([variant="contrast"][tone="danger"]) { --ui-toggle-active-bg: #fca5a5; }
+
   :host([disabled]) .control,
   :host([loading]) .control {
     opacity: 0.56;
@@ -218,20 +223,15 @@
       --ui-toggle-shadow: none;
     }
   }
-`,l=new Set(["icon-on","icon-off","aria-label"]);function d(o){if(o==null)return!1;const e=String(o).toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function n(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class g extends u.ElementBase{constructor(){super(),this._control=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["pressed","disabled","loading","headless","size","variant","tone","shape","elevation","name","value","required","icon-on","icon-off","aria-label","tabindex"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._syncAria()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(l.has(e)){super.attributeChangedCallback(e,t,i);return}this._syncAria()}}get pressed(){return this.hasAttribute("pressed")}set pressed(e){e?this.setAttribute("pressed",""):this.removeAttribute("pressed")}get disabled(){return this.hasAttribute("disabled")||this.hasAttribute("loading")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}toggle(e){if(this.disabled)return;const t=typeof e=="boolean"?e:!this.pressed;if(t===this.pressed){this._syncAria();return}this.pressed=t,this._syncAria();const i={pressed:t,value:this.getAttribute("value")||"",name:this.getAttribute("name")||"",required:d(this.getAttribute("required"))};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:i,bubbles:!0,composed:!0}))}_syncAria(){const e=this.pressed,t=this.disabled,i=this.hasAttribute("loading"),s=this.hasAttribute("data-group-item");s?this.hasAttribute("aria-pressed")&&this.removeAttribute("aria-pressed"):(this.setAttribute("role","button"),this.setAttribute("aria-pressed",e?"true":"false")),this.setAttribute("aria-disabled",t?"true":"false"),this.setAttribute("aria-busy",i?"true":"false");const r=this.getAttribute("tabindex");if(t)this.hasAttribute("data-ui-prev-tabindex")||this.setAttribute("data-ui-prev-tabindex",r??""),r!=="-1"&&this.setAttribute("tabindex","-1");else{const a=this.getAttribute("data-ui-prev-tabindex");a!=null?(a?this.setAttribute("tabindex",a):this.removeAttribute("tabindex"),this.removeAttribute("data-ui-prev-tabindex")):r==null&&this.setAttribute("tabindex","0")}this._control&&(this._control.disabled=t,s?this._control.removeAttribute("aria-pressed"):this._control.setAttribute("aria-pressed",e?"true":"false"),this._control.setAttribute("aria-disabled",t?"true":"false"),this._control.setAttribute("aria-busy",i?"true":"false"))}_onClick(e){const t=e.target;t&&t.closest(".control")&&this.toggle()}_onKeyDown(e){this.disabled||(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())}render(){const e=this.pressed,t=this.disabled,i=this.getAttribute("icon-on")||"●",s=this.getAttribute("icon-off")||"○",r=this.getAttribute("aria-label")||"Toggle";this.setContent(`
+`,a=new Set(["icon-on","icon-off","aria-label"]);function u(o){if(o==null)return!1;const e=String(o).toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function n(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class l extends g.ElementBase{constructor(){super(),this._control=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["pressed","disabled","loading","headless","size","variant","tone","shape","elevation","name","value","required","icon-on","icon-off","aria-label","tabindex"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._syncAria()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(a.has(e)){super.attributeChangedCallback(e,t,i);return}this._syncAria()}}get pressed(){return this.hasAttribute("pressed")}set pressed(e){e?this.setAttribute("pressed",""):this.removeAttribute("pressed")}get disabled(){return this.hasAttribute("disabled")||this.hasAttribute("loading")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}toggle(e){if(this.disabled)return;const t=typeof e=="boolean"?e:!this.pressed;if(t===this.pressed){this._syncAria();return}this.pressed=t,this._syncAria();const i={pressed:t,value:this.getAttribute("value")||"",name:this.getAttribute("name")||"",required:u(this.getAttribute("required"))};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:i,bubbles:!0,composed:!0}))}_syncAria(){const e=this.pressed,t=this.disabled,i=this.hasAttribute("loading");this.hasAttribute("data-group-item")?this.hasAttribute("aria-pressed")&&this.removeAttribute("aria-pressed"):(this.setAttribute("role","button"),this.setAttribute("aria-pressed",e?"true":"false")),this.setAttribute("aria-disabled",t?"true":"false"),this.setAttribute("aria-busy",i?"true":"false");const r=this.getAttribute("tabindex");if(t)this.hasAttribute("data-ui-prev-tabindex")||this.setAttribute("data-ui-prev-tabindex",r??""),r!=="-1"&&this.setAttribute("tabindex","-1");else{const s=this.getAttribute("data-ui-prev-tabindex");s!=null?(s?this.setAttribute("tabindex",s):this.removeAttribute("tabindex"),this.removeAttribute("data-ui-prev-tabindex")):r==null&&this.setAttribute("tabindex","0")}this._control&&this._control.toggleAttribute("data-disabled",t)}_onClick(e){const t=e.target;t&&t.closest(".control")&&this.toggle()}_onKeyDown(e){this.disabled||(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())}render(){this.pressed;const e=this.disabled,t=this.getAttribute("icon-on")||"●",i=this.getAttribute("icon-off")||"○";this.getAttribute("aria-label"),this.setContent(`
       <style>${c}</style>
-      <button
-        type="button"
+      <span
         class="control"
         part="control"
-        aria-label="${n(r)}"
-        aria-pressed="${e?"true":"false"}"
-        aria-disabled="${t?"true":"false"}"
-        tabindex="-1"
-        ${t?"disabled":""}
+        ${e?"data-disabled":""}
       >
-        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(s)}</span>
-        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(i)}</span>
+        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(i)}</span>
+        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(t)}</span>
         <span class="label" part="label"><slot></slot></span>
-      </button>
-    `),this._control=this.root.querySelector(".control"),this._syncAria()}shouldRenderOnAttributeChange(e,t,i){return l.has(e)}}typeof customElements<"u"&&!customElements.get("ui-toggle")&&customElements.define("ui-toggle",g);exports.UIToggle=g;
+      </span>
+    `),this._control=this.root.querySelector(".control"),this._syncAria()}shouldRenderOnAttributeChange(e,t,i){return a.has(e)}}typeof customElements<"u"&&!customElements.get("ui-toggle")&&customElements.define("ui-toggle",l);exports.UIToggle=l;

package/dist/toggle.esm.js

@@ -1,14 +1,14 @@
-import { E as g } from "./ElementBase-YlTLMsGk.mjs";
-const u = `
+import { E as l } from "./ElementBase-YlTLMsGk.mjs";
+const g = `
   :host {
     --ui-toggle-radius: 10px;
     --ui-toggle-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-toggle-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-toggle-color: var(--ui-color-text, #0f172a);
     --ui-toggle-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-toggle-active-color: var(--ui-color-primary-foreground, #ffffff);
+    --ui-toggle-active-color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 72%, #0f172a 28%);
-    --ui-toggle-muted: var(--ui-color-muted, #64748b);
+    --ui-toggle-muted: var(--ui-color-muted, #526175);
     --ui-toggle-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-toggle-shadow:
       none;
@@ -67,7 +67,7 @@ const u = `
 
   :host([pressed]) .control,
   .control[aria-pressed="true"] {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 88%, #ffffff 12%);
+    background: var(--ui-toggle-active-bg);
     border-color: var(--ui-toggle-active-border);
     color: var(--ui-toggle-active-color);
   }
@@ -161,17 +161,22 @@ const u = `
   }
 
   :host([tone="success"]) {
-    --ui-toggle-active-bg: var(--ui-color-success, #16a34a);
+    --ui-toggle-active-bg: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-toggle-active-bg: var(--ui-color-warning, #d97706);
+    --ui-toggle-active-bg: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
     --ui-toggle-active-bg: var(--ui-color-danger, #dc2626);
   }
 
+  /* The contrast variant draws dark text on its pressed fill, so the tones need light fills there. */
+  :host([variant="contrast"][tone="success"]) { --ui-toggle-active-bg: #86efac; }
+  :host([variant="contrast"][tone="warning"]) { --ui-toggle-active-bg: #fcd34d; }
+  :host([variant="contrast"][tone="danger"]) { --ui-toggle-active-bg: #fca5a5; }
+
   :host([disabled]) .control,
   :host([loading]) .control {
     opacity: 0.56;
@@ -219,7 +224,7 @@ const u = `
       --ui-toggle-shadow: none;
     }
   }
-`, l = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
+`, a = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
 function c(o) {
   if (o == null) return !1;
   const e = String(o).toLowerCase();
@@ -228,7 +233,7 @@ function c(o) {
 function n(o) {
   return String(o).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-class d extends g {
+class u extends l {
   constructor() {
     super(), this._control = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
   }
@@ -260,7 +265,7 @@ class d extends g {
   }
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
-      if (l.has(e)) {
+      if (a.has(e)) {
         super.attributeChangedCallback(e, t, i);
         return;
       }
@@ -296,16 +301,16 @@ class d extends g {
     this.dispatchEvent(new CustomEvent("input", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: i, bubbles: !0, composed: !0 }));
   }
   _syncAria() {
-    const e = this.pressed, t = this.disabled, i = this.hasAttribute("loading"), s = this.hasAttribute("data-group-item");
-    s ? this.hasAttribute("aria-pressed") && this.removeAttribute("aria-pressed") : (this.setAttribute("role", "button"), this.setAttribute("aria-pressed", e ? "true" : "false")), this.setAttribute("aria-disabled", t ? "true" : "false"), this.setAttribute("aria-busy", i ? "true" : "false");
+    const e = this.pressed, t = this.disabled, i = this.hasAttribute("loading");
+    this.hasAttribute("data-group-item") ? this.hasAttribute("aria-pressed") && this.removeAttribute("aria-pressed") : (this.setAttribute("role", "button"), this.setAttribute("aria-pressed", e ? "true" : "false")), this.setAttribute("aria-disabled", t ? "true" : "false"), this.setAttribute("aria-busy", i ? "true" : "false");
     const r = this.getAttribute("tabindex");
     if (t)
       this.hasAttribute("data-ui-prev-tabindex") || this.setAttribute("data-ui-prev-tabindex", r ?? ""), r !== "-1" && this.setAttribute("tabindex", "-1");
     else {
-      const a = this.getAttribute("data-ui-prev-tabindex");
-      a != null ? (a ? this.setAttribute("tabindex", a) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-prev-tabindex")) : r == null && this.setAttribute("tabindex", "0");
+      const s = this.getAttribute("data-ui-prev-tabindex");
+      s != null ? (s ? this.setAttribute("tabindex", s) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-prev-tabindex")) : r == null && this.setAttribute("tabindex", "0");
     }
-    this._control && (this._control.disabled = t, s ? this._control.removeAttribute("aria-pressed") : this._control.setAttribute("aria-pressed", e ? "true" : "false"), this._control.setAttribute("aria-disabled", t ? "true" : "false"), this._control.setAttribute("aria-busy", i ? "true" : "false"));
+    this._control && this._control.toggleAttribute("data-disabled", t);
   }
   _onClick(e) {
     const t = e.target;
@@ -315,30 +320,26 @@ class d extends g {
     this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
   }
   render() {
-    const e = this.pressed, t = this.disabled, i = this.getAttribute("icon-on") || "●", s = this.getAttribute("icon-off") || "○", r = this.getAttribute("aria-label") || "Toggle";
-    this.setContent(`
-      <style>${u}</style>
-      <button
-        type="button"
+    this.pressed;
+    const e = this.disabled, t = this.getAttribute("icon-on") || "●", i = this.getAttribute("icon-off") || "○";
+    this.getAttribute("aria-label"), this.setContent(`
+      <style>${g}</style>
+      <span
         class="control"
         part="control"
-        aria-label="${n(r)}"
-        aria-pressed="${e ? "true" : "false"}"
-        aria-disabled="${t ? "true" : "false"}"
-        tabindex="-1"
-        ${t ? "disabled" : ""}
+        ${e ? "data-disabled" : ""}
       >
-        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(s)}</span>
-        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(i)}</span>
+        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(i)}</span>
+        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(t)}</span>
         <span class="label" part="label"><slot></slot></span>
-      </button>
+      </span>
     `), this._control = this.root.querySelector(".control"), this._syncAria();
   }
   shouldRenderOnAttributeChange(e, t, i) {
-    return l.has(e);
+    return a.has(e);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-toggle") && customElements.define("ui-toggle", d);
+typeof customElements < "u" && !customElements.get("ui-toggle") && customElements.define("ui-toggle", u);
 export {
-  d as UIToggle
+  u as UIToggle
 };

package/dist/tooltip.cjs.js

@@ -77,13 +77,13 @@
   }
 
   .tooltip[data-tone="success"] {
-    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 84%, #052e16 16%);
-    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #16a34a) 42%, transparent);
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 84%, #052e16 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #15803d) 42%, transparent);
   }
 
   .tooltip[data-tone="warning"] {
-    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 84%, #451a03 16%);
-    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #d97706) 42%, transparent);
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 84%, #451a03 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #b45309) 42%, transparent);
   }
 
   .tooltip[data-tone="danger"] {

package/dist/tooltip.esm.js

@@ -79,13 +79,13 @@ const d = 140, w = 120, m = `
   }
 
   .tooltip[data-tone="success"] {
-    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 84%, #052e16 16%);
-    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #16a34a) 42%, transparent);
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 84%, #052e16 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #15803d) 42%, transparent);
   }
 
   .tooltip[data-tone="warning"] {
-    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 84%, #451a03 16%);
-    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #d97706) 42%, transparent);
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 84%, #451a03 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #b45309) 42%, transparent);
   }
 
   .tooltip[data-tone="danger"] {