Components
One page per component lives in src/pages/components/<component>.astro. The first set lands in milestone M4.
- Primitives: surface, icon, state layer, focus ring
- Button: variants, sizes, shapes, toggle buttons
- Icon button: variants, sizes, widths, toggles
- Card: filled, elevated, outlined; interactive cards
- Divider: horizontal, inset, vertical
- Loading indicator: indeterminate, determinate, contained
- Navigation bar: short navigation bar; legacy bar (deprecated)
- Navigation rail: wide navigation rail; legacy rail (deprecated)
- Navigation drawer: permanent, dismissible and modal drawers; headlines, badges, dividers
- Navigation suite: bar, rail or expanded rail by window size class; drawer override, show / hide
- Canonical layouts: list-detail, supporting pane, feed; panes by the layout's own width, navigation, drag handle
- Tabs: primary, secondary; fixed, scrollable; text, icon, icon and text, leading icon
- Top app bar: small, center-aligned, medium / large flexible, two-rows; pinned, enter-always and exit-until-collapsed scrolling
- Assist chip: flat, elevated, icons, disabled
- Chips: filter, input and suggestion chips; flat, elevated, expressive; chip sets
- FAB: sizes, color styles, extended FAB; small FAB (deprecated)
- FAB menu: toggle FAB, staggered items, color sets
- Menus: standard, vibrant, segmented, baseline; checkable, selectable, submenus
- Button group: standard, connected; selection, overflow menu
- Split button: variants, sizes XS–XL, trailing menu
- Floating toolbar: horizontal, vertical, with FAB; expand/collapse, exit on scroll
- Docked toolbar: spread, center, space around/evenly; exit on scroll; bottom app bar (deprecated)
- Progress indicators: linear, circular; flat, wavy; determinate, indeterminate
- Search: search bar; full-screen, contained, docked and docked-with-gap views; AppBarWithSearch
- Checkbox: unchecked, checked, indeterminate; error, disabled; tri-state parent
- Radio button: selected, unselected, disabled; radio groups, vertical and horizontal
- Switch: checked, unchecked, disabled; icons in the handle; press and toggle motion
- Slider: standard, range, centered, vertical; sizes XS–XL; stops, inset icon, value indicator
- Text fields: filled, outlined; label float with no JavaScript; icons, prefix / suffix, supporting text, counter, error, multi-line
- Lists: one to three lines, segmented, interactive selection (listbox, checkbox / radio / switch indicators), dragged; legacy list item (deprecated)