stimeo-ui 0.4.0 → 0.6.0

data/dist/controllers/radio_group_controller.js

@@ -20,6 +20,67 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+
+// src/utils/interactive_host.ts
+var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
+function isInteractiveHost(element) {
+  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -42,10 +103,12 @@ var RovingTabindex = class {
    * "nothing is currently tabbable".
    *
    * @param index - Position of the item to make tabbable.
-   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item,
+   *   and `items` to reuse an event-scoped collection snapshot.
    */
-  setActive(index, { focus = false } = {}) {
-    const items = this.#getItems();
+  setActive(index, options = {}) {
+    const { focus = false } = options;
+    const items = options.items ?? this.#getItems();
     items.forEach((item, i) => {
       item.tabIndex = i === index ? 0 : -1;
     });
@@ -59,79 +122,500 @@ function rovingMove(current, length, delta, wrap) {
 }
 
 // src/controllers/radio_group_controller.ts
+var OBSERVED_ATTRIBUTES = [
+  "aria-checked",
+  "aria-disabled",
+  "contenteditable",
+  "controls",
+  "data-value",
+  "disabled",
+  "hidden",
+  "href",
+  "tabindex",
+  "type",
+  "value"
+];
+var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var RadioGroupController = class extends Controller {
   static targets = ["radio", "field"];
   static actions = ["onKeydown", "select"];
-  static events = ["change"];
-  #roving = new RovingTabindex(() => this.radioTargets);
-  /** Establishes the roving entry point and reflects the initial selection. */
+  static events = ["change", "reconcile"];
+  #roving = new RovingTabindex(() => this.#managedTargets);
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #handledEvents = /* @__PURE__ */ new WeakSet();
+  #managedRadios = /* @__PURE__ */ new Set();
+  #originalTabindex = /* @__PURE__ */ new Map();
+  #ownedChecked = /* @__PURE__ */ new Set();
+  #internalCheckedValues = /* @__PURE__ */ new Map();
+  #internalTabindexValues = /* @__PURE__ */ new Map();
+  #observer = null;
+  #committedRadio = null;
+  #connected = false;
+  #lastOrder = [];
+  #focusedRadio = null;
+  #pendingFocusIndex = null;
+  #preferChecked = false;
+  /**
+   * Normalizes authored selection, establishes the APG Tab entry point, and
+   * reflects derived form state without reporting a user edit.
+   */
   connect() {
-    const selected = this.#selectedIndex();
-    this.#roving.setActive(selected === -1 ? 0 : selected);
-    if (selected !== -1) this.#reflectField(this.radioTargets[selected], { silent: true });
+    const currentRadios = new Set(this.radioTargets);
+    for (const radio of this.#managedRadios) {
+      if (!currentRadios.has(radio)) this.#releaseRadio(radio);
+    }
+    for (const radio of this.radioTargets) this.#reconcileHost(radio, false);
+    this.#normalizeSelection();
+    this.#ensureTabStop(true);
+    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#committedRadio = this.#selectedRadio ?? null;
+    this.#lastOrder = this.#managedTargets;
+    this.element.addEventListener("click", this.#onClickCapture, true);
+    this.element.addEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.addEventListener("click", this.#onClick);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusin", this.#onFocusin);
+    this.element.addEventListener("focusout", this.#onFocusout);
+    this.#connected = true;
+    this.#preferChecked = false;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    this.#reconcile.activate();
+    this.#observeMutations();
+  }
+  /** Releases every listener, observer, and queued pass while retaining live DOM state. */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.element.removeEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.removeEventListener("click", this.#onClick);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.element.removeEventListener("focusin", this.#onFocusin);
+    this.element.removeEventListener("focusout", this.#onFocusout);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    this.#focusedRadio = null;
+    this.#pendingFocusIndex = null;
+    this.#committedRadio = null;
+    this.#preferChecked = false;
+  }
+  /** Removes a newly connected radio from the Tab sequence before batch reconciliation. */
+  radioTargetConnected(radio) {
+    if (this.#connected === false) return;
+    this.#reconcileHost(radio, true);
+    this.#preferChecked = true;
+    this.#reconcile.schedule();
+  }
+  /** Releases target-only attributes and repairs selection, form state, focus, and roving. */
+  radioTargetDisconnected(radio) {
+    if (!this.#connected) return;
+    if (this.#focusedRadio === radio) {
+      this.#pendingFocusIndex = this.#lastOrder.indexOf(radio);
+      this.#focusedRadio = null;
+    }
+    this.#releaseRadio(radio);
+    this.#preferChecked = true;
+    this.#reconcile.schedule();
   }
-  /** Selects the clicked radio. Bound via `data-action` (click). */
+  /** Reflects the current selection into a field added or replaced at runtime. */
+  fieldTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles after a field target is removed from a retained group. */
+  fieldTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Selects the action's radio. Per-radio action wiring is optional. */
   select(event) {
-    const index = this.radioTargets.indexOf(event.currentTarget);
-    if (index !== -1) this.#selectIndex(index, { focus: false });
+    if (event.defaultPrevented || !this.#ownsEventTarget(event.target)) return;
+    const radio = event.currentTarget;
+    if (!radio || !this.radioTargets.includes(radio)) return;
+    this.#handledEvents.add(event);
+    this.#selectRadio(radio, { focus: false });
   }
-  /** Arrow/Home/End/Space navigation with selection-follows-focus. */
+  /** Applies the APG key map to the action's radio. Per-radio action wiring is optional. */
   onKeydown(event) {
-    if (event.defaultPrevented) return;
-    if (isReservedArrowChord(event)) return;
-    const current = this.radioTargets.indexOf(event.currentTarget);
-    if (current === -1) return;
-    let next = null;
-    const step = logicalArrowStep(event.key, this.element);
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-      case "ArrowUp":
-      case "ArrowLeft":
-        next = rovingMove(current, this.radioTargets.length, step);
-        break;
-      case "Home":
-        next = 0;
-        break;
-      case "End":
-        next = this.radioTargets.length - 1;
-        break;
-      case " ":
-        next = current;
-        break;
-      default:
+    const radio = event.currentTarget;
+    if (!radio || !this.radioTargets.includes(radio)) return;
+    this.#handleKeydown(event, radio);
+  }
+  /** Blocks disabled pointer activation before per-radio and consumer handlers run. */
+  #onClickCapture = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isSupportedHost(radio) || !this.#isActivationDisabled(radio)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  /** Blocks disabled activation and suppresses a button's non-APG Enter activation. */
+  #onKeydownCapture = (event) => {
+    if (event.key !== " " && event.key !== "Enter") return;
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isSupportedHost(radio)) return;
+    if (this.#isActivationDisabled(radio) || event.key === "Enter" && radio instanceof HTMLButtonElement) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+  /** Delegated click path for static and runtime-added radios without actions. */
+  #onClick = (event) => {
+    if (this.#handledEvents.delete(event) || event.defaultPrevented) return;
+    const radio = this.#radioForEventTarget(event.target);
+    if (radio) this.#selectRadio(radio, { focus: false });
+  };
+  /** Delegated keydown path for static and runtime-added radios without actions. */
+  #onKeydown = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (radio) this.#handleKeydown(event, radio);
+  };
+  /** Keeps programmatic and pointer focus as the group's current roving position. */
+  #onFocusin = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isNavigable(radio)) return;
+    this.#focusedRadio = radio;
+    this.#setActive(radio);
+  };
+  /** Distinguishes ordinary focus departure from focus lost because its radio was removed. */
+  #onFocusout = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio) return;
+    queueMicrotask(() => {
+      if (!this.#connected || this.#focusedRadio !== radio || !radio.isConnected) return;
+      const active = document.activeElement;
+      if (!(active instanceof Node) || !radio.contains(active)) this.#focusedRadio = null;
+    });
+  };
+  /** Applies navigation and Space activation to one supported radio. */
+  #handleKeydown(event, radio) {
+    if (event.defaultPrevented || !this.#isSupportedHost(radio)) return;
+    if (event.isComposing || isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if (event.key === " ") {
+      if (this.#isActivationDisabled(radio)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
         return;
+      }
+      if (radio instanceof HTMLButtonElement) {
+        if (event.repeat) event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      if (!event.repeat) this.#selectRadio(radio, { focus: true });
+      return;
+    }
+    const items = this.#managedTargets;
+    const current = items.indexOf(radio);
+    const step = logicalArrowStep(event.key, this.element);
+    let destination;
+    if (step !== 0) {
+      destination = this.#nextNavigable(current, step);
+    } else if (event.key === "Home") {
+      destination = this.#navigableRadios[0];
+    } else if (event.key === "End") {
+      const navigable = this.#navigableRadios;
+      destination = navigable[navigable.length - 1];
+    } else {
+      return;
     }
     event.preventDefault();
-    this.#selectIndex(next, { focus: true });
+    if (!destination) return;
+    if (this.#isActivationDisabled(destination)) this.#setActive(destination, true);
+    else this.#selectRadio(destination, { focus: true });
+  }
+  /** Applies one user selection and emits only when selected identity changes. */
+  #selectRadio(radio, { focus }) {
+    if (!this.#isSupportedHost(radio) || this.#isActivationDisabled(radio)) return;
+    const previous = this.#selectedRadio;
+    const changed = previous !== radio;
+    if (changed) {
+      for (const item of this.#managedTargets) this.#setChecked(item, item === radio);
+    }
+    this.#setActive(radio, focus);
+    this.#reflectField(radio, { silent: !changed });
+    this.#committedRadio = radio;
+    if (changed) {
+      this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
+    }
+  }
+  /** Reconciles target ownership, selection, roving, focus continuity, and form state. */
+  #reconcileDom() {
+    const observer = this.#observer;
+    observer?.disconnect();
+    for (const radio of this.radioTargets) this.#reconcileHost(radio, true);
+    this.#normalizeSelection();
+    const pendingFocusIndex = this.#pendingFocusIndex;
+    this.#pendingFocusIndex = null;
+    if (pendingFocusIndex !== null) {
+      const destination = this.#nearestNavigable(pendingFocusIndex);
+      this.#setActive(destination, destination !== null);
+    } else {
+      this.#ensureTabStop(this.#preferChecked);
+    }
+    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#lastOrder = this.#managedTargets;
+    this.#preferChecked = false;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    if (this.#connected && observer) this.#observeWith(observer);
+    this.#reportReconciledSelection();
   }
   /**
-   * Checks the radio at `index`, clears the rest, updates the roving Tab stop and
-   * the hidden field, and dispatches `change`.
+   * Announces a selection this pass decided rather than the user. Dispatched after
+   * observation resumes so a consumer's own DOM edits are seen by the next pass.
    */
-  #selectIndex(index, { focus }) {
-    const radio = this.radioTargets[index];
-    if (!radio) return;
-    this.radioTargets.forEach((item, i) => {
-      item.setAttribute("aria-checked", i === index ? "true" : "false");
+  #reportReconciledSelection() {
+    const settled = this.#selectedRadio ?? null;
+    if (settled === this.#committedRadio) return;
+    this.#committedRadio = settled;
+    this.dispatch("reconcile", {
+      detail: { value: settled ? this.#radioValue(settled) : "", radio: settled }
     });
-    this.#roving.setActive(index, { focus });
-    this.#reflectField(radio);
-    this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
   }
-  /** Index of the currently checked radio, or `-1` if none. */
-  #selectedIndex() {
-    return this.radioTargets.findIndex((radio) => radio.getAttribute("aria-checked") === "true");
+  /** Begins or ends ownership according to a radio's current host semantics. */
+  #reconcileHost(radio, dropFromTabSequence) {
+    if (!this.#isSupportedHost(radio)) {
+      this.#releaseRadio(radio);
+      return;
+    }
+    if (!this.#managedRadios.has(radio)) {
+      this.#managedRadios.add(radio);
+      this.#originalTabindex.set(radio, radio.getAttribute("tabindex"));
+      if (dropFromTabSequence) this.#writeTabindex(radio, -1);
+    }
+    this.#normalizeChecked(radio);
+  }
+  /** Restores only defaults owned while an element belonged to this group. */
+  #releaseRadio(radio) {
+    this.#managedRadios.delete(radio);
+    const original = this.#originalTabindex.get(radio);
+    if (original === null) {
+      this.#markInternal(this.#internalTabindexValues, radio, null);
+      radio.removeAttribute("tabindex");
+    } else if (original !== void 0) {
+      this.#markInternal(this.#internalTabindexValues, radio, original);
+      radio.setAttribute("tabindex", original);
+    }
+    this.#originalTabindex.delete(radio);
+    if (this.#ownedChecked.delete(radio)) {
+      this.#markInternal(this.#internalCheckedValues, radio, null);
+      radio.removeAttribute("aria-checked");
+    }
+  }
+  /** Supplies a missing checked state and normalizes invalid ARIA tokens. */
+  #normalizeChecked(radio) {
+    const value = radio.getAttribute("aria-checked");
+    if (value === null) {
+      this.#ownedChecked.add(radio);
+      this.#setChecked(radio, false);
+    } else if (value !== "true" && value !== "false") {
+      this.#setChecked(radio, false);
+    }
+  }
+  /** Makes the first DOM-ordered checked radio the sole checked radio. */
+  #normalizeSelection() {
+    let found = false;
+    for (const radio of this.#managedTargets) {
+      this.#normalizeChecked(radio);
+      if (!this.#isChecked(radio)) continue;
+      if (!found) found = true;
+      else this.#setChecked(radio, false);
+    }
+  }
+  /** Keeps one navigable Tab stop, preferring checked state when selection changed externally. */
+  #ensureTabStop(preferChecked) {
+    const navigable = this.#navigableRadios;
+    let active;
+    if (!preferChecked) {
+      const current = this.#managedTargets.filter(
+        (radio) => radio.tabIndex === 0 && this.#isNavigable(radio)
+      );
+      if (current.length === 1) active = current[0];
+    }
+    const selected = this.#selectedRadio;
+    if (!active && selected && this.#isNavigable(selected)) active = selected;
+    active ??= navigable[0];
+    this.#setActive(active ?? null);
   }
   /**
-   * Mirrors a radio's `data-value` onto the hidden field, when present. Fires a
-   * native bubbling `change` on a real value change (matching `listbox`, so
-   * `auto-submit` and other native-`change` consumers react) — unless `silent`
-   * (the initial connect reflection, which is not a user edit).
+   * The surviving navigable radio closest to a position in the order captured
+   * before the removal: the first one at or after it, else the last one before it.
+   * The saved position and this search read the same population, so a `hidden` or
+   * natively disabled sibling never shifts the destination past its neighbor.
    */
+  #nearestNavigable(index) {
+    const navigable = new Set(this.#navigableRadios);
+    for (let i = index; i < this.#lastOrder.length; i++) {
+      const radio = this.#lastOrder[i];
+      if (radio && navigable.has(radio)) return radio;
+    }
+    for (let i = index - 1; i >= 0; i--) {
+      const radio = this.#lastOrder[i];
+      if (radio && navigable.has(radio)) return radio;
+    }
+    return this.#navigableRadios[0] ?? null;
+  }
+  /** Moves through full DOM order until a navigable radio is found. */
+  #nextNavigable(fromIndex, delta) {
+    const items = this.#managedTargets;
+    let index = fromIndex;
+    for (let step = 0; step < items.length; step++) {
+      index = rovingMove(index, items.length, delta);
+      const candidate = items[index];
+      if (candidate && this.#isNavigable(candidate)) return candidate;
+    }
+    return void 0;
+  }
+  /** Assigns the single roving Tab stop and optionally moves DOM focus. */
+  #setActive(radio, focus = false) {
+    const items = this.#managedTargets;
+    const index = items.indexOf(radio);
+    this.#roving.setActive(index, { focus });
+    for (const item of items) {
+      this.#markInternal(this.#internalTabindexValues, item, item.getAttribute("tabindex"));
+    }
+  }
+  /** Finds this group's radio containing an event target, excluding nested groups. */
+  #radioForEventTarget(target) {
+    if (!this.#ownsEventTarget(target)) return void 0;
+    const node = target;
+    return this.radioTargets.find((radio) => radio === node || radio.contains(node));
+  }
+  /** Whether the closest Radio Group scope around a target is this instance. */
+  #ownsEventTarget(target) {
+    return target instanceof Element && target.closest('[data-controller~="stimeo--radio-group"]') === this.element;
+  }
+  /** Hosts whose activation model can be owned without conflicting native behavior. */
+  #isSupportedHost(radio) {
+    if (radio instanceof HTMLButtonElement) return radio.type === "button";
+    return !isInteractiveHost(radio);
+  }
+  /** Radios eligible for roving focus; ARIA-disabled deliberately remains eligible. */
+  #isNavigable(radio) {
+    if (!this.#isSupportedHost(radio) || this.#isHidden(radio)) return false;
+    if (!(radio instanceof HTMLButtonElement)) return true;
+    return !radio.disabled && !inheritsFieldsetDisabled(radio);
+  }
+  /** Whether hidden applies on the path from a radio up to the group root. */
+  #isHidden(radio) {
+    let current = radio;
+    while (current && current !== this.element) {
+      if (current.hasAttribute("hidden")) return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Whether ARIA, visibility, or native HTML semantics suppress selection. */
+  #isActivationDisabled(radio) {
+    if (!this.#isNavigable(radio)) return true;
+    let current = radio;
+    while (current) {
+      if (current.getAttribute("aria-disabled") === "true") return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Distinguishes external retained-element changes from this controller's own writes. */
+  #handleMutationRecords(records) {
+    let external = false;
+    for (const record of records) {
+      const target = record.target;
+      const attribute = record.attributeName;
+      if (attribute === "aria-checked") {
+        const value = target.getAttribute(attribute);
+        if (this.#matchesInternal(this.#internalCheckedValues, target, value)) continue;
+        this.#ownedChecked.delete(target);
+        this.#preferChecked = true;
+        external = true;
+      } else if (attribute === "tabindex") {
+        const value = target.getAttribute(attribute);
+        if (this.#matchesInternal(this.#internalTabindexValues, target, value)) continue;
+        if (this.#managedRadios.has(target)) this.#originalTabindex.set(target, value);
+        external = true;
+      } else {
+        external = true;
+      }
+    }
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    if (external) this.#reconcile.schedule();
+  }
+  /** Records an attribute write this pass made, keeping one claim per record it will produce. */
+  #markInternal(values, target, value) {
+    const pending = values.get(target);
+    if (pending) {
+      pending.value = value;
+      pending.count += 1;
+    } else {
+      values.set(target, { value, count: 1 });
+    }
+  }
+  /** Consumes one claim on a record whose value this pass wrote. */
+  #matchesInternal(values, target, value) {
+    const pending = values.get(target);
+    if (!pending || pending.value !== value) return false;
+    pending.count -= 1;
+    if (pending.count === 0) values.delete(target);
+    return true;
+  }
+  /** Watches target membership, retained state/hosts, form state, and fieldset ancestry. */
+  #observeMutations() {
+    const observer = new MutationObserver((records) => this.#handleMutationRecords(records));
+    this.#observer = observer;
+    this.#observeWith(observer);
+  }
+  /** Registers root and ancestor observation on one observer instance. */
+  #observeWith(observer) {
+    observer.observe(this.element, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+    let ancestor = this.element.parentElement;
+    while (ancestor) {
+      observer.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["contenteditable", "disabled"]
+      });
+      ancestor = ancestor.parentElement;
+    }
+  }
+  /** Supported targets currently managed by the roving primitive. */
+  get #managedTargets() {
+    return this.radioTargets.filter((radio) => this.#managedRadios.has(radio));
+  }
+  /** Managed radios eligible for the roving Tab stop. */
+  get #navigableRadios() {
+    return this.#managedTargets.filter((radio) => this.#isNavigable(radio));
+  }
+  /** The currently checked managed radio, if any. */
+  get #selectedRadio() {
+    return this.#managedTargets.find((radio) => this.#isChecked(radio));
+  }
+  /** Whether a radio is currently checked. */
+  #isChecked(radio) {
+    return radio.getAttribute("aria-checked") === "true";
+  }
+  /** Reflects checked state while distinguishing controller writes from authored morphs. */
+  #setChecked(radio, checked) {
+    const value = checked ? "true" : "false";
+    if (radio.getAttribute("aria-checked") === value) return;
+    this.#markInternal(this.#internalCheckedValues, radio, value);
+    radio.setAttribute("aria-checked", value);
+  }
+  /** Writes a roving value before the radio is visible to the shared primitive. */
+  #writeTabindex(radio, value) {
+    const serialized = String(value);
+    this.#markInternal(this.#internalTabindexValues, radio, serialized);
+    radio.tabIndex = value;
+  }
+  /** Mirrors the selected value or the empty state to the optional hidden field. */
   #reflectField(radio, { silent = false } = {}) {
-    if (!this.hasFieldTarget || !radio) return;
-    const value = this.#radioValue(radio);
+    if (!this.hasFieldTarget) return;
+    const value = radio ? this.#radioValue(radio) : "";
     if (this.fieldTarget.value === value) return;
     this.fieldTarget.value = value;
     if (!silent) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));