@editora/ui-core 0.1.24 → 0.2.0

package/dist/toggle-group.cjs.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),g=require("./roving-focus-group-BdJ_4Njm.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),y=`
   :host {
-    --ui-toggle-group-gap: 8px;
-    --ui-toggle-group-padding: 6px;
-    --ui-toggle-group-radius: 12px;
-    --ui-toggle-group-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-toggle-group-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-toggle-group-bg: transparent;
+    --ui-toggle-group-border: transparent;
     --ui-toggle-group-shadow:
       none;
 
@@ -54,15 +54,15 @@
   }
 
   :host([size="sm"]) {
-    --ui-toggle-group-gap: 6px;
-    --ui-toggle-group-padding: 4px;
-    --ui-toggle-group-radius: 10px;
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]) {
-    --ui-toggle-group-gap: 10px;
-    --ui-toggle-group-padding: 8px;
-    --ui-toggle-group-radius: 14px;
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([density="compact"]) {
@@ -115,7 +115,7 @@
       --ui-toggle-group-shadow: none;
     }
   }
-`,_=new Set(["multiple","orientation","aria-label","required","disabled"]);function x(u){return String(u).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(u){try{return JSON.parse(u)}catch{return}}function w(u,t){if(!t)return u||"";if(!u)return[];const e=S(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 f(u,t){return t?JSON.stringify(Array.isArray(u)?u:[String(u)]):String(u||"")}class v extends A.ElementBase{constructor(){super(),this._observer=null,this._isSyncing=!1,this._focusIndex=-1,this._onToggleEvent=this._onToggleEvent.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["value","multiple","disabled","headless","orientation","variant","size","density","shape","elevation","allow-empty","required","activation","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._onToggleEvent),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(t=>{this._isSyncing||(t.forEach(e=>{e.type!=="childList"||e.removedNodes.length===0||e.removedNodes.forEach(i=>this._clearGroupFlagsFromNode(i))}),this._syncChildren())}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["value","data-value","disabled","pressed","data-disabled"]}),this._syncChildren()}attributeChangedCallback(t,e,i){if(e!==i){if(_.has(t)){if(!this.root.querySelector(".group")){this.requestRender();return}this._syncGroupA11y()}this._syncChildren()}}disconnectedCallback(){this.removeEventListener("change",this._onToggleEvent),this.removeEventListener("keydown",this._onKeyDown),this._toggles().forEach(t=>this._clearGroupFlags(t)),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}get multiple(){return this.hasAttribute("multiple")}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get value(){return w(this.getAttribute("value"),this.multiple)}set value(t){const e=f(t,this.multiple);if(!this.multiple&&!e){this.hasAttribute("value")&&this.removeAttribute("value"),this._syncChildren();return}this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncChildren()}_toggles(){return Array.from(this.querySelectorAll("ui-toggle"))}_toggleValue(t,e){return t.getAttribute("value")||t.getAttribute("data-value")||t.textContent?.trim()||String(e)}_clearGroupFlags(t){t.hasAttribute("data-group-item")&&t.removeAttribute("data-group-item"),t.hasAttribute("data-group-disabled")&&t.removeAttribute("data-group-disabled"),t.hasAttribute("role")&&t.removeAttribute("role"),t.hasAttribute("aria-checked")&&t.removeAttribute("aria-checked"),t._syncAria?.()}_clearGroupFlagsFromNode(t){if(!(t instanceof HTMLElement))return;t.matches("ui-toggle")&&this._clearGroupFlags(t),Array.from(t.querySelectorAll("ui-toggle")).forEach(i=>this._clearGroupFlags(i))}_selectedSet(){const t=this.value;return Array.isArray(t)?new Set(t.map(e=>String(e))):t?new Set([String(t)]):new Set}_setGroupValue(t,e=!0){const i=f(t,this.multiple),n=this.getAttribute("value")||"";if(!this.multiple&&!i&&!n||n===i){this._syncChildren();return}if(!this.multiple&&!i?this.removeAttribute("value"):this.setAttribute("value",i),this._syncChildren(),!e)return;const r={value:this.multiple?Array.isArray(t)?t:[String(t)]:String(t||""),values:this.multiple?Array.isArray(t)?t:[String(t)]:t?[String(t)]:[],multiple:this.multiple};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(),n=this.multiple,r=(d,s,o)=>{const a=d.hasAttribute(s);o&&!a&&d.setAttribute(s,""),!o&&a&&d.removeAttribute(s)},h=(d,s,o)=>{d.getAttribute(s)!==o&&d.setAttribute(s,o)};let c=-1,l=-1;this._isSyncing=!0;try{t.forEach((s,o)=>{const a=this._toggleValue(s,o),p=s.hasAttribute("data-disabled")||s.getAttribute("aria-disabled")==="true",m=e||p;r(s,"data-group-item",!0),m?(r(s,"disabled",!0),r(s,"data-group-disabled",e&&!p)):s.hasAttribute("data-group-disabled")&&(r(s,"disabled",!1),r(s,"data-group-disabled",!1));const b=i.has(a);r(s,"pressed",b),h(s,"role",n?"checkbox":"radio"),h(s,"aria-checked",b?"true":"false"),b&&l<0&&(l=o),!s.hasAttribute("disabled")&&c<0&&(c=o)});const d=g.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:l>=0?l:c,getDisabled:s=>s.hasAttribute("disabled")});this._focusIndex=d,g.syncRovingTabStops(t,t[d]||null,{activeAttribute:null})}finally{this._isSyncing=!1}}_onToggleEvent(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle"||this.hasAttribute("disabled"))return;const n=this._toggles().indexOf(e);if(n<0)return;const r=this._toggleValue(e,n),h=t.detail?.pressed??e.hasAttribute("pressed");if(this._focusIndex=n,this.multiple){const l=this._selectedSet();h?l.add(r):l.delete(r),this._setGroupValue(Array.from(l),!0);return}const c=this.hasAttribute("allow-empty")&&!this.hasAttribute("required");if(h){this._setGroupValue(r,!0);return}if(c)this._setGroupValue("",!0);else{const l=String(this.value||"");this._setGroupValue(l||r,!1)}}_onKeyDown(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle")return;const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",n=this.getAttribute("activation")==="manual"?"manual":"auto",r=this._toggles().filter(o=>!o.hasAttribute("disabled"));if(r.length<2)return;const h=r.indexOf(e);if(h<0)return;const c=this._isHorizontalRtl(),l=o=>{const a=g.moveRovingFocusIndex(r,h,o,{wrap:!0,fallbackIndex:g.resolveRovingFocusIndex(r,{activeIndex:h,getDisabled:()=>!1}),getDisabled:()=>!1});if(a<0)return;const p=r[a];this._focusIndex=this._toggles().indexOf(p),g.syncRovingTabStops(r,p,{activeAttribute:null}),g.focusRovingItem(p),n==="auto"&&p.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);return}if(s){t.preventDefault(),l(-1);return}if(t.key==="Home"){t.preventDefault();const o=g.getRovingFocusBoundaryIndex(r,"first",()=>!1);if(o<0)return;const a=r[o];this._focusIndex=this._toggles().indexOf(a),g.syncRovingTabStops(r,a,{activeAttribute:null}),g.focusRovingItem(a),n==="auto"&&a.toggle?.(!0);return}if(t.key==="End"){t.preventDefault();const o=g.getRovingFocusBoundaryIndex(r,"last",()=>!1);if(o<0)return;const a=r[o];this._focusIndex=this._toggles().indexOf(a),g.syncRovingTabStops(r,a,{activeAttribute:null}),g.focusRovingItem(a),n==="auto"&&a.toggle?.(!0)}}render(){const t=this.multiple?"group":"radiogroup";this.getAttribute("orientation");const e=this.getAttribute("aria-label")||"Toggle group",i=this.hasAttribute("required"),n=this.hasAttribute("disabled");this.setContent(`
+`,_=new Set(["multiple","orientation","aria-label","required","disabled"]);function x(u){return String(u).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(u){try{return JSON.parse(u)}catch{return}}function w(u,t){if(!t)return u||"";if(!u)return[];const e=S(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 f(u,t){return t?JSON.stringify(Array.isArray(u)?u:[String(u)]):String(u||"")}class v extends A.ElementBase{constructor(){super(),this._observer=null,this._isSyncing=!1,this._focusIndex=-1,this._onToggleEvent=this._onToggleEvent.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["value","multiple","disabled","headless","orientation","variant","size","density","shape","elevation","allow-empty","required","activation","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._onToggleEvent),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(t=>{this._isSyncing||(t.forEach(e=>{e.type!=="childList"||e.removedNodes.length===0||e.removedNodes.forEach(i=>this._clearGroupFlagsFromNode(i))}),this._syncChildren())}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["value","data-value","disabled","pressed","data-disabled"]}),this._syncChildren()}attributeChangedCallback(t,e,i){if(e!==i){if(_.has(t)){if(!this.root.querySelector(".group")){this.requestRender();return}this._syncGroupA11y()}this._syncChildren()}}disconnectedCallback(){this.removeEventListener("change",this._onToggleEvent),this.removeEventListener("keydown",this._onKeyDown),this._toggles().forEach(t=>this._clearGroupFlags(t)),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}get multiple(){return this.hasAttribute("multiple")}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get value(){return w(this.getAttribute("value"),this.multiple)}set value(t){const e=f(t,this.multiple);if(!this.multiple&&!e){this.hasAttribute("value")&&this.removeAttribute("value"),this._syncChildren();return}this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncChildren()}_toggles(){return Array.from(this.querySelectorAll("ui-toggle"))}_toggleValue(t,e){return t.getAttribute("value")||t.getAttribute("data-value")||t.textContent?.trim()||String(e)}_clearGroupFlags(t){t.hasAttribute("data-group-item")&&t.removeAttribute("data-group-item"),t.hasAttribute("data-group-disabled")&&t.removeAttribute("data-group-disabled"),t.hasAttribute("role")&&t.removeAttribute("role"),t.hasAttribute("aria-checked")&&t.removeAttribute("aria-checked"),t._syncAria?.()}_clearGroupFlagsFromNode(t){if(!(t instanceof HTMLElement))return;t.matches("ui-toggle")&&this._clearGroupFlags(t),Array.from(t.querySelectorAll("ui-toggle")).forEach(i=>this._clearGroupFlags(i))}_selectedSet(){const t=this.value;return Array.isArray(t)?new Set(t.map(e=>String(e))):t?new Set([String(t)]):new Set}_setGroupValue(t,e=!0){const i=f(t,this.multiple),n=this.getAttribute("value")||"";if(!this.multiple&&!i&&!n||n===i){this._syncChildren();return}if(!this.multiple&&!i?this.removeAttribute("value"):this.setAttribute("value",i),this._syncChildren(),!e)return;const r={value:this.multiple?Array.isArray(t)?t:[String(t)]:String(t||""),values:this.multiple?Array.isArray(t)?t:[String(t)]:t?[String(t)]:[],multiple:this.multiple};this.dispatchEvent(new CustomEvent("input",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:r,bubbles:!0,composed:!0}))}_inheritVariant(t){const e=this.getAttribute("variant")==="contrast";e&&!t.hasAttribute("variant")?(t.setAttribute("variant","contrast"),t.setAttribute("data-inherited-variant","")):!e&&t.hasAttribute("data-inherited-variant")&&(t.removeAttribute("variant"),t.removeAttribute("data-inherited-variant"))}_syncChildren(){const t=this._toggles(),e=this.hasAttribute("disabled"),i=this._selectedSet(),n=this.multiple,r=(g,s,o)=>{const a=g.hasAttribute(s);o&&!a&&g.setAttribute(s,""),!o&&a&&g.removeAttribute(s)},h=(g,s,o)=>{g.getAttribute(s)!==o&&g.setAttribute(s,o)};let c=-1,l=-1;this._isSyncing=!0;try{t.forEach((s,o)=>{const a=this._toggleValue(s,o),p=s.hasAttribute("data-disabled")||s.getAttribute("aria-disabled")==="true",m=e||p;r(s,"data-group-item",!0),this._inheritVariant(s),m?(r(s,"disabled",!0),r(s,"data-group-disabled",e&&!p)):s.hasAttribute("data-group-disabled")&&(r(s,"disabled",!1),r(s,"data-group-disabled",!1));const b=i.has(a);r(s,"pressed",b),h(s,"role",n?"checkbox":"radio"),h(s,"aria-checked",b?"true":"false"),b&&l<0&&(l=o),!s.hasAttribute("disabled")&&c<0&&(c=o)});const g=d.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:l>=0?l:c,getDisabled:s=>s.hasAttribute("disabled")});this._focusIndex=g,d.syncRovingTabStops(t,t[g]||null,{activeAttribute:null})}finally{this._isSyncing=!1}}_onToggleEvent(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle"||this.hasAttribute("disabled"))return;const n=this._toggles().indexOf(e);if(n<0)return;const r=this._toggleValue(e,n),h=t.detail?.pressed??e.hasAttribute("pressed");if(this._focusIndex=n,this.multiple){const l=this._selectedSet();h?l.add(r):l.delete(r),this._setGroupValue(Array.from(l),!0);return}const c=this.hasAttribute("allow-empty")&&!this.hasAttribute("required");if(h){this._setGroupValue(r,!0);return}if(c)this._setGroupValue("",!0);else{const l=String(this.value||"");this._setGroupValue(l||r,!1)}}_onKeyDown(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle")return;const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",n=this.getAttribute("activation")==="manual"?"manual":"auto",r=this._toggles().filter(o=>!o.hasAttribute("disabled"));if(r.length<2)return;const h=r.indexOf(e);if(h<0)return;const c=this._isHorizontalRtl(),l=o=>{const a=d.moveRovingFocusIndex(r,h,o,{wrap:!0,fallbackIndex:d.resolveRovingFocusIndex(r,{activeIndex:h,getDisabled:()=>!1}),getDisabled:()=>!1});if(a<0)return;const p=r[a];this._focusIndex=this._toggles().indexOf(p),d.syncRovingTabStops(r,p,{activeAttribute:null}),d.focusRovingItem(p),n==="auto"&&p.toggle?.(!0)},g=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(g){t.preventDefault(),l(1);return}if(s){t.preventDefault(),l(-1);return}if(t.key==="Home"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(r,"first",()=>!1);if(o<0)return;const a=r[o];this._focusIndex=this._toggles().indexOf(a),d.syncRovingTabStops(r,a,{activeAttribute:null}),d.focusRovingItem(a),n==="auto"&&a.toggle?.(!0);return}if(t.key==="End"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(r,"last",()=>!1);if(o<0)return;const a=r[o];this._focusIndex=this._toggles().indexOf(a),d.syncRovingTabStops(r,a,{activeAttribute:null}),d.focusRovingItem(a),n==="auto"&&a.toggle?.(!0)}}render(){const t=this.multiple?"group":"radiogroup";this.getAttribute("orientation");const e=this.getAttribute("aria-label")||"Toggle group",i=this.hasAttribute("required"),n=this.hasAttribute("disabled");this.setContent(`
       <style>${y}</style>
       <div
         class="group"

