Layout
Accordion
Expandable/collapsible sections. Supports multi-expand mode and smooth CSS grid animations.
LlmAccordionGroup + LlmAccordionItemDemo
Live PreviewReact
A component library designed for AI-generated applications with consistent APIs.
Run
npm install @atelier-ui/react and import the styles.jsx
<LlmAccordionGroup variant="separated">
<LlmAccordionItem>
<span llmAccordionHeader>Question 1</span>
Answer content goes here.
</LlmAccordionItem>
<LlmAccordionItem>
<span llmAccordionHeader>Question 2</span>
Another answer here.
</LlmAccordionItem>
</LlmAccordionGroup>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
multi | boolean | false | Allow multiple items expanded simultaneously |
variant | 'default' | 'bordered' | 'separated' | 'default' | Visual style of the group |
Composition parts
Accordion is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmAccordionItem
One expandable section. Mark the header content with the llmAccordionHeader directive; everything else renders as the panel body.
| Prop | Type | Default | Description |
|---|---|---|---|
expanded | boolean | false | Controls the expanded state when used as a controlled component. |
onExpandedChange | (expanded: boolean) => void | — | Called when the user toggles the item. |
disabled | boolean | false | Prevents toggling. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | HTML heading level wrapping the trigger. Match your page outline so heading order stays valid (e.g. pass 4 if the accordion is nested under an h3). |
Import
ts
import { LlmAccordionGroup, LlmAccordionItem } from '@atelier-ui/angular';Accessibility
ARIA roleheading + region (disclosure pattern)
| Key | Action |
|---|---|
| Tab | Move focus between accordion headers. |
| Enter / Space | Expand or collapse the focused section. |
| Arrow Up / Down | Move between headers within the same group. |
| Home / End | Jump to the first / last header in the group. |
- Each header is a real button with aria-expanded reflecting state and aria-controls pointing at its panel.
- Panels have role="region" with aria-labelledby pointing at their header, so the section has a screen-reader landmark.
See the accessibility overview for the site-wide WCAG stance.