Drawer

<%# Markup for the drawer (side panel) demo.
    A modal panel that slides in from the right edge. In addition to focus move/trap,
    Esc, background scroll lock, background inert, and returning focus to the trigger,
    the library syncs data-state (open/closed) and applies hidden once the transition
    finishes. Which edge it moves from and how (the slide) and the interpretation of
    placement are expressed by the consumer's CSS (demo.css) reading data-placement /
    data-state. %>
<div
  class="drawer"
  data-controller="stimeo--drawer"
  data-stimeo--drawer-placement-value="right">
  <button
    type="button"
    class="drawer__trigger"
    data-stimeo--drawer-target="trigger"
    data-action="click->stimeo--drawer#open">
    <%= t("components.drawer.demo.open_button") %>
  </button>

  <%# Overlay (backdrop). Click to close. data-state stays in sync with the panel. %>
  <div
    class="drawer__overlay"
    data-stimeo--drawer-target="overlay"
    data-action="click->stimeo--drawer#closeOnBackdrop"
    hidden>
    <%# The role="dialog" + aria-modal panel. Starts closed / hidden. %>
    <div
      class="drawer__panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="drawer-title"
      data-stimeo--drawer-target="panel"
      data-state="closed"
      hidden>
      <h3 id="drawer-title" class="drawer__title">
        <%= t("components.drawer.demo.title") %>
      </h3>
      <p><%= t("components.drawer.demo.body") %></p>
      <button type="button" class="drawer__close" data-action="click->stimeo--drawer#close">
        <%= t("components.drawer.demo.close") %>
      </button>
    </div>
  </div>
</div>

/*
 * Presentation-only styles for the drawer demo.
 * Stimeo UI itself ships behavior only (no CSS). Slide direction, distance, and the
 * animation curve are the consumer's responsibility, expressed by reading the
 * data-state (open/closed) and data-placement (left/right/top/bottom) the library syncs.
 */

.drawer__trigger,
.drawer__close {
  padding: 0.5rem 1rem;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border-interactive);
  border-radius: 0.375rem;
  background: var(--surface-card);
}

/* Overlay: a full-screen semi-transparent backdrop that fades in/out. */
.drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 50;
}

.drawer__overlay[data-state="closed"] {
  opacity: 0;
}

/* Keep it fully removed while hidden is set (honor the library's hidden control). */
.drawer__overlay[hidden] {
  display: none;
}

/* Panel: fixed to the right edge; data-state drives the slide transition. */
.drawer__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(20rem, 80vw);
  padding: 1.5rem;
  background: var(--surface-card);
  box-shadow: -8px 0 30px rgb(15 23 42 / 0.2);
  transition: transform 0.25s ease;
  overflow: auto;
}

.drawer__panel[hidden] {
  display: none;
}

/* placement=right: enters/exits from the right edge; parks off-screen when closed. */
.drawer__panel[data-placement="right"] {
  right: 0;
  transform: translateX(0);
}

.drawer__panel[data-placement="right"][data-state="closed"] {
  transform: translateX(100%);
}

.drawer__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.drawer__close {
  margin-top: 1.5rem;
}