@editora/ui-core 0.1.9 → 0.1.12

package/dist/radio-group.esm.js

@@ -0,0 +1,477 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+import { m as g, r as h, f as m, s as _, g as p } from "./roving-focus-group-4350c9a7.mjs";
+const I = `
+  :host {
+    display: block;
+    width: 100%;
+    color-scheme: light dark;
+
+    --ui-radio-gap: 8px;
+    --ui-radio-pad-y: 10px;
+    --ui-radio-pad-x: 12px;
+    --ui-radio-radius: 12px;
+    --ui-radio-dot-size: 10px;
+    --ui-radio-control-size: 18px;
+
+    --ui-radio-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-radio-bg-hover: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, #f8fafc 20%);
+    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
+    --ui-radio-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-radio-border-selected: var(--ui-color-primary, #2563eb);
+    --ui-radio-text: var(--ui-color-text, #0f172a);
+    --ui-radio-muted: #64748b;
+    --ui-radio-shadow: none;
+    --ui-radio-ring: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, transparent);
+  }
+
+  .root {
+    display: grid;
+    gap: var(--ui-radio-gap);
+  }
+
+  :host([orientation="horizontal"]) .root {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    align-items: stretch;
+  }
+
+  .option {
+    all: unset;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    border-radius: var(--ui-radio-radius);
+    border: 1px solid var(--ui-radio-border);
+    background: var(--ui-radio-bg);
+    box-shadow: var(--ui-radio-shadow);
+    color: var(--ui-radio-text);
+    padding: var(--ui-radio-pad-y) var(--ui-radio-pad-x);
+    cursor: pointer;
+    transition:
+      border-color 140ms ease,
+      background-color 140ms ease,
+      box-shadow 180ms ease,
+      transform 140ms ease;
+  }
+
+  .option:hover {
+    background: var(--ui-radio-bg-hover);
+  }
+
+  .option:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ui-radio-ring), var(--ui-radio-shadow);
+  }
+
+  .option[data-checked="true"] {
+    border-color: var(--ui-radio-border-selected);
+    background: var(--ui-radio-bg-selected);
+  }
+
+  .option[data-disabled="true"] {
+    opacity: 0.56;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  .control {
+    position: relative;
+    inline-size: var(--ui-radio-control-size);
+    block-size: var(--ui-radio-control-size);
+    border-radius: 999px;
+    border: 1.5px solid color-mix(in srgb, var(--ui-radio-border-selected) 44%, var(--ui-radio-border));
+    background: color-mix(in srgb, var(--ui-radio-bg) 88%, white 12%);
+    display: grid;
+    place-items: center;
+    transition: border-color 140ms ease, background-color 140ms ease;
+  }
+
+  .dot {
+    inline-size: var(--ui-radio-dot-size);
+    block-size: var(--ui-radio-dot-size);
+    border-radius: 999px;
+    background: var(--ui-radio-border-selected);
+    transform: scale(0.25);
+    opacity: 0;
+    transition: transform 170ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity 140ms ease;
+  }
+
+  .option[data-checked="true"] .dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .text {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .label {
+    font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .description {
+    font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    color: var(--ui-radio-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :host([variant="card"]) .option {
+    border-radius: 14px;
+    box-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.06),
+      0 10px 24px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="segmented"]) .root {
+    gap: 0;
+    border: 1px solid var(--ui-radio-border);
+    border-radius: calc(var(--ui-radio-radius) + 2px);
+    overflow: hidden;
+  }
+
+  :host([variant="segmented"]) .option {
+    border-radius: 0;
+    border: 0;
+    box-shadow: none;
+    border-inline-end: 1px solid var(--ui-radio-border);
+  }
+
+  :host([variant="segmented"][orientation="horizontal"]) .option:last-child,
+  :host([variant="segmented"][orientation="vertical"]) .option:last-child {
+    border-inline-end: 0;
+  }
+
+  :host([variant="segmented"][orientation="vertical"]) .option {
+    border-inline-end: 0;
+    border-bottom: 1px solid var(--ui-radio-border);
+  }
+
+  :host([variant="segmented"][orientation="vertical"]) .option:last-child {
+    border-bottom: 0;
+  }
+
+  :host([size="sm"]) {
+    --ui-radio-pad-y: 8px;
+    --ui-radio-pad-x: 10px;
+    --ui-radio-control-size: 16px;
+    --ui-radio-dot-size: 8px;
+    --ui-radio-gap: 6px;
+    --ui-radio-radius: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-radio-pad-y: 12px;
+    --ui-radio-pad-x: 14px;
+    --ui-radio-control-size: 20px;
+    --ui-radio-dot-size: 11px;
+    --ui-radio-gap: 10px;
+    --ui-radio-radius: 14px;
+  }
+
+  :host([tone="neutral"]) { --ui-radio-border-selected: #64748b; }
+  :host([tone="success"]) { --ui-radio-border-selected: #16a34a; }
+  :host([tone="warning"]) { --ui-radio-border-selected: #d97706; }
+  :host([tone="danger"]) { --ui-radio-border-selected: #dc2626; }
+  :host([tone="info"]) { --ui-radio-border-selected: #0ea5e9; }
+
+  :host([disabled]) .option {
+    cursor: not-allowed;
+  }
+
+  :host([headless]) .root {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .option,
+    .dot {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .option,
+    .control {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .option {
+      forced-color-adjust: none;
+      background: Canvas;
+      border-color: CanvasText;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .option[data-checked="true"] {
+      border-color: Highlight;
+      background: HighlightText;
+      color: Highlight;
+    }
+
+    .control {
+      border-color: CanvasText;
+      background: Canvas;
+    }
+
+    .dot {
+      background: Highlight;
+    }
+  }
+`;
+function b(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function f(s) {
+  return s === "horizontal" ? "horizontal" : "vertical";
+}
+function A(s) {
+  return s === "sm" || s === "lg" ? s : "md";
+}
+function y(s) {
+  return s === "card" || s === "segmented" ? s : "default";
+}
+function k(s) {
+  return s === "neutral" || s === "success" || s === "warning" || s === "danger" || s === "info" ? s : "brand";
+}
+class w extends x {
+  constructor() {
+    super(), this._value = "", this._disabled = !1, this._required = !1, this._orientation = "vertical", this._focusIndex = -1, this._options = [], this._observer = null, this._onClickBound = (e) => this._onClick(e), this._onKeydownBound = (e) => this._onKeydown(e);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "disabled",
+      "required",
+      "name",
+      "orientation",
+      "variant",
+      "size",
+      "tone",
+      "options",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    this._syncFromAttributes(), super.connectedCallback(), this.root.addEventListener("click", this._onClickBound), this.root.addEventListener("keydown", this._onKeydownBound), typeof MutationObserver < "u" && (this._observer || (this._observer = new MutationObserver(() => {
+      this.hasAttribute("options") || (this._syncFromAttributes(), this.requestRender());
+    })), this._observer.observe(this, { childList: !0, subtree: !0, characterData: !0 }));
+  }
+  disconnectedCallback() {
+    var e;
+    this.root.removeEventListener("click", this._onClickBound), this.root.removeEventListener("keydown", this._onKeydownBound), (e = this._observer) == null || e.disconnect(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, i, t) {
+    i !== t && (this._syncFromAttributes(), e === "options" ? this.requestRender() : this._syncInteractiveState(), e === "value" && this.dispatchEvent(
+      new CustomEvent("valuechange", {
+        detail: { value: this._value },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    const i = String(e || "");
+    i !== this._value && this.setAttribute("value", i);
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  _syncFromAttributes() {
+    var e;
+    if (this._value = this.getAttribute("value") || "", this._disabled = this.hasAttribute("disabled"), this._required = this.hasAttribute("required"), this._orientation = f(this.getAttribute("orientation")), this._options = this._collectOptions(), this._focusIndex < 0 || this._focusIndex >= this._options.length || (e = this._options[this._focusIndex]) != null && e.disabled) {
+      const i = this._findSelectedIndex();
+      this._focusIndex = i >= 0 ? i : this._findFirstEnabledIndex();
+    }
+  }
+  _collectOptions() {
+    const e = this.getAttribute("options");
+    if (e && e.trim())
+      try {
+        const t = JSON.parse(e);
+        if (Array.isArray(t)) {
+          const r = t.map((o, a) => {
+            if (typeof o == "string")
+              return { value: o, label: o, disabled: !1 };
+            if (o && typeof o == "object") {
+              const n = String(o.value ?? `option-${a + 1}`), d = String(o.label ?? n), l = o.description == null ? void 0 : String(o.description), u = !!o.disabled;
+              return { value: n, label: d, description: l, disabled: u };
+            }
+            return null;
+          }).filter(Boolean);
+          if (r.length)
+            return r;
+        }
+      } catch {
+      }
+    return Array.from(this.children).filter(
+      (t) => t instanceof HTMLElement && t.hasAttribute("data-radio")
+    ).map((t, r) => {
+      const o = t.getAttribute("data-value") || t.getAttribute("value"), a = (t.getAttribute("data-label") || t.textContent || "").trim(), n = (o || a || `option-${r + 1}`).trim(), d = (t.getAttribute("data-description") || "").trim() || void 0, l = t.hasAttribute("data-disabled") || t.getAttribute("aria-disabled") === "true";
+      return { value: n, label: a || n, description: d, disabled: l };
+    });
+  }
+  _findSelectedIndex() {
+    const e = this._options.findIndex((i) => i.value === this._value && !i.disabled);
+    return e >= 0 ? e : this._value ? -1 : this._findFirstEnabledIndex();
+  }
+  _findFirstEnabledIndex() {
+    return this._options.findIndex((e) => !e.disabled);
+  }
+  _selectIndex(e, i) {
+    if (this._disabled)
+      return;
+    const t = this._options[e];
+    if (!t || t.disabled)
+      return;
+    const r = this._value !== t.value;
+    if (this._focusIndex = e, r) {
+      this._value = t.value, this.getAttribute("value") !== t.value ? this.setAttribute("value", t.value) : this.requestRender();
+      const o = { value: t.value, option: { ...t }, reason: i, name: this.getAttribute("name") || void 0 };
+      this.dispatchEvent(new CustomEvent("input", { detail: o, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: o, bubbles: !0, composed: !0 }));
+    } else
+      this.requestRender();
+    this._focusOption(e);
+  }
+  _moveSelection(e) {
+    const i = g(this._options, this._focusIndex, e > 0 ? 1 : -1, {
+      wrap: !0,
+      fallbackIndex: h(this._options, {
+        activeIndex: this._focusIndex,
+        selectedIndex: this._findSelectedIndex(),
+        getDisabled: (t) => !!t.disabled
+      }),
+      getDisabled: (t) => !!t.disabled
+    });
+    i >= 0 && this._selectIndex(i, "keyboard");
+  }
+  _focusOption(e) {
+    const i = this.root.querySelector(`.option[data-index="${e}"]`);
+    m(i);
+  }
+  _syncInteractiveState() {
+    if (!this.root.querySelector(".root"))
+      return;
+    this.setAttribute("role", "radiogroup"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-required", this._required ? "true" : "false"), this.setAttribute("aria-orientation", this._orientation);
+    const i = this._findSelectedIndex(), t = i >= 0 ? i : this._findFirstEnabledIndex();
+    this._focusIndex = h(this._options, {
+      activeIndex: this._focusIndex,
+      selectedIndex: t,
+      getDisabled: (a) => !!a.disabled
+    });
+    const r = this.root.querySelectorAll(".option[data-index]");
+    r.forEach((a) => {
+      const n = Number(a.getAttribute("data-index"));
+      if (Number.isNaN(n))
+        return;
+      const d = this._options[n];
+      if (!d)
+        return;
+      const l = n === t, u = this._disabled || !!d.disabled, c = n === this._focusIndex ? 0 : -1;
+      a.setAttribute("data-value", d.value), a.setAttribute("data-checked", l ? "true" : "false"), a.setAttribute("data-disabled", u ? "true" : "false"), a.setAttribute("aria-checked", l ? "true" : "false"), a.setAttribute("aria-disabled", u ? "true" : "false"), a.setAttribute("tabindex", String(c));
+    });
+    const o = Array.from(r);
+    _(o, o[this._focusIndex] || null, { activeAttribute: null });
+  }
+  _onClick(e) {
+    const i = e.target;
+    if (!i)
+      return;
+    const t = i.closest(".option");
+    if (!t)
+      return;
+    const r = Number(t.getAttribute("data-index"));
+    Number.isNaN(r) || this._selectIndex(r, "click");
+  }
+  _onKeydown(e) {
+    if (this._disabled)
+      return;
+    const i = e.key, t = this._orientation === "horizontal";
+    if (i === "ArrowRight" && t || i === "ArrowDown") {
+      e.preventDefault(), this._moveSelection(1);
+      return;
+    }
+    if (i === "ArrowLeft" && t || i === "ArrowUp") {
+      e.preventDefault(), this._moveSelection(-1);
+      return;
+    }
+    if (i === "Home") {
+      e.preventDefault();
+      const r = p(this._options, "first", (o) => !!o.disabled);
+      r >= 0 && this._selectIndex(r, "keyboard");
+      return;
+    }
+    if (i === "End") {
+      e.preventDefault();
+      const r = p(this._options, "last", (o) => !!o.disabled);
+      r >= 0 && this._selectIndex(r, "keyboard");
+      return;
+    }
+    if (i === " " || i === "Enter") {
+      e.preventDefault();
+      const r = this._focusIndex >= 0 ? this._focusIndex : this._findSelectedIndex();
+      r >= 0 && this._selectIndex(r, "keyboard");
+    }
+  }
+  render() {
+    var n;
+    const e = A(this.getAttribute("size")), i = y(this.getAttribute("variant")), t = k(this.getAttribute("tone")), r = f(this.getAttribute("orientation"));
+    this.setAttribute("role", "radiogroup"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-required", this._required ? "true" : "false"), this.setAttribute("aria-orientation", r);
+    const o = this._findSelectedIndex(), a = o >= 0 ? o : this._findFirstEnabledIndex();
+    (this._focusIndex < 0 || this._focusIndex >= this._options.length || (n = this._options[this._focusIndex]) != null && n.disabled) && (this._focusIndex = a), this.setContent(`
+      <style>${I}</style>
+      <div class="root" part="root" data-size="${e}" data-variant="${i}" data-tone="${t}">
+        ${this._options.map((d, l) => {
+      const u = l === a, c = this._disabled || !!d.disabled, v = l === this._focusIndex ? 0 : -1;
+      return `
+              <button
+                type="button"
+                class="option"
+                part="option"
+                role="radio"
+                data-index="${l}"
+                data-value="${b(d.value)}"
+                data-checked="${u ? "true" : "false"}"
+                data-disabled="${c ? "true" : "false"}"
+                aria-checked="${u ? "true" : "false"}"
+                aria-disabled="${c ? "true" : "false"}"
+                tabindex="${v}"
+              >
+                <span class="control" part="control"><span class="dot" part="dot"></span></span>
+                <span class="text" part="text">
+                  <span class="label" part="label">${b(d.label)}</span>
+                  ${d.description ? `<span class="description" part="description">${b(d.description)}</span>` : ""}
+                </span>
+              </button>
+            `;
+    }).join("")}
+      </div>
+    `);
+  }
+  shouldRenderOnAttributeChange(e, i, t) {
+    return e === "options";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-radio-group") && customElements.define("ui-radio-group", w);
+export {
+  w as UIRadioGroup
+};