stimeo-ui 0.15.0 → 0.16.0

data/dist/controllers/data_grid_controller.js

@@ -18,6 +18,29 @@ 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 writeFields(container, values, { name, form = "" }) {
+  const current = [...container.children];
+  const submits = current.length === values.length && current.every(
+    (child, index) => child instanceof HTMLInputElement && child.type === "hidden" && child.value === values[index] && child.name === name && (child.getAttribute("form") ?? "") === form
+  );
+  if (submits) return false;
+  container.replaceChildren(
+    ...values.map((value) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = name;
+      input.value = value;
+      if (form !== "") input.setAttribute("form", form);
+      return input;
+    })
+  );
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // 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) {
@@ -70,48 +93,71 @@ var MicrotaskCoalescer = class {
 
 // src/controllers/data_grid_controller.ts
 var SORT_CYCLE = ["none", "ascending", "descending"];
+var OBSERVED_ATTRIBUTES = ["aria-selected", "data-value"];
+function setAttributeIfChanged(element, name, value) {
+  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+function sameSelection(a, b) {
+  if (a.size !== b.size) return false;
+  for (const [row, value] of a) {
+    if (!b.has(row) || b.get(row) !== value) return false;
+  }
+  return true;
+}
 function nextSortDirection(current) {
   const index = SORT_CYCLE.indexOf(current);
   const from = index < 0 ? 0 : index;
   return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
 }
 var DataGridController = class extends Controller {
-  static targets = ["columnHeader", "row", "cell"];
+  static targets = ["columnHeader", "row", "cell", "fields"];
   static values = {
-    selection: { type: String, default: "none" }
+    selection: { type: String, default: "none" },
+    name: { type: String, default: "rows[]" },
+    form: { type: String, default: "" }
   };
   static actions = ["onKeydown", "sort", "toggleSelect"];
-  static events = ["selectionchange", "sort"];
+  static events = ["selectionchange", "sort", "reconcile"];
   /**
-   * Collapses the per-element target callbacks of one DOM mutation into a single
-   * baseline pass, and refuses to run before `connect()` or after `disconnect()`.
+   * Collapses the target callbacks, Value changes and observed row writes of one
+   * DOM mutation into a single pass, and refuses to run before `connect()` or
+   * after `disconnect()`.
    *
    * Stimulus reports every target one at a time, so an ungated pass would re-walk
    * the whole grid once per authored cell on mount and once per streamed cell
    * afterwards — quadratic in the cell count both times.
    */
-  #reconcile = new MicrotaskCoalescer(() => this.#restoreBaseline());
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileRows());
+  /** Watches the row attributes a page can rewrite in place; set while connected. */
+  #observer = null;
+  /** The selection last settled: on connect, by the user, or by a reported pass. */
+  #settled = /* @__PURE__ */ new Map();
   /**
-   * Establishes a single tab stop across all navigable cells/headers and brings
-   * the rows to their baseline.
+   * Establishes a single tab stop across all navigable cells/headers, brings the
+   * rows to their baseline, and settles the selection without reporting it.
    *
-   * Normalizing here rather than leaving it to {@link selectionValueChanged}
-   * guarantees exactly one pass per mount: a re-attached element reuses its
-   * cached Stimulus context, whose value observer already knows the `selection`
-   * attribute, so the Value callback does not fire a second time.
+   * The whole baseline runs here rather than in the Value callbacks: Stimulus
+   * delivers those before `connect()`, where the pass is refused, and a
+   * re-attached element reuses its cached context, whose value observer does not
+   * fire again.
    */
   connect() {
     this.#restoreBaseline();
+    this.#settled = this.#selection();
     this.#reconcile.activate();
+    this.#observeRows();
   }
-  /** Closes the reconcile window so a queued pass cannot run against a detached tree. */
+  /** Releases the row observer and drops a queued pass, so neither outlives the element. */
   disconnect() {
     this.#reconcile.cancel();
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   /**
-   * Rebuilds both DOM-owned baselines from the live grid: exactly one navigable
-   * cell is in the Tab sequence, and every selectable row carries an explicit
-   * `aria-selected`.
+   * Rebuilds the DOM-owned baselines from the live grid: exactly one navigable
+   * cell is in the Tab sequence, `aria-multiselectable` follows `selection`, every
+   * selectable row carries an explicit `aria-selected`, and the fields mirror the
+   * selected rows.
    *
    * The tab stop keeps whichever cell already holds it, so a rebuild triggered by
    * an unrelated row arriving does not throw the user's position away; only when
@@ -124,21 +170,60 @@ var DataGridController = class extends Controller {
     const cells = this.#navigableCells();
     const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
     if (active) this.#setActiveCell(active, { focus: false }, cells);
+    this.#syncSelectable();
+    const pageWrote = this.#takePageRecords();
     this.#normalizeSelection();
+    this.#dropOwnRecords(pageWrote);
+    this.#mirrorFields(false);
+  }
+  /**
+   * The pass the page's changes run: the baselines are rebuilt, then a selection
+   * that moved is reported. The report comes last, so rows a subscriber rewrites
+   * are the next pass's to settle.
+   */
+  #reconcileRows() {
+    this.#restoreBaseline();
+    this.#reportMove();
+  }
+  /**
+   * Reports the selection as `reconcile` when it differs from the one last
+   * settled. The settled selection is replaced before dispatching, so a move a
+   * subscriber makes is measured against what it was told.
+   */
+  #reportMove() {
+    const selection = this.#selection();
+    if (sameSelection(selection, this.#settled)) return;
+    this.#settled = selection;
+    this.dispatch("reconcile", { detail: { rows: [...selection.keys()] } });
   }
   /**
-   * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
-   * (so it self-heals after a Turbo morph) and on any runtime change, so the ARIA
-   * never drifts from the selection logic, which reads `selectionValue` live.
+   * Re-renders `aria-multiselectable`, the rows and the fields when application
+   * code (or a Turbo morph) changes `selection` at runtime; a selection the new
+   * mode collapses is reported as `reconcile`.
    */
   selectionValueChanged() {
-    this.#syncSelectable();
-    this.#normalizeSelection();
+    this.#reconcile.schedule();
+  }
+  /** Rebuilds the submitted fields when the public name changes at runtime. */
+  nameValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Repoints the submitted fields when the owning form changes at runtime. */
+  formValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Seeds a fields container inserted after connect from the current selection. */
+  fieldsTargetConnected() {
+    this.#reconcile.schedule();
   }
   /** Re-establishes the baselines for a row added after connect. */
   rowTargetConnected() {
     this.#reconcile.schedule();
   }
+  /** Settles the selection again when a row leaves the grid or drops its target token. */
+  rowTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
   /** Re-establishes the tab stop when a cell joins the grid after connect. */
   cellTargetConnected() {
     this.#reconcile.schedule();
@@ -165,6 +250,8 @@ var DataGridController = class extends Controller {
    * A grid that declares `selection="none"` has no selectable rows, so the
    * attribute is removed rather than written: in ARIA its absence is what "not
    * selectable" looks like.
+   *
+   * @stimeoRenderRoot
    */
   #normalizeSelection() {
     const rows = this.rowTargets;
@@ -176,9 +263,9 @@ var DataGridController = class extends Controller {
     const first = rows.find((row) => row.getAttribute("aria-selected") === "true");
     for (const row of rows) {
       if (single) {
-        row.setAttribute("aria-selected", row === first ? "true" : "false");
+        setAttributeIfChanged(row, "aria-selected", row === first ? "true" : "false");
       } else if (row.getAttribute("aria-selected") !== "true") {
-        row.setAttribute("aria-selected", "false");
+        setAttributeIfChanged(row, "aria-selected", "false");
       }
     }
   }
@@ -186,10 +273,12 @@ var DataGridController = class extends Controller {
    * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
    * announce that more than one row can be selected; cleared for single/none so a
    * grid never carries a misleading attribute.
+   *
+   * @stimeoRenderRoot
    */
   #syncSelectable() {
     if (this.selectionValue === "multiple") {
-      this.element.setAttribute("aria-multiselectable", "true");
+      setAttributeIfChanged(this.element, "aria-multiselectable", "true");
     } else {
       this.element.removeAttribute("aria-multiselectable");
     }
@@ -288,7 +377,12 @@ var DataGridController = class extends Controller {
     if (control && host.contains(control)) return control;
     return isInteractiveHost(source) ? source : null;
   }
-  /** Performs a header's sort or a cell row's selection toggle on activation. */
+  /**
+   * Performs a header's sort or a cell row's selection toggle on activation.
+   *
+   * @stimeoRuntimeOnly `selection` decides whether this one activation toggles the row; the sort it
+   *   cycles does not depend on it.
+   */
   #activate(cell) {
     if (this.columnHeaderTargets.includes(cell)) {
       this.#cycleSort(cell);
@@ -306,17 +400,89 @@ var DataGridController = class extends Controller {
     }
     this.dispatch("sort", { detail: { column: header, direction } });
   }
-  /** Toggles a row's `aria-selected`, honoring single vs. multiple selection. */
+  /**
+   * Toggles a row's `aria-selected`, honoring single vs. multiple selection.
+   *
+   * @stimeoRuntimeOnly `selection` decides how this one toggle treats the other rows.
+   */
   #toggleRow(row) {
     const selected = row.getAttribute("aria-selected") === "true";
+    const pageWrote = this.#takePageRecords();
     if (this.selectionValue === "single") {
       for (const other of this.rowTargets) {
-        if (other !== row) other.setAttribute("aria-selected", "false");
+        if (other !== row) setAttributeIfChanged(other, "aria-selected", "false");
       }
     }
     row.setAttribute("aria-selected", selected ? "false" : "true");
-    const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
-    this.dispatch("selectionchange", { detail: { rows } });
+    this.#dropOwnRecords(pageWrote);
+    this.#settled = this.#selection();
+    this.#mirrorFields(true);
+    this.dispatch("selectionchange", { detail: { rows: [...this.#settled.keys()] } });
+  }
+  /** The selected rows in DOM order, each with the `data-value` it submits, if any. */
+  #selection() {
+    return new Map(
+      this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => [row, row.dataset.value])
+    );
+  }
+  /**
+   * Watches the rows' `aria-selected` and `data-value`. Every write the grid makes
+   * to them sits between a take and a drop of the observer's queue, so each record
+   * the callback receives is the page's, and only a record on one of the grid's own
+   * rows schedules a pass.
+   */
+  #observeRows() {
+    const observer = new MutationObserver((records) => {
+      if (this.#concernsRows(records)) this.#reconcile.schedule();
+    });
+    observer.observe(this.element, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+    this.#observer = observer;
+  }
+  /**
+   * Empties the observer's queue before the grid writes to the rows, and says
+   * whether the page had queued anything about them. Those records still owe a
+   * pass: a toggle in `multiple` mode rewrites only its own row, so it does not fold
+   * in what the page wrote to the others.
+   */
+  #takePageRecords() {
+    const records = this.#observer?.takeRecords() ?? [];
+    return records.length > 0 && this.#concernsRows(records);
+  }
+  /**
+   * Whether any record is about one of this grid's own rows. A widget nested in a
+   * cell writes the same attributes on its own elements, and those are no reason
+   * to reconcile the grid.
+   */
+  #concernsRows(records) {
+    const rows = new Set(this.rowTargets);
+    return records.some((record) => rows.has(record.target));
+  }
+  /**
+   * Drops the records the grid's own writes just queued, so the observer never
+   * takes them for the page's, then schedules the pass the page's records owe.
+   */
+  #dropOwnRecords(pageWrote) {
+    this.#observer?.takeRecords();
+    if (pageWrote) this.#reconcile.schedule();
+  }
+  /**
+   * Mirrors the selected rows' `data-value` into the optional fields container.
+   * A selected row without one submits nothing, so a grid whose rows carry no
+   * value submits an empty set rather than a row of blanks.
+   *
+   * @stimeoRenderRoot
+   */
+  #mirrorFields(notify) {
+    if (!this.hasFieldsTarget) return;
+    const values = this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => row.dataset.value).filter((value) => value !== void 0);
+    const options = { name: this.nameValue, form: this.formValue };
+    if (writeFields(this.fieldsTarget, values, options) && notify) {
+      commitField(this.fieldsTarget);
+    }
   }
   /**
    * Makes `cell` the single tabbable cell (roving) and optionally focuses it.

data/dist/controllers/date_range_picker_controller.js

@@ -114,6 +114,16 @@ function monthLabelFormatter(locale) {
   return intlFormatter(Intl.DateTimeFormat, locale, MONTH_LABEL_OPTIONS, "en");
 }
 
+// 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/locale.ts
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
@@ -219,6 +229,11 @@ function parseStringList(raw, fallback = []) {
   return parsed.filter((entry) => typeof entry === "string");
 }
 
+// src/utils/target_selector.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 // src/controllers/date_range_picker_controller.ts
 var GRID_SIZE = 42;
 var DateRangePickerController = class extends Controller {
@@ -233,7 +248,7 @@ var DateRangePickerController = class extends Controller {
     locale: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
-  static events = ["change", "monthchange"];
+  static events = ["change", "monthchange", "reconcile"];
   /** The month currently rendered, as `YYYY-MM`. */
   #viewMonth = "";
   /** The confirmed range endpoints (ISO), or "" when unset. */
@@ -247,6 +262,13 @@ var DateRangePickerController = class extends Controller {
   #focusedDate = /* @__PURE__ */ new Date();
   /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
+  /**
+   * How many times the confirmed range has moved — a commit or a narrowing — so
+   * a report still pending for a range a listener has since replaced can tell.
+   */
+  #rangeMoves = 0;
+  /** How many month transitions have started, so one a listener starts mid-paint keeps its focus. */
+  #transitions = 0;
   /** The declared unavailable dates, indexed for the per-cell paint lookup. */
   #disabledDates = /* @__PURE__ */ new Set();
   /** Rewinds an unfinished selection before Turbo snapshots the page. */
@@ -260,17 +282,22 @@ var DateRangePickerController = class extends Controller {
   #repaint = new MicrotaskCoalescer(() => {
     this.#render();
   });
-  /** Seeds and normalizes the range from optional hidden fields, then paints the grid. */
+  /**
+   * Seeds the range from optional hidden fields — ordered, and narrowed to the
+   * days that can be chosen — then paints the grid, which writes the range back
+   * to the fields silently.
+   */
   connect() {
     this.#repaint.activate();
     this.#beforeCache.activate();
     const authoredStart = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
     const authoredEnd = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
-    [this.#startDate, this.#endDate] = orderRange(authoredStart, authoredEnd);
+    [this.#startDate, this.#endDate] = this.#selectableRange(
+      ...orderRange(authoredStart, authoredEnd)
+    );
     this.#pendingStart = "";
     this.#previewDate = "";
     this.#announcedMonth = null;
-    this.#commitFields();
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
     this.#focusedDate = anchor;
     this.#viewMonth = toISOMonthString(anchor);
@@ -345,16 +372,11 @@ var DateRangePickerController = class extends Controller {
     if (!intersection) return;
     const { start, end } = intersection;
     if (!this.#isSelectable(start) || !this.#isSelectable(end)) return;
-    this.#startDate = start;
-    this.#endDate = end;
-    this.#pendingStart = "";
-    this.#previewDate = "";
+    const move = this.#setConfirmed(start, end);
     const endDate = parseISODateString(end);
     if (endDate) this.#focusedDate = endDate;
-    this.#commitFields();
-    this.#transitionTo(toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()), end);
-    this.#announce();
-    this.dispatch("change", { detail: { start, end } });
+    this.#transitionTo(toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()), end, true);
+    this.#reportConfirmed(move);
   }
   /** Grid keyboard navigation, selection (Enter/Space), and Escape-to-cancel. */
   onKeydown(event) {
@@ -413,7 +435,7 @@ var DateRangePickerController = class extends Controller {
   }
   /** Records a chosen date as either the pending start or the confirmed end. */
   #choose(date) {
-    if (!this.#pendingStart) {
+    if (!this.#pendingStart || !this.#isSelectable(this.#pendingStart)) {
       this.#pendingStart = date;
       this.#previewDate = date;
       const parsed = parseISODateString(date);
@@ -422,14 +444,32 @@ var DateRangePickerController = class extends Controller {
       return;
     }
     const [start, end] = date < this.#pendingStart ? [date, this.#pendingStart] : [this.#pendingStart, date];
+    const move = this.#setConfirmed(start, end);
+    this.#render(true);
+    this.#reportConfirmed(move);
+  }
+  /**
+   * Makes `start`–`end` the confirmed range, ending any selection in progress,
+   * ahead of the paint that shows it.
+   *
+   * @returns The move count the range is now at, which its `change` checks.
+   */
+  #setConfirmed(start, end) {
     this.#startDate = start;
     this.#endDate = end;
     this.#pendingStart = "";
     this.#previewDate = "";
-    this.#commitFields();
-    this.#render();
-    this.#announce();
-    this.dispatch("change", { detail: { start, end } });
+    this.#rangeMoves += 1;
+    return this.#rangeMoves;
+  }
+  /**
+   * Dispatches `change` for the range confirmed at `move`, once its paint has
+   * reported it through the fields. A listener of those reports that moved the
+   * range on has had the range it moved to reported instead.
+   */
+  #reportConfirmed(move) {
+    if (move !== this.#rangeMoves) return;
+    this.dispatch("change", { detail: { start: this.#startDate, end: this.#endDate } });
   }
   /** Moves roving focus to `date`, transitioning the month when needed. */
   #moveFocusTo(date) {
@@ -438,12 +478,21 @@ var DateRangePickerController = class extends Controller {
     if (this.#pendingStart && this.#isSelectable(iso)) this.#previewDate = iso;
     this.#transitionTo(toISOMonthString(date), iso);
   }
-  /** Renders `month`, then focuses the cell for `dateStr` (deferred if async). */
-  #transitionTo(month, dateStr) {
+  /**
+   * Renders `month`, then focuses the cell for `dateStr` (deferred if async).
+   * A listener of the paint's reports that started another move has placed
+   * focus itself, so this one leaves it there.
+   *
+   * @param confirmed - Whether the paint shows a range the user has just confirmed.
+   */
+  #transitionTo(month, dateStr, confirmed = false) {
     const isTransition = month !== this.#viewMonth;
     this.#focusTimer.clearAll();
     this.#viewMonth = month;
-    this.#render();
+    this.#transitions += 1;
+    const transition = this.#transitions;
+    this.#render(confirmed);
+    if (transition !== this.#transitions) return;
     const focusCell = () => {
       this.cellTargets.find((c) => c.getAttribute("data-date") === dateStr)?.focus();
     };
@@ -465,15 +514,25 @@ var DateRangePickerController = class extends Controller {
     this.#render();
   }
   /**
-   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   * Builds the six-week grid and binds range/roving/disabled state per cell,
+   * mirrors the confirmed range to the hidden fields, then reports what the
+   * paint moved.
+   *
+   * @param confirmed - Whether the paint shows a range the user has just
+   *   confirmed, which the status then announces and each moved field reports.
    *
    * @stimeoRenderRoot
    */
-  #render() {
+  #render(confirmed = false) {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
+    if (this.#pendingStart && !this.#isSelectable(this.#pendingStart)) {
+      this.#pendingStart = "";
+      this.#previewDate = "";
+    }
     if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
+    const narrowed = this.#narrowConfirmedRange();
     if (this.hasMonthLabelTarget) {
       const formatter = monthLabelFormatter(resolveLocale(this.element, this.localeValue));
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
@@ -513,11 +572,54 @@ var DateRangePickerController = class extends Controller {
       const fallback = cells.find((cell) => cell.getAttribute("data-outside") === "false") ?? cells[0];
       fallback?.setAttribute("tabindex", "0");
     }
+    const move = this.#rangeMoves;
+    const moved = this.#mirrorFields();
+    if (confirmed) {
+      this.#announce();
+      for (const [field, value] of moved) {
+        if (field.value === value) commitField(field);
+      }
+    }
     const previous = this.#announcedMonth;
     this.#announcedMonth = this.#viewMonth;
     if (previous !== null && previous !== this.#viewMonth) {
       this.dispatch("monthchange", { detail: { month: this.#viewMonth } });
     }
+    if (narrowed && move === this.#rangeMoves) {
+      this.dispatch("reconcile", { detail: { start: this.#startDate, end: this.#endDate } });
+    }
+  }
+  /**
+   * Narrows the confirmed range to days that can still be chosen. The paint
+   * mirrors it to the fields without reporting a commit.
+   *
+   * @returns Whether the range moved.
+   */
+  #narrowConfirmedRange() {
+    const [start, end] = this.#selectableRange(this.#startDate, this.#endDate);
+    if (start === this.#startDate && end === this.#endDate) return false;
+    this.#startDate = start;
+    this.#endDate = end;
+    this.#rangeMoves += 1;
+    return true;
+  }
+  /**
+   * The range `start`–`end` with each end moved inward to the nearest day that
+   * can be chosen, or two empty strings when none of its days can be. A lone
+   * endpoint is the one-day range it names, and stays lone.
+   */
+  #selectableRange(start, end) {
+    let from = parseISODateString(start || end);
+    let to = parseISODateString(end || start);
+    if (!from || !to) return [start, end];
+    while (from.getTime() <= to.getTime() && !this.#isSelectable(toISODateString(from))) {
+      from = addDays(from, 1);
+    }
+    while (to.getTime() >= from.getTime() && !this.#isSelectable(toISODateString(to))) {
+      to = addDays(to, -1);
+    }
+    if (from.getTime() > to.getTime()) return ["", ""];
+    return [start ? toISODateString(from) : "", end ? toISODateString(to) : ""];
   }
   /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
   #visualRange() {
@@ -527,10 +629,20 @@ var DateRangePickerController = class extends Controller {
     }
     return [this.#startDate, this.#endDate];
   }
-  /** Writes the confirmed range to the hidden fields. */
-  #commitFields() {
-    if (this.hasStartFieldTarget) this.startFieldTarget.value = this.#startDate;
-    if (this.hasEndFieldTarget) this.endFieldTarget.value = this.#endDate;
+  /**
+   * Writes the confirmed range to the hidden fields.
+   *
+   * @returns Each field whose value moved, with the value written to it.
+   */
+  #mirrorFields() {
+    const moved = [];
+    if (this.hasStartFieldTarget && writeField(this.startFieldTarget, this.#startDate)) {
+      moved.push([this.startFieldTarget, this.#startDate]);
+    }
+    if (this.hasEndFieldTarget && writeField(this.endFieldTarget, this.#endDate)) {
+      moved.push([this.endFieldTarget, this.#endDate]);
+    }
+    return moved;
   }
   /** Announces the confirmed range in the live status region. */
   #announce() {
@@ -590,7 +702,7 @@ var DateRangePickerController = class extends Controller {
   /** Resolves the cell element from an event target, or null. */
   #cellFrom(target) {
     return target?.closest(
-      "[data-stimeo--date-range-picker-target='cell']"
+      targetSelector(this.identifier, "cell")
     ) ?? null;
   }
 };