ドロップダウン

<%# 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="dropdown__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 link uses click->stimeo--dropdown#close to close the menu on selection.
      (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 href="#profile" data-action="click->stimeo--dropdown#close"><%= t(
      "components.dropdown.demo.profile"
    ) %></a></li>
    <li><a href="#settings" data-action="click->stimeo--dropdown#close"><%= t(
      "components.dropdown.demo.settings"
    ) %></a></li>
    <li><a href="#sign-out" data-action="click->stimeo--dropdown#close"><%= t(
      "components.dropdown.demo.sign_out"
    ) %></a></li>
  </ul>
</div>

/*
 * 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__trigger {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border-interactive);
  border-radius: 0.375rem;
  background: var(--surface-card);
}

/* Accent the trigger's border while open (detected via aria-expanded). */
.dropdown__trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.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;
}

.dropdown__menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0.25rem;
}

.dropdown__menu a:hover {
  background: var(--surface-subtle);
}