本体は token を読むだけ。Vibe ごとの差異は treatment レイヤーで吸収する。下のセレクタで treatment を切り替えて、すべてのコンポーネントが破綻しないかを目視確認できる。
primary / secondary / ghost / link / danger / icon / loading / disabled。3 サイズ (sm/md/lg)。
default / elevated / bordered / image-top / horizontal。media + body + actions。
本文テキストが入る位置。最大 2〜3 行。
影で浮いて見える variant。
強調したいときに使う。
メディア領域を上に置いたタイプ。
media を左、本文を右に。
text / textarea / select / checkbox / radio / switch。各 state を網羅。
label / filter / removable / status。
count / dot / label。アイコン・avatar に重ねる。
info / success / warning / error。
これはお知らせメッセージです。
保存が完了しました。
未保存の変更があります。
処理に失敗しました。再度お試しください。
underline / pill。
center / sheet / drawer / alert。focus trap + ESC + overlay click。
info / success / error。
single-select / multi-select / action menu。
numbered / prev-next。
階層ナビ。
single / stack / with-status。3 サイズ。
hover/focus で表示。max-width 240。
bar / ring / step。