@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/hx-radio-Z1lV1zTO.js

@@ -0,0 +1,822 @@
+import { css as O, nothing as R, html as y } from "lit";
+import { property as d, state as S, customElement as A } from "lit/decorators.js";
+import { classMap as B } from "lit/directives/class-map.js";
+import { F as G } from "./FormMixin-B8PXk5RQ.js";
+import { b as L } from "./forced-colors-CTEDFRGa.js";
+import { s as V, i as j, r as T } from "./aria-idref-CxvyzfQS.js";
+import { H as $ } from "./helix-element-BNEYeiys.js";
+import { c as z } from "./id-counter-DuX8vsui.js";
+const N = O`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Fieldset ─── */
+
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    font-family: var(--hx-radio-group-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Legend ─── */
+
+  .fieldset__legend {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding: 0;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+  }
+
+  .fieldset__required-marker {
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Group Container ─── */
+
+  .fieldset__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));
+  }
+
+  :host([orientation='horizontal']) .fieldset__group {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* ─── Error State ─── */
+
+  .fieldset--error .fieldset__legend {
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .fieldset__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .fieldset__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .fieldset {
+      border: none;
+    }
+
+    .fieldset__legend {
+      color: CanvasText;
+    }
+
+    .fieldset--error .fieldset__legend {
+      color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .fieldset__legend {
+      color: GrayText;
+    }
+
+    .fieldset__help-text {
+      color: GrayText;
+    }
+
+    .fieldset__error {
+      color: LinkText;
+    }
+  }
+`;
+var K = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? P(t, i) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (s = (r ? a(t, i, s) : a(s)) || s);
+  return r && s && K(t, i, s), s;
+};
+const U = z("hx-radio-group");
+function H(e) {
+  const t = e.querySelector("slot");
+  if (t) {
+    const i = t.assignedNodes({ flatten: !0 });
+    if (i.length > 0)
+      return i.map((r) => r.textContent ?? "").join("").trim();
+  }
+  return (e.textContent ?? "").trim();
+}
+let l = class extends G($) {
+  constructor() {
+    super(...arguments), this.value = "", this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.orientation = "vertical", this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._supportsIdrefRefs = !0, this._groupId = U(), this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._ariaMirror = null, this._announcedError = "", this._suppressedChildren = /* @__PURE__ */ new WeakSet(), this._previousRadios = [], this._lastWrittenLabelledBy = null, this._lastWrittenDescribedBy = null, this._consumerLabelledBy = null, this._consumerDescribedBy = null, this._cachedRadios = null, this._individualDisabledStates = /* @__PURE__ */ new WeakMap(), this._handleRadioSelect = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      e.stopPropagation();
+      const t = e.detail.value;
+      t !== this.value && (this.value = t, this._handleInteractionInput(), this.dispatchEvent(
+        new CustomEvent("hx-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { value: this.value, checked: !0 }
+        })
+      ));
+    }, this._handleKeydown = (e) => {
+      var u, p, c, b;
+      const t = this._getEnabledRadios();
+      if (t.length === 0 || ![
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        " ",
+        "Home",
+        "End"
+      ].includes(e.key))
+        return;
+      if (e.preventDefault(), e.key === " ") {
+        const h = (p = (u = e.target) == null ? void 0 : u.closest) == null ? void 0 : p.call(u, "hx-radio");
+        h && !h.disabled && h.dispatchEvent(
+          new CustomEvent("hx-radio-select", {
+            bubbles: !0,
+            composed: !0,
+            detail: { value: h.value }
+          })
+        );
+        return;
+      }
+      const r = (b = (c = e.target) == null ? void 0 : c.closest) == null ? void 0 : b.call(c, "hx-radio"), s = r ? t.indexOf(r) : t.findIndex((h) => h.checked);
+      let o;
+      e.key === "Home" ? o = 0 : e.key === "End" ? o = t.length - 1 : e.key === "ArrowDown" || e.key === "ArrowRight" ? o = s === -1 ? 0 : (s + 1) % t.length : o = s <= 0 ? t.length - 1 : s - 1;
+      const a = t[o];
+      a && (a.focus(), a.dispatchEvent(
+        new CustomEvent("hx-radio-select", {
+          bubbles: !0,
+          composed: !0,
+          detail: { value: a.value }
+        })
+      ));
+    }, this._childDisabledObserver = null;
+  }
+  /**
+   * Queries the rendered group container element within the shadow root.
+   * @internal
+   */
+  get _groupEl() {
+    var e;
+    return ((e = this.renderRoot) == null ? void 0 : e.querySelector(".fieldset__group")) ?? null;
+  }
+  // ─── Slot Handlers ───
+  /**
+   * Handles slotchange events on the error slot to detect assigned content.
+   * @internal
+   */
+  _handleErrorSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasErrorSlot = e.target.assignedNodes({ flatten: !0 }).length > 0, this._installErrorSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  /**
+   * Handles slotchange events on the help-text slot to detect assigned content.
+   * Codex aria-group-2 finding: slot-only help text was not contributing to
+   * `aria-describedby` because the wrapper was conditionally rendered on the
+   * `helpText` property alone.
+   * @internal
+   */
+  _handleHelpSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasHelpSlot = e.target.assignedNodes({ flatten: !0 }).length > 0, this._installHelpSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * help-text-slot nodes. Codex round-23 P2 (Finding C).
+   * @internal
+   */
+  _installHelpSlotTextObserver(e) {
+    var i;
+    if ((i = this._helpSlotTextObserver) == null || i.disconnect(), !e) {
+      this._helpSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0
+      });
+    }), this._helpSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * error-slot nodes. Codex round-23 P2 (Finding C).
+   * @internal
+   */
+  _installErrorSlotTextObserver(e) {
+    var i;
+    if ((i = this._errorSlotTextObserver) == null || i.disconnect(), !e) {
+      this._errorSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0
+      });
+    }), this._errorSlotTextObserver = t;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this._supportsIdrefRefs = V(this._internals), this.addEventListener("hx-radio-select", this._handleRadioSelect), this.addEventListener("keydown", this._handleKeydown), this._syncHostAriaSemantics(), this._ariaMirror = j(this, () => {
+      this._syncHostAriaSemantics();
+    });
+    const e = this._getRadios();
+    e.length > 0 && (e.forEach((t) => {
+      t._groupedSuppress = !0, this._suppressedChildren.add(t);
+    }), this._previousRadios = e);
+  }
+  disconnectedCallback() {
+    var e, t, i, r;
+    super.disconnectedCallback(), this.removeEventListener("hx-radio-select", this._handleRadioSelect), this.removeEventListener("keydown", this._handleKeydown), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._childDisabledObserver) == null || t.disconnect(), this._childDisabledObserver = null, (i = this._helpSlotTextObserver) == null || i.disconnect(), this._helpSlotTextObserver = null, (r = this._errorSlotTextObserver) == null || r.disconnect(), this._errorSlotTextObserver = null, this._previousRadios.forEach((s) => {
+      this._suppressedChildren.has(s) && (s._groupedSuppress = !1, this._suppressedChildren.delete(s));
+    }), this._previousRadios = [];
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && (this._internals.setFormValue(this.value || null), this._syncRadios()), e.has("disabled") && this._syncRadios(), this._syncHostAriaSemantics(), e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error);
+  }
+  /**
+   * Mirrors radiogroup semantics onto the host via ElementInternals so that
+   * consumer-supplied `aria-label`, `aria-labelledby`, and `aria-describedby`
+   * on `<hx-radio-group>` reach the announced control. The codex aria-group-2
+   * finding identified that the inner `<fieldset>` was the announced node and
+   * the host's external IDREF tokens could not cross the shadow boundary.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var E, w, k, C;
+    const e = this._internals;
+    e.role = "radiogroup", e.ariaRequired = this.required ? "true" : "false", e.ariaInvalid = e.validity.valid ? "false" : "true", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaOrientation = this.orientation === "horizontal" ? "horizontal" : "vertical";
+    const t = ((E = this.getAttribute("aria-label")) == null ? void 0 : E.trim()) || "", i = (w = this.shadowRoot) == null ? void 0 : w.getElementById(`${this._groupId}-legend`), r = (k = this.shadowRoot) == null ? void 0 : k.getElementById(this._helpTextId), s = (C = this.shadowRoot) == null ? void 0 : C.getElementById(this._errorId), o = this.getAttribute("aria-labelledby");
+    o !== this._lastWrittenLabelledBy && (this._consumerLabelledBy = o);
+    const a = this.getAttribute("aria-describedby");
+    a !== this._lastWrittenDescribedBy && (this._consumerDescribedBy = a);
+    const u = this._consumerLabelledBy, p = this._consumerDescribedBy, c = T(this, u), b = c.length > 0;
+    t ? e.ariaLabel = t : b ? e.ariaLabel = null : e.ariaLabel = this.label || null, c.length === 0 && !t && this.label && i && c.push(i);
+    const h = T(this, p), v = !!(this.error || this._hasErrorSlot);
+    if (r && !v && (this.helpText || this._hasHelpSlot) && h.push(r), s && v && h.push(s), this._supportsIdrefRefs) {
+      const g = e;
+      g.ariaLabelledByElements = c.length > 0 ? c : null, g.ariaDescribedByElements = h.length > 0 ? h : null, e.ariaDescription = null;
+    } else {
+      const g = new Set(((u == null ? void 0 : u.split(/\s+/)) ?? []).filter(Boolean)), M = new Set(((p == null ? void 0 : p.split(/\s+/)) ?? []).filter(Boolean)), x = b ? [...g].filter(Boolean).join(" ") : "", I = this.getAttribute("aria-labelledby");
+      x ? (I !== x && this.setAttribute("aria-labelledby", x), this._lastWrittenLabelledBy = x) : I !== null && (this.removeAttribute("aria-labelledby"), this._lastWrittenLabelledBy = null);
+      const m = [...M].filter(Boolean).join(" ") || "", D = this.getAttribute("aria-describedby");
+      m ? (D !== m && this.setAttribute("aria-describedby", m), this._lastWrittenDescribedBy = m) : D !== null && this._lastWrittenDescribedBy !== null && (this.removeAttribute("aria-describedby"), this._lastWrittenDescribedBy = null);
+      const F = r && !v && (this.helpText || this._hasHelpSlot) ? H(r) : "", q = s && v ? H(s) : "", W = [F, q].filter(Boolean).join(" ");
+      e.ariaDescription = W || null;
+    }
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._syncRadios(), this._previousRadios = this._getRadios(), this._installChildDisabledObservers(), !this.label && this.getAttribute("aria-label");
+  }
+  /**
+   * Returns all child hx-radio elements, using the cache when available.
+   * @internal
+   */
+  _getRadios() {
+    return this._cachedRadios || (this._cachedRadios = Array.from(this.querySelectorAll("hx-radio"))), this._cachedRadios;
+  }
+  /**
+   * Returns only the child hx-radio elements that are not disabled.
+   * @internal
+   */
+  _getEnabledRadios() {
+    return this._getRadios().filter((e) => !e.disabled && !this.disabled);
+  }
+  /**
+   * Synchronizes checked state, disabled state, and roving tabindex across all child radios.
+   * @internal
+   */
+  _syncRadios() {
+    const e = this._getRadios(), t = this._getEnabledRadios();
+    e.forEach((r) => {
+      r._groupedSuppress = !0, this._suppressedChildren.add(r);
+      const s = r.value === this.value && this.value !== "";
+      if (r.checked = s, this.disabled)
+        this._individualDisabledStates.has(r) || this._individualDisabledStates.set(r, r.disabled), r.disabled = !0;
+      else {
+        const o = this._individualDisabledStates.get(r);
+        o !== void 0 && (r.disabled = o, this._individualDisabledStates.delete(r));
+      }
+    });
+    const i = t.find((r) => r.checked);
+    if (e.forEach((r) => {
+      r.tabIndex = -1;
+    }), i)
+      i.tabIndex = 0;
+    else if (t.length > 0) {
+      const r = t[0];
+      r && (r.tabIndex = 0);
+    }
+  }
+  /**
+   * Handles slotchange events on the default slot. Refreshes the cached
+   * radio list, reconciles `value`/`setFormValue`/validity against the new
+   * children, then re-tunes the per-child disabled observer so in-place
+   * `radio.disabled = true` mutations trigger the same reconcile pass.
+   *
+   * Codex round-2 finding #3: previously this handler only invalidated the
+   * cache and re-synced child state, so removing the currently-selected
+   * radio (or disabling it, or adding a new `checked` radio) left
+   * `this.value` and the submitted form value pointing at stale state and
+   * `_updateValidity` was never re-run.
+   *
+   * Codex round-7 finding #6: an in-place `selectedRadio.disabled = true`
+   * never re-entered this reconciler (the radio remained slotted), so the
+   * group could keep submitting a disabled value and stay valid until some
+   * unrelated slot mutation kicked things over. The per-child observer
+   * installed at the end of this method re-runs the same reconcile logic on
+   * every `disabled` attribute mutation.
+   * @internal
+   */
+  _handleSlotChange() {
+    this._cachedRadios = null, this._reconcileChildren(), this._installChildDisabledObservers();
+  }
+  /**
+   * Re-runs the slotchange reconcile pass without touching the disabled
+   * observer wiring. Called from the slotchange handler and from the
+   * per-child disabled observer; factored out so both entry points share
+   * the same value/formValue/validity reconciliation path. Round-7 #6.
+   * @internal
+   */
+  _reconcileChildren() {
+    const e = this._previousRadios, t = this._getRadios().filter((s) => s.checked && !s.disabled), i = t.find((s) => s.value !== this.value) ?? t[0];
+    if (i && i.value !== this.value && (this.value = i.value), this._syncRadios(), this.disabled) {
+      const s = this._getRadios().map((o) => o.value);
+      this.value && !s.includes(this.value) && (this.value = ""), this._updateValidity();
+    } else {
+      const s = this._getRadios().find((a) => a.checked && !a.disabled), o = (s == null ? void 0 : s.value) ?? "";
+      o !== this.value && (this.value = o), this._internals.setFormValue(this.value || null), this._updateValidity();
+    }
+    const r = new Set(this._getRadios());
+    e.forEach((s) => {
+      !r.has(s) && this._suppressedChildren.has(s) && (s._groupedSuppress = !1, this._suppressedChildren.delete(s));
+    }), this._previousRadios = this._getRadios();
+  }
+  /**
+   * Installs (or re-installs) a single MutationObserver across the current
+   * set of slotted `<hx-radio>` children, listening for `disabled` attribute
+   * mutations. Round-7 finding #6: in-place `disabled = true` never reaches
+   * the slotchange-driven reconciler otherwise.
+   * @internal
+   */
+  _installChildDisabledObservers() {
+    var i;
+    (i = this._childDisabledObserver) == null || i.disconnect();
+    const e = this._getRadios();
+    if (e.length === 0) {
+      this._childDisabledObserver = null;
+      return;
+    }
+    const t = new MutationObserver((r) => {
+      r.some((s) => s.attributeName === "disabled") && this._reconcileChildren();
+    });
+    e.forEach((r) => {
+      t.observe(r, {
+        attributes: !0,
+        attributeFilter: ["disabled"]
+      });
+    }), this._childDisabledObserver = t;
+  }
+  // ─── Form Integration ───
+  /**
+   * Updates the ElementInternals validity state based on the required constraint and current value.
+   * @internal
+   */
+  _updateValidity() {
+    if (this.required && !this.value) {
+      const e = this._getRadios().find((t) => t.checked && !t.disabled) ?? this._getEnabledRadios()[0] ?? this._groupEl ?? void 0;
+      this._internals.setValidity(
+        { valueMissing: !0 },
+        this.error || "Please select an option.",
+        e
+      );
+    } else
+      this._internals.setValidity({});
+    this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _onFormReset() {
+    this.value = "", this._internals.setFormValue(null), this._syncRadios(), this._resetInteractionState();
+  }
+  /** @internal */
+  _onFormStateRestore(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  /** @internal */
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, i = `${this._groupId}-legend`, r = {
+      fieldset: !0,
+      "fieldset--error": e,
+      "fieldset--disabled": this.disabled,
+      "fieldset--required": this.required
+    };
+    return y`
+      <fieldset
+        part="fieldset"
+        class=${B(r)}
+        role="presentation"
+        aria-orientation=${this.orientation === "horizontal" ? "horizontal" : R}
+      >
+        ${this.label ? y`
+              <legend part="legend" class="fieldset__legend" id=${i}>
+                ${this.label}
+                ${this.required ? y`<span class="fieldset__required-marker" aria-hidden="true">*</span>` : R}
+              </legend>
+            ` : R}
+
+        <div part="group" class="fieldset__group" role="none">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+
+        <!--
+          Persistent error live region. role="alert" is set from first paint
+          so the WAI-ARIA contract for live updates is honoured: content
+          changes in place rather than the container being toggled.
+        -->
+        <div
+          part="error"
+          class="fieldset__error"
+          id=${this._errorId}
+          role="alert"
+          ?hidden=${!e}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}
+            >${this._announcedError}</slot
+          >
+        </div>
+
+        <!--
+          Persistent help-text container. Rendered whenever the property OR
+          the slot has content; hidden when an error is present so guidance
+          does not compete with validation feedback. Always in the shadow
+          tree so the host's aria-describedby chain is stable.
+        -->
+        <div
+          part="help-text"
+          class="fieldset__help-text"
+          id=${this._helpTextId}
+          ?hidden=${!t || e}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+l.styles = [N, L];
+l.formAssociated = !0;
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "value", 2);
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "name", 2);
+n([
+  d({ type: String })
+], l.prototype, "label", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "required", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+n([
+  d({ type: String })
+], l.prototype, "error", 2);
+n([
+  d({ type: String, attribute: "help-text" })
+], l.prototype, "helpText", 2);
+n([
+  d({ type: String, reflect: !0 })
+], l.prototype, "orientation", 2);
+n([
+  S()
+], l.prototype, "_hasErrorSlot", 2);
+n([
+  S()
+], l.prototype, "_hasHelpSlot", 2);
+n([
+  S()
+], l.prototype, "_supportsIdrefRefs", 2);
+n([
+  S()
+], l.prototype, "_announcedError", 2);
+l = n([
+  A("hx-radio-group")
+], l);
+const J = O`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    cursor: pointer;
+    position: relative;
+    font-family: var(--hx-radio-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  .radio--disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hidden Native Input ─── */
+
+  .radio__input {
+    position: absolute;
+    width: var(--hx-space-px);
+    height: var(--hx-space-px);
+    padding: 0;
+    margin: calc(var(--hx-space-px) * -1);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Visual Radio Circle ─── */
+
+  .radio__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
+    height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
+    border: var(--hx-border-width-medium, 2px) solid
+      var(--hx-radio-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-radio-bg, var(--hx-color-surface-default, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    flex-shrink: 0;
+  }
+
+  /* ─── Inner Dot ─── */
+
+  .radio__dot {
+    width: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);
+    height: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-radio-dot-color, var(--hx-color-text-on-primary, #ffffff));
+    transform: scale(0);
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  /* ─── Checked State ─── */
+
+  .radio--checked .radio__control {
+    border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #429797));
+  }
+
+  .radio--checked .radio__dot {
+    transform: scale(1);
+  }
+
+  /* ─── Focus State ─── */
+
+  :host(:focus-visible) .radio__control {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Hover State ─── */
+
+  .radio:not(.radio--disabled):not(.radio--checked):hover .radio__control {
+    border-color: var(--hx-radio-hover-border-color, var(--hx-color-border-strong, #66787b));
+  }
+
+  /* ─── Label ─── */
+
+  .radio__label {
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-radio-label-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .radio__control,
+    .radio__dot {
+      transition: none;
+    }
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .radio__control {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      border: 2px solid ButtonText;
+    }
+
+    :host(:focus-visible) .radio__control {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .radio--checked .radio__control {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .radio--checked .radio__dot {
+      background-color: HighlightText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .radio__control {
+      border-color: GrayText;
+      background-color: ButtonFace;
+    }
+
+    :host([disabled]) .radio--checked .radio__control {
+      background-color: GrayText;
+      border-color: GrayText;
+    }
+
+    :host([disabled]) .radio__label {
+      color: GrayText;
+    }
+
+    .radio__label {
+      color: CanvasText;
+    }
+  }
+`;
+var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, f = (e, t, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? X(t, i) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (s = (r ? a(t, i, s) : a(s)) || s);
+  return r && s && Q(t, i, s), s;
+};
+const Y = z("hx-radio");
+let _ = class extends $ {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "", this.disabled = !1, this.checked = !1, this.__groupedSuppress = !1, this._inputId = Y();
+  }
+  /**
+   * Set by `hx-radio-group` to mark this child as group-managed. `hx-radio` is
+   * not form-associated (the group is the sole form participant), so this
+   * flag is currently inert on this element. It exists for symmetry with
+   * `hx-checkbox._groupedSuppress` so the group/child contract is identical
+   * across both selection-control families and any future form-association
+   * change on `hx-radio` is automatically suppressed inside a group. Codex
+   * round-3 finding #1 (defense-in-depth).
+   * @internal
+   */
+  set _groupedSuppress(e) {
+    this.__groupedSuppress = e;
+  }
+  get _groupedSuppress() {
+    return this.__groupedSuppress;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this._internals.role = "radio", this._syncAriaState();
+  }
+  updated(e) {
+    super.updated(e), (e.has("checked") || e.has("label") || e.has("disabled")) && this._syncAriaState();
+  }
+  /**
+   * Mirror reactive ARIA state onto ElementInternals. Setting a value to `null`
+   * removes it from the accessibility tree (matching the previous
+   * removeAttribute behavior).
+   *
+   * WCAG 4.1.2: expose the label text as ariaLabel on the host so assistive
+   * technology can associate the visible label with the radio role. The label
+   * span lives inside Shadow DOM and aria-labelledby cannot cross shadow
+   * boundaries, so ariaLabel on the host is the correct pattern here.
+   *
+   * WCAG 4.1.2: omit ariaDisabled entirely when not disabled. Setting
+   * aria-disabled="false" is verbose and unnecessary — omission is preferred.
+   *
+   * @internal
+   */
+  _syncAriaState() {
+    this._internals.ariaChecked = String(this.checked), this._internals.ariaLabel = this.label || null, this._internals.ariaDisabled = this.disabled ? "true" : null;
+  }
+  // ─── Event Handling ───
+  /** @internal */
+  _handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-radio-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      radio: !0,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled
+    };
+    return y`
+      <div class=${B(e)} @click=${this._handleClick}>
+        <input
+          class="radio__input"
+          type="radio"
+          id=${this._inputId}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+          aria-hidden="true"
+        />
+        <span part="radio" class="radio__control" aria-hidden="true">
+          <span class="radio__dot"></span>
+        </span>
+        <span part="label" class="radio__label">
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+  }
+};
+_.styles = [J, L];
+f([
+  d({ type: String })
+], _.prototype, "value", 2);
+f([
+  d({ type: String })
+], _.prototype, "label", 2);
+f([
+  d({ type: Boolean, reflect: !0 })
+], _.prototype, "disabled", 2);
+f([
+  d({ type: Boolean, reflect: !0 })
+], _.prototype, "checked", 2);
+_ = f([
+  A("hx-radio")
+], _);
+export {
+  _ as H,
+  l as a
+};
+//# sourceMappingURL=hx-radio-Z1lV1zTO.js.map