Accordion
Accordion lets people expand and collapse sections of content, so a long screen stays short until they ask for more.
Preview
A collapsible content row for FAQ lists and grouped settings. Closed it shows the title, open it adds the description underneath. Live specimens, open one.
Every row is one component with one hidden text node, not two rows swapped over. The description sits in the same Text frame as the title in all six variants and switches off while the row is closed, so the closed row hugs to exactly 56: 24 of title plus 16 of padding at each end. Opening reveals an element, it does not add one. Width is pinned at 340, only the height hugs.
State
Three states, and the radius carries the change. Default is a pill on bg/white-0 with a 1px border/soft-100 edge. Pressed drops the border, fills bg/weak-50 and rounds to 24. Active keeps that fill, rounds to 18 and opens the description.
Open, the row is 142 tall with the icon and 122 without. That 20 is the description wrapping in a narrower column, not a second spec. Default is the only variant carrying the 1px edge and the only one carrying shadows: a 2 blur one down at 4 percent and a 4 blur four down at 1. Pressed and Active are flat. The chevron is swapped, not turned, chevron-down while closed and chevron-up when open, a different icon instance rather than a transform.
Icon
A boolean, not a size change. With it on, a 24 box holding a 20 vector at stroke 2 leads the row and the text column narrows by 36, the icon plus the 12 gap.
The chevron never leaves. It says the row opens, and it is the one part that changes colour with State: fg/soft-500 while closed, fg/sub-700 the moment you touch it or open it. The leading icon holds fg/sub-700 throughout. Both sit in a 24 box, but the leading glyph draws at 20 and the chevron at 12 by 6, so the same box carries different optical weight at each end of the row.
Properties
One variant axis, one boolean, two text properties and an instance swap.
Six variants, three states across the icon boolean, and the matrix is complete. Title and Description are both text properties, so a real FAQ row is two overrides. Description is bound to the node hidden while closed, so you can fill it on a collapsed instance and see nothing until State goes to Active. The title is Regular 16/24, the same weight as the description at 14/20, so size and colour are all that separate them.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath.
Radius runs dimensions/radius/full, then 2xl at 24, then xl at 18. Full clamps to half the height on a 56 row, so you see 28, then 24, then 18: the row squares up slightly as it opens. Six colours, all semantic, none a raw primitive, and every one themes. The pair of shadows on the closed row is the only thing here that is neither colour nor geometry; it makes Default read as lifted and Pressed as pushed in.
Guidelines
Stack them. One row alone reads as a button that did nothing. The list is what says there is more behind each title.
Do not nest one inside another. A reader two levels deep has lost track of what closing does.
The component description names the native equivalents: DisclosureGroup on iOS, an expandable ListItem on Android. Both animate their own height on open and neither ships the lift this component draws, so the closed row's shadow is an Appetite decision, not a platform one. Keep the title to one line at 236, the column you get once the leading icon is on. The row hugs its content, and a wrapping title pushes the closed height past 56 and breaks the stack's rhythm.