Akkordion 1.2.0

Die <velin-accordion> Web Component rendert einen Stapel einklappbarer <details>-Panels mit optionalem Exklusivmodus und vollstaendiger Tastaturnavigation. English: Accordion

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

FAQs, Einstellungsgruppen oder lange Inhalte, die in benannte Abschnitte aufgeteilt sind und bei Bedarf geoeffnet werden.
Wenn mehrere Disclosure-Bereiche einen Stapel teilen und der Tastaturfokus zwischen den Zusammenfassungen wechseln soll.
Verwende exclusive, wenn nur ein Panel geoeffnet bleiben soll (klassisches Akkordion).

Wann nicht verwenden

Eine einzelne Ein-/Ausklappsteuerung: verwende Einklappen.
Primaernavigation oder Tab-Ansichten: verwende Navs & Tabs.
Erfinde keine Nicht-<details>-Kindelemente; der Host gestaltet und verdrahtet nur geslottete details/summary.

Einfaches Beispiel

Lege native <details>-Elemente in <velin-accordion>.

Akkordion-Eintrag #1

Das ist der Inhalt des ersten Eintrags. Er wird standardmaessig angezeigt.

Akkordion-Eintrag #2

Das ist der Inhalt des zweiten Eintrags.

Akkordion-Eintrag #3

Das ist der Inhalt des dritten Eintrags.

<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>

Exklusivmodus

Fuege das exclusive-Attribut hinzu, damit nur ein Panel gleichzeitig geoeffnet sein kann. Beim Oeffnen eines neuen Panels wird das zuvor geoeffnete automatisch geschlossen.

Panel A

Nur ein Panel ist gleichzeitig geoeffnet.

Panel B

Oeffnen schliesst Panel A.

Panel C

Und so weiter.

<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>

Tastaturnavigation

Wenn der Fokus auf einem <summary> liegt, werden folgende Tasten unterstuetzt:

Taste	Aktion
`Enter` / `Space`	Fokussiertes Panel umschalten
`Pfeil nach unten`	Fokus zur naechsten Zusammenfassung bewegen
`Pfeil nach oben`	Fokus zur vorherigen Zusammenfassung bewegen
`Startseite`	Fokus zur ersten Zusammenfassung bewegen
`End`	Fokus zur letzten Zusammenfassung bewegen

Barrierefreiheit

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 / Pos1 / Ende 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-Variablen

Variable	Standard	Beschreibung
`--velin-color-border`	`#ddd`	Rahmenfarbe des Panels
`--velin-radius-md`	`0.5rem`	Aeusserer Radius
`--velin-space-4`	`1rem`	Innenabstand der Zusammenfassung
`--velin-text-base`	`1rem`	Schriftgroesse der Zusammenfassung
`--velin-weight-medium`	`500`	Schriftstaerke der Zusammenfassung

API

Attribut

Attribut	Typ	Beschreibung
`exclusive`	Boolesch	Read on connect — only one panel open at a time (not observed)

Nur Standard-Slot. Keine CSS-Parts, Methoden oder 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.