ナビゲーションメニュー

<%# Markup for the navigation-menu demo.
    Two arrangements are shown.

    1. Click-only (the default): a global nav where each top item opens/closes a
       sub-panel (a set of links). The contents are links and don't use role="menu"
       (APG Disclosure navigation). The library handles syncing aria-expanded,
       single-open behavior, closing on Escape / outside click / focus leaving, and
       moving between top items with the left/right keys.
    2. Hover (opt-in): openOnHover plus a hoverArea wrapper — the APG "Disclosure
       Navigation with Top-Level Links" arrangement, where each <li> holds a real
       link, a small disclosure button, and the panel. Hovering anywhere over the
       <li> opens that item's panel; every keyboard path stays identical.

    Panel placement and styling are the consumer's CSS (demo.css). %>
<p class="nav-menu__caption"><%= t("components.navigation_menu.demo.click_caption") %></p>
<nav class="nav-menu" data-controller="stimeo--navigation-menu"
     aria-label="<%= t("components.navigation_menu.demo.label") %>">
  <ul class="nav-menu__list">
    <li class="nav-menu__item">
      <button
        type="button"
        class="demo-baritem"
        aria-expanded="false"
        aria-controls="nav-menu-products"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <%= t("components.navigation_menu.demo.products.label") %>
      </button>
      <div id="nav-menu-products" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a class="demo-menuitem" href="#analytics"><%= t(
          "components.navigation_menu.demo.products.links.analytics"
        ) %></a>
        <a class="demo-menuitem" href="#automation"><%= t(
          "components.navigation_menu.demo.products.links.automation"
        ) %></a>
        <a class="demo-menuitem" href="#reports"><%= t(
          "components.navigation_menu.demo.products.links.reports"
        ) %></a>
      </div>
    </li>
    <li class="nav-menu__item">
      <button
        type="button"
        class="demo-baritem"
        aria-expanded="false"
        aria-controls="nav-menu-company"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <%= t("components.navigation_menu.demo.company.label") %>
      </button>
      <div id="nav-menu-company" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a class="demo-menuitem" href="#about"><%= t(
          "components.navigation_menu.demo.company.links.about"
        ) %></a>
        <a class="demo-menuitem" href="#careers"><%= t(
          "components.navigation_menu.demo.company.links.careers"
        ) %></a>
      </div>
    </li>
  </ul>
</nav>

<p class="nav-menu__caption"><%= t("components.navigation_menu.demo.hover_caption") %></p>
<%# openOnHover is opt-in; hoverArea widens the hover region to the whole <li>, so
    hovering the top-level link (not just the disclosure button) opens the panel.
    The button keeps its own accessible name so keyboard and SR users can tell the
    link and its disclosure apart. %>
<nav class="nav-menu" data-controller="stimeo--navigation-menu"
     data-stimeo--navigation-menu-open-on-hover-value="true"
     aria-label="<%= t("components.navigation_menu.demo.hover.label") %>">
  <ul class="nav-menu__list">
    <li class="nav-menu__item" data-stimeo--navigation-menu-target="hoverArea">
      <a class="demo-baritem nav-menu__link" href="#solutions">
        <%= t("components.navigation_menu.demo.hover.solutions.label") %>
      </a>
      <button
        type="button"
        class="demo-baritem nav-menu__disclosure"
        aria-expanded="false"
        aria-controls="nav-menu-solutions"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <span aria-hidden="true">▾</span>
        <span class="visually-hidden"><%= t(
          "components.navigation_menu.demo.hover.solutions.toggle"
        ) %></span>
      </button>
      <div id="nav-menu-solutions" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a class="demo-menuitem" href="#retail"><%= t(
          "components.navigation_menu.demo.hover.solutions.links.retail"
        ) %></a>
        <a class="demo-menuitem" href="#finance"><%= t(
          "components.navigation_menu.demo.hover.solutions.links.finance"
        ) %></a>
      </div>
    </li>
    <li class="nav-menu__item" data-stimeo--navigation-menu-target="hoverArea">
      <a class="demo-baritem nav-menu__link" href="#resources">
        <%= t("components.navigation_menu.demo.hover.resources.label") %>
      </a>
      <button
        type="button"
        class="demo-baritem nav-menu__disclosure"
        aria-expanded="false"
        aria-controls="nav-menu-resources"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <span aria-hidden="true">▾</span>
        <span class="visually-hidden"><%= t(
          "components.navigation_menu.demo.hover.resources.toggle"
        ) %></span>
      </button>
      <div id="nav-menu-resources" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a class="demo-menuitem" href="#guides"><%= t(
          "components.navigation_menu.demo.hover.resources.links.guides"
        ) %></a>
        <a class="demo-menuitem" href="#blog"><%= t(
          "components.navigation_menu.demo.hover.resources.links.blog"
        ) %></a>
      </div>
    </li>
  </ul>
</nav>

/*
 * Presentation-only styles for the navigation-menu demo.
 * The library toggles the panel's hidden and the top items' aria-expanded. Panel
 * placement (directly below the trigger) is static and the consumer's CSS
 * responsibility; use stimeo-ui/positioning for dynamic flip.
 */

/* Caption naming each arrangement (click-only, then the opt-in hover one). */
.nav-menu__caption {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Space the second arrangement away from the first nav's panels. */
.nav-menu + .nav-menu__caption {
  margin-top: 1.75rem;
}

.nav-menu__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu__item {
  position: relative;
}

/* Top-level-links arrangement: a real link next to a small disclosure button,
   both inside the <li> that acts as the hoverArea. */
/* Trimmed on the end side so the link and its disclosure button read as one pair. */
.nav-menu__link {
  padding-inline-end: 0.25rem;
}

/* Narrower than a labelled bar item — it carries only the chevron — but the same
   block padding, so it lines up with the link it belongs to. */
.nav-menu__disclosure {
  padding-inline: 0.5rem;
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.5rem;
  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);
}

.nav-menu__panel[hidden] {
  display: none;
}