Material → Lozenge cheat sheet

Every component in Google's Material / Flutter widget catalog, mapped to its Lozenge equivalent. Also available to agents as a section of llms.txt; source of truth is tokens/material-map.json.

Actions

Material	Flutter widget	Lozenge	Docs
Common buttons (filled / tonal / text)	FilledButton · ElevatedButton · TextButton	`.btn-primary · .btn · .btn-subtle / .btn-link` Outlined buttons are deliberately not in the Lozenge idiom — use .btn.	button
FAB / Extended FAB	FloatingActionButton(.extended)	`.fab · .fab-small · .fab-extended · .fab-fixed`	fab
Icon buttons	IconButton	`.btn.btn-icon (+ .btn-compact)`	button
Segmented buttons	SegmentedButton	`fieldset.segmented (+ -bold / -compact)` Radio-backed; arrow keys come from the platform.	segmented

Communication

Material	Flutter widget	Lozenge	Docs
Badges	Badge	`.badge (+ -primary/-important/-added/-removed); status pills are .lozenge`	badge
Linear progress	LinearProgressIndicator	`.progress (+ .progress-indeterminate, .progress-segmented)`	progress
Circular progress	CircularProgressIndicator	`.ring (determinate, --value) · .spinner (indeterminate)`	ring
Snackbar	SnackBar	`.snackbar (+ -fixed); richer toasts are .flag`	snackbar
Tooltips	Tooltip	`[data-tooltip] + .tooltip-bottom/-left/-right` Rich tooltips: compose a popover panel on the dropdown-menu skin.	tooltip

Containment

Material	Flutter widget	Lozenge	Docs
Cards (elevated / filled / outlined)	Card	`.card · .card + .bg-sunken · .card + .border`	card
Carousel	CarouselView	`.carousel (+ .carousel-hero) — scroll-snap, zero JS`	carousel
Dialogs	AlertDialog / Dialog.fullscreen	`dialog.modal (+ sizes) · dialog.modal-fullscreen` Native <dialog>: focus trap, Esc, ::backdrop from the platform.	sheet
Bottom sheets	showModalBottomSheet	`dialog.sheet (+ .sheet-handle, -tall)`	sheet
Side sheets	side sheet pattern	`dialog.drawer (+ -start / -wide)`	drawer
Divider	Divider	`hr, or .border-top / .border-bottom utilities`	—
Lists	ListView + ListTile	`ul.list > .list-item (leading/content/trailing; -divided, -compact)`	list
Expansion panels	ExpansionTile / ExpansionPanelList	`.accordion > details.accordion-panel (name attr = exclusive)`	accordion
Search	SearchBar / SearchAnchor	`.search-field (+ kbd hint); full view: compose dialog.modal-fullscreen`	search

Navigation

Material	Flutter widget	Lozenge	Docs
Top app bar	AppBar	`.navbar (sticky, glass; + .navbar-primary)`	navbar
Bottom app bar	BottomAppBar	`compose .bottom-nav + .fab-fixed`	bottom-nav
Navigation bar	NavigationBar	`.bottom-nav (+ -fixed, pill indicators)`	bottom-nav
Navigation rail	NavigationRail	`.rail (+ .rail-fab, .rail-bottom)`	rail
Navigation drawer	NavigationDrawer / Drawer	`.sidebar (persistent) · dialog.drawer (modal)`	sidebar
Tabs	TabBar	`.tabs/.tab (app-driven) · .tabset (radios + :has, zero JS)`	tabs
Stepper	Stepper	`ol.stepper (vertical; class or <details> flavor) · .tracker (horizontal)`	stepper

Selection & inputs

Material	Flutter widget	Lozenge	Docs
Checkbox	Checkbox	`.form-check-input`	forms
Radio button	Radio	`.form-check-input[type=radio]`	forms
Switch	Switch	`label.toggle (+ -lg)`	forms
Chips (assist / filter / input / choice)	ActionChip / FilterChip / InputChip / ChoiceChip	`.chip · .chip-filter (checkbox) · .chip + .chip-remove · .chip-choice (radio)`	chips
Menus	MenuAnchor / PopupMenuButton	`popover .dropdown-menu recipe; desktop cascades via .menubar`	dropdown
Exposed dropdown	DropdownMenu	`select.select (appearance: base-select ::picker) → .form-select fallback`	listbox
Sliders	Slider / RangeSlider	`input[type=range].slider (live zero-JS fill; + -compact, -thin) · .range-slider (dual-thumb)`	slider
Text fields	TextField	`.form-control (+ label/helper/.is-invalid; -compact/-subtle), textarea`	forms
Date pickers	showDatePicker	`.calendar grid (presentational; compose in dialog.modal) · native .date-field`	calendar
Time pickers	showTimePicker	`native input[type=time].time-field`	datefield
Autocomplete	Autocomplete	`.form-control + native <datalist>; richer composes popover + app state`	—

Out of scope (gesture/state-bound — pair Lozenge skins with app JS)

Material	Flutter widget	Lozenge	Docs
Dismissible / swipe actions	Dismissible	`—` Gesture recognition can't be honest zero-JS.	—
Pull to refresh	RefreshIndicator	`—`	—
Reorderable lists / drag-and-drop	ReorderableListView	`.board/.issue-card are drag-ready skins; DnD state is app-side`	board
Hero / shared-element transitions	Hero	`View Transitions API recipe territory (future)`	—

Lozenge-only (no Material counterpart)

Material	Flutter widget	Lozenge	Docs
—	—	`.lozenge status pills · .issue-card/.board · .timeline roadmap · .backlog/.sprint-header · .comment-thread · .empty-state · .skeleton · .flag` The Jira-shaped surface Material never had.	lozenge