rc-accordion
Accordion coordinator for child native <details> panels with single- or multiple-open behavior, following the WAI-ARIA Accordion pattern.
- Package
@rcarls/rc-accordion- Element
<rc-accordion>- Native dependency
- Coordinates native details children
- State model
- Single or multiple open panels
- Main events
- None
- Related
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-accordion
yarn add @rcarls/rc-accordion
import '@rcarls/rc-accordion/define';
Live demo
- Single open
- Multiple open
- Wrapped disclosures
Theming
The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.
Accessibility
Keep each managed native <details> element as a direct child, or wrap it in a
direct-child rc-disclosure, with a native <summary> as its first child. The
native elements retain disclosure semantics, focus, and Enter/Space activation.
After upgrade, Arrow Up and Arrow Down move focus between summaries and wrap at
the ends; Home and End move to the first and last summary. By default, opening a
panel closes its open siblings. Add multiple when more than one panel may stay
open. The optional name attribute is mirrored to managed native <details>
children to preserve native exclusive grouping; author-provided child names are
left unchanged.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
multiple | JS property only | boolean | Not specified | Allows more than one panel open at a time. |
Methods
No public methods are documented in the custom elements manifest.
Events
No custom events are documented in the custom elements manifest.
Slots
No slots are documented in the custom elements manifest.
CSS Custom Properties
No CSS custom properties are documented in the custom elements manifest.
CSS Parts
No CSS parts are documented in the custom elements manifest.