Skip to document

FRAMEWORK / DOCUMENTATION

Paper coverage · Runtime 2.1

The original 19-board foundation remains unchanged. The separate runtime-extension page adds nine editable boards, for 28 current reference boards across two pages. Exact extension exports include their named states and local PNG/JSX files.

All 34 coded families now have a static visual reference. This is family-level coverage, not 95 matching static specimens. The browser explorer owns working interaction, all 95 selectable specimens, hover/focus, keyboard behavior and asynchronous outcomes. Paper contains representative states and contracts. Motion boards are static stories; animation playback is in the Motion Lab.

Browser familyPaper referenceDrawn coveragePage
ButtonActions + Runtime controlsDefault, secondary, loading and interaction geometryOpen
Text fieldFields + Runtime controlsField anatomy and validationOpen
TextareaFields + Runtime controlsMultiline field geometryOpen
CheckboxChoice & selection + Runtime controlsChoice and mixed selection referenceOpen
Radio groupChoice & selection + Runtime controlsNative choice geometryOpen
SwitchRuntime controlsOff/on/focus geometryOpen
SliderRuntime controlsRange anatomy and focusOpen
Single selectCustom select / implementation statesCustom popup and statesOpen
Searchable comboboxSearchable comboboxCommitted, searching, no matches, required errorOpen
MultiselectMultiselectEmpty, selected chips, open choicesOpen
Date pickerCalendar / Date pickerValue, validation, calendar, today/selectedOpen
File uploadFile uploadIdle, selected, validation, disabledOpen
TabsNavigationNavigation patternOpen
Segmented controlNavigationGrouped navigation choicesOpen
AccordionAccordionCollapsed, expanded, focusOpen
BreadcrumbsNavigationPath navigationOpen
PaginationNavigationCollection navigationOpen
SidebarNavigation + desktop/mobile templatesExpanded and responsive navigationOpen
Action menuNavigation / Overlays & feedbackAnchored actionsOpen
DialogOverlays & feedbackModal surfaceOpen
DrawerOverlays & feedbackContextual side surfaceOpen
PopoverOverlays & feedbackAnchored surfaceOpen
TooltipOverlays & feedbackExplanatory labelOpen
AlertOverlays & feedbackInline feedbackOpen
Toast & undoOverlays & feedbackTransient feedbackOpen
Progress & spinnerRuntime controls / Overlays & feedbackProgress anatomyOpen
SkeletonContent surfaces / LoadingDecorative loading and stable layoutOpen
CardContent surfaces / LoadingStandard and featured surfacesOpen
BadgeContent surfaces / LoadingStatus and category labelOpen
AvatarContent surfaces / LoadingInitials fallbackOpen
TableTables & collections + Container-responsive collectionDesktop, stacked and compact rowsOpen
Empty stateTask patternsRecovery and task contextOpen
StepperWorkflow stepperCurrent, completed, attention requiredOpen
Chart & data alternativeData visualizationData marks and figuresOpen

The nine extension boards are numbered 15–23. The foundation also has 6B/6C implementation boards and several template variants; board numbers are chapter labels, not a count. Badge imagery, every avatar image/error variant, every validation message and all runtime transitions are not separately drawn. Consult the actual specimen before using a state not represented in Paper.

The 12 playable studies include four workflows and eight component studies. Their illustrative scenes explain motion roles and link to working semantic components. They do not imply identical animation has been added to every runtime primitive.