stimeo-ui 0.15.0 → 0.16.0

data/dist/controllers/pointer_drag_controller.js

@@ -72,7 +72,66 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
+// src/utils/owned_pointer_session.ts
+var OwnedPointerSession = class {
+  #pointerId;
+  #owner;
+  #handlers;
+  #abort = new AbortController();
+  #active = true;
+  constructor(start, owner, handlers) {
+    this.#pointerId = start.pointerId;
+    this.#owner = owner;
+    this.#handlers = handlers;
+    const { signal } = this.#abort;
+    owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
+    owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
+    owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
+    try {
+      owner.setPointerCapture?.(this.#pointerId);
+    } catch {
+    }
+  }
+  /** Releases capture and listeners, then reports the end exactly once. */
+  end() {
+    this.#finish("teardown");
+  }
+  #finish(kind) {
+    if (!this.#active) return;
+    this.#active = false;
+    this.#abort.abort();
+    try {
+      this.#owner.releasePointerCapture?.(this.#pointerId);
+    } catch {
+    }
+    this.#handlers.end?.(kind);
+  }
+  #owns(event) {
+    return this.#active && event.pointerId === this.#pointerId;
+  }
+  #onMove = (event) => {
+    if (this.#owns(event)) this.#handlers.move(event);
+  };
+  #onEndEvent = (event) => {
+    if (this.#owns(event)) this.#finish(event.type === "pointerup" ? "up" : "cancel");
+  };
+};
+
+// src/utils/transient_hooks.ts
+var TransientHooks = class {
+  #attributes;
+  constructor(options) {
+    this.#attributes = options.attributes;
+  }
+  /** Drops the declared hooks from `element`; what it carries besides stays. */
+  reset(element) {
+    for (const attribute of this.#attributes) element.removeAttribute(attribute);
+  }
+};
+
 // src/controllers/pointer_drag_controller.ts
+var TRANSIENT_DRAG = new TransientHooks({ attributes: ["data-dragging"] });
+var TRANSIENT_GRAB = new TransientHooks({ attributes: ["data-grabbed"] });
 var NATIVE_KEY_OWNERS = "input, textarea, select, button, a[href], summary, [contenteditable]";
 var PointerDragController = class _PointerDragController extends Controller {
   static targets = ["handle"];
@@ -93,14 +152,12 @@ var PointerDragController = class _PointerDragController extends Controller {
   #keyboard = null;
   /** Committed follow offset from past drops; a new drag's deltas add onto it. */
   #followBase = { x: 0, y: 0 };
-  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
-  #dragAbort = null;
   /** Decides whether a mid-session disconnect() is an in-page move or a detach. */
   #gate = new DetachGate();
   connect() {
     this.#gate.cancel();
-    if (!this.#pointer) this.element.removeAttribute("data-dragging");
-    if (!this.#keyboard) this.element.removeAttribute("data-grabbed");
+    if (!this.#pointer) TRANSIENT_DRAG.reset(this.element);
+    if (!this.#keyboard) TRANSIENT_GRAB.reset(this.element);
     if (this.followValue && !this.#pointer && !this.#keyboard) {
       this.#followBase = this.#parseFollowBase();
     }
@@ -170,15 +227,19 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardownSessions();
   }
-  /** Arms a pointer drag on a handle; `start` waits for the threshold. */
+  /**
+   * Arms a pointer drag on a handle; `start` waits for the threshold.
+   *
+   * @stimeoRuntimeOnly `disabled` decides whether this one pointer press starts a gesture.
+   */
   #onPointerDown = (event) => {
     if (this.disabledValue || this.#pointer || this.#keyboard || event.button !== 0) return;
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     event.preventDefault();
     handle.focus();
-    this.#pointer = {
-      pointerId: event.pointerId,
+    const session = {
+      pointer: null,
       handle,
       originX: event.clientX,
       originY: event.clientY,
@@ -187,17 +248,18 @@ var PointerDragController = class _PointerDragController extends Controller {
       dy: 0,
       pointerType: this.#pointerTypeOf(event)
     };
-    handle.setPointerCapture(event.pointerId);
-    this.#dragAbort?.abort();
-    const abort = new AbortController();
-    this.#dragAbort = abort;
-    document.addEventListener("pointermove", this.#onPointerMove, { signal: abort.signal });
-    document.addEventListener("pointerup", this.#onPointerUp, { signal: abort.signal });
-    document.addEventListener("pointercancel", this.#onPointerCancel, { signal: abort.signal });
+    session.pointer = new OwnedPointerSession(event, handle, {
+      move: (move) => this.#trackMove(session, move),
+      end: (kind) => this.#finishPointer(session, kind)
+    });
+    this.#pointer = session;
   };
-  #onPointerMove = (event) => {
-    const session = this.#pointer;
-    if (!session || event.pointerId !== session.pointerId) return;
+  /**
+   * Applies one tracked move: threshold, hooks, follow offset, events.
+   *
+   * @stimeoRuntimeOnly `threshold` decides when this one pointer move starts the drag.
+   */
+  #trackMove(session, event) {
     const [dx, dy] = this.#filterAxis(
       event.clientX - session.originX,
       event.clientY - session.originY
@@ -216,25 +278,32 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.dispatch("move", {
       detail: { dx, dy, x: event.clientX, y: event.clientY, pointerType: session.pointerType }
     });
-  };
-  #onPointerUp = (event) => {
-    const session = this.#pointer;
-    if (!session || event.pointerId !== session.pointerId) return;
+  }
+  /**
+   * Closes the session and reports only the outcome the caller does not own.
+   *
+   * A teardown (detach, Escape, mid-drag disable, `reset`) is announced by the
+   * path that asked for it, so this one stays silent; `pointerup` below the
+   * threshold was a plain click, and `pointercancel` is an OS gesture takeover.
+   */
+  #finishPointer(session, kind) {
     const { started, dx, dy, pointerType } = session;
-    this.#endPointerSession();
-    if (!started) return;
-    this.#followCommit(dx, dy);
-    this.dispatch("end", { detail: { dx, dy, pointerType } });
-  };
-  /** OS gesture / scroll takeover interrupted the drag: cancel, don't drop. */
-  #onPointerCancel = (event) => {
-    const session = this.#pointer;
-    if (!session || event.pointerId !== session.pointerId) return;
-    const { started, pointerType } = session;
-    this.#endPointerSession();
-    if (started) this.#dispatchCancel(pointerType);
-  };
-  /** Keyboard alternative: Space/Enter grab & drop, arrows move, Escape cancels. */
+    this.#pointer = null;
+    this.element.removeAttribute("data-dragging");
+    if (kind === "teardown" || !started) return;
+    if (kind === "up") {
+      this.#followCommit(dx, dy);
+      this.dispatch("end", { detail: { dx, dy, pointerType } });
+      return;
+    }
+    this.#dispatchCancel(pointerType);
+  }
+  /**
+   * Keyboard alternative: Space/Enter grab & drop, arrows move, Escape cancels.
+   *
+   * @stimeoRuntimeOnly `disabled` decides whether this one key is taken and `keyboardStep` is the
+   *   distance of one keyboard move.
+   */
   #onKeydown = (event) => {
     if (this.disabledValue) return;
     const handle = this.#handleFor(event.target);
@@ -316,26 +385,19 @@ var PointerDragController = class _PointerDragController extends Controller {
         return null;
     }
   }
-  /** Zeroes the delta on the locked axis (`axis` = x | y | both). */
+  /**
+   * Zeroes the delta on the locked axis (`axis` = x | y | both).
+   *
+   * @stimeoRuntimeOnly `axis` filters the offset of one move to the allowed direction.
+   */
   #filterAxis(dx, dy) {
     if (this.axisValue === "x") return [dx, 0];
     if (this.axisValue === "y") return [0, dy];
     return [dx, dy];
   }
-  /** Releases capture + listeners and clears the pointer session and its hook. */
+  /** Silently closes a live pointer session; the caller announces the outcome. */
   #endPointerSession() {
-    this.#releasePointerCapture();
-    this.#pointer = null;
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
-    this.element.removeAttribute("data-dragging");
-  }
-  /** Releases the pointer capture the active session set (idempotent, safe). */
-  #releasePointerCapture() {
-    const session = this.#pointer;
-    if (session?.handle.hasPointerCapture(session.pointerId)) {
-      session.handle.releasePointerCapture(session.pointerId);
-    }
+    this.#pointer?.pointer?.end();
   }
   #clearKeyboardSession() {
     this.#keyboard?.handle.removeAttribute("data-grabbed");
@@ -372,18 +434,33 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#followReset();
     this.dispatch("cancel", { detail: { pointerType } });
   }
-  /** Applies the in-flight offset to the element's `translate` (follow only). */
+  /**
+   * Applies the in-flight offset to the element's `translate` (follow only).
+   *
+   * @stimeoRuntimeOnly `follow` decides whether this one move writes the offset as a translate; the
+   *   offset itself comes from the gesture.
+   */
   #followMove(dx, dy) {
     if (!this.followValue) return;
     this.#applyFollow(this.#followBase.x + dx, this.#followBase.y + dy);
   }
-  /** Folds a drop's deltas into the committed base offset (follow only). */
+  /**
+   * Folds a drop's deltas into the committed base offset (follow only).
+   *
+   * @stimeoRuntimeOnly `follow` decides whether the end of this one gesture keeps the offset as a
+   *   translate.
+   */
   #followCommit(dx, dy) {
     if (!this.followValue) return;
     this.#followBase = { x: this.#followBase.x + dx, y: this.#followBase.y + dy };
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
   }
-  /** Snaps back to the committed position (follow only) — the cancel contract. */
+  /**
+   * Snaps back to the committed position (follow only) — the cancel contract.
+   *
+   * @stimeoRuntimeOnly `follow` decides whether cancelling this one gesture clears the translate it
+   *   wrote.
+   */
   #followReset() {
     if (!this.followValue) return;
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
@@ -438,6 +515,8 @@ var PointerDragController = class _PointerDragController extends Controller {
    * idempotent) and focusability for the keyboard path (`tabindex="0"` only when
    * the author supplied none — prefer a real `<button>` handle). Both additions
    * are marker-owned so `#restoreHandle` reverts them symmetrically on teardown.
+   *
+   * @stimeoRenderRoot
    */
   #prepareHandle(handle) {
     const lent = this.#touchActionForAxis();

