Accordion 1.2.2

The <velin-accordion> Web Component renders a stack of collapsible <details> panels with optional exclusive mode and full keyboard navigation. Deutsch: Akkordion

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

FAQ, settings groups, or long content split into titled sections users open on demand.
When several disclosures share one stack and you want shared keyboard roving between summaries.
Use exclusive when only one panel should stay open (classic accordion).

When not

A single expand/collapse control — use Collapse.
Primary navigation or tabbed views — use Navs & Tabs.
Do not invent non-<details> children; the host styles and wires slotted details/summary only.

Basic Example

Wrap native <details> elements inside <velin-accordion>.

Accordion Item #1

This is the first item's content. It is shown by default.

Accordion Item #2

This is the second item's content.

Accordion Item #3

This is the third item's content.

<velin-accordion>
  <details open>
    <summary>Accordion Item #1</summary>
    <div style="padding: 1rem;">First item content.</div>
  </details>
  <details>
    <summary>Accordion Item #2</summary>
    <div style="padding: 1rem;">Second item content.</div>
  </details>
  <details>
    <summary>Accordion Item #3</summary>
    <div style="padding: 1rem;">Third item content.</div>
  </details>
</velin-accordion>

Exclusive Mode

Add the exclusive attribute so only one panel can be open at a time. Opening a new panel automatically closes the previously open one.

Panel A

Only one panel open at a time.

Panel B

Opening this closes Panel A.

Panel C

And so on.

<velin-accordion exclusive>
  <details open>
    <summary>Panel A</summary>
    <div style="padding: 1rem;">Only one panel open at a time.</div>
  </details>
  <details>
    <summary>Panel B</summary>
    <div style="padding: 1rem;">Opening this closes Panel A.</div>
  </details>
</velin-accordion>

Keyboard Navigation

When focus is on a <summary>, the following keys are supported:

Key	Action
`Enter` / `Space`	Toggle the focused panel
`Arrow Down`	Move focus to next summary
`Arrow Up`	Move focus to previous summary
`Home`	Move focus to first summary
`End`	Move focus to last summary

Accessibility

Uses native <details>/<summary> disclosure semantics.
On connect, each panel (first non-summary child) gets a stable id and the matching summary receives aria-controls.
Arrow / Home / End move focus between summaries; Enter/Space toggle via the browser.
No public events — listen to native toggle on details if you need app hooks.

CSS Variables

Variable	Default	Description
`--velin-color-border`	`#ddd`	Panel border color
`--velin-radius-md`	`0.5rem`	Outer border radius
`--velin-space-4`	`1rem`	Summary padding
`--velin-text-base`	`1rem`	Summary font size
`--velin-weight-medium`	`500`	Summary font weight

API

Attributes

Attribute	Type	Description
`exclusive`	Boolean	Read on connect — only one panel open at a time (not observed)

Default slot only. No CSS parts, methods, or custom events.

Best practices & pitfalls

Set exclusive before the element connects; toggling the attribute later does not re-read _exclusive.
Keep one content wrapper as the first non-summary child so aria-controls targets the right node.
For a lone disclosure without accordion chrome, prefer Collapse.