Accordion

The Accordion is a container for one or more items that are expandable. Expanding an item will show additional content related to that item.

For each item, show a preview and allow disclosure of a detail panel.

The Accordion may contain one or several items, related or not. An item shows up as a clickable preview (Accordion.Control) and embeds a panel, hidden by default, which we toggle through clicking.

In Mantine, the detail panel mounts immediately, regardless if it's toggled or not.

In Mantine, we set the chevron style at the Accordion's root, so it's shared among all items

The panel may be a form. In that case, we may set the chevron as a plus sign, to indicate we intend to add (submit) data to the server.

Accordion variant="separated" chevron={<IconPlus/>}
	Accordion.Item value="item1"
		Accordion.Control
			Log Workout
		Accordion.Panel
			Content

	Accordion.Item value="item2"
		..