入力の永続化

<%# Persist demo: type into the fields and the draft is saved to localStorage
    (debounced). Reload or navigate away and back — the values are restored and the
    "draft restored" note appears (data-persist-restored). "Clear draft" calls the
    clear() action. The library owns the storage and the data hook; this demo only
    styles the restored note. %>
<div class="persist-demo">
  <form
    class="persist"
    data-controller="stimeo--persist"
    data-stimeo--persist-key-value="stimeo-demo-contact">
    <p class="persist__restored"><%= t("components.persist.demo.restored") %></p>
    <label class="persist__field">
      <span><%= t("components.persist.demo.name") %></span>
      <input type="text" name="name">
    </label>
    <label class="persist__field">
      <span><%= t("components.persist.demo.message") %></span>
      <textarea name="message" rows="3"></textarea>
    </label>
    <button type="button" class="demo-trigger" data-action="stimeo--persist#clear">
      <%= t("components.persist.demo.clear") %>
    </button>
  </form>
</div>

/*
 * Presentation-only styles for the persist demo.
 * The library toggles data-persist-restored on the form; this CSS reveals the
 * "draft restored" note while that hook is present.
 */

.persist-demo {
  max-width: 28rem;
}

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

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

.persist__field input,
.persist__field textarea {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
  resize: vertical;
}

/* The note appears only after a draft has been restored. */
.persist__restored {
  display: none;
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent);
}

.persist[data-persist-restored] .persist__restored {
  display: block;
}