Koyo Accordion

DraftKoyo-owned

Koyo Accordion documents disclosure lists used for FAQs, settings, and progressive detail.

Reference scope

Base/store accordion nodes are reference only for disclosure behavior and keyboard support.

Variants

Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.

SingleMultipleDefault itemNested contentCompact

Token Notes

Token decisions that should stay visible while the catalog is migrated.

Figma trigger states include Closed, Open, and Focus.
Bordered trigger positions include First, Middle, Last, and Single.
Chevron motion should remain tied to open state and avoid per-product timing changes.
Collapsed content spacing should map back to Koyo spacing tokens before adding custom layouts.

Code Targets

Files the docs entry points at today, ready for later catalog linking.

Source
Accordion source
src/components/ui/accordion.tsx
Docs
Existing component catalog
src/app/(pages)/docs/components/[category]/page.tsx

Figma Mapping

Base/store nodes are reference only. The Koyo component is the docs and implementation target.

Page: Accordion (842:49174)
Base/store reference: First Accordion frame (288:122452), trigger component sets (66:5034) and (1779:595)
Koyo-owned target: Second Accordion frame (3454:11609), trigger component sets (3454:11616) and (3454:11658)
Confidence: high