Add string shorthand for the anchor prop

[RobinMalfait]

This PR introduces a shorthand for the anchor API. The anchor prop now accepts a string that maps to the anchor.to property in the long-form object. Note: the long form object syntax is still supported.

The anchor.gap, anchor.offset and anchor.padding options use CSS variables by default. They are defined as var(--anchor-gap), var(--anchor-offset) and var(--anchor-padding) respectively.

This means that you can fully customize the anchor styles by setting CSS variables, for example via Tailwind classes.

An example using Tailwind CSS:

<Listbox>
  <ListboxButton>Options</ListboxButton>
  <ListboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-1)] [--anchor-offset:calc(var(--spacing-1)*-1)]">
    <ListboxOption>Listbox option A</ListboxOption>
    <ListboxOption>Listbox option B</ListboxOption>
    <ListboxOption>Listbox option C</ListboxOption>
  </ListboxOptions>
</Listbox>

Which will render as:

 +---------+
 | Options |
 +---------+
+------------------+
| Listbox option A |
| Listbox option B |
| Listbox option C |
+------------------+

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2024 9:44pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2024 9:44pm