Highlight on Insert

<%# Highlight-on-insert demo: the list runs in container (observe) mode, so the
    controller highlights each <li> added to it. This catalog has no Turbo Stream
    backend, so demo.js appends rows on click — exactly the mutation a Turbo Stream
    append would make. The library only toggles data-highlight; demo.css owns the
    flash/fade transition keyed on that hook. %>
<div class="highlight-demo">
  <button
    type="button"
    class="demo-trigger"
    data-highlight-add
    data-item-label="<%= t("components.highlight.demo.item") %>">
    <%= t("components.highlight.demo.add") %>
  </button>
  <ul
    class="highlight-demo__list"
    data-controller="stimeo--highlight"
    data-stimeo--highlight-observe-value="true">
    <li><%= t("components.highlight.demo.item") %> 1</li>
    <li><%= t("components.highlight.demo.item") %> 2</li>
  </ul>
  <p class="highlight-demo__note"><%= t("components.highlight.demo.note") %></p>
</div>

/*
 * Presentation-only styles for the highlight demo. The library only toggles
 * data-highlight on each inserted row; this CSS owns the flash/fade: rows transition
 * their background back to normal, and a highlighted row briefly shows the accent.
 * Under reduced motion the controller never sets the hook, so no transition runs.
 */

.highlight-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
}

.highlight-demo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.highlight-demo__list li {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface-card);
  transition: background-color 1s ease-out;
}

.highlight-demo__list li[data-highlight] {
  background: var(--amber-50);
  transition: none;
}

.highlight-demo__note {
  margin: 0;
  color: var(--color-text-muted);
}

// Highlight-on-insert demo (consumer-side JS).
//
// The list runs in container (observe) mode, so the controller highlights each <li>
// it gains on its own. This catalog has no Turbo Stream backend, so the button appends
// rows — the same mutation a Turbo Stream append makes — and the controller reacts.
document.querySelectorAll(".highlight-demo").forEach((root) => {
  const list = root.querySelector(".highlight-demo__list");
  const label = root.querySelector("[data-highlight-add]")?.dataset.itemLabel;
  if (!list) return;
  // Idempotent: Turbo can re-run this inline module on navigation; wire each root once
  // so a click never appends two rows. The marker is a property, not an attribute:
  // Turbo copies attributes into its page snapshot, so an attribute one comes back set
  // on a restored page whose elements carry no listeners.
  if (root.demoWired) return;
  root.demoWired = true;

  let count = list.children.length;
  root.querySelector("[data-highlight-add]")?.addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = `${label ?? "Item"} ${(count += 1)}`;
    list.appendChild(li);
  });
});