dropdown.html

<!-- HEADLESSUI DROPDOWN THOUGHT EXPERIMENT FOR A JS-ONLY CORE LIB -->

<div data-headlessui-dropdown>
  <button class="..." type="button" data-headlessui-dropdown-toggle>
    Dropdown button
  </button>
  <ul data-headlessui-dropdown-menu>
    <li><a class="..." href="#">Action</a></li>
    <li><a class="..." href="#">Another action</a></li>
    <li><a class="..." href="#">Something else here</a></li>
  </ul>
</div>

<!-- 
aria-expanded="false" and other a11y keyboard stuff is set programatically via the headless core js lib 
boolean data attributes should be fine https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
-->