Dropdown menu

A <details data-menu> is a dropdown: the <summary> is the trigger and the <menu> inside is the list. It closes on Escape, on a click outside, and after any item is chosen.

Basic

<details data-menu>
  <summary>Build</summary>
  <menu>
    <li><button data-toast="Rebuilding the site">Rebuild</button></li>
    <li><button data-toast="Log exported">Export the log</button></li>
    <li><hr></li>
    <li><button data-toast="Build stopped" data-toast-tone="stop">Stop the build</button></li>
  </menu>
</details>

An <hr> in its own <li> divides the groups.

Notes

• s72.js sets role="menu" and role="menuitem", gives each item the ghost variant, and closes the menu after a click.
• Escape closes any open menu and puts focus back on its summary.
• The panel uses the float tokens --s72-float-edge and --s72-float-shadow, so it matches dialogs and popovers.