Dropdown

<%# Markup for the dropdown demo.
    The single source used for both the live render and the copy-paste code.
    Connect to stimeo--dropdown via data-controller / data-*-target / data-action.
    The behavior is the library's; the look (classes) is the Playground's CSS. %>
<div class="dropdown" data-controller="stimeo--dropdown">
  <button
    type="button"
    class="demo-trigger"
    aria-expanded="false"
    data-stimeo--dropdown-target="trigger"
    data-action="click->stimeo--dropdown#toggle">
    <%= t("components.dropdown.demo.trigger") %>
  </button>

  <%# The toggled menu. Starts hidden (closed).
      Each placeholder link closes the menu and prevents navigation so the event
      readout stays visible. Real destination links can omit :prevent.
      (The links are inside the controller element, so an outside click won't close
      it — wire it explicitly.) %>
  <ul class="dropdown__menu" data-stimeo--dropdown-target="menu" hidden>
    <li><a class="demo-menuitem" href="#profile"
      data-action="click->stimeo--dropdown#close:prevent"><%= t(
      "components.dropdown.demo.profile"
    ) %></a></li>
    <li><a class="demo-menuitem" href="#settings"
      data-action="click->stimeo--dropdown#close:prevent"><%= t(
      "components.dropdown.demo.settings"
    ) %></a></li>
    <li><a class="demo-menuitem" href="#sign-out"
      data-action="click->stimeo--dropdown#close:prevent"><%= t(
      "components.dropdown.demo.sign_out"
    ) %></a></li>
  </ul>
</div>

<%# Readout: what the component just reported. Purely visual — the component
    already announces what a screen reader needs, so this line is aria-hidden to
    keep it from being read twice. The value is a code fragment (API identifiers
    and values), so only the label is translated. %>
<p class="demo-readout" aria-hidden="true">
  <span><%= t("catalog.readout.events") %></span>
  <span class="demo-readout__value" data-readout>—</span>
</p>

/*
 * Presentation-only styles for the dropdown demo.
 * Stimeo UI itself ships behavior only (no CSS), so styling that makes the demo
 * readable lives here. When adding a new component, create its
 * demos/<name>/demo.css the same way.
 */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  left: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  min-width: 12rem;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.dropdown__menu li {
  margin: 0;
}

// Every move of the open state is reported, with a `reason` saying what drove it
// — a trigger, Escape, a click outside, or a call from your own code. A real app
// subscribes to mirror the state elsewhere or to send an analytics event; this
// demo writes the event name and its reason into the readout so both are visible
// while you interact. `reason: "api"` is the one to watch for: a close you asked
// for comes back to your own listener.
// The page chrome uses some of these controllers too (the nav, the tab strip),
// so everything below is scoped to the demo itself.
const demoStage = document.querySelector(".demo-stage") ?? document;
const stateReadout = demoStage.querySelector("[data-readout]");
const stateRoot = demoStage.querySelector("[data-controller~='stimeo--dropdown']");

for (const name of ["open", "close"]) {
  stateRoot?.addEventListener(`stimeo--dropdown:${name}`, (event) => {
    const reason = event.detail?.reason;
    if (stateReadout) {
      stateReadout.textContent = reason
        ? `stimeo--dropdown:${name} · reason: ${reason}`
        : `stimeo--dropdown:${name}`;
    }
  });
}