Accordion

Expandable sections with smooth CSS grid animation. 3 variants: minimal dividers, separated cards, grouped container.

data-display v0.1.0

Playground

Default (dividers)

<cg-accordion></cg-accordion>

Card (separated)

<cg-accordion variant="card" multiple></cg-accordion>

Bordered (grouped)

<cg-accordion variant="bordered"></cg-accordion>

import { CgAccordion } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-accordion';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`items`	AccordionItem[]	—	Items — {value, trigger, content, icon?, disabled?}
`variant`	"default" \| "card" \| "bordered"	"default"	Default = dividers, Card = separated, Bordered = grouped container
`size`	"sm" \| "md" \| "lg"	"md"	Text and padding size
`multiple`	boolean	false	Allow multiple items open
`defaultOpen`	string[]	[]	Item values to open by default

Event	Detail	Description
`cg-accordion-change`	{open: string[], toggled: string}	When an item is toggled