Unsaved-Changes Guard

<%# Dirty-form demo: edit the field and the form gets data-dirty (shown as a badge).
    While dirty, leaving is guarded (beforeunload + Turbo turbo:before-visit → a native
    confirm). "Save" calls the markClean action to clear the dirty state (this catalog
    has no server, so it stands in for a successful save). The library owns the
    data-dirty hook and the guards; this demo only styles the badge. %>
<div class="dirty-form-demo">
  <form class="dirty-form" data-controller="stimeo--dirty-form">
    <label class="dirty-form__field">
      <span><%= t("components.dirty_form.demo.label") %></span>
      <input type="text" name="title" value="<%= t('components.dirty_form.demo.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="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 {
  max-width: 28rem;
}

.dirty-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.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);
}

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