Component docs: Styling section

Template for Styling sections covering public state hooks and CSS variables.

Document these surfaces

SurfaceExample
data-statedata-state="open"
data-disabledpresence/absence
data-orientationhorizontal / vertical
variant props reflected to DOMdata-variant, data-size
CSS variables--rad-* animation hooks when public

Do not document internal class names unless they are generated through Theme classNamespace.

Example section outline

md
## Styling

### Data attributes
- `data-state` — `open` | `closed`
- `data-disabled` — present when interaction is blocked

### CSS variables
- `--rad-accordion-content-height` — measured height for CSS animations (if applicable)

### Customization
Use `className` on parts and target `data-*` selectors in your CSS.

Checklist

  • Listed attributes match data attribute conventions
  • Theme / classNamespace requirements noted when default CSS applies
  • No encouragement to override private DOM structure
Edit this page on GitHub →