@editora/ui-core 0.1.25 → 0.2.1

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;