無操作検知

<%# Idle / session-timeout demo: the controller watches document-level activity and,
    after a short demo timeout, fires prompt -> idle; interacting again fires active.
    Real apps use a ~15-minute timeout; this demo shortens it (6s, warning at 3s) so the
    transitions are visible. The library ships no UI, so demo.js mirrors the events into
    the status badge below (whose labels are owned here for i18n). %>
<div
  class="idle-demo"
  data-controller="stimeo--idle"
  data-stimeo--idle-timeout-value="6000"
  data-stimeo--idle-prompt-before-value="3000">
  <p class="idle-demo__hint"><%= t("components.idle.demo.hint") %></p>
  <p
    class="idle-demo__status"
    role="status"
    aria-live="polite"
    data-idle-demo-status
    data-label-active="<%= t("components.idle.demo.active") %>"
    data-label-prompt="<%= t("components.idle.demo.prompt") %>"
    data-label-idle="<%= t("components.idle.demo.idle") %>"></p>
</div>

/*
 * Presentation-only styles for the idle demo. The library only fires events and toggles
 * data-idle; this CSS lays out the hint + status badge and colors the badge by the
 * demo-state mirror that demo.js writes (active / prompt / idle).
 */

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

.idle-demo__hint {
  margin: 0;
  color: var(--color-text-muted);
}

.idle-demo__status {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-weight: 600;
  text-align: center;
}

.idle-demo[data-demo-state="prompt"] .idle-demo__status {
  border-color: var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-500);
}

.idle-demo[data-demo-state="idle"] .idle-demo__status {
  border-color: var(--danger-500);
  background: var(--danger-50);
  color: var(--color-accent);
}

// Idle demo (consumer-side JS).
//
// A ~15-minute production timeout can't be shown in a catalog, so the markup uses a
// short timeout / prompt window. The controller fires prompt -> idle as the page sits
// untouched and active when you interact again; this JS only mirrors those events into
// a visible status badge (the library ships no UI of its own). The badge copy is read
// from data-label-* so it stays owned by the i18n'd ERB.
document.querySelectorAll(".idle-demo").forEach((root) => {
  const badge = root.querySelector("[data-idle-demo-status]");
  if (!badge) return;

  const labels = {
    active: badge.dataset.labelActive,
    prompt: badge.dataset.labelPrompt,
    idle: badge.dataset.labelIdle,
  };

  const show = (state) => {
    root.dataset.demoState = state;
    badge.textContent = labels[state];
  };

  show("active");
  root.addEventListener("stimeo--idle:prompt", () => show("prompt"));
  root.addEventListener("stimeo--idle:idle", () => show("idle"));
  root.addEventListener("stimeo--idle:active", () => show("active"));
});