Collapsible

States

State	Visual change	Tokens
Default	Dark label, faded chevron	color-fg-default, color-icon-subtle
Hover	The label turns to the link colour	color-fg-link-hovered
Open	The chevron turns 180°; the panel shows	color-icon-subtle
Focus	A 2 px ring drawn outside with a 2 px offset	color-focus-ring
Disabled	Faded label, not-allowed cursor	color-fg-disabled

Measurements

Part	Value
Trigger text	text-label-md
Gap between label and chevron	space-xs
Chevron	icon-size-sm
Focus ring	2 px thick, 2 px offset (border-width-focus)
Panel	No padding of its own; the consumer adds spacing (className="pt-sm")

Tokens

Values show for the selected brand; you can change the brand from the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-color-fg-default
--bigbang-color-fg-link-hovered
--bigbang-color-icon-subtle		#737373#737373#737373	#a1a1a1#a1a1a1#a1a1a1
--bigbang-color-fg-disabled
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Panel opens	opacity 0 → 1, translate −4 px → 0	motion-collapsible-duration (150 ms)	motion-collapsible-easing	Only the fade stays; nothing moves.
Panel closes	None	None	None	Closes at once.
Chevron turns	rotate 0° → 180°	motion-collapsible-icon-duration	easing-productive	Turns at once.
Hover colour	color	motion-hover-duration	motion-hover-easing	Unchanged; colour only.
Focus	The ring appears at once	None	None	Unchanged.

The height is never animated: when the panel opens the layout changes at once and only the content fades in (MOT-02). The distance is set by motion-collapsible-distance. See Motion for the values.