Bileşenler

Collapsible

Tek bir içerik bölümünü gösterip gizleyen açılır alan.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Koyu etiket, soluk ok	`color-fg-default`, `color-icon-subtle`
Üzerine gelme	Etiket bağlantı rengine döner	`color-fg-link-hovered`
Açık	Ok 180° döner; panel görünür	`color-icon-subtle`
Odak	2 px halka, 2 px boşlukla dışa çizilir	`color-focus-ring`
Devre dışı	Soluk etiket, `not-allowed` imleci	`color-fg-disabled`

Ölçüler

Parça	Değer
Tetikleyici metni	`text-label-md`
Etiket ile ok arası	`space-xs`
Ok	`icon-size-sm`
Odak halkası	2 px kalınlık, 2 px boşluk (`border-width-focus`)
Panel	Kendi dolgusu yoktur; boşluğu kullanan verir (`className="pt-sm"`)

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
`--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`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Panel açılır	`opacity` 0 → 1, `translate` −4 px → 0	`motion-collapsible-duration` (150 ms)	`motion-collapsible-easing`	Yalnızca solma kalır; kayma yoktur.
Panel kapanır	Yok	Yok	Yok	Anında kapanır.
Ok döner	`rotate` 0° → 180°	`motion-collapsible-icon-duration`	`easing-productive`	Anında döner.
Üzerine gelme rengi	`color`	`motion-hover-duration`	`motion-hover-easing`	Değişmez; yalnızca renk geçişidir.
Odak	Halka geçişsiz, anında belirir	Yok	Yok	Değişmez.

Yükseklik animasyonlanmaz: panel açılınca düzen bir anda değişir, yalnızca içerik solarak belirir (MOT-02). Mesafe motion-collapsible-distance ile ayarlanır. Değerler için Hareket sayfasına bakın.