data/dist/controllers/popover_controller.js

@@ -192,6 +192,16 @@ function isScrollable(element) {
   return /auto|scroll|overlay/.test(style.overflow + style.overflowX + style.overflowY);
 }
 
+// src/utils/state_reason.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";
+}
+
 // src/controllers/popover_controller.ts
 var PopoverController = class extends Controller {
   static targets = ["trigger", "panel"];
@@ -199,15 +209,19 @@ var PopoverController = class extends Controller {
     closeOnScroll: { type: Boolean, default: false }
   };
   static actions = ["close", "open", "toggle"];
+  static events = ["close", "open"];
   /** Cleanup for the dismiss-on-scroll listeners while open, or `null`. */
   #stopScrollDismiss = null;
   /** Escape-stack membership while open; the shared resolver dismisses via it. */
   #escapeLayer = new EscapeLayer();
+  /** Whether state moves are reported: set once `connect()` settled the baseline. */
+  #reporting = false;
   /** Starts closed and registers the standing dismissal listeners. */
   connect() {
-    this.close();
+    this.#close("api");
     document.addEventListener("click", this.#onOutsideClick, true);
     this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#reporting = true;
   }
   /**
    * Removes every standing listener registered in {@link connect} plus any active
@@ -216,6 +230,7 @@ var PopoverController = class extends Controller {
    * the element after a Turbo navigation.
    */
   disconnect() {
+    this.#reporting = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("click", this.#onOutsideClick, true);
     this.element.removeEventListener("focusout", this.#onFocusOut);
@@ -223,34 +238,51 @@ var PopoverController = class extends Controller {
     this.#stopScrollDismiss = null;
   }
   /** Toggles the popover. Bound via `data-action` (click on the trigger). */
-  toggle() {
+  toggle(event) {
     if (this.#isOpen) {
-      this.close();
+      this.close(event);
     } else {
-      this.open();
+      this.open(event);
     }
   }
   /** Opens the panel, reflects state, and moves focus inside it. */
-  open() {
+  open(event) {
+    this.#open(stateReasonFor(event));
+  }
+  /** Closes the panel and reflects the collapsed state. Bound via `data-action`. */
+  close(event) {
+    this.#close(stateReasonFor(event));
+  }
+  /**
+   * Opens the panel, reflects state, reports a move, and moves focus inside it.
+   *
+   * @stimeoRuntimeOnly `closeOnScroll` decides whether this opening wires the scroll dismissal;
+   *   what is shown does not depend on it.
+   */
+  #open(reason) {
     if (!this.hasPanelTarget || this.#isOpen) return;
     this.panelTarget.hidden = false;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true");
+    if (this.#reporting) this.dispatch("open", { detail: { reason }, cancelable: false });
+    if (!this.#isOpen) return;
     this.#escapeLayer.activate(document, {
       onDismiss: () => this.#closeAndRestore(),
       claims: claimsWhileFocusWithin(this.element)
     });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
-      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.close());
+      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.#close("scroll"));
     }
     this.#focusFirst();
   }
-  /** Closes the panel and reflects the collapsed state. Bound via `data-action`. */
-  close() {
+  /** Closes the panel, reflects the collapsed state, and reports a move. */
+  #close(reason) {
+    const was = this.#isOpen;
     this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
     if (this.hasPanelTarget) this.panelTarget.hidden = true;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false");
+    if (was && this.#reporting) this.dispatch("close", { detail: { reason }, cancelable: false });
   }
   /** Moves focus to the first focusable element in the panel, or the panel itself. */
   #focusFirst() {
@@ -264,13 +296,15 @@ var PopoverController = class extends Controller {
   }
   /** Closes and restores focus to the trigger for explicit keyboard dismissal. */
   #closeAndRestore() {
-    this.close();
+    this.#close("escape");
     if (this.hasTriggerTarget) this.triggerTarget.focus();
   }
   /** Closes without moving focus when a click lands outside the controller element. */
   #onOutsideClick = (event) => {
     const target = event.target;
-    if (this.#isOpen && target instanceof Node && !this.element.contains(target)) this.close();
+    if (this.#isOpen && target instanceof Node && !this.element.contains(target)) {
+      this.#close("outside");
+    }
   };
   /**
    * Closes when focus leaves the controller for a known external destination
@@ -284,7 +318,7 @@ var PopoverController = class extends Controller {
     if (!this.#isOpen) return;
     const next = event.relatedTarget;
     if (!(next instanceof Node) || this.element.contains(next)) return;
-    this.close();
+    this.#close("focus");
   };
   /** Whether the panel is currently visible. */
   get #isOpen() {

data/dist/controllers/portal_controller.js

@@ -122,7 +122,7 @@ var PortalController = class extends Controller {
       destination.appendChild(node);
     }
     node.setAttribute("data-portaled", "true");
-    this.dispatch("mount", { detail: { target: destination } });
+    this.dispatch("mount", { detail: { destination } });
   }
   disconnect() {
     const state = portalState.get(this.element);
@@ -137,7 +137,11 @@ var PortalController = class extends Controller {
       if (current?.owner === this) this.#restore(current);
     });
   }
-  /** Returns the node to its placeholder (or removes it) and clears the bookkeeping. */
+  /**
+   * Returns the node to its placeholder (or removes it) and clears the bookkeeping.
+   *
+   * @stimeoRuntimeOnly `restore` decides whether this one unmount puts the node back or drops it.
+   */
   #restore(state) {
     portalState.delete(this.element);
     const { node, placeholder } = state;

data/dist/controllers/preview_guard_controller.js

@@ -83,7 +83,20 @@ var StylePropertyLease = class {
   }
 };
 
+// src/utils/transient_hooks.ts
+var TransientHooks = class {
+  #attributes;
+  constructor(options) {
+    this.#attributes = options.attributes;
+  }
+  /** Drops the declared hooks from `element`; what it carries besides stays. */
+  reset(element) {
+    for (const attribute of this.#attributes) element.removeAttribute(attribute);
+  }
+};
+
 // src/controllers/preview_guard_controller.ts
+var TRANSIENT = new TransientHooks({ attributes: ["data-preview-hidden"] });
 var PreviewGuardController = class extends Controller {
   static values = {
     placeholder: { type: String, default: "" }
@@ -101,7 +114,7 @@ var PreviewGuardController = class extends Controller {
   connect() {
     this.#connected = true;
     if (this.#hidden) this.#reguard();
-    else this.element.removeAttribute("data-preview-hidden");
+    else TRANSIENT.reset(this.element);
     this.#beforeCache.activate();
     if (typeof MutationObserver !== "undefined") {
       this.#observer = new MutationObserver(() => this.#sync());
@@ -161,6 +174,8 @@ var PreviewGuardController = class extends Controller {
    * first would reconnect the whole subtree for an instant. Only a change of *form* —
    * to or from the empty placeholder — has to revert, and the focus the guard is holding
    * carries across it rather than being handed back and taken again.
+   *
+   * @stimeoRenderRoot
    */
   #reguard() {
     if (this.#savedNodes && this.placeholderValue !== "") {

data/dist/controllers/progress_controller.js

@@ -76,8 +76,12 @@ function rangeFraction(value, min, max) {
 }
 
 // src/controllers/progress_controller.ts
-var OWNED_VALUE_TEXT = "data-stimeo--progress-owns-valuetext";
+var OWNED_VALUE_TEXT = "owns-valuetext";
 var ProgressController = class extends Controller {
+  /** The marker above, in the namespace this controller is registered under. */
+  get #ownedValueText() {
+    return `data-${this.identifier}-${OWNED_VALUE_TEXT}`;
+  }
   static targets = ["bar"];
   static values = {
     value: { type: Number, default: 0 },
@@ -189,13 +193,13 @@ var ProgressController = class extends Controller {
     const percent = Math.round(this.#ratio * 100);
     const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent));
     this.element.setAttribute("aria-valuetext", text);
-    this.element.setAttribute(OWNED_VALUE_TEXT, "");
+    this.element.setAttribute(this.#ownedValueText, "");
   }
   /** Removes `aria-valuetext` only when this controller is the one that wrote it. */
   #clearOwnValueText() {
-    if (!this.element.hasAttribute(OWNED_VALUE_TEXT)) return;
+    if (!this.element.hasAttribute(this.#ownedValueText)) return;
     this.element.removeAttribute("aria-valuetext");
-    this.element.removeAttribute(OWNED_VALUE_TEXT);
+    this.element.removeAttribute(this.#ownedValueText);
   }
 };
 

data/dist/controllers/radio_group_controller.js

@@ -29,6 +29,16 @@ 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;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -131,6 +141,7 @@ function rovingMove(current, length, delta, wrap) {
 }
 
 // src/controllers/radio_group_controller.ts
+var NO_SELECTION = { radio: null, value: "" };
 var OBSERVED_ATTRIBUTES = [
   "aria-checked",
   "aria-disabled",
@@ -158,7 +169,8 @@ var RadioGroupController = class extends Controller {
   #internalCheckedValues = /* @__PURE__ */ new Map();
   #internalTabindexValues = /* @__PURE__ */ new Map();
   #observer = null;
-  #committedRadio = null;
+  /** The selection last published: read on connect, then committed or reported. */
+  #committed = NO_SELECTION;
   #connected = false;
   #lastOrder = [];
   #focusedRadio = null;
@@ -177,7 +189,7 @@ var RadioGroupController = class extends Controller {
     this.#normalizeSelection();
     this.#ensureTabStop(true);
     this.#reflectField(this.#selectedRadio, { silent: true });
-    this.#committedRadio = this.#selectedRadio ?? null;
+    this.#committed = this.#settled;
     this.#lastOrder = this.#managedTargets;
     this.element.addEventListener("click", this.#onClickCapture, true);
     this.element.addEventListener("keydown", this.#onKeydownCapture, true);
@@ -208,7 +220,7 @@ var RadioGroupController = class extends Controller {
     this.#internalTabindexValues.clear();
     this.#focusedRadio = null;
     this.#pendingFocusIndex = null;
-    this.#committedRadio = null;
+    this.#committed = NO_SELECTION;
     this.#preferChecked = false;
   }
   /** Removes a newly connected radio from the Tab sequence before batch reconciliation. */
@@ -334,17 +346,23 @@ 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. */
+  /**
+   * 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 }) {
     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 });
-    this.#committedRadio = radio;
     if (changed) {
       this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
     }
@@ -372,16 +390,19 @@ var RadioGroupController = class extends Controller {
     this.#reportReconciledSelection();
   }
   /**
-   * 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.
+   * 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() {
-    const settled = this.#selectedRadio ?? null;
-    if (settled === this.#committedRadio) return;
-    this.#committedRadio = settled;
-    this.dispatch("reconcile", {
-      detail: { value: settled ? this.#radioValue(settled) : "", radio: settled }
-    });
+    if (!this.#connected) return;
+    const settled = this.#settled;
+    const committed = this.#committed;
+    if (settled.radio === committed.radio && settled.value === committed.value) return;
+    this.#committed = settled;
+    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) {
@@ -493,7 +514,7 @@ var RadioGroupController = class extends Controller {
   }
   /** 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;
+    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) {
@@ -603,6 +624,11 @@ var RadioGroupController = class extends Controller {
   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";
@@ -624,9 +650,8 @@ var RadioGroupController = class extends Controller {
   #reflectField(radio, { silent = false } = {}) {
     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 }));
+    if (!writeField(this.fieldTarget, value)) return;
+    if (!silent) commitField(this.fieldTarget);
   }
   /** A radio's submitted value (`data-value`, defaulting to empty). */
   #radioValue(radio) {