stimeo-ui 0.12.0 → 0.13.0

package/dist/index.js

@@ -1886,6 +1886,15 @@ function parseISOMonthString(monthStr) {
 function toISOMonthString(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
+function monthLabelFormatter(locale) {
+  const options = { month: "long", year: "numeric" };
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new Intl.DateTimeFormat("en", options);
+  }
+}
 
 // src/controllers/calendar_controller.ts
 var OWNED_DISABLED = "data-stimeo--calendar-owns-disabled";
@@ -2070,8 +2079,7 @@ var CalendarController = class extends Controller {
     const month = monthStart.getMonth() + 1;
     if (this.hasLabelTarget) {
       const lang = document.documentElement.lang || "en";
-      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
-      this.labelTarget.textContent = formatter.format(monthStart);
+      this.labelTarget.textContent = monthLabelFormatter(lang).format(monthStart);
     }
     const days = this.#calculateGridDays(year, month);
     const dayElements = this.dayTargets;
@@ -2323,7 +2331,7 @@ var CarouselController = class extends Controller {
   #handledEvents = /* @__PURE__ */ new WeakSet();
   /**
    * Whether `connect()` has run. Scheduling is already inert outside that window
-   * ({@link MicrotaskCoalescer}), so this gates the Value callbacks Stimulus
+   * (`MicrotaskCoalescer`), so this gates the Value callbacks Stimulus
    * delivers ahead of `connect()`.
    */
   #connected = false;
@@ -4383,7 +4391,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
    * re-deriving from the declarative `open` Value (which would slam a user-opened
    * palette shut). The `open` Value only seeds the initial state of a genuinely
    * fresh render. We normalize to a clean closed baseline first so {@link open}
-   * runs its full setup — the {@link FocusTrap} is a fresh instance after a
+   * runs its full setup — the `FocusTrap` is a fresh instance after a
    * reconnect and must be re-activated.
    */
   connect() {
@@ -4488,7 +4496,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
   }
   /**
    * Combobox navigation keys (arrows / Home / End / Enter), bound to the input.
-   * `Tab` (focus trap) and `Escape` (close) are owned by the {@link FocusTrap} at
+   * `Tab` (focus trap) and `Escape` (close) are owned by the shared `FocusTrap` at
    * the document level, so they work no matter which element inside the dialog has
    * focus — not only the input.
    */
@@ -6566,7 +6574,7 @@ var DateRangePickerController = class extends Controller {
     if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
       const lang = document.documentElement.lang || "en";
-      const formatter = monthFormatter(lang);
+      const formatter = monthLabelFormatter(lang);
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();
@@ -6721,15 +6729,6 @@ function normalizeISO(value) {
 function orderRange(start, end) {
   return start && end && end < start ? [end, start] : [start, end];
 }
-function monthFormatter(locale) {
-  const options = { month: "long", year: "numeric" };
-  try {
-    return new Intl.DateTimeFormat(locale, options);
-  } catch (error) {
-    if (!(error instanceof RangeError)) throw error;
-    return new Intl.DateTimeFormat("en", options);
-  }
-}
 function computePreset(name) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toISODateString(today);
@@ -7411,7 +7410,7 @@ var DrawerController = class extends Controller {
    * rather than being re-derived from the declarative `open` Value (which would
    * close a user-opened drawer). The `open` Value only seeds a genuinely fresh
    * render. We normalize to a clean closed baseline first so {@link open} runs its
-   * full reveal + trap activation — the {@link FocusTrap} is inactive after a
+   * full reveal + trap activation — the `FocusTrap` is inactive after a
    * disconnect and must be re-activated.
    */
   connect() {
@@ -7544,7 +7543,7 @@ var DrawerController = class extends Controller {
    * Runs once the close transition has finished: applies `hidden` to the panel
    * and overlay, then reverts the modal side effects (scroll lock, background
    * `inert`, keydown listener) and restores focus to the opener. Deferring the
-   * {@link FocusTrap} teardown to here — rather than at {@link close} time — keeps
+   * `FocusTrap` teardown to here — rather than at {@link close} time — keeps
    * the background unreachable and focus trapped for the whole exit animation.
    */
   #applyHidden(panel) {
@@ -14221,32 +14220,58 @@ var NumberInputController = class _NumberInputController extends Controller {
     this.#ariaValueMax.returnAll();
   }
 };
-var TOGGLED_MARKER = "data-optimistic-toggled";
+var HIDDEN_MARKER = "data-optimistic-toggled";
+var BUSY_MARKER = "data-optimistic-busy";
+var AUTHORED_ABSENT = "absent";
+var AUTHORED_VALUE = "value:";
+var SYNTHETIC_SUBMISSION = {};
+function submissionOf(event) {
+  const detail = event.detail;
+  return detail?.formSubmission ?? SYNTHETIC_SUBMISSION;
+}
 var OptimisticController = class extends Controller {
   static targets = ["show", "hide"];
   static events = ["commit", "rollback"];
+  /** The submission that owns the applied optimistic state, if any. */
+  #pending = null;
+  #gate = new DetachGate();
+  /** True between `connect()` and `disconnect()`, so a repeat connect rewinds nothing. */
+  #connected = false;
   connect() {
-    if (this.element.hasAttribute("data-optimistic")) this.#revert();
+    const restored = !this.#connected && !this.#gate.pending;
+    this.#gate.cancel();
+    this.#connected = true;
+    if (restored && this.element.hasAttribute("data-optimistic")) this.#revert();
     this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
     this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
   }
   disconnect() {
+    this.#connected = false;
     this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
     this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#gate.disconnected(this, () => {
+      this.#pending = null;
+    });
   }
-  #onSubmitStart = () => {
+  #onSubmitStart = (event) => {
+    this.#pending = submissionOf(event);
+    if (this.element instanceof HTMLFormElement && !this.element.hasAttribute(BUSY_MARKER)) {
+      this.element.setAttribute(BUSY_MARKER, AUTHORED_ABSENT);
+    }
+    this.#write(this.element, "aria-busy", "true", BUSY_MARKER);
     this.element.setAttribute("data-optimistic", "true");
-    this.element.setAttribute("aria-busy", "true");
-    for (const target of this.showTargets) this.#toggleHidden(target, false);
-    for (const target of this.hideTargets) this.#toggleHidden(target, true);
+    for (const target of this.showTargets) this.#setHidden(target, false);
+    for (const target of this.hideTargets) this.#setHidden(target, true);
   };
   #onSubmitEnd = (event) => {
+    if (submissionOf(event) !== this.#pending) return;
+    this.#pending = null;
     const success = event.detail?.success === true;
-    this.element.removeAttribute("aria-busy");
     if (success) {
       this.element.removeAttribute("data-optimistic");
+      this.#restore(this.element, "aria-busy", BUSY_MARKER, "true");
       for (const target of [...this.showTargets, ...this.hideTargets]) {
-        target.removeAttribute(TOGGLED_MARKER);
+        target.removeAttribute(HIDDEN_MARKER);
       }
       this.dispatch("commit");
     } else {
@@ -14254,21 +14279,59 @@ var OptimisticController = class extends Controller {
       this.dispatch("rollback");
     }
   };
-  /** Sets `hidden` only when it actually changes, marker-tracking the mutation. */
-  #toggleHidden(target, hidden) {
-    if (target.hidden === hidden) return;
-    target.hidden = hidden;
-    target.setAttribute(TOGGLED_MARKER, "true");
+  /** Hides or reveals a target, recording the authored `hidden` on first write. */
+  #setHidden(target, hidden) {
+    if (target.hasAttribute("hidden") === hidden) return;
+    this.#write(target, "hidden", hidden ? "" : null, HIDDEN_MARKER);
+  }
+  /** Writes an attribute, recording what it displaced under `marker` once. */
+  #write(element, attribute, value, marker) {
+    if (!element.hasAttribute(marker)) {
+      const authored = element.getAttribute(attribute);
+      element.setAttribute(
+        marker,
+        authored === null ? AUTHORED_ABSENT : `${AUTHORED_VALUE}${authored}`
+      );
+    }
+    if (value === null) element.removeAttribute(attribute);
+    else element.setAttribute(attribute, value);
   }
-  /** Reverts exactly the mutations this controller made (marker-owned only). */
+  /**
+   * Puts back the value `marker` recorded and drops the record.
+   *
+   * `written` is what this controller last put in the attribute. Anything else
+   * there now belongs to whoever wrote it — Turbo owns `aria-busy` on a form and
+   * clears it before the terminal arrives, and a consumer may have moved a face
+   * mid-flight — so the record is dropped without touching the attribute. A
+   * marker this build did not write names no authored value, so the attribute
+   * goes back to being absent.
+   */
+  #restore(element, attribute, marker, written) {
+    const recorded = element.getAttribute(marker);
+    if (recorded === null) return;
+    element.removeAttribute(marker);
+    if (element.getAttribute(attribute) !== written) return;
+    if (recorded.startsWith(AUTHORED_VALUE)) {
+      element.setAttribute(attribute, recorded.slice(AUTHORED_VALUE.length));
+      return;
+    }
+    element.removeAttribute(attribute);
+  }
+  /**
+   * Puts back exactly the markup this controller displaced (record-owned only).
+   *
+   * A face can be registered on both sides, and the hide pass runs last, so what
+   * this controller wrote there is `hidden` — matching it against the reveal's
+   * absent value instead would read as someone else's write and leave the face
+   * hidden. Each target is therefore restored once, against the write it last
+   * received.
+   */
   #revert() {
     this.element.removeAttribute("data-optimistic");
-    this.element.removeAttribute("aria-busy");
-    for (const target of [...this.showTargets, ...this.hideTargets]) {
-      if (target.hasAttribute(TOGGLED_MARKER)) {
-        target.hidden = !target.hidden;
-        target.removeAttribute(TOGGLED_MARKER);
-      }
+    this.#restore(this.element, "aria-busy", BUSY_MARKER, "true");
+    const hidden = new Set(this.hideTargets);
+    for (const target of /* @__PURE__ */ new Set([...this.showTargets, ...this.hideTargets])) {
+      this.#restore(target, "hidden", HIDDEN_MARKER, hidden.has(target) ? "" : null);
     }
   }
 };
@@ -23635,7 +23698,7 @@ var ToastController = class extends Controller {
   static events = ["dismiss", "show"];
   /**
    * Registry for every auto-dismiss and transition-finalize timer the controller
-   * schedules. {@link SafeTimeout} owns *registration and teardown only*; the
+   * schedules. `SafeTimeout` owns *registration and teardown only*; the
    * pause/resume remaining-time accounting stays in `#activeTimeouts` so the
    * per-widget WCAG 2.2.1 semantics are not flattened into the helper.
    */