Submit Once

<%# Submit-once demo. A structured idle / busy target pair keeps the DOM the
    consumer authored while the button is disabled. The busy ↔ ready transition
    goes to the shared stimeo--announcer your app seats once, in its layout,
    where it is read without moving focus; aria-busy stays state the reader can
    query, not a notification. This catalog has no server, so demo.js fires
    Turbo's start / end lifecycle around a short fake round trip. %>
<% announce_start = t("components.submit_once.demo.announce_start") %>
<% announce_ready = t("components.submit_once.demo.announce_ready") %>
<% submit_label = t("components.submit_once.demo.submit") %>
<% busy_label = t("components.submit_once.demo.busy") %>
<div class="submit-once-demo">
  <form
    data-controller="stimeo--submit-once"
    data-stimeo--submit-once-announce-text-value="<%= announce_start %>"
    data-stimeo--submit-once-announce-ready-text-value="<%= announce_ready %>">
    <label class="submit-once-demo__field">
      <span><%= t("components.submit_once.demo.label") %></span>
      <input type="text" name="title" class="submit-once-demo__input">
    </label>
    <button type="submit" class="demo-trigger" data-stimeo--submit-once-target="submit">
      <span data-stimeo--submit-once-target="idle"><%= submit_label %></span>
      <span data-stimeo--submit-once-target="busy" hidden><%= busy_label %></span>
    </button>
  </form>
</div>

/*
 * Presentation-only styles for the submit-once demo.
 * The library disables the button, sets aria-busy, swaps the label, and marks the
 * form with data-submitting; this CSS only reflects that busy state.
 */

.submit-once-demo {
  max-width: 28rem;
}

.submit-once-demo form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.submit-once-demo__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.submit-once-demo__input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
}

/* Dim and show a progress cursor on the disabled, busy button. */
.submit-once-demo button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

// Submit-once demo (consumer-side JS).
//
// This catalog has no server, so the demo fires the same two events Turbo would
// around a submission. Every busy-state change belongs to the controller.
document.querySelectorAll(".submit-once-demo form").forEach((form) => {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    if (form.hasAttribute("data-submitting")) return;

    const submitter = event instanceof SubmitEvent ? event.submitter : null;
    form.dispatchEvent(
      new CustomEvent("turbo:submit-start", {
        bubbles: true,
        detail: { formSubmission: { formElement: form, submitter } },
      }),
    );
    window.setTimeout(() => {
      form.dispatchEvent(
        new CustomEvent("turbo:submit-end", { bubbles: true, detail: { success: true } }),
      );
    }, 1500);
  });
});