メニューバー

<%# Markup for the menubar demo.
    Top-level items directly under role="menubar" each open a role="menu". The library
    handles roving between top items (left/right keys), opening a menu with
    ArrowDown/Enter, up/down movement and typeahead within a menu, moving sideways to
    an adjacent menu, returning on Escape, and closing on outside click / Tab. Top
    items ↔ menus are linked via aria-controls / id. The look is in demo.css. %>
<div
  class="menubar"
  data-controller="stimeo--menubar"
  role="menubar"
  aria-label="<%= t("components.menubar.demo.label") %>"
>
  <button
    type="button"
    class="demo-baritem"
    role="menuitem"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="menubar-file"
    data-stimeo--menubar-target="top"
    data-action="click->stimeo--menubar#toggle keydown->stimeo--menubar#onTopKeydown">
    <%= t("components.menubar.demo.menus.file.label") %>
  </button>
  <ul
    id="menubar-file"
    class="menubar__menu"
    role="menu"
    aria-label="<%= t("components.menubar.demo.menus.file.label") %>"
    hidden
    data-stimeo--menubar-target="menu"
  >
    <% %w[new open save].each do |action| %>
      <li role="none">
        <button
          type="button"
          class="demo-menuitem"
          role="menuitem"
          tabindex="-1"
          data-stimeo--menubar-target="item"
          data-action="click->stimeo--menubar#activate keydown->stimeo--menubar#onItemKeydown">
          <%= t("components.menubar.demo.menus.file.items.#{action}") %>
        </button>
      </li>
    <% end %>
  </ul>

  <button
    type="button"
    class="demo-baritem"
    role="menuitem"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="menubar-edit"
    data-stimeo--menubar-target="top"
    data-action="click->stimeo--menubar#toggle keydown->stimeo--menubar#onTopKeydown">
    <%= t("components.menubar.demo.menus.edit.label") %>
  </button>
  <ul
    id="menubar-edit"
    class="menubar__menu"
    role="menu"
    aria-label="<%= t("components.menubar.demo.menus.edit.label") %>"
    hidden
    data-stimeo--menubar-target="menu"
  >
    <% %w[cut copy paste].each do |action| %>
      <li role="none">
        <button
          type="button"
          class="demo-menuitem"
          role="menuitem"
          tabindex="-1"
          data-stimeo--menubar-target="item"
          data-action="click->stimeo--menubar#activate keydown->stimeo--menubar#onItemKeydown">
          <%= t("components.menubar.demo.menus.edit.items.#{action}") %>
        </button>
      </li>
    <% end %>
  </ul>
</div>

/*
 * Presentation-only styles for the menubar demo.
 * The library expresses open/close via the menu's hidden, the active top item via
 * aria-expanded, and the active in-menu item via focus. Menu placement (directly
 * below the top item) is static and the consumer's CSS responsibility; use
 * stimeo-ui/positioning for dynamic flip.
 */

.menubar {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  background: var(--surface-subtle);
  /* Positioning context for the menus' absolute placement. */
  position: relative;
  width: fit-content;
}

/*
 * The open menu is the same floating surface as the navigation-menu demo's panel
 * (same width, padding, border, radius and shadow), so the two menu components
 * read as one visual language in the catalog. Only the horizontal anchor differs:
 * no `left` is set, which leaves each menu at its static position under its own
 * top item instead of the bar's left edge.
 */
.menubar__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  z-index: 10;
  min-width: 12rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
}

.menubar__menu[hidden] {
  display: none;
}