編集中離脱ガード

<%# Dirty-form demo: edit either field and its form gets data-dirty (shown as a badge).
    When both forms are dirty, one Turbo visit dispatches both guard events and opens
    one native confirm using the first eligible form in live DOM order. "Save" calls
    markClean for that form; this catalog has no server, so it stands in for a successful
    save. The library owns data-dirty and navigation coordination; the demo only styles
    the visible state. %>
<div class="dirty-form-demo">
  <form
    class="dirty-form"
    data-controller="stimeo--dirty-form"
    data-stimeo--dirty-form-message-value="<%= t('components.dirty_form.demo.first_message') %>"
    aria-labelledby="dirty-form-first-title"
  >
    <h3 id="dirty-form-first-title" class="dirty-form__title">
      <%= t("components.dirty_form.demo.first_title") %>
    </h3>
    <label class="dirty-form__field">
      <span><%= t("components.dirty_form.demo.first_label") %></span>
      <input type="text" name="title" value="<%= t('components.dirty_form.demo.first_value') %>">
    </label>
    <div class="dirty-form__bar">
      <span class="dirty-form__badge"><%= t("components.dirty_form.demo.unsaved") %></span>
      <button type="button" class="demo-trigger" data-action="click->stimeo--dirty-form#markClean">
        <%= t("components.dirty_form.demo.save") %>
      </button>
    </div>
  </form>

  <form
    class="dirty-form"
    data-controller="stimeo--dirty-form"
    data-stimeo--dirty-form-message-value="<%= t('components.dirty_form.demo.second_message') %>"
    aria-labelledby="dirty-form-second-title"
  >
    <h3 id="dirty-form-second-title" class="dirty-form__title">
      <%= t("components.dirty_form.demo.second_title") %>
    </h3>
    <label class="dirty-form__field">
      <span><%= t("components.dirty_form.demo.second_label") %></span>
      <input type="text" name="summary" value="<%= t('components.dirty_form.demo.second_value') %>">
    </label>
    <div class="dirty-form__bar">
      <span class="dirty-form__badge"><%= t("components.dirty_form.demo.unsaved") %></span>
      <button type="button" class="demo-trigger" data-action="click->stimeo--dirty-form#markClean">
        <%= t("components.dirty_form.demo.save") %>
      </button>
    </div>
  </form>
</div>

/*
 * Presentation-only styles for the dirty-form demo.
 * The library toggles data-dirty on the form; this CSS reveals the "unsaved" badge
 * while that hook is present.
 */

.dirty-form-demo {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

.dirty-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dirty-form__title {
  margin: 0;
  font-size: 1rem;
}

.dirty-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dirty-form__field input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
}

.dirty-form__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The badge appears only while the form is dirty. */
.dirty-form__badge {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-700);
}

.dirty-form[data-dirty] .dirty-form__badge {
  display: inline-block;
}