A row with media on the left, a title and description in the middle and actions on the right - three surfaces, three sizes, and the two ends published...
Item / Media - Variant: Icon (Simple) · Icon · Image · Avatar · AvatarGroup - 16 to 80 wide
Item / Actions - Type: Buttons · Text + Button · Icon - 125, 110 and 16 wide
ItemGroup - none: 460 × 540 - nine rows sharing one border
Using the Item
When do I reach for Item instead of Field?
The source draws the line plainly: Field for form inputs, Item for displaying content. A row carrying a title, a description and a button beside them is an Item even when it sits in a settings screen that looks like a form. If a value is being typed, it is a Field.
What separates the three variants?
Only the surface. Default paints nothing, Outline is base.background on a 1px base.input line, Muted is a base.muted block. The radius stays 10 and the gap stays 12 in all three, so switching a list from loose rows to bordered ones moves nothing inside them.
Why are Media and Actions their own components?
Because five kinds of media times three kinds of action is fifteen combinations. As separate components they are eight variants that compose, and adding a sixth media type costs one variant rather than three.
How does ItemGroup differ from a stack of Items?
One border instead of nine. The group is 460 × 540 with a single base.input outline and a 1px divider between each pair of rows, so the seams are one line wide rather than two. Loose rows each carry their own outline and sit 8 apart.