Accordion

aidsgn-accordion groups aidsgn-accordion-item sections. An item uses its summary attribute as the native button label and moves its child nodes into a light-DOM panel. Set open to expand an item initially.

A native Web Component design system with DTCG tokens.

Yes. Semantic tokens support brand and theme overrides.

<aidsgn-accordion>
  <aidsgn-accordion-item summary="What is aidsgn?" open>
    A native Web Component design system with DTCG tokens.
  </aidsgn-accordion-item>
  <aidsgn-accordion-item summary="Does it support themes?">
    Yes. Semantic tokens support brand and theme overrides.
  </aidsgn-accordion-item>
</aidsgn-accordion>

Multiple sections may be open. Each item uses native details and summary semantics; a decorative chevron rotates with the state while collapsed panels animate using a grid transition. Both animations are removed for reduced-motion preferences. Use it for related optional detail, not for essential content users must discover to complete a task.