@editora/ui-core 0.1.9 → 0.1.12

package/dist/toggle-group.esm.js

@@ -0,0 +1,382 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+import { r as A, s as f, g as y, f as m, m as w } from "./roving-focus-group-4350c9a7.mjs";
+const S = `
+  :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-shadow:
+      none;
+
+    color-scheme: light dark;
+    display: inline-flex;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .group {
+    min-inline-size: 0;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-toggle-group-gap);
+    padding: var(--ui-toggle-group-padding);
+    border: 1px solid var(--ui-toggle-group-border);
+    border-radius: var(--ui-toggle-group-radius);
+    background: var(--ui-toggle-group-bg);
+    box-shadow: var(--ui-toggle-group-shadow);
+  }
+
+  :host([orientation="vertical"]) .group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([variant="soft"]) {
+    --ui-toggle-group-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, var(--ui-color-surface, #ffffff));
+    --ui-toggle-group-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 24%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="minimal"]) .group {
+    border-color: transparent;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-toggle-group-bg: #0f172a;
+    --ui-toggle-group-border: #334155;
+    --ui-toggle-group-shadow:
+      0 10px 24px rgba(2, 6, 23, 0.42),
+      0 24px 50px rgba(2, 6, 23, 0.38);
+  }
+
+  :host([size="sm"]) {
+    --ui-toggle-group-gap: 6px;
+    --ui-toggle-group-padding: 4px;
+    --ui-toggle-group-radius: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-toggle-group-gap: 10px;
+    --ui-toggle-group-padding: 8px;
+    --ui-toggle-group-radius: 14px;
+  }
+
+  :host([density="compact"]) {
+    --ui-toggle-group-gap: 5px;
+    --ui-toggle-group-padding: 4px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-toggle-group-gap: 10px;
+    --ui-toggle-group-padding: 8px;
+  }
+
+  :host([shape="square"]) {
+    --ui-toggle-group-radius: 4px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-toggle-group-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-toggle-group-shadow: none;
+  }
+
+  :host([disabled]) .group {
+    opacity: 0.6;
+  }
+
+  :host([headless]) .group {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .group {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .group {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-toggle-group-bg: Canvas;
+      --ui-toggle-group-border: CanvasText;
+      --ui-toggle-group-shadow: none;
+    }
+  }
+`, E = /* @__PURE__ */ new Set(["multiple", "orientation", "aria-label", "required", "disabled"]);
+function C(n) {
+  return String(n).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function I(n) {
+  try {
+    return JSON.parse(n);
+  } catch {
+    return;
+  }
+}
+function k(n, t) {
+  if (!t)
+    return n || "";
+  if (!n)
+    return [];
+  const e = I(n);
+  return Array.isArray(e) ? Array.from(new Set(e.map((r) => String(r)).filter(Boolean))) : n.includes(",") ? Array.from(new Set(n.split(",").map((r) => r.trim()).filter(Boolean))) : [n];
+}
+function _(n, t) {
+  return t ? JSON.stringify(Array.isArray(n) ? n : [String(n)]) : String(n || "");
+}
+class z extends x {
+  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((r) => this._clearGroupFlagsFromNode(r));
+      }), 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, r) {
+    if (e !== r) {
+      if (E.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 k(this.getAttribute("value"), this.multiple);
+  }
+  set value(t) {
+    const e = _(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) {
+    var r;
+    return t.getAttribute("value") || t.getAttribute("data-value") || ((r = t.textContent) == null ? void 0 : r.trim()) || String(e);
+  }
+  _clearGroupFlags(t) {
+    var e;
+    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"), (e = t._syncAria) == null || e.call(t);
+  }
+  _clearGroupFlagsFromNode(t) {
+    if (!(t instanceof HTMLElement))
+      return;
+    t.matches("ui-toggle") && this._clearGroupFlags(t), Array.from(t.querySelectorAll("ui-toggle")).forEach((r) => this._clearGroupFlags(r));
+  }
+  _selectedSet() {
+    const t = this.value;
+    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 r = _(t, this.multiple), a = this.getAttribute("value") || "";
+    if (!this.multiple && !r && !a || a === r) {
+      this._syncChildren();
+      return;
+    }
+    if (!this.multiple && !r ? this.removeAttribute("value") : this.setAttribute("value", r), this._syncChildren(), !e)
+      return;
+    const i = {
+      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: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: i, bubbles: !0, composed: !0 }));
+  }
+  _syncChildren() {
+    const t = this._toggles(), e = this.hasAttribute("disabled"), r = this._selectedSet(), a = this.multiple, i = (u, s, l) => {
+      const b = u.hasAttribute(s);
+      l && !b && u.setAttribute(s, ""), !l && b && u.removeAttribute(s);
+    }, g = (u, s, l) => {
+      u.getAttribute(s) !== l && u.setAttribute(s, l);
+    };
+    let c = -1, h = -1;
+    this._isSyncing = !0;
+    try {
+      t.forEach((s, l) => {
+        const b = this._toggleValue(s, l), d = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", o = e || d;
+        i(s, "data-group-item", !0), o ? (i(s, "disabled", !0), i(s, "data-group-disabled", e && !d)) : s.hasAttribute("data-group-disabled") && (i(s, "disabled", !1), i(s, "data-group-disabled", !1));
+        const p = r.has(b);
+        i(s, "pressed", p), g(s, "role", a ? "checkbox" : "radio"), g(s, "aria-checked", p ? "true" : "false"), p && h < 0 && (h = l), !s.hasAttribute("disabled") && c < 0 && (c = l);
+      });
+      const u = A(t, {
+        activeIndex: this._focusIndex,
+        selectedIndex: h >= 0 ? h : c,
+        getDisabled: (s) => s.hasAttribute("disabled")
+      });
+      this._focusIndex = u, f(t, t[u] || null, { activeAttribute: null });
+    } finally {
+      this._isSyncing = !1;
+    }
+  }
+  _onToggleEvent(t) {
+    var h;
+    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 i = this._toggleValue(e, a), g = ((h = t.detail) == null ? void 0 : h.pressed) ?? e.hasAttribute("pressed");
+    if (this._focusIndex = a, this.multiple) {
+      const u = this._selectedSet();
+      g ? u.add(i) : u.delete(i), this._setGroupValue(Array.from(u), !0);
+      return;
+    }
+    const c = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
+    if (g) {
+      this._setGroupValue(i, !0);
+      return;
+    }
+    if (c)
+      this._setGroupValue("", !0);
+    else {
+      const u = String(this.value || "");
+      this._setGroupValue(u || i, !1);
+    }
+  }
+  _onKeyDown(t) {
+    var l, b;
+    const e = t.target;
+    if (!e || e.tagName.toLowerCase() !== "ui-toggle")
+      return;
+    const r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("activation") === "manual" ? "manual" : "auto", i = this._toggles().filter((d) => !d.hasAttribute("disabled"));
+    if (i.length < 2)
+      return;
+    const g = i.indexOf(e);
+    if (g < 0)
+      return;
+    const c = this._isHorizontalRtl(), h = (d) => {
+      var v;
+      const o = w(i, g, d, {
+        wrap: !0,
+        fallbackIndex: A(i, { activeIndex: g, getDisabled: () => !1 }),
+        getDisabled: () => !1
+      });
+      if (o < 0)
+        return;
+      const p = i[o];
+      this._focusIndex = this._toggles().indexOf(p), f(i, p, { activeAttribute: null }), m(p), a === "auto" && ((v = p.toggle) == null || v.call(p, !0));
+    }, u = r === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || r === "vertical" && t.key === "ArrowDown", s = r === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || r === "vertical" && t.key === "ArrowUp";
+    if (u) {
+      t.preventDefault(), h(1);
+      return;
+    }
+    if (s) {
+      t.preventDefault(), h(-1);
+      return;
+    }
+    if (t.key === "Home") {
+      t.preventDefault();
+      const d = y(i, "first", () => !1);
+      if (d < 0)
+        return;
+      const o = i[d];
+      this._focusIndex = this._toggles().indexOf(o), f(i, o, { activeAttribute: null }), m(o), a === "auto" && ((l = o.toggle) == null || l.call(o, !0));
+      return;
+    }
+    if (t.key === "End") {
+      t.preventDefault();
+      const d = y(i, "last", () => !1);
+      if (d < 0)
+        return;
+      const o = i[d];
+      this._focusIndex = this._toggles().indexOf(o), f(i, o, { activeAttribute: null }), m(o), a === "auto" && ((b = o.toggle) == null || b.call(o, !0));
+    }
+  }
+  render() {
+    const t = this.multiple ? "group" : "radiogroup", e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", r = this.getAttribute("aria-label") || "Toggle group", a = this.hasAttribute("required"), i = this.hasAttribute("disabled");
+    this.setContent(`
+      <style>${S}</style>
+      <div
+        class="group"
+        part="group"
+        role="${t}"
+        aria-label="${C(r)}"
+        aria-orientation="${e}"
+        aria-disabled="${i ? "true" : "false"}"
+        aria-required="${a ? "true" : "false"}"
+      >
+        <slot></slot>
+      </div>
+    `), this._syncChildren();
+  }
+  _syncGroupA11y() {
+    const t = this.root.querySelector(".group");
+    if (!t)
+      return;
+    const e = this.multiple ? "group" : "radiogroup", r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toggle group", i = 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") !== r && t.setAttribute("aria-orientation", r), t.setAttribute("aria-disabled", g ? "true" : "false"), t.setAttribute("aria-required", i ? "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, r) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-toggle-group") && customElements.define("ui-toggle-group", z);
+export {
+  z as UIToggleGroup
+};

package/dist/toggle.cjs.js

@@ -0,0 +1,237 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.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-border: color-mix(in srgb, var(--ui-toggle-active-bg) 72%, #0f172a 28%);
+    --ui-toggle-muted: var(--ui-color-muted, #64748b);
+    --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-gap: 8px;
+
+    color-scheme: light dark;
+    display: inline-flex;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .control {
+    min-inline-size: 0;
+    min-block-size: var(--ui-toggle-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-toggle-gap);
+    padding: var(--ui-toggle-padding-y) var(--ui-toggle-padding-x);
+    border: 1px solid var(--ui-toggle-border);
+    border-radius: var(--ui-toggle-radius);
+    background: var(--ui-toggle-bg);
+    color: var(--ui-toggle-color);
+    box-shadow: var(--ui-toggle-shadow);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+    font: 600 13px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease,
+      transform 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .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);
+  }
+
+  :host(:focus-visible) .control {
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-toggle-focus) 28%, transparent),
+      var(--ui-toggle-shadow);
+  }
+
+  :host([pressed]) .control,
+  .control[aria-pressed="true"] {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 88%, #ffffff 12%);
+    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%);
+  }
+
+  .icon {
+    display: inline-grid;
+    place-items: center;
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .icon-off {
+    display: inline-grid;
+  }
+
+  .icon-on {
+    display: none;
+  }
+
+  :host([pressed]) .icon-on {
+    display: inline-grid;
+  }
+
+  :host([pressed]) .icon-off {
+    display: none;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([size="sm"]) {
+    --ui-toggle-padding-x: 10px;
+    --ui-toggle-padding-y: 6px;
+    --ui-toggle-height: 32px;
+    --ui-toggle-radius: 9px;
+  }
+
+  :host([size="lg"]) {
+    --ui-toggle-padding-x: 14px;
+    --ui-toggle-padding-y: 10px;
+    --ui-toggle-height: 40px;
+    --ui-toggle-radius: 11px;
+  }
+
+  :host([shape="square"]) {
+    --ui-toggle-radius: 4px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-toggle-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-toggle-shadow: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-toggle-bg: color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-color-surface, #ffffff));
+    --ui-toggle-border: color-mix(in srgb, var(--ui-toggle-active-bg) 24%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="outline"]) .control {
+    --ui-toggle-bg: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-toggle-bg: #0f172a;
+    --ui-toggle-color: #e2e8f0;
+    --ui-toggle-border: #334155;
+    --ui-toggle-active-bg: #93c5fd;
+    --ui-toggle-active-color: #0f172a;
+    --ui-toggle-focus: #93c5fd;
+    --ui-toggle-shadow:
+      0 10px 24px rgba(2, 6, 23, 0.38),
+      0 24px 50px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([variant="minimal"]) .control {
+    box-shadow: none;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :host([tone="success"]) {
+    --ui-toggle-active-bg: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-toggle-active-bg: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-toggle-active-bg: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([disabled]) .control,
+  :host([loading]) .control {
+    opacity: 0.56;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  :host([loading]) .icon {
+    animation: ui-toggle-spin 900ms linear infinite;
+  }
+
+  :host([headless]) .control {
+    display: none;
+  }
+
+  @keyframes ui-toggle-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .icon {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .control {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-toggle-bg: Canvas;
+      --ui-toggle-color: CanvasText;
+      --ui-toggle-border: CanvasText;
+      --ui-toggle-active-bg: Highlight;
+      --ui-toggle-active-color: HighlightText;
+      --ui-toggle-focus: Highlight;
+      --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(`
+      <style>${c}</style>
+      <button
+        type="button"
+        class="control"
+        part="control"
+        aria-label="${n(r)}"
+        aria-pressed="${e?"true":"false"}"
+        aria-disabled="${t?"true":"false"}"
+        tabindex="-1"
+        ${t?"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="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;