package/dist/toggle-group.esm.js

@@ -1,12 +1,12 @@
 import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
-import { r as m, s as p, g as v, f, m as x } from "./roving-focus-group-Dbm1Jko_.mjs";
+import { r as v, s as p, g as m, f, m as x } from "./roving-focus-group-Dbm1Jko_.mjs";
 const w = `
   :host {
-    --ui-toggle-group-gap: 8px;
-    --ui-toggle-group-padding: 6px;
-    --ui-toggle-group-radius: 12px;
-    --ui-toggle-group-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-toggle-group-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-toggle-group-bg: transparent;
+    --ui-toggle-group-border: transparent;
     --ui-toggle-group-shadow:
       none;
 
@@ -56,15 +56,15 @@ const w = `
   }
 
   :host([size="sm"]) {
-    --ui-toggle-group-gap: 6px;
-    --ui-toggle-group-padding: 4px;
-    --ui-toggle-group-radius: 10px;
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]) {
-    --ui-toggle-group-gap: 10px;
-    --ui-toggle-group-padding: 8px;
-    --ui-toggle-group-radius: 14px;
+    --ui-toggle-group-gap: 4px;
+    --ui-toggle-group-padding: 0px;
+    --ui-toggle-group-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([density="compact"]) {
@@ -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), l = this.getAttribute("value") || "";
-    if (!this.multiple && !i && !l || l === i) {
+    const i = A(t, this.multiple), n = this.getAttribute("value") || "";
+    if (!this.multiple && !i && !n || n === i) {
       this._syncChildren();
       return;
     }
@@ -235,28 +235,33 @@ 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 }));
   }
+  /** A contrast group is a dark surface: its toggles that set no variant of their own follow it. */
+  _inheritVariant(t) {
+    const e = this.getAttribute("variant") === "contrast";
+    e && !t.hasAttribute("variant") ? (t.setAttribute("variant", "contrast"), t.setAttribute("data-inherited-variant", "")) : !e && t.hasAttribute("data-inherited-variant") && (t.removeAttribute("variant"), t.removeAttribute("data-inherited-variant"));
+  }
   _syncChildren() {
-    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);
+    const t = this._toggles(), e = this.hasAttribute("disabled"), i = this._selectedSet(), n = this.multiple, r = (d, s, a) => {
+      const o = d.hasAttribute(s);
+      a && !o && d.setAttribute(s, ""), !a && o && d.removeAttribute(s);
+    }, c = (d, s, a) => {
+      d.getAttribute(s) !== a && d.setAttribute(s, a);
     };
-    let d = -1, n = -1;
+    let g = -1, l = -1;
     this._isSyncing = !0;
     try {
-      t.forEach((s, o) => {
-        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(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);
+      t.forEach((s, a) => {
+        const o = this._toggleValue(s, a), h = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", y = e || h;
+        r(s, "data-group-item", !0), this._inheritVariant(s), 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(o);
+        r(s, "pressed", b), c(s, "role", n ? "checkbox" : "radio"), c(s, "aria-checked", b ? "true" : "false"), b && l < 0 && (l = a), !s.hasAttribute("disabled") && g < 0 && (g = a);
       });
-      const g = m(t, {
+      const d = v(t, {
         activeIndex: this._focusIndex,
-        selectedIndex: n >= 0 ? n : d,
+        selectedIndex: l >= 0 ? l : g,
         getDisabled: (s) => s.hasAttribute("disabled")
       });
-      this._focusIndex = g, p(t, t[g] || null, { activeAttribute: null });
+      this._focusIndex = d, p(t, t[d] || null, { activeAttribute: null });
     } finally {
       this._isSyncing = !1;
     }
@@ -264,70 +269,70 @@ class k extends _ {
   _onToggleEvent(t) {
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-toggle" || this.hasAttribute("disabled")) return;
-    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);
+    const n = this._toggles().indexOf(e);
+    if (n < 0) return;
+    const r = this._toggleValue(e, n), c = t.detail?.pressed ?? e.hasAttribute("pressed");
+    if (this._focusIndex = n, this.multiple) {
+      const l = this._selectedSet();
+      c ? l.add(r) : l.delete(r), this._setGroupValue(Array.from(l), !0);
       return;
     }
-    const d = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
+    const g = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
     if (c) {
       this._setGroupValue(r, !0);
       return;
     }
-    if (d) this._setGroupValue("", !0);
+    if (g) this._setGroupValue("", !0);
     else {
-      const n = String(this.value || "");
-      this._setGroupValue(n || r, !1);
+      const l = String(this.value || "");
+      this._setGroupValue(l || r, !1);
     }
   }
   _onKeyDown(t) {
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-toggle") return;
-    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", l = this.getAttribute("activation") === "manual" ? "manual" : "auto", r = this._toggles().filter((o) => !o.hasAttribute("disabled"));
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", n = this.getAttribute("activation") === "manual" ? "manual" : "auto", r = this._toggles().filter((a) => !a.hasAttribute("disabled"));
     if (r.length < 2) return;
     const c = r.indexOf(e);
     if (c < 0) return;
-    const d = this._isHorizontalRtl(), n = (o) => {
-      const a = x(r, c, o, {
+    const g = this._isHorizontalRtl(), l = (a) => {
+      const o = x(r, c, a, {
         wrap: !0,
-        fallbackIndex: m(r, { activeIndex: c, getDisabled: () => !1 }),
+        fallbackIndex: v(r, { activeIndex: c, getDisabled: () => !1 }),
         getDisabled: () => !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);
+      if (o < 0) return;
+      const h = r[o];
+      this._focusIndex = this._toggles().indexOf(h), p(r, h, { activeAttribute: null }), f(h), n === "auto" && h.toggle?.(!0);
+    }, d = i === "horizontal" && (t.key === "ArrowRight" && !g || t.key === "ArrowLeft" && g) || i === "vertical" && t.key === "ArrowDown", s = i === "horizontal" && (t.key === "ArrowLeft" && !g || t.key === "ArrowRight" && g) || i === "vertical" && t.key === "ArrowUp";
+    if (d) {
+      t.preventDefault(), l(1);
       return;
     }
     if (s) {
-      t.preventDefault(), n(-1);
+      t.preventDefault(), l(-1);
       return;
     }
     if (t.key === "Home") {
       t.preventDefault();
-      const o = v(r, "first", () => !1);
-      if (o < 0) return;
-      const a = r[o];
-      this._focusIndex = this._toggles().indexOf(a), p(r, a, { activeAttribute: null }), f(a), l === "auto" && a.toggle?.(!0);
+      const a = m(r, "first", () => !1);
+      if (a < 0) return;
+      const o = r[a];
+      this._focusIndex = this._toggles().indexOf(o), p(r, o, { activeAttribute: null }), f(o), n === "auto" && o.toggle?.(!0);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const o = v(r, "last", () => !1);
-      if (o < 0) return;
-      const a = r[o];
-      this._focusIndex = this._toggles().indexOf(a), p(r, a, { activeAttribute: null }), f(a), l === "auto" && a.toggle?.(!0);
+      const a = m(r, "last", () => !1);
+      if (a < 0) return;
+      const o = r[a];
+      this._focusIndex = this._toggles().indexOf(o), p(r, o, { activeAttribute: null }), f(o), n === "auto" && o.toggle?.(!0);
     }
   }
   render() {
     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");
+    const e = this.getAttribute("aria-label") || "Toggle group", i = this.hasAttribute("required"), n = this.hasAttribute("disabled");
     this.setContent(`
       <style>${w}</style>
       <div
@@ -335,7 +340,7 @@ class k extends _ {
         part="group"
         role="${t}"
         aria-label="${E(e)}"
-        aria-disabled="${l ? "true" : "false"}"
+        aria-disabled="${n ? "true" : "false"}"
         aria-required="${i ? "true" : "false"}"
       >
         <slot></slot>
@@ -347,8 +352,8 @@ class k extends _ {
     if (!t) return;
     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");
+    const i = this.getAttribute("aria-label") || "Toggle group", n = 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", n ? "true" : "false");
   }
   _isHorizontalRtl() {
     if (this.getAttribute("orientation") === "vertical") return !1;

package/dist/toggle.cjs.js

@@ -1,19 +1,21 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-DxbvhLJs.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-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-toggle-border: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-toggle-bg: transparent;
+    --ui-toggle-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
     --ui-toggle-active-bg: var(--ui-color-primary, #2563eb);
-    --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-pressed-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-toggle-active-bg) 16%, transparent));
+    --ui-toggle-active-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-toggle-active-border: var(--ui-color-accent-line, color-mix(in srgb, var(--ui-toggle-active-bg) 40%, transparent));
     --ui-toggle-muted: var(--ui-color-muted, #526175);
     --ui-toggle-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-toggle-shadow:
       none;
-    --ui-toggle-padding-x: 12px;
-    --ui-toggle-padding-y: 8px;
-    --ui-toggle-height: 36px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-toggle-padding-y: 0px;
+    --ui-toggle-height: var(--ui-control-height-2, 32px);
+    --ui-toggle-font-size: var(--ui-control-font-size-2, 14px);
     --ui-toggle-gap: 8px;
 
     color-scheme: light dark;
@@ -23,6 +25,7 @@
   }
 
   .control {
+    box-sizing: border-box;
     min-inline-size: 0;
     min-block-size: var(--ui-toggle-height);
     display: inline-flex;
@@ -39,7 +42,7 @@
     user-select: none;
     outline: none;
     text-decoration: none;
-    font: 600 13px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 600 var(--ui-toggle-font-size)/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.01em;
     transition:
       background-color 150ms ease,
@@ -50,29 +53,27 @@
   }
 
   .control:hover {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-toggle-bg));
-    border-color: color-mix(in srgb, var(--ui-toggle-active-bg) 30%, var(--ui-toggle-border));
-  }
-
-  .control:active {
-    transform: translateY(0.5px);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-toggle-bg)));
   }
 
   :host(:focus-visible) .control {
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-toggle-focus) 28%, transparent),
-      var(--ui-toggle-shadow);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-toggle-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   :host([pressed]) .control,
   .control[aria-pressed="true"] {
-    background: var(--ui-toggle-active-bg);
+    background: var(--ui-toggle-pressed-bg);
     border-color: var(--ui-toggle-active-border);
     color: var(--ui-toggle-active-color);
   }
 
   :host([pressed]) .control:hover {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 82%, #0f172a 18%);
+    background: var(--ui-color-accent-fill-hover, var(--ui-toggle-pressed-bg));
+  }
+
+  .icon:empty {
+    display: none !important;
   }
 
   .icon {
@@ -106,17 +107,17 @@
   }
 
   :host([size="sm"]) {
-    --ui-toggle-padding-x: 10px;
-    --ui-toggle-padding-y: 6px;
-    --ui-toggle-height: 32px;
-    --ui-toggle-radius: 9px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-toggle-height: var(--ui-control-height-1, 24px);
+    --ui-toggle-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-toggle-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]) {
-    --ui-toggle-padding-x: 14px;
-    --ui-toggle-padding-y: 10px;
-    --ui-toggle-height: 40px;
-    --ui-toggle-radius: 11px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-toggle-height: var(--ui-control-height-3, 40px);
+    --ui-toggle-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-toggle-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([shape="square"]) {
@@ -159,6 +160,14 @@
     background: transparent;
   }
 
+  /* A tone tints the pressed state in its own colour (the default soft fill is the theme accent). */
+  :host([tone="success"]),
+  :host([tone="warning"]),
+  :host([tone="danger"]) {
+    --ui-toggle-pressed-bg: color-mix(in srgb, var(--ui-toggle-active-bg) 16%, transparent);
+    --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 44%, transparent);
+  }
+
   :host([tone="success"]) {
     --ui-toggle-active-bg: var(--ui-color-success, #15803d);
   }
@@ -171,7 +180,16 @@
     --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. */
+  /* The contrast variant draws dark text on a solid light pressed fill (not the soft theme tint). */
+  :host([variant="contrast"]) {
+    --ui-toggle-pressed-bg: var(--ui-toggle-active-bg);
+    --ui-toggle-active-border: var(--ui-toggle-active-bg);
+  }
+
+  :host([variant="contrast"][pressed]) .control:hover {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 86%, #ffffff);
+  }
+
   :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; }
@@ -223,15 +241,15 @@
       --ui-toggle-shadow: none;
     }
   }
-`,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(`
+`,n=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 a(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(n.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>
       <span
         class="control"
         part="control"
         ${e?"data-disabled":""}
       >
-        <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="icon icon-off" part="icon-off" aria-hidden="true">${a(i)}</span>
+        <span class="icon icon-on" part="icon-on" aria-hidden="true">${a(t)}</span>
         <span class="label" part="label"><slot></slot></span>
       </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;
+    `),this._control=this.root.querySelector(".control"),this._syncAria()}shouldRenderOnAttributeChange(e,t,i){return n.has(e)}}typeof customElements<"u"&&!customElements.get("ui-toggle")&&customElements.define("ui-toggle",l);exports.UIToggle=l;