無操作検知

<%# 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 two notices are declared regions: the controller owns
    hidden on them and shows each only while its own phase holds, so both are authored
    hidden and no consumer JS is needed. Status semantics are this markup's to give. %>
<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__notice idle-demo__notice--prompt"
    role="status"
    data-stimeo--idle-target="prompt"
    hidden><%= t("components.idle.demo.prompt") %></p>
  <p
    class="idle-demo__notice idle-demo__notice--idle"
    role="status"
    data-stimeo--idle-target="idle"
    hidden><%= t("components.idle.demo.idle") %></p>
</div>

/*
 * Presentation-only styles for the idle demo. The library owns visibility on the two
 * notices and toggles data-prompt / data-idle on the root; this CSS lays out the hint
 * plus the notices and tints each one for the phase it belongs to.
 */

.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__notice {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-weight: 600;
  text-align: center;
}

.idle-demo__notice--prompt {
  border-color: var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
}

.idle-demo__notice--idle {
  border-color: var(--danger-500);
  background: var(--danger-50);
  color: var(--danger-700);
}