Popover Menu

<popover-menu data-bascik-prop-label="Account">
  <a href="/example-components">All example components</a>
  <a href="/example-components/tab-group">Tab group</a>
</popover-menu>

<!-- @bascik
A dropdown menu with no JavaScript, using the HTML popover attribute. Escape and clicks outside close it. Where CSS anchor positioning is supported the menu opens below its button; elsewhere it opens centered.
@prop label - Text of the button that opens the menu.
@slot default - Menu content, usually links or buttons.
-->
<style>
  .trigger {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 30%, transparent));
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, color-mix(in srgb, currentColor 8%, transparent));
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .trigger:hover {
    border-color: var(--color-accent, currentColor);
  }

  .menu {
    min-width: 12rem;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 30%, transparent));
    border-radius: var(--radius, 0.5rem);
    background: var(--color-bg, Canvas);
    color: var(--color-text, CanvasText);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
  }

  /* The button that opens a popover is its implicit anchor, so each instance anchors to its own button. Do not
     use anchor-name here: Bascik scopes it per component, so every instance would share one anchor. */
  @supports (position-area: bottom) {
    .menu {
      inset: auto;
      margin-top: 0.25rem;
      position-area: bottom span-right;
      position-try-fallbacks: flip-block;
    }
  }
</style>
<button class="trigger" type="button" popovertarget="menu" data-bascik-prop-label>Menu</button>
<div class="menu" id="menu" popover>
  <div data-bascik-slot></div>
</div>