Dropdown

A menu of actions, with roving tabindex, typeahead and collision-aware placement.

Bits owns roving tabindex, typeahead, arrow navigation, Escape, click outside,
floating placement with collision detection, and focus returned to the
trigger. We own how it looks.

**The heading has to live inside the group it names.** Bits throws if it does
not, and it is right: a heading connected to nothing is just text in the
middle of a menu, and a screen reader cannot say which items it covers. So
the API is `Dropdown.Group label="…"` rather than a loose heading.

Use this when the rows are actions. Use [`Popover`](/components/popover) when
the contents are content — the difference is what a screen reader says.

```svelte
<Dropdown>
  {#snippet trigger(props)}
    <Button {...props} icon={EllipsisHorizontal} label="Actions" />
  {/snippet}
  <Dropdown.Group label="Customer">
    <Dropdown.Item icon={PencilSquare} href="/customers/1">Open</Dropdown.Item>
  </Dropdown.Group>
  <Dropdown.Separator />
  <Dropdown.Item icon={Trash} variant="danger" onclick={remove}>Delete</Dropdown.Item>
</Dropdown>
```