stimeo-ui 0.14.0 → 0.16.0

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) {

data/dist/controllers/range_slider_controller.js

@@ -18,6 +18,16 @@ 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/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/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -53,54 +63,46 @@ var MicrotaskCoalescer = class {
 
 // src/utils/owned_pointer_session.ts
 var OwnedPointerSession = class {
-  pointerId;
+  #pointerId;
   #owner;
   #handlers;
   #abort = new AbortController();
   #active = true;
   constructor(start, owner, handlers) {
-    this.pointerId = start.pointerId;
+    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 });
-    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
     try {
-      owner.setPointerCapture?.(this.pointerId);
+      owner.setPointerCapture?.(this.#pointerId);
     } catch {
     }
   }
-  /** Whether this session still owns its pointer and listeners. */
-  get active() {
-    return this.#active;
-  }
-  /** Whether `event` belongs to the initiating pointer of the live session. */
-  owns(event) {
-    return this.#active && event.pointerId === this.pointerId;
-  }
-  /** Releases capture/listeners and invokes the end callback exactly once. */
+  /** 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);
+      this.#owner.releasePointerCapture?.(this.#pointerId);
     } catch {
     }
-    this.#handlers.end?.();
+    this.#handlers.end?.(kind);
+  }
+  #owns(event) {
+    return this.#active && event.pointerId === this.#pointerId;
   }
   #onMove = (event) => {
-    if (this.owns(event)) this.#handlers.move(event);
+    if (this.#owns(event)) this.#handlers.move(event);
   };
   #onEndEvent = (event) => {
-    if (this.owns(event)) this.end();
-  };
-  #onLostCapture = (event) => {
-    const pointerId = event.pointerId;
-    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
-    this.end();
+    if (this.#owns(event)) this.#finish(event.type === "pointerup" ? "up" : "cancel");
   };
 };
 
@@ -232,7 +234,7 @@ var END_PROPERTY = "--stimeo--range-slider-end";
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
 var RangeSliderController = class extends Controller {
-  static targets = ["track", "startThumb", "endThumb"];
+  static targets = ["track", "startThumb", "endThumb", "startField", "endField"];
   static values = {
     min: { type: Number, default: DEFAULT_MIN },
     max: { type: Number, default: DEFAULT_MAX },
@@ -242,9 +244,14 @@ var RangeSliderController = class extends Controller {
     logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onKeydown", "onPointerDown"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** One initiating pointer owns each live drag and its stable target snapshot. */
   #drag = null;
+  /**
+   * The pair last published: taken on connect, then moved by each user commit
+   * and by each repaint that reports a page-driven move.
+   */
+  #settled = { start: DEFAULT_MIN, end: DEFAULT_MAX };
   /** Whether the consumer declared a mirroring track and the direction mirrors it. */
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
@@ -254,11 +261,14 @@ var RangeSliderController = class extends Controller {
    * pass Stimulus delivers before `connect()`.
    */
   #repaint = new MicrotaskCoalescer(() => this.#render());
+  /**
+   * Renders the normalized, ordered pair without writing it back, and takes it
+   * as the baseline, so connecting reports nothing.
+   */
   connect() {
     this.#repaint.activate();
-    const range = this.#effectiveRange;
-    const pair = this.#currentPair(range);
-    this.#commit(pair.start, pair.end, null, false);
+    this.#settled = this.#currentPair(this.#effectiveRange);
+    this.#render();
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
@@ -313,6 +323,14 @@ var RangeSliderController = class extends Controller {
     }
     this.#repaint.schedule();
   }
+  /** Fills a start field inserted or replaced at runtime on the next repaint. */
+  startFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Fills an end field inserted or replaced at runtime on the next repaint. */
+  endFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
   /** Drops a stale end-thumb reference without orphaning the track gesture. */
   endThumbTargetDisconnected(thumb) {
     if (this.#drag?.kind === "end" && this.#drag.thumb === thumb) this.#drag.thumb = null;
@@ -439,44 +457,72 @@ var RangeSliderController = class extends Controller {
   #moveThumb(kind, raw) {
     const pair = this.#currentPair(this.#effectiveRange);
     if (kind === "start") {
-      this.#commit(raw, pair.end, "start", true);
+      this.#commit(raw, pair.end, "start");
     } else {
-      this.#commit(pair.start, raw, "end", true);
+      this.#commit(pair.start, raw, "end");
     }
   }
   /**
-   * Clamps and snaps `start`/`end`, enforces `start ≤ end`, stores the pair, and
-   * reflects it onto the thumbs' ARIA attributes and the range custom
-   * properties. Dispatches `stimeo--range-slider:change` only when a
-   * user-driven update changes the normalized pair, with
-   * `{ start: number, end: number }` in `detail`.
+   * Clamps and snaps the pair a user's move of the `moving` thumb produced,
+   * stops that thumb at its partner, stores the pair, and reflects it onto the
+   * thumbs' ARIA attributes and the range custom properties. The pair is
+   * reported as `change` when it differs from the pair last published — not from
+   * the pair the move started from — so a page write no repaint has published
+   * yet is reported once, as this change, and a move that ends on the pair last
+   * published reports nothing. The baseline moves before any report goes out,
+   * so the repaint the Value writes schedule — and any move a subscriber makes
+   * while the report is dispatched — is measured from this pair.
    */
-  #commit(start, end, moving, notify) {
+  #commit(start, end, moving) {
     const range = this.#effectiveRange;
-    const previous = this.#currentPair(range);
     let nextStart = snapSteppedValue(start, range);
     let nextEnd = snapSteppedValue(end, range);
     if (nextStart > nextEnd) {
       if (moving === "start") nextStart = nextEnd;
-      else if (moving === "end") nextEnd = nextStart;
-      else [nextStart, nextEnd] = [nextEnd, nextStart];
+      else nextEnd = nextStart;
     }
+    const pair = { start: nextStart, end: nextEnd };
+    const reported = this.#settled;
+    this.#settled = pair;
     if (!Object.is(this.startValue, nextStart)) this.startValue = nextStart;
     if (!Object.is(this.endValue, nextEnd)) this.endValue = nextEnd;
-    const pair = { start: nextStart, end: nextEnd };
     this.#renderPair(pair, range);
-    if (notify && (nextStart !== previous.start || nextEnd !== previous.end)) {
+    this.#mirrorFields(pair, true);
+    if (nextStart !== reported.start || nextEnd !== reported.end) {
       this.dispatch("change", { detail: { start: nextStart, end: nextEnd } });
     }
   }
   /**
-   * Reflects morph-supplied Values without writing them back or dispatching.
+   * Reflects the Values the page supplied without writing them back. A published
+   * pair that moved from the last one is reported once as `reconcile`; the
+   * fields follow without a native `change`.
    *
    * @stimeoRenderRoot
    */
   #render() {
     const range = this.#effectiveRange;
-    this.#renderPair(this.#currentPair(range), range);
+    const pair = this.#currentPair(range);
+    this.#renderPair(pair, range);
+    this.#mirrorFields(pair, false);
+    const settled = this.#settled;
+    if (pair.start === settled.start && pair.end === settled.end) return;
+    this.#settled = pair;
+    this.dispatch("reconcile", { detail: { start: pair.start, end: pair.end } });
+  }
+  /**
+   * Mirrors the pair into the optional form fields, reporting only a user's
+   * move. Each end is compared on its own, so dragging one thumb never reports
+   * a commit from the field the other thumb owns.
+   */
+  #mirrorFields(pair, notify) {
+    if (this.hasStartFieldTarget) {
+      const field = this.startFieldTarget;
+      if (writeField(field, String(pair.start)) && notify) commitField(field);
+    }
+    if (this.hasEndFieldTarget) {
+      const field = this.endFieldTarget;
+      if (writeField(field, String(pair.end)) && notify) commitField(field);
+    }
   }
   /** Reflects one normalized pair onto both thumbs and CSS properties. */
   #renderPair(pair, range) {