Einklappen 1.2.0

The <velin-collapse> Web Component toggles content visibility with a smooth CSS Grid animation (grid-template-rows: 0fr → 1fr). Pair it with any trigger in slot="trigger" — keyboard and ARIA wiring are built in. English: Collapse

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

Wann verwenden

Ein einzelner Ein-/Ausklappbereich, der von einem Trigger gesteuert wird (Filter, „mehr anzeigen“, FAQ-Eintrag).
Wenn du open() / close() / toggle() plus velin-open- / velin-close-Ereignisse brauchst.

Wann nicht verwenden

Multiple related panels with shared keyboard roving — use Accordion.
Modal overlays — use Modal / Drawer.

Einfaches Beispiel

This content smoothly expands and collapses.

<velin-collapse>
  <button class="velin-btn velin-btn--outline" slot="trigger">
    Toggle content
  </button>
  <p>This content smoothly expands and collapses.</p>
</velin-collapse>

Anfangs geoeffnet

<velin-collapse open>
  <button slot="trigger">Toggle</button>
  <p>Visible by default.</p>
</velin-collapse>

Tastatur

Taste	Aktion
`Enter` / `Space`	Oeffnen/Schliessen umschalten (am Trigger)

Barrierefreiheit

See also the disclosure (collapse) pattern in the A11y guide.

Der Trigger erhaelt aria-expanded und aria-controls (Panel-ID).
Nicht-Button-Trigger erhalten role="button" und tabindex="0".
Das einklappbare Panel ist ein echtes Element im DOM mit stabiler id fuer assistive Technologien.
Animation respects prefers-reduced-motion: reduce.

CSS-Variablen

Variable	Beschreibung
`--velin-transition-duration`	Dauer der Ein-/Ausklappanimation
`--velin-transition-easing`	Easing-Funktion der Animation

API

Attribut

Attribut	Typ	Beschreibung
`open`	Boolesch	Observed — whether the content is visible

Slots & parts

Name	Art	Beschreibung
`trigger`	Slot	Umschalt-Steuerung
(default)	Slot	Einklappbarer Inhalt
`content`	CSS part	Animierter Panel-Wrapper

Methodeen

Methode	Beschreibung
`toggle()`	Oeffnen/Schliessen umschalten
`open()`	Einklappen oeffnen
`close()`	Einklappen schliessen

Ereignisse

Event	Beschreibung
`velin-open`	Bubbelt, wenn sich Inhalt oeffnet
`velin-close`	Bubbelt, wenn sich Inhalt schliesst

Best practices & pitfalls

Prefer a native <button type="button"> in the trigger slot.
Verschachtele interaktive Steuerelemente, die Enter/Leertaste vom Trigger abfangen, nur mit Bedacht.
For multi-panel exclusive stacks, use Accordion instead of many Collapse hosts.