Bileşenler

FilterBar

Liste ya da tablo için süzme denetimleri: uygulanan filtre çipleri, sonuç sayısı ve tek tıkla temizleme.

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Denetimler yan yana, çipler ve sonuç sayısı altında	`color-text-default`, `color-text-subtle`
Taslak değişti (`batch`)	Var	Uygula ve Sıfırla etkinleşir	-
Yükleniyor	Var	Sonuç sayısı yer tutucu; Uygula’da yükleniyor göstergesi; kök `aria-busy`	-
Diğer filtreler açık	Var (dar ekran)	Panel satır içinde açılır; ok yarım tur döner	`motion-collapsible-duration`, `motion-collapsible-icon-duration`
Odak	Var	İçindeki denetimlerin 2 px odak halkası	`color-focus-ring`, `border-width-focus`
Boş sonuç	Kompozisyon	Sonuç sayısı “0 sonuç”; boş durumu tablo gösterir	-

Özellik	Değer	Token
Denetimler arası boşluk	8 px	`space-md`
Satırlar arası boşluk	12 px	`space-lg`
Arama kutusu genişliği, 1024 px ve üstü	288 px	-
Alan genişliği, 1024 px ve üstü	176 px	-
Çip aralığı	6 px	`space-sm`
Çok seçimli panel	8 px köşe, 12 px iç boşluk, gölge	`radius-md`, `space-lg`, `shadow-overlay`
Sonuç sayısı stili	12 px / 16 px	`body-sm`
Dar ekran eşiği	1024 px (`lg`)	-

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

Token	Açık mod	Koyu mod
`--bigbang-color-text-default`	`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-subtle`	`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-surface-raised`	`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-border-subtle`	`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-focus-ring`	`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-radius-md`	`8px8px8px`	`8px8px8px`
`--bigbang-space-md`	`8px8px8px`	`8px8px8px`
`--bigbang-space-lg`	`12px12px12px`	`12px12px12px`
`--bigbang-space-sm`	`6px6px6px`	`6px6px6px`
`--bigbang-motion-collapsible-duration`	`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-motion-collapsible-distance`	`4px4px4px`	`4px4px4px`
`--bigbang-motion-collapsible-icon-duration`	`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-motion-list-enter-duration`	`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-motion-skeleton-reveal-duration`	`0.11s0.11s0.11s`	`0.11s0.11s0.11s`

Etkileşim	Hareket	Azaltılmış hareket
Çip eklenir	Opaklık 0 → 1 ve 4 px yükselme (`motion.listItem`, Tag içinde)	Yükselme 0 px; kısa solma
Çip kaldırılır	Hemen kalkar	Aynı
Diğer filtreler açılır	İçerik opaklık ve 4 px aşağı kayma ile belirir (`motion.collapsible`); ok yarım tur döner (`motion.collapsibleIcon`)	Kayma 0 px
Sonuç sayısı değişir	Yeni metin solarak gelir (`motion.reveal`)	Kısa solma
Düğmeler	Basma geri bildirimi (`motion.press`)	Ölçek 1
Çok seçimli panel	Çıkıştan ölçeklenerek açılır (`motion.popover`)	Ölçek 1

Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.