Accordion
Material Design 3-styled accordion / expansion panel web components (lit-material-accordion, lit-material-accordion-panel).
- 3.0 KB gzipped
- @lit-material/accordion 0.1.0
- Renders on the server
Example
Accordion
A disclosure widget group — header + collapsible content, single- or multi-expand.
Orders ship within 3-5 business days. Express shipping is available at checkout.
Returns are accepted within 30 days of delivery, in original packaging.
Warranty terms.
<lit-material-accordion>
<lit-material-accordion-panel expanded>
<span slot="header">Shipping</span>
<p>...</p>
</lit-material-accordion-panel>
...
</lit-material-accordion>
Standalone panel
A panel works without a wrapping accordion — set divider to stack a few flush.
No wrapping accordion needed for a single collapsible panel.
Install
npm install @lit-material/accordion @lit-material/tokensimport "@lit-material/accordion";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-accordion-panel>
A single collapsible panel — a disclosure widget (header button + content
region) following the WAI-ARIA
[Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) pattern.
Works standalone (no wrapping lit-material-accordion required); grouped
inside one, the accordion adds single-vs-multi-expand policy and Up/Down/
Home/End roving focus across panel headers.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
expanded | expanded | boolean | false | |
disabled | disabled | boolean | false | |
divider | divider | boolean | false | Renders a hairline divider below the panel — handy for a flush-stacked group without a wrapping accordion. |
Events
| Event | Description |
|---|---|
toggle | Fires when expanded changes via user interaction (clicking or activating the header), with detail: { expanded: boolean }. |
Slots
| Slot | Description |
|---|---|
header | The header's label content. |
leading | An optional icon before the header label. |
| default | The panel's body content. |
CSS parts
| Part | Description |
|---|---|
header | The header button (background/padding). |
ripple | The state-layer element the hover/press feedback is drawn on. |
focus-ring | The focus indicator element. |
chevron | The expand/collapse indicator icon. |
content | The content region. |
<lit-material-accordion>
Groups lit-material-accordion-panel elements, adding single-vs-multi
expand policy and Up/Down/Home/End roving focus across panel headers, per
the WAI-ARIA [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
pattern. A panel works fine standalone without this wrapper — this only
adds cross-panel coordination.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
multi | multi | boolean | false | Allows more than one panel to be expanded at once. Default: expanding a panel collapses any other open one. |
Slots
| Slot | Description |
|---|---|
| default | lit-material-accordion-panel elements. |
CSS parts
| Part | Description |
|---|---|
accordion | The container. |