Akkordeon — component.accordion
Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event
Beispiele
Drei Einträge, erster offen (klickbar)
Publizierte Surfaces sind unveränderlich; Migrationen heben alte Instanzen auf neue Major-Versionen.
Ja — über die Katalog-Verwaltung (Scaffold) oder die Bauanleitung im Dateisystem.
Die Laufzeit rendert Fallbacks, der Publish blockiert — strenge Gates, tolerante Auslieferung.
Mehrfach offen erlaubt
Kann gleichzeitig mit B offen sein.
Kein Akkordeon-Zwang.
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
items * | array | — |
openFirst | boolean | false |
single | boolean | true |
Events & Slots
Events: toggle
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--accordion-border-default | var(--color-border-default) |
--accordion-border-subtle | var(--color-border-subtle) |
--accordion-focus-ring-color | var(--focus-ring-color) |
--accordion-focus-ring-offset | var(--focus-ring-offset) |
--accordion-focus-ring-width | var(--focus-ring-width) |
--accordion-radius-surface | var(--radius-surface) |
--accordion-surface-default | var(--color-surface-default) |
--accordion-surface-sunken | var(--color-surface-sunken) |
--accordion-text-default | var(--color-text-default) |
--accordion-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairline color.border.default color.border.subtle color.surface.default color.surface.sunken color.text.default color.text.muted duration.base duration.fast easing.standard focus.ring-color focus.ring-offset focus.ring-width font.family.default leading.base radius.surface size.3 size.4 text.md text.sm weight.medium