@editora/ui-core 0.1.21 → 0.1.22

package/dist/toast.cjs.js

@@ -16,7 +16,7 @@
     --ui-toast-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-toast-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-text, #0f172a) 8%);
     --ui-toast-color: var(--ui-color-text, #0f172a);
-    --ui-toast-muted: var(--ui-color-muted, #64748b);
+    --ui-toast-muted: var(--ui-color-muted, #526175);
     --ui-toast-shadow:
       none;
     --ui-toast-focus-ring: var(--ui-color-focus-ring, #2563eb);
@@ -93,13 +93,13 @@
   }
 
   .toast[data-tone="success"] {
-    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 38%, var(--ui-color-border, #cbd5e1));
-    --ui-toast-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 10%, var(--ui-color-surface, #ffffff));
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff));
   }
 
   .toast[data-tone="warning"] {
-    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 38%, var(--ui-color-border, #cbd5e1));
-    --ui-toast-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 10%, var(--ui-color-surface, #ffffff));
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 10%, var(--ui-color-surface, #ffffff));
   }
 
   .toast[data-tone="error"] {
@@ -210,7 +210,7 @@
       border: 1px solid CanvasText;
     }
   }
-`;let p=0;function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(i){const t=String(i||"").toLowerCase();return t==="success"||t==="warning"||t==="error"||t==="loading"||t==="neutral"?t:"info"}function f(i){const t=Number(i);return Number.isFinite(t)?Math.max(0,Math.trunc(t)):c}function b(i){const t=String(i||"polite").toLowerCase();return t==="off"||t==="assertive"?t:"polite"}class l extends u.ElementBase{constructor(){super(),this._toasts=[],this._timerMap=new Map,this._exitMap=new Map,this._onRootClick=this._handleRootClick.bind(this),this._onRootMouseEnter=this._handleRootMouseEnter.bind(this),this._onRootMouseLeave=this._handleRootMouseLeave.bind(this),this._onRootFocusIn=this._handleRootFocusIn.bind(this),this._onRootFocusOut=this._handleRootFocusOut.bind(this)}static get observedAttributes(){return["headless","position","max-visible"]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite"),this.setAttribute("role","region"),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this._clearAllTimers(),super.disconnectedCallback()}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}show(t,e={}){const o=++p,s=g(e.type),a=f(e.duration),r=b(e.ariaLive),n={id:o,message:String(t??""),duration:a,tone:s,ariaLive:r,createdAt:Date.now(),closing:!1};return this._toasts.push(n),this._trimVisibleToasts(),this.requestRender(),this.dispatchEvent(new CustomEvent("show",{detail:{id:o,message:n.message,type:s},bubbles:!0})),this._scheduleAutoHide(o,a),o}hide(t){const e=this._toasts.find(a=>a.id===t);if(!e||e.closing)return;e.closing=!0,this._clearToastTimer(t),this.requestRender();const o=this._exitMap.get(t);o&&clearTimeout(o);const s=setTimeout(()=>{this._exitMap.delete(t);const a=this._toasts.length;this._toasts=this._toasts.filter(r=>r.id!==t),this._toasts.length!==a&&(this.requestRender(),this.dispatchEvent(new CustomEvent("hide",{detail:{id:t},bubbles:!0})))},d);this._exitMap.set(t,s)}_maxVisible(){const t=Number(this.getAttribute("max-visible"));return Number.isFinite(t)?Math.max(1,Math.trunc(t)):5}_trimVisibleToasts(){const t=this._toasts.filter(s=>!s.closing),e=this._maxVisible();if(t.length<=e)return;[...t].sort((s,a)=>s.createdAt-a.createdAt).slice(0,t.length-e).forEach(s=>this.hide(s.id))}_scheduleAutoHide(t,e){if(this._clearToastTimer(t),e<=0)return;const o=Date.now(),s=setTimeout(()=>{this._timerMap.delete(t),this.hide(t)},e);this._timerMap.set(t,{timeout:s,startedAt:o,remaining:e,paused:!1})}_pauseToast(t){const e=this._timerMap.get(t);if(!e||e.paused)return;clearTimeout(e.timeout);const o=Date.now()-e.startedAt;e.remaining=Math.max(0,e.remaining-o),e.paused=!0,this._timerMap.set(t,e)}_resumeToast(t){const e=this._timerMap.get(t);if(!e||!e.paused)return;const o=Math.max(0,e.remaining);this._scheduleAutoHide(t,o)}_clearToastTimer(t){const e=this._timerMap.get(t);e&&(clearTimeout(e.timeout),this._timerMap.delete(t));const o=this._exitMap.get(t);o&&(clearTimeout(o),this._exitMap.delete(t))}_clearAllTimers(){for(const t of this._timerMap.values())clearTimeout(t.timeout);this._timerMap.clear();for(const t of this._exitMap.values())clearTimeout(t);this._exitMap.clear()}_closestToastId(t){const o=(t instanceof HTMLElement?t:null)?.closest(".toast[data-toast-id]");if(!o)return null;const s=Number(o.getAttribute("data-toast-id"));return Number.isFinite(s)?s:null}_handleRootClick(t){const e=t.target;if(!e)return;const o=e.closest("button.close[data-toast-id]");if(!o)return;t.preventDefault();const s=Number(o.getAttribute("data-toast-id"));Number.isNaN(s)||this.hide(s)}_handleRootMouseEnter(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootMouseLeave(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.target?.closest(".toast[data-toast-id]"),s=t.relatedTarget;s&&o?.contains(s)||this._resumeToast(e)}_handleRootFocusIn(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootFocusOut(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.relatedTarget,s=t.target?.closest(".toast[data-toast-id]");o&&s?.contains(o)||this._resumeToast(e)}render(){this.setContent(`
+`;let p=0;function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(i){const t=String(i||"").toLowerCase();return t==="success"||t==="warning"||t==="error"||t==="loading"||t==="neutral"?t:"info"}function f(i){const t=Number(i);return Number.isFinite(t)?Math.max(0,Math.trunc(t)):c}function b(i){const t=String(i||"polite").toLowerCase();return t==="off"||t==="assertive"?t:"polite"}class l extends u.ElementBase{constructor(){super(),this._toasts=[],this._timerMap=new Map,this._exitMap=new Map,this._onRootClick=this._handleRootClick.bind(this),this._onRootMouseEnter=this._handleRootMouseEnter.bind(this),this._onRootMouseLeave=this._handleRootMouseLeave.bind(this),this._onRootFocusIn=this._handleRootFocusIn.bind(this),this._onRootFocusOut=this._handleRootFocusOut.bind(this)}static get observedAttributes(){return["headless","position","max-visible"]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite"),this.setAttribute("role","region"),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this._clearAllTimers(),super.disconnectedCallback()}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}show(t,e={}){const o=++p,s=g(e.type),r=f(e.duration),a=b(e.ariaLive),n={id:o,message:String(t??""),duration:r,tone:s,ariaLive:a,createdAt:Date.now(),closing:!1};return this._toasts.push(n),this._trimVisibleToasts(),this.requestRender(),this.dispatchEvent(new CustomEvent("show",{detail:{id:o,message:n.message,type:s},bubbles:!0})),this._scheduleAutoHide(o,r),o}hide(t){const e=this._toasts.find(r=>r.id===t);if(!e||e.closing)return;e.closing=!0,this._clearToastTimer(t),this.requestRender();const o=this._exitMap.get(t);o&&clearTimeout(o);const s=setTimeout(()=>{this._exitMap.delete(t);const r=this._toasts.length;this._toasts=this._toasts.filter(a=>a.id!==t),this._toasts.length!==r&&(this.requestRender(),this.dispatchEvent(new CustomEvent("hide",{detail:{id:t},bubbles:!0})))},d);this._exitMap.set(t,s)}_maxVisible(){const t=Number(this.getAttribute("max-visible"));return Number.isFinite(t)?Math.max(1,Math.trunc(t)):5}_trimVisibleToasts(){const t=this._toasts.filter(s=>!s.closing),e=this._maxVisible();if(t.length<=e)return;[...t].sort((s,r)=>s.createdAt-r.createdAt).slice(0,t.length-e).forEach(s=>this.hide(s.id))}_scheduleAutoHide(t,e){if(this._clearToastTimer(t),e<=0)return;const o=Date.now(),s=setTimeout(()=>{this._timerMap.delete(t),this.hide(t)},e);this._timerMap.set(t,{timeout:s,startedAt:o,remaining:e,paused:!1})}_pauseToast(t){const e=this._timerMap.get(t);if(!e||e.paused)return;clearTimeout(e.timeout);const o=Date.now()-e.startedAt;e.remaining=Math.max(0,e.remaining-o),e.paused=!0,this._timerMap.set(t,e)}_resumeToast(t){const e=this._timerMap.get(t);if(!e||!e.paused)return;const o=Math.max(0,e.remaining);this._scheduleAutoHide(t,o)}_clearToastTimer(t){const e=this._timerMap.get(t);e&&(clearTimeout(e.timeout),this._timerMap.delete(t));const o=this._exitMap.get(t);o&&(clearTimeout(o),this._exitMap.delete(t))}_clearAllTimers(){for(const t of this._timerMap.values())clearTimeout(t.timeout);this._timerMap.clear();for(const t of this._exitMap.values())clearTimeout(t);this._exitMap.clear()}_closestToastId(t){const o=(t instanceof HTMLElement?t:null)?.closest(".toast[data-toast-id]");if(!o)return null;const s=Number(o.getAttribute("data-toast-id"));return Number.isFinite(s)?s:null}_handleRootClick(t){const e=t.target;if(!e)return;const o=e.closest("button.close[data-toast-id]");if(!o)return;t.preventDefault();const s=Number(o.getAttribute("data-toast-id"));Number.isNaN(s)||this.hide(s)}_handleRootMouseEnter(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootMouseLeave(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.target?.closest(".toast[data-toast-id]"),s=t.relatedTarget;s&&o?.contains(s)||this._resumeToast(e)}_handleRootFocusIn(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootFocusOut(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.relatedTarget,s=t.target?.closest(".toast[data-toast-id]");o&&s?.contains(o)||this._resumeToast(e)}render(){this.setContent(`
       <style>${h}</style>
       <div class="toast-list" aria-live="polite" part="list">
         ${this._toasts.map(t=>{const e=t.ariaLive==="assertive"||t.tone==="error"?"alert":"status",o=t.duration>0?'<span class="meta" part="meta">Auto-dismiss</span>':'<span class="meta" part="meta">Persistent</span>';return`

package/dist/toast.esm.js

@@ -17,7 +17,7 @@ const u = 3200, c = 170, d = `
     --ui-toast-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-toast-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-text, #0f172a) 8%);
     --ui-toast-color: var(--ui-color-text, #0f172a);
-    --ui-toast-muted: var(--ui-color-muted, #64748b);
+    --ui-toast-muted: var(--ui-color-muted, #526175);
     --ui-toast-shadow:
       none;
     --ui-toast-focus-ring: var(--ui-color-focus-ring, #2563eb);
@@ -94,13 +94,13 @@ const u = 3200, c = 170, d = `
   }
 
   .toast[data-tone="success"] {
-    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 38%, var(--ui-color-border, #cbd5e1));
-    --ui-toast-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 10%, var(--ui-color-surface, #ffffff));
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff));
   }
 
   .toast[data-tone="warning"] {
-    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 38%, var(--ui-color-border, #cbd5e1));
-    --ui-toast-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 10%, var(--ui-color-surface, #ffffff));
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 10%, var(--ui-color-surface, #ffffff));
   }
 
   .toast[data-tone="error"] {
@@ -248,27 +248,27 @@ class b extends l {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   show(t, e = {}) {
-    const o = ++h, s = m(e.type), a = g(e.duration), r = f(e.ariaLive), n = {
+    const o = ++h, s = m(e.type), r = g(e.duration), a = f(e.ariaLive), n = {
       id: o,
       message: String(t ?? ""),
-      duration: a,
+      duration: r,
       tone: s,
-      ariaLive: r,
+      ariaLive: a,
       createdAt: Date.now(),
       closing: !1
     };
-    return this._toasts.push(n), this._trimVisibleToasts(), this.requestRender(), this.dispatchEvent(new CustomEvent("show", { detail: { id: o, message: n.message, type: s }, bubbles: !0 })), this._scheduleAutoHide(o, a), o;
+    return this._toasts.push(n), this._trimVisibleToasts(), this.requestRender(), this.dispatchEvent(new CustomEvent("show", { detail: { id: o, message: n.message, type: s }, bubbles: !0 })), this._scheduleAutoHide(o, r), o;
   }
   hide(t) {
-    const e = this._toasts.find((a) => a.id === t);
+    const e = this._toasts.find((r) => r.id === t);
     if (!e || e.closing) return;
     e.closing = !0, this._clearToastTimer(t), this.requestRender();
     const o = this._exitMap.get(t);
     o && clearTimeout(o);
     const s = setTimeout(() => {
       this._exitMap.delete(t);
-      const a = this._toasts.length;
-      this._toasts = this._toasts.filter((r) => r.id !== t), this._toasts.length !== a && (this.requestRender(), this.dispatchEvent(new CustomEvent("hide", { detail: { id: t }, bubbles: !0 })));
+      const r = this._toasts.length;
+      this._toasts = this._toasts.filter((a) => a.id !== t), this._toasts.length !== r && (this.requestRender(), this.dispatchEvent(new CustomEvent("hide", { detail: { id: t }, bubbles: !0 })));
     }, c);
     this._exitMap.set(t, s);
   }
@@ -279,7 +279,7 @@ class b extends l {
   _trimVisibleToasts() {
     const t = this._toasts.filter((s) => !s.closing), e = this._maxVisible();
     if (t.length <= e) return;
-    [...t].sort((s, a) => s.createdAt - a.createdAt).slice(0, t.length - e).forEach((s) => this.hide(s.id));
+    [...t].sort((s, r) => s.createdAt - r.createdAt).slice(0, t.length - e).forEach((s) => this.hide(s.id));
   }
   _scheduleAutoHide(t, e) {
     if (this._clearToastTimer(t), e <= 0) return;

package/dist/toggle-group.cjs.js

@@ -115,17 +115,16 @@
       --ui-toggle-group-shadow: none;
     }
   }
-`,_=new Set(["multiple","orientation","aria-label","required","disabled"]);function x(n){return String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(n){try{return JSON.parse(n)}catch{return}}function w(n,t){if(!t)return n||"";if(!n)return[];const e=S(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 f(n,t){return t?JSON.stringify(Array.isArray(n)?n:[String(n)]):String(n||"")}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),a=this.getAttribute("value")||"";if(!this.multiple&&!i&&!a||a===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(),a=this.multiple,r=(c,s,o)=>{const u=c.hasAttribute(s);o&&!u&&c.setAttribute(s,""),!o&&u&&c.removeAttribute(s)},d=(c,s,o)=>{c.getAttribute(s)!==o&&c.setAttribute(s,o)};let h=-1,l=-1;this._isSyncing=!0;try{t.forEach((s,o)=>{const u=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(u);r(s,"pressed",b),d(s,"role",a?"checkbox":"radio"),d(s,"aria-checked",b?"true":"false"),b&&l<0&&(l=o),!s.hasAttribute("disabled")&&h<0&&(h=o)});const c=g.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:l>=0?l:h,getDisabled:s=>s.hasAttribute("disabled")});this._focusIndex=c,g.syncRovingTabStops(t,t[c]||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 a=this._toggles().indexOf(e);if(a<0)return;const r=this._toggleValue(e,a),d=t.detail?.pressed??e.hasAttribute("pressed");if(this._focusIndex=a,this.multiple){const l=this._selectedSet();d?l.add(r):l.delete(r),this._setGroupValue(Array.from(l),!0);return}const h=this.hasAttribute("allow-empty")&&!this.hasAttribute("required");if(d){this._setGroupValue(r,!0);return}if(h)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",a=this.getAttribute("activation")==="manual"?"manual":"auto",r=this._toggles().filter(o=>!o.hasAttribute("disabled"));if(r.length<2)return;const d=r.indexOf(e);if(d<0)return;const h=this._isHorizontalRtl(),l=o=>{const u=g.moveRovingFocusIndex(r,d,o,{wrap:!0,fallbackIndex:g.resolveRovingFocusIndex(r,{activeIndex:d,getDisabled:()=>!1}),getDisabled:()=>!1});if(u<0)return;const p=r[u];this._focusIndex=this._toggles().indexOf(p),g.syncRovingTabStops(r,p,{activeAttribute:null}),g.focusRovingItem(p),a==="auto"&&p.toggle?.(!0)},c=i==="horizontal"&&(t.key==="ArrowRight"&&!h||t.key==="ArrowLeft"&&h)||i==="vertical"&&t.key==="ArrowDown",s=i==="horizontal"&&(t.key==="ArrowLeft"&&!h||t.key==="ArrowRight"&&h)||i==="vertical"&&t.key==="ArrowUp";if(c){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 u=r[o];this._focusIndex=this._toggles().indexOf(u),g.syncRovingTabStops(r,u,{activeAttribute:null}),g.focusRovingItem(u),a==="auto"&&u.toggle?.(!0);return}if(t.key==="End"){t.preventDefault();const o=g.getRovingFocusBoundaryIndex(r,"last",()=>!1);if(o<0)return;const u=r[o];this._focusIndex=this._toggles().indexOf(u),g.syncRovingTabStops(r,u,{activeAttribute:null}),g.focusRovingItem(u),a==="auto"&&u.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");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}))}_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(`
       <style>${y}</style>
       <div
         class="group"
         part="group"
         role="${t}"
-        aria-label="${x(i)}"
-        aria-orientation="${e}"
-        aria-disabled="${r?"true":"false"}"
-        aria-required="${a?"true":"false"}"
+        aria-label="${x(e)}"
+        aria-disabled="${n?"true":"false"}"
+        aria-required="${i?"true":"false"}"
       >
         <slot></slot>
       </div>
-    `),this._syncChildren()}_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"),d=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",d?"true":"false"),t.setAttribute("aria-required",r?"true":"false")}_isHorizontalRtl(){if(this.getAttribute("orientation")==="vertical")return!1;const t=this.getAttribute("dir");return t?t.toLowerCase()==="rtl":typeof window>"u"?!1:window.getComputedStyle(this).direction==="rtl"}shouldRenderOnAttributeChange(t,e,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-toggle-group")&&customElements.define("ui-toggle-group",v);exports.UIToggleGroup=v;
+    `),this._syncChildren()}_syncGroupA11y(){const t=this.root.querySelector(".group");if(!t)return;const e=this.multiple?"group":"radiogroup";this.getAttribute("orientation");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;const t=this.getAttribute("dir");return t?t.toLowerCase()==="rtl":typeof window>"u"?!1:window.getComputedStyle(this).direction==="rtl"}shouldRenderOnAttributeChange(t,e,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-toggle-group")&&customElements.define("ui-toggle-group",v);exports.UIToggleGroup=v;

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;