Transition

<%# Transition demo: the panel is the controller element; enter/leave class values point
    at the demo.css classes that define the timing and start/end states. The toggle button
    lives outside the (hideable) panel, so it invokes the controller's toggle action through
    the playground's exposed Stimulus app (window.Stimulus) in demo.js. The library only
    stages the classes and reflects data-transition-state / hidden; demo.css owns the look. %>
<div class="transition-demo">
  <button
    type="button"
    class="demo-trigger"
    data-transition-demo-toggle
    aria-expanded="false"
    aria-controls="transition-demo-panel">
    <%= t("components.transition.demo.toggle") %>
  </button>
  <div
    id="transition-demo-panel"
    class="transition-demo__panel"
    data-controller="stimeo--transition"
    data-stimeo--transition-enter-value="te-enter"
    data-stimeo--transition-enter-from-value="te-from"
    data-stimeo--transition-enter-to-value="te-to"
    data-stimeo--transition-leave-value="te-leave"
    data-stimeo--transition-leave-from-value="te-to"
    data-stimeo--transition-leave-to-value="te-from"
    hidden>
    <%= t("components.transition.demo.panel") %>
  </div>
</div>

/*
 * Presentation-only styles for the transition demo. The library stages the te-* classes
 * (named by the controller's enter/leave values) and toggles hidden; these classes define
 * the timing and the start/end states. After a transition completes the controller strips
 * the stage classes, so the panel rests at the te-to (visible) state by default.
 */

.transition-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.transition-demo__panel {
  max-width: 22rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
}

/* Stage classes referenced by the controller's enter/leave value attributes. */
.te-enter {
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.te-leave {
  transition:
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}

.te-from {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.te-to {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .te-enter,
  .te-leave {
    transition: none;
  }
}

// Transition demo (consumer-side JS).
//
// The toggle button sits outside the hideable panel, so a plain data-action can't reach
// the panel's controller. The playground exposes its Stimulus application as
// window.Stimulus, so we fetch the controller instance and call its toggle() action — and
// mirror the open state onto aria-expanded from the controller's entered/left events.
document.querySelectorAll(".transition-demo").forEach((root) => {
  const panel = root.querySelector('[data-controller~="stimeo--transition"]');
  const button = root.querySelector("[data-transition-demo-toggle]");
  if (!panel || !button) return;
  // Idempotent: Turbo can re-run this inline module on navigation; wire each root once so a
  // single click does not toggle twice (which flashes the panel open then shut). 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;

  button.addEventListener("click", () => {
    window.Stimulus?.getControllerForElementAndIdentifier(panel, "stimeo--transition")?.toggle();
  });

  panel.addEventListener("stimeo--transition:entered", () => {
    button.setAttribute("aria-expanded", "true");
  });
  panel.addEventListener("stimeo--transition:left", () => {
    button.setAttribute("aria-expanded", "false");
  });
});