メニューバー

<%# 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="menubar__top"
    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="menubar__item"
          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="menubar__top"
    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="menubar__item"
          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;
}

.menubar__top {
  padding: 0.4rem 0.75rem;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text);
}

.menubar__top:hover,
.menubar__top[aria-expanded="true"] {
  background: var(--surface-subtle);
}

.menubar__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  z-index: 10;
  min-width: 10rem;
  margin: 0;
  padding: 0.25rem;
  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;
}

.menubar__item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text);
}

.menubar__item:hover,
.menubar__item:focus {
  background: var(--vital-100);
  outline: none;
}