Accordion
An animated, accessible panel that reveals or hides content when the user clicks its heading. Follows the controlled component pattern — the consumer manages open state.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | '' | Visible heading text rendered inside the toggle button. |
headingTag | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h2' | Semantic heading element that wraps the toggle button. Set to match the page heading hierarchy. |
open | boolean | false | Whether the panel is expanded. Controlled prop — the consumer must update it in response to the update event. |
compact | boolean | false | Enables dense mode. Reduces header padding and font size for denser layouts. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Sets data-theme on the host so token overrides cascade into the shadow DOM. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
update | { open: boolean } | No | Emitted when the user clicks the toggle button. detail.open is the requested new state. The consumer must set the open prop to this value. Not bubbles, not composed. |
When using in React (JSX), listen via onupdate (lowercase) because React 19 maps onXxx → addEventListener('Xxx', ...) without lowercasing.
Slots
| Slot | Description |
|---|---|
default | Collapsible panel content. Any HTML or components can be slotted here. Interactive children (links, buttons, inputs) are automatically removed from the tab order when the panel is closed via visibility: hidden. |
CSS Custom Properties
| Property | Description |
|---|---|
--diwa-transition-slow | Controls the duration of the panel expand/collapse animation and the chevron rotation. Defaults to 0.25s ease. |
--diwa-border | Color of the bottom divider line rendered below each accordion item. |
--diwa-bg-hover | Background of the header 'pill' hover state. |
--diwa-bg-active | Background of the header pill on mouse-down. |
--diwa-text-primary | Heading text color. |