Menu Component: active class does not work (first method)

[steevepay]

The first method to show the menu requires only the class active, however, I couldn't make it work:

<button>
  <span>Button</span>
  <menu class="no-wrap active">
    <a>Item</a>
    <a>Item</a>
    <a>Item</a>
  </menu>
</button>

When I click on an item and remove the class active, the menu is still visible because :not([data-ui]):focus-within > menu CSS definition is taking over. Screenshot:

The alternative solution I found is to add a dummy data-ui, and it will only use the active class to show/hide the menu:

<button data-ui="btn">
  <span>Button</span>
  <menu class="no-wrap active">
    <a>Item</a>
    <a>Item</a>
    <a>Item</a>
  </menu>
</button>