@editora/ui-core 0.1.9 → 0.1.12

package/dist/quick-actions.esm.js

@@ -0,0 +1,357 @@
+import { E as b } from "./ElementBase-909688f3.mjs";
+const h = `
+  :host {
+    --ui-quick-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-quick-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-quick-text: var(--ui-color-text, #0f172a);
+    --ui-quick-muted: var(--ui-color-muted, #64748b);
+    --ui-quick-accent: var(--ui-color-primary, #2563eb);
+    --ui-quick-focus: var(--ui-color-focus-ring, #2563eb);
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--ui-quick-border);
+    border-radius: 999px;
+    background: var(--ui-quick-bg);
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+    padding: 8px;
+    color: var(--ui-quick-text);
+  }
+
+  :host([orientation="vertical"]) .root {
+    flex-direction: column;
+    border-radius: 16px;
+    align-items: stretch;
+  }
+
+  :host([mode="fab"]) .root {
+    padding: 6px;
+    border-radius: 14px;
+    display: inline-grid;
+    gap: 8px;
+  }
+
+  .toggle {
+    inline-size: 36px;
+    block-size: 36px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 82%, transparent);
+    background: color-mix(in srgb, var(--ui-quick-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-quick-accent) 88%, #0f172a 12%);
+    font-size: 17px;
+    line-height: 1;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    transition: border-color 120ms ease, background-color 120ms ease;
+  }
+
+  .toggle:hover {
+    border-color: color-mix(in srgb, var(--ui-quick-accent) 42%, var(--ui-quick-border));
+  }
+
+  .toggle:focus-visible {
+    outline: 2px solid var(--ui-quick-focus);
+    outline-offset: 1px;
+  }
+
+  .actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  :host([orientation="vertical"]) .actions,
+  :host([mode="fab"]) .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+
+  ::slotted([slot="action"]) {
+    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 84%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-quick-bg) 98%, transparent);
+    color: inherit;
+    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    padding: 8px 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  ::slotted([slot="action"]:focus-visible) {
+    outline: 2px solid var(--ui-quick-focus);
+    outline-offset: 1px;
+  }
+
+  :host([variant="soft"]) {
+    --ui-quick-bg: color-mix(in srgb, var(--ui-quick-accent) 9%, var(--ui-color-surface, #ffffff));
+    --ui-quick-border: color-mix(in srgb, var(--ui-quick-accent) 26%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-quick-bg: #0f172a;
+    --ui-quick-border: #334155;
+    --ui-quick-text: #e2e8f0;
+    --ui-quick-muted: #93a4bd;
+    --ui-quick-accent: #93c5fd;
+    --ui-quick-focus: #93c5fd;
+  }
+
+  :host([variant="minimal"]) .root {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([floating]) {
+    position: fixed;
+    z-index: 1250;
+  }
+
+  :host([floating][placement="bottom-right"]) {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  :host([floating][placement="bottom-left"]) {
+    left: 16px;
+    bottom: 16px;
+  }
+
+  :host([floating][placement="top-right"]) {
+    right: 16px;
+    top: 16px;
+  }
+
+  :host([floating][placement="top-left"]) {
+    left: 16px;
+    top: 16px;
+  }
+
+  :host([headless]) .root {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-quick-bg: Canvas;
+      --ui-quick-border: CanvasText;
+      --ui-quick-text: CanvasText;
+      --ui-quick-muted: CanvasText;
+      --ui-quick-accent: Highlight;
+      --ui-quick-focus: Highlight;
+    }
+
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .toggle {
+      border-color: Highlight;
+    }
+  }
+`;
+let p = 0;
+function l(u) {
+  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class g extends b {
+  constructor() {
+    super(), this._instanceId = ++p, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "mode",
+      "orientation",
+      "variant",
+      "floating",
+      "placement",
+      "collapsible",
+      "label",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.getAttribute("mode") !== "fab" && !this.hasAttribute("collapsible") && !this.hasAttribute("open") && this.setAttribute("open", "");
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, i, t) {
+    if (i !== t) {
+      if (e === "open") {
+        this._syncOpenUi();
+        return;
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(e) {
+    e ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  show() {
+    this.toggle(!0);
+  }
+  hide() {
+    this.toggle(!1);
+  }
+  toggle(e) {
+    const i = typeof e == "boolean" ? e : !this.open;
+    this.open = i;
+    const t = { open: i };
+    this.dispatchEvent(new CustomEvent(i ? "open" : "close", { detail: t, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: t, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("toggle", { detail: t, bubbles: !0, composed: !0 }));
+  }
+  _actions() {
+    const e = this.root.querySelector('slot[name="action"]');
+    return e ? e.assignedElements({ flatten: !0 }).filter((i) => i instanceof HTMLElement) : [];
+  }
+  _actionsId() {
+    return `ui-quick-actions-${this._instanceId}-actions`;
+  }
+  _syncActionAccessibility(e) {
+    this._actions().forEach((t, s) => {
+      var r;
+      if (t.id || (t.id = `ui-quick-actions-${this._instanceId}-action-${s + 1}`), t.hasAttribute("role") || t.setAttribute("role", "button"), !t.hasAttribute("aria-label")) {
+        const o = (r = t.textContent) == null ? void 0 : r.trim();
+        o && t.setAttribute("aria-label", o);
+      }
+      if (e) {
+        const o = t.getAttribute("data-ui-quick-tabindex");
+        o != null ? (o === "__none__" ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", o), t.removeAttribute("data-ui-quick-tabindex")) : t.hasAttribute("tabindex") || t.setAttribute("tabindex", "0"), t.setAttribute("aria-hidden", "false");
+        return;
+      }
+      t.hasAttribute("data-ui-quick-tabindex") || t.setAttribute("data-ui-quick-tabindex", t.getAttribute("tabindex") ?? "__none__"), t.setAttribute("tabindex", "-1"), t.setAttribute("aria-hidden", "true");
+    });
+  }
+  _onClick(e) {
+    var n;
+    const i = e.target;
+    if (!i)
+      return;
+    if (i.closest(".toggle")) {
+      this.toggle();
+      return;
+    }
+    const s = e.composedPath(), r = this._actions(), o = r.find((d) => s.includes(d));
+    if (!o)
+      return;
+    const a = r.indexOf(o), c = {
+      index: a,
+      id: o.id || o.getAttribute("data-id") || String(a + 1),
+      label: o.getAttribute("aria-label") || ((n = o.textContent) == null ? void 0 : n.trim()) || `Action ${a + 1}`
+    };
+    this.dispatchEvent(new CustomEvent("select", { detail: c, bubbles: !0, composed: !0 })), this.getAttribute("mode") === "fab" && this.hide();
+  }
+  _moveFocus(e, i) {
+    const t = this._actions();
+    if (!t.length)
+      return;
+    const s = t.indexOf(e);
+    if (s < 0)
+      return;
+    const r = (s + i + t.length) % t.length;
+    t[r].focus();
+  }
+  _onKeyDown(e) {
+    if (e.key === "Escape" && this.open && this.getAttribute("mode") === "fab") {
+      e.preventDefault(), this.hide();
+      return;
+    }
+    const i = e.target;
+    if (!i)
+      return;
+    const s = this._actions().find((n) => n === i || n.contains(i));
+    if (!s)
+      return;
+    const r = this.getAttribute("orientation") === "vertical" || this.getAttribute("mode") === "fab", o = !r && getComputedStyle(this).direction === "rtl", a = r ? "ArrowDown" : o ? "ArrowLeft" : "ArrowRight", c = r ? "ArrowUp" : o ? "ArrowRight" : "ArrowLeft";
+    if (e.key === a) {
+      e.preventDefault(), this._moveFocus(s, 1);
+      return;
+    }
+    if (e.key === c) {
+      e.preventDefault(), this._moveFocus(s, -1);
+      return;
+    }
+    if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      const n = this._actions();
+      if (!n.length)
+        return;
+      (e.key === "Home" ? n[0] : n[n.length - 1]).focus();
+    }
+  }
+  _syncOpenUi() {
+    if (!this.isConnected)
+      return;
+    if (!this.root.querySelector(".root")) {
+      this.requestRender();
+      return;
+    }
+    const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar", s = this.getAttribute("label") || "Quick actions", r = this.root.querySelector(".toggle");
+    r && (r.textContent = t ? "−" : "+", r.setAttribute("aria-label", s), r.setAttribute("aria-expanded", t ? "true" : "false"));
+    const o = this.root.querySelector(".actions");
+    o && (t ? o.removeAttribute("hidden") : o.setAttribute("hidden", "")), this._syncActionAccessibility(t);
+  }
+  render() {
+    const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar", s = this.getAttribute("label") || "Quick actions", r = this._actionsId(), o = this.getAttribute("orientation") === "vertical" || e === "fab" ? "vertical" : "horizontal";
+    this.setContent(`
+      <style>${h}</style>
+      <section class="root" part="root" role="toolbar" aria-label="${l(s)}" aria-orientation="${o}">
+        ${i ? `<button type="button" class="toggle" part="toggle" aria-label="${l(s)}" aria-controls="${r}" aria-haspopup="true" aria-expanded="${t ? "true" : "false"}">${t ? "−" : "+"}</button>` : ""}
+        <div id="${r}" class="actions" part="actions" role="group" aria-label="${l(s)} list" ${t ? "" : "hidden"}>
+          <slot name="action"></slot>
+        </div>
+      </section>
+    `), this._syncActionAccessibility(t);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-quick-actions") && customElements.define("ui-quick-actions", g);
+export {
+  g as UIQuickActions
+};

package/dist/radio-group.cjs.js

@@ -0,0 +1,257 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),c=require("./roving-focus-group-5c059bf9.js"),x=`
+  :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 h(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function p(s){return s==="horizontal"?"horizontal":"vertical"}function _(s){return s==="sm"||s==="lg"?s:"md"}function m(s){return s==="card"||s==="segmented"?s:"default"}function I(s){return s==="neutral"||s==="success"||s==="warning"||s==="danger"||s==="info"?s:"brand"}class f extends g.ElementBase{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=p(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=c.moveRovingFocusIndex(this._options,this._focusIndex,e>0?1:-1,{wrap:!0,fallbackIndex:c.resolveRovingFocusIndex(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}"]`);c.focusRovingItem(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=c.resolveRovingFocusIndex(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,b=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(b))});const o=Array.from(r);c.syncRovingTabStops(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=c.getRovingFocusBoundaryIndex(this._options,"first",o=>!!o.disabled);r>=0&&this._selectIndex(r,"keyboard");return}if(i==="End"){e.preventDefault();const r=c.getRovingFocusBoundaryIndex(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=_(this.getAttribute("size")),i=m(this.getAttribute("variant")),t=I(this.getAttribute("tone")),r=p(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>${x}</style>
+      <div class="root" part="root" data-size="${e}" data-variant="${i}" data-tone="${t}">
+        ${this._options.map((d,l)=>{const u=l===a,b=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="${h(d.value)}"
+                data-checked="${u?"true":"false"}"
+                data-disabled="${b?"true":"false"}"
+                aria-checked="${u?"true":"false"}"
+                aria-disabled="${b?"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">${h(d.label)}</span>
+                  ${d.description?`<span class="description" part="description">${h(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",f);exports.UIRadioGroup=f;