Component Set Mapping

Use this matrix to mirror the documented ANVIL components into Figma component sets. Keep naming and axes stable to avoid MCP import drift.

Pattern	Component / Variant / Size / State
Required axes	Variant + Size + State
Optional axes	Icon, Tone, Density

Component Mapping Table

All rows below are populated from documented ANVIL components and states. Component styling is expected to consume semantic tokens only.

Component	Variant list	Size list	State list
Button	primary, secondary, outline, ghost, icon-leading, icon-trailing, icon-only	sm, md, lg	default, hover, active, focus-visible, disabled
Input	text, input-with-icon-left, input-with-icon-right, input-group	md	default, focus, error, disabled
Select	closed, open-menu, custom-trigger, native	md	default, hover-option, selected-option, focus, disabled
Textarea	default	md	default, focus, error, disabled
Badge	primary, secondary, outline, subtle, success, warning, error, info, selected	sm, md, lg	default, selected
Chip (removable)	removable	sm, md, lg	default, hover-remove, focus-remove
Avatar	image, initials, icon, status-online, status-away, status-offline	sm, md, lg, xl	default
Card	default, elevated, compact, composed	default, compact	default, hover (elevated)
Alert	error, success, warning, info	md	default
Toast	success, error, warning, dismissible	md	default, focus-close, hover-close
Modal / Dialog	default, destructive confirmation	max-width semantic size	open, focus-trap, close, primary-cta, secondary-cta
Drawer / Sheet	bottom-sheet, side-drawer	full-width bottom, semantic side width	open, close, focus-visible
Checkbox	checkbox	control	default, checked, focus-visible, disabled
Radio	radio	control	default, selected, focus-visible, disabled
Switch	switch	touch	off, on, focus-visible, disabled
Slider	range-input	touch	default, focus, disabled
Progress	progressbar	track	25, 50, 75, 100
Tabs	tab item, tab panel	md	default, hover, focus, selected
Breadcrumb	link, current, chevron separator	md	default, hover-link, focus-link, current
Pagination	previous, next, page-number, current-page	sm	default, hover, focus, disabled, current
Stepper	pending, current, complete	md	default, current-step, complete-step
Bottom Navigation	item, current item	touch	default, hover, focus-visible, current
Calendar	day-default, day-hover, day-focus, day-today, day-selected, day-disabled, weekday, month-nav	day-cell touch	default, hover, focus-visible, today, selected, disabled
Skeleton Loader	line, title, avatar, media-rect	tokenized semantic sizes	loading
Grid	grid-1, grid-2, grid-3	responsive columns	default
Section	section block	default	default
Stack / Inline	stack-sm, stack-default, stack-lg, inline-sm, inline-default, inline-lg	semantic gap scale	default