NEXDATAFORGE / VISUAL FOUNDATION
Overlay Board
Design Language: reference document →
Principle
Production overlays focus attention while preserving user control. Dialog, Drawer, and Sheet share one modal accessibility contract; Toast provides non-blocking feedback without moving focus.
Dialog, drawer, sheet, and toast
Component v1.0Toast는 focus를 이동하지 않으며 최대 3개만 동시에 표시됩니다. 추가 항목은 queue에서 대기합니다.
Keyboard contract
Component v1.0Open a surface, cycle with Tab and Shift+Tab, close with Escape, and confirm that focus returns to its trigger. Protected confirmation ignores backdrop interaction.
Accessibility Notes
Component v1.0Every modal has a labelled title, optional description, explicit close action, background interaction protection, visible focus, and reduced-motion/forced-colors support.
Visual Samples
Foundation tokensUsage
Dialog · Drawer · Bottom Sheet · ToastGood / Avoid
의미와 상태를 분명히 하고, 실제 행동과 연결합니다.
장식만을 위해 강조하거나 색·크기만으로 상태를 전달하지 않습니다.
Accessibility
Keyboard focus, 충분한 대비, semantic HTML, 명확한 label, 44px 터치 영역과 320px 화면을 확인합니다.