stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/radio_group_controller.js

@@ -1,13 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/radio_group_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowStep(key, element) {
   if (key === "ArrowDown") return 1;
   if (key === "ArrowUp") return -1;
@@ -19,8 +37,108 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
@@ -29,7 +147,6 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
-// src/utils/field_mirror.ts
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -39,7 +156,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -50,7 +166,6 @@ function inheritsFieldsetDisabled(control) {
   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;
@@ -67,27 +182,36 @@ function isInteractiveHost(element) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -100,31 +224,53 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/roving_tabindex.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
 var RovingTabindex = class {
-  /** Returns the current ordered item elements; called on every operation. */
   #getItems;
-  /**
-   * @param getItems - Returns the current ordered item elements. Called on every
-   *   operation so the live target list is always used.
-   */
   constructor(getItems) {
     this.#getItems = getItems;
   }
-  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
   get activeIndex() {
     return this.#getItems().findIndex((item) => item.tabIndex === 0);
   }
-  /**
-   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
-   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
-   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
-   * "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,
-   *   and `items` to reuse an event-scoped collection snapshot.
-   */
   setActive(index, options = {}) {
     const { focus = false } = options;
     const items = options.items ?? this.#getItems();
@@ -140,7 +286,10 @@ function rovingMove(current, length, delta, wrap) {
   return (next + length) % length;
 }
 
-// src/controllers/radio_group_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var NO_SELECTION = { radio: null, value: "" };
 var OBSERVED_ATTRIBUTES = [
   "aria-checked",
@@ -155,32 +304,32 @@ var OBSERVED_ATTRIBUTES = [
   "type",
   "value"
 ];
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var RadioGroupController = class extends Controller {
+  #moves = new MoveCounter();
+  #connectionGeneration = 0;
+  #moveToken = 0;
   static targets = ["radio", "field"];
   static actions = ["onKeydown", "select"];
   static events = ["change", "reconcile"];
   #roving = new RovingTabindex(() => this.#managedTargets);
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #reconcile = new MorphRenderWatcher(() => 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;
-  /** The selection last published: read on connect, then committed or reported. */
+  #ownedChecked = /* @__PURE__ */ new Map();
+  #writtenTabindex = /* @__PURE__ */ new WeakMap();
+  #observer = new AuthoredMutationWatcher(
+    (records) => this.#handleMutationRecords(records)
+  );
   #committed = NO_SELECTION;
   #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.
-   */
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     const currentRadios = new Set(this.radioTargets);
     for (const radio of this.#managedRadios) {
       if (!currentRadios.has(radio)) this.#releaseRadio(radio);
@@ -188,49 +337,37 @@ var RadioGroupController = class extends Controller {
     for (const radio of this.radioTargets) this.#reconcileHost(radio, false);
     this.#normalizeSelection();
     this.#ensureTabStop(true);
-    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#reflectField(this.#selectedRadio);
     this.#committed = this.#settled;
     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.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onKeydownCapture, { capture: true });
+    this.#listeners.add(this.element, "click", this.#onClick);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
+    this.#listeners.add(this.element, "focusout", this.#onFocusout);
     this.#connected = true;
     this.#preferChecked = false;
-    this.#internalCheckedValues.clear();
-    this.#internalTabindexValues.clear();
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
     this.#observeMutations();
   }
-  /** Releases every listener, observer, and queued pass while retaining live DOM state. */
   disconnect() {
+    this.#connectionGeneration += 1;
     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.#reconcile.disconnect();
+    this.#listeners.dispose();
+    this.#observer.disconnect();
     this.#focusedRadio = null;
     this.#pendingFocusIndex = null;
     this.#committed = NO_SELECTION;
     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) {
@@ -241,36 +378,33 @@ var RadioGroupController = class extends Controller {
     this.#preferChecked = true;
     this.#reconcile.schedule();
   }
-  /** 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) {
-    if (event.defaultPrevented || !this.#ownsEventTarget(event.target)) return;
-    const radio = event.currentTarget;
+  select(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    const radio = host?.closest(targetSelector(this.identifier, "radio"));
     if (!radio || !this.radioTargets.includes(radio)) return;
-    this.#handledEvents.add(event);
-    this.#selectRadio(radio, { focus: false });
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    if (event?.defaultPrevented || event && !this.#ownsEventTarget(origin)) return;
+    if (event) this.#handledEvents.add(event);
+    this.#selectRadio(radio, { focus: false }, reason);
   }
-  /** Applies the APG key map to the action's radio. Per-radio action wiring is optional. */
   onKeydown(event) {
     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);
@@ -280,25 +414,21 @@ var RadioGroupController = class extends Controller {
       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;
@@ -308,11 +438,10 @@ var RadioGroupController = class extends Controller {
       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 === "Home" || event.key === "End") && hasModifierChord(event)) return;
     if (event.key === " ") {
       if (this.#isActivationDisabled(radio)) {
         event.preventDefault();
@@ -346,65 +475,54 @@ var RadioGroupController = class extends Controller {
     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. A
-   * new selection is taken as published before either report goes out, so a
-   * listener that selects again is measured from it. Activating the radio that is
-   * already checked publishes nothing: if the page checked it, the next pass
-   * reports that move.
-   */
-  #selectRadio(radio, { focus }) {
+  #selectRadio(radio, { focus }, reason = "user") {
     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.#committed = { radio, value: this.#radioValue(radio) };
-    }
-    this.#setActive(radio, focus);
-    this.#reflectField(radio, { silent: !changed });
-    if (changed) {
-      this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
+    const generation = this.#connectionGeneration;
+    const value = this.#radioValue(radio);
+    const changed = this.#committed.radio !== radio || this.#committed.value !== value;
+    for (const item of this.#managedTargets) this.#setChecked(item, item === radio);
+    this.#committed = { radio, value };
+    if (changed) this.#moveToken = this.#moves.record();
+    const token = this.#moveToken;
+    this.#setActive(radio);
+    const fieldChanged = this.#writeField(value);
+    this.#handleMutationRecords(this.#observer.take());
+    if (focus) radio.focus();
+    if (generation !== this.#connectionGeneration || !this.#connected || !this.#moves.isLatest(token))
+      return;
+    if (changed && fieldChanged) commitField(this.fieldTarget);
+    if (changed && generation === this.#connectionGeneration && this.#connected && this.#moves.isLatest(token)) {
+      this.dispatch("change", { detail: { value, radio, reason } });
     }
   }
-  /** Reconciles target ownership, selection, roving, focus continuity, and form state. */
   #reconcileDom() {
-    const observer = this.#observer;
-    observer?.disconnect();
+    this.#handleMutationRecords(this.#observer.take());
     for (const radio of this.radioTargets) this.#reconcileHost(radio, true);
     this.#normalizeSelection();
     const pendingFocusIndex = this.#pendingFocusIndex;
     this.#pendingFocusIndex = null;
+    let destination = null;
     if (pendingFocusIndex !== null) {
-      const destination = this.#nearestNavigable(pendingFocusIndex);
-      this.#setActive(destination, destination !== null);
+      destination = this.#nearestNavigable(pendingFocusIndex);
+      this.#setActive(destination);
     } else {
       this.#ensureTabStop(this.#preferChecked);
     }
-    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#reflectField(this.#selectedRadio);
     this.#lastOrder = this.#managedTargets;
     this.#preferChecked = false;
-    this.#internalCheckedValues.clear();
-    this.#internalTabindexValues.clear();
-    if (this.#connected && observer) this.#observeWith(observer);
-    this.#reportReconciledSelection();
-  }
-  /**
-   * Announces a selection that moved since the one this group last published —
-   * another radio, or the same radio submitting another value. Dispatched after
-   * observation resumes so a consumer's own DOM edits are seen by the next pass,
-   * and only while connected: moving focus inside the pass runs listeners that
-   * can disconnect the group.
-   */
-  #reportReconciledSelection() {
-    if (!this.#connected) return;
+    this.#handleMutationRecords(this.#observer.take());
     const settled = this.#settled;
     const committed = this.#committed;
-    if (settled.radio === committed.radio && settled.value === committed.value) return;
+    const changed = settled.radio !== committed.radio || settled.value !== committed.value;
     this.#committed = settled;
-    this.dispatch("reconcile", { detail: { value: settled.value, radio: settled.radio } });
+    const token = this.#moveToken;
+    destination?.focus();
+    if (!this.#connected || !this.#moves.isLatest(token)) return;
+    if (changed) {
+      this.dispatch("reconcile", { detail: { value: settled.value, radio: settled.radio } });
+    }
   }
-  /** Begins or ends ownership according to a radio's current host semantics. */
   #reconcileHost(radio, dropFromTabSequence) {
     if (!this.#isSupportedHost(radio)) {
       this.#releaseRadio(radio);
@@ -417,44 +535,36 @@ var RadioGroupController = class extends Controller {
     }
     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");
+      this.#writeAttribute(radio, "tabindex", null);
     } else if (original !== void 0) {
-      this.#markInternal(this.#internalTabindexValues, radio, original);
-      radio.setAttribute("tabindex", original);
+      this.#writeAttribute(radio, "tabindex", original);
     }
     this.#originalTabindex.delete(radio);
     if (this.#ownedChecked.delete(radio)) {
-      this.#markInternal(this.#internalCheckedValues, radio, null);
-      radio.removeAttribute("aria-checked");
+      this.#writeAttribute(radio, "aria-checked", null);
     }
   }
-  /** 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.#ownedChecked.set(radio, "false");
       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;
@@ -469,12 +579,6 @@ var RadioGroupController = class extends Controller {
     active ??= navigable[0];
     this.#setActive(active ?? null);
   }
-  /**
-   * 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++) {
@@ -487,7 +591,6 @@ var RadioGroupController = class extends Controller {
     }
     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;
@@ -498,36 +601,32 @@ var RadioGroupController = class extends Controller {
     }
     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 });
+    this.#roving.setActive(index);
     for (const item of items) {
-      this.#markInternal(this.#internalTabindexValues, item, item.getAttribute("tabindex"));
+      this.#observer.claimCurrent(item, "tabindex");
+      this.#writtenTabindex.set(item, item.getAttribute("tabindex"));
     }
+    if (focus) radio?.focus();
   }
-  /** Finds this group's radio containing an event target, excluding nested groups. */
   #radioForEventTarget(target) {
     if (!this.#ownsEventTarget(target)) return null;
     return ownerOf(this.radioTargets, target);
   }
-  /** Whether the closest Radio Group scope around a target is this instance. */
   #ownsEventTarget(target) {
     return target instanceof Element && target.closest(`[data-controller~="${this.identifier}"]`) === 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) {
@@ -536,7 +635,6 @@ var RadioGroupController = class extends Controller {
     }
     return false;
   }
-  /** Whether ARIA, visibility, or native HTML semantics suppress selection. */
   #isActivationDisabled(radio) {
     if (!this.#isNavigable(radio)) return true;
     let current = radio;
@@ -546,119 +644,88 @@ var RadioGroupController = class extends Controller {
     }
     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, {
+    this.#observer.observe(this.element, {
       subtree: true,
       childList: true,
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_ATTRIBUTES,
+      ancestorAttributes: ["contenteditable", "disabled"]
     });
-    let ancestor = this.element.parentElement;
-    while (ancestor) {
-      observer.observe(ancestor, {
-        attributes: true,
-        attributeFilter: ["contenteditable", "disabled"]
-      });
-      ancestor = ancestor.parentElement;
+  }
+  #releaseDefaultsRewrittenWhileAway() {
+    for (const [radio, written] of this.#ownedChecked) {
+      const current = radio.getAttribute("aria-checked");
+      if (current !== null && current !== written) this.#ownedChecked.delete(radio);
+    }
+    for (const radio of this.#managedRadios) {
+      const written = this.#writtenTabindex.get(radio);
+      const current = radio.getAttribute("tabindex");
+      if (current !== written) this.#originalTabindex.set(radio, current);
     }
   }
-  /** 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));
   }
-  /** The current selection as the group publishes it. */
   get #settled() {
     const radio = this.#selectedRadio;
     return radio ? { radio, value: this.#radioValue(radio) } : NO_SELECTION;
   }
-  /** 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);
+    if (this.#ownedChecked.has(radio)) this.#ownedChecked.set(radio, value);
+    this.#writeAttribute(radio, "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;
+    this.#writtenTabindex.set(radio, serialized);
+    this.#writeAttribute(radio, "tabindex", serialized);
   }
-  /** Mirrors the selected value or the empty state to the optional hidden field. */
-  #reflectField(radio, { silent = false } = {}) {
-    if (!this.hasFieldTarget) return;
+  #writeAttribute(target, name, value) {
+    setAttributeIfChanged(target, name, value, () => this.#observer.claim(target, name, value));
+  }
+  #reflectField(radio) {
     const value = radio ? this.#radioValue(radio) : "";
-    if (!writeField(this.fieldTarget, value)) return;
-    if (!silent) commitField(this.fieldTarget);
+    this.#writeField(value);
   }
-  /** A radio's submitted value (`data-value`, defaulting to empty). */
   #radioValue(radio) {
     return radio.getAttribute("data-value") ?? "";
   }
+  #writeField(value) {
+    if (!this.hasFieldTarget) return false;
+    const changed = writeField(this.fieldTarget, value);
+    if (changed && this.fieldTarget.type === "hidden")
+      this.#observer.claimCurrent(this.fieldTarget, "value");
+    return changed;
+  }
 };
 
 export { RadioGroupController };
-//# sourceMappingURL=radio_group_controller.js.map
 //# sourceMappingURL=radio_group_controller.js.map