Accordion

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

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> elements for built-in disclosure semantics.
Shadow DOM wraps content in a role="region" container.
Full keyboard navigation via Arrow, Home, and End keys.
No ARIA attributes needed — the browser handles aria-expanded natively on <summary>.

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

JavaScript API

Attributes

Attribute	Type	Description
`exclusive`	Boolean	Only one panel open at a time

Keyboard Events (handled internally)

Key	Behaviour
`ArrowDown`	Focus next `<summary>`
`ArrowUp`	Focus previous `<summary>`
`Home`	Focus first `<summary>`
`End`	Focus last `<summary>`