Collapse

The <velin-collapse> Web Component toggles content visibility with a smooth CSS Grid animation (grid-template-rows: 0fr → 1fr). Pair it with any trigger element — keyboard and ARIA wiring ship in 0.7.0 (WCAG 2.2 AA).

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

JavaScript API

Attributes

Attribute	Type	Description
`open`	Boolean	Whether the content is visible

Methods

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

Events

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