Collapse 1.2.2

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. Deutsch: Einklappen

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

A single expand/collapse region controlled by one trigger (filters, “show more”, FAQ item).
When you want open() / close() / toggle() plus velin-open / velin-close events.

When not

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

Basic Example

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>

Initially Open

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

Keyboard

Key	Action
`Enter` / `Space`	Toggle open/close (on trigger)

Accessibility

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

Trigger gets aria-expanded and aria-controls (panel id).
Non-button triggers receive role="button" and tabindex="0".
Collapsible panel is a real element in the DOM with a stable id for assistive tech.
Animation respects prefers-reduced-motion: reduce.

CSS Variables

Variable	Description
`--velin-transition-duration`	Expand/collapse animation duration
`--velin-transition-easing`	Animation easing function

API

Attributes

Attribute	Type	Description
`open`	Boolean	Observed — whether the content is visible

Slots & parts

Name	Kind	Description
`trigger`	Slot	Toggle control
(default)	Slot	Collapsible content
`content`	CSS part	Animated panel wrapper

Methods

Method	Description
`toggle()`	Toggle open/close
`open()`	Open the collapse
`close()`	Close the collapse

Events

Event	Description
`velin-open`	Bubbles when content opens
`velin-close`	Bubbles when content closes

Best practices & pitfalls

Prefer a native <button type="button"> in the trigger slot.
Do not nest interactive controls that steal Enter/Space from the trigger without care.
For multi-panel exclusive stacks, use Accordion instead of many Collapse hosts.