Accordion
data.accordionAn accordion is a stack of labeled disclosure sections that expand and collapse their content.
Same contract. Every kit voice.
Foundation
An accordion is a stack of labeled disclosure sections that expand and collapse their content.
Components
An accordion is a stack of labeled disclosure sections that expand and collapse their content.
Evidence
An accordion is a stack of labeled disclosure sections that expand and collapse their content.
What code calls it.
Every part, named.
- 1Data container
- 2Primary values
- 3Labels or headers
- 4Grouping or separators
- 5Empty and error treatment
Similar shape. Different contract.
surface.cardShares a visual family, but has a different role, state model, or interaction contract.
Feature cardsurface.feature-cardShares a visual family, but has a different role, state model, or interaction contract.
Glass cardsurface.glass-cardShares a visual family, but has a different role, state model, or interaction contract.
Ask for the exact thing.
Implement the canonical Accordion component (data.accordion). An accordion is a stack of labeled disclosure sections that expand and collapse their content. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.What must be proven.
default · loading · empty · error
implementation · state-matrix · responsive · reduced-motion
mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin