Material Coverage
A source-backed map of Material’s component families to this React/web library, with explicit implementation and platform boundaries.
Reference and meaning of coverage
The official rendered Material Components, Foundations, Styles and Develop indexes were captured on 14 October 2026. The component index lists 36 linked families. This map preserves those names and links each to actual local guidance. It is a coverage reference, not a statement that MobTranslate ships Material’s platform APIs or visual theme.
Shared exports and native web compositions have different API ownership. Every linked topic must still prove decisions, anatomy/specifications, states, behavior, accessibility, complete applicable API, working source, failure/recovery and scoped verification. A mapped link alone is not completion evidence.
All 36 component families
36 Material family links are mapped below. Date/time are explicit native web input patterns; action groups, app bars and collections are checked compositions. The separate spring explorer models a dimensionless response; native Android/iOS picker chrome and a production component spring renderer are not silently advertised as implemented.
| Material family | MobTranslate guidance | Implemented scope and boundary |
|---|---|---|
| Button groups | Open Button groups guidance | Named native command group; use Toolbar or ToggleGroup for their different keyboard/selection models. |
| Buttons | Open Buttons guidance | Exported Button, variants, native form/composition and task lifecycle. |
| Extended FABs | Open Extended FABs guidance | Extended exported FAB with visible label; layout owns safe placement. |
| FAB menu | Open FAB menu guidance | FAB-rendered Menu launcher, real commands and retained creation outcomes. |
| Floating action buttons (FABs) | Open Floating action buttons (FABs) guidance | Exported sizes and in-flow task; no native mobile placement API. |
| Icon buttons | Open Icon buttons guidance | Named exported icon action with tested target size and effects. |
| Segmented buttons | Open Segmented buttons guidance | Exported exclusive/multiple selection; distinguish committed value from focus. |
| Split buttons | Open Split buttons guidance | Primary plus alternative menu; exactly-once local commands and explicit default policy. |
| Date pickers | Open Date pickers guidance | Native civil date/range composition; no custom Material calendar chrome. |
| Time pickers | Open Time pickers guidance | Native civil time and zone validation; no automatic instant booking or dial UI. |
| Loading indicator | Open Loading indicator guidance | Unknown-total CircularProgress with actual pending/outcome text; no Expressive shape morph engine. |
| Progress indicators | Open Progress indicators guidance | Linear/circular exported determinate/unknown-total task progress. |
| Navigation bar | Open Navigation bar guidance | Measured compact workspace destination bar with actual selected destination. |
| Navigation drawer | Open Navigation drawer guidance | Actual destination Drawer with dismissal/focus and retained context. |
| Navigation rail | Open Navigation rail guidance | Actual collapsed/expanded persistent destinations with measured available-space adaptation. |
| Bottom sheets | Open Bottom sheets guidance | Modal bottom Drawer and nonmodal supporting panel with real height choices; no native drag or snap physics. |
| Side sheets | Open Side sheets guidance | Modal side Drawer and a standard logical-trailing support pane with actual primary-content coexistence. |
| App bars | Open App bars guidance | Bounded native sticky header, contextual actions, measured clearance and Back. |
| Badges | Open Badges guidance | Actual variants/count/zero and informative versus decorative state. |
| Cards | Open Cards guidance | Actual collection filtering/sorting/bookmarks/disclosure, plus a separate native whole-card link without nested controls. |
| Carousel | Open Carousel guidance | Native inline scroll/snap, geometry-derived position, explicit navigation and complete list. |
| Checkbox | Open Checkbox guidance | Exported binary/mixed state and actual grouped/registered task behavior. |
| Chips | Open Chips guidance | Explicit command, selection and removal roles with real effects. |
| Dialogs | Open Dialogs guidance | Modal edit, optional retained dirty-draft decision, validation and explicit pending outcomes. |
| Divider | Open Divider guidance | Exported horizontal/vertical semantic or decorative Separator. |
| Lists | Open Lists guidance | Native sequence, informative rows and named actions without invented grid roles. |
| Menus | Open Menus guidance | Exported commands, choices, submenus and installed keyboard/availability behavior. |
| Radio button | Open Radio button guidance | Default and required-empty entry, actual form validation, read-only behavior and independent recovery. |
| Search | Open Search guidance | Public-fixture HTTP search, submitted refinement, retained outcomes, cancellation/supersession and declared lexical matching; use Autocomplete for editable suggestions. |
| Sliders | Open Sliders guidance | Exported scalar/range selection with names, units and keyboard alternatives. |
| Snackbar | Open Snackbar guidance | Exported provider-managed Toast with actual command/recovery, timing and focus. |
| Switch | Open Switch guidance | Exported binary setting with immediate versus submitted state explicitly owned. |
| Tabs | Open Tabs guidance | Exported local panel navigation and retained drafts; focus versus selection distinguished. |
| Text fields | Open Text fields guidance | Exported native Input/Textarea/Field/Form validation and actual entries. |
| Toolbars | Open Toolbars guidance | Exported command model with tested arrow/direction/disabled discovery and effects. |
| Tooltips | Open Tooltips guidance | Exported supplemental hint with real description relationships, hover/focus and dismissal. |
Foundations and styles
| Reference subject | Local coverage and remaining audit |
|---|---|
| Accessibility / Building for all | Accessibility, principles and Inclusive Participation cover semantics, recovery, user/context dimensions, co-design decisions, accessible methods and scoped reporting. A plan template does not establish real participation or qualified language review. |
| Content design | Writing and internationalization cover labels, error/recovery, locale/content language, direction, provenance and review claims. |
| Customizing Material | Theming, Composition and token tools use MobTranslate’s actual CSS. Color schemes now provides pinned SDK generation and seed extraction from an original local image fixture. Device wallpaper access and native Theme Builder integration remain separate. |
| Design tokens | All 318 CSS declarations and TypeScript exports have a shared source/check contract. The 19 component presets have 90 source-bound fields and a real rendered specification inspector. |
| Interaction states / Layout | Authored state, responsive layout, input/gestures and adaptive destination guidance with live examples. |
| Material A–Z | Design Glossary covers every one of the 67 captured Material headings with locally authored definitions, decisions, failures and related guidance, plus 26 local terms. Platform and algorithm boundaries remain explicit. |
| Color / Elevation / Icons | Color roles and SDK scheme/contrast inspection; independent elevation levels/surfaces/layers; original icon/keyline/stroke inspector with explicit Symbol-font boundaries. |
| Motion / Shape / Typography | Duration/easing plus a bounded analytic spring-response explorer; logical corner interpolation and optical geometry; real type tokens and licensed variable-font inspection. Existing component transitions remain duration-based. |
Implementation and platform contracts
- This is a private source package consumed through workspace links, not a published registry installation. See Getting Started for the actual CSS imports and bundler setup.
- The verified stack is React/web DOM and CSS in Next.js. Material documents multiple platforms; a native web date control or CSS sticky header must not be called a native Compose/Flutter component.
- Preserve MobTranslate’s palette, source authority and content-language principles. Material’s taxonomy does not authorize copying a cultural asset or inventing vocabulary.
- React peers and matching installed consumer runtimes are reconciled; UI/styleguide and web typechecks are recorded. Complete API/visual/accessibility/reliability audits remain requirements in STYLEGUIDE-PLAN.md.
Choose the actual platform implementation
The following comparison was checked against the four rendered Material Develop pages on 14 October 2026. Library status, announced features and SDK defaults can change independently of design guidance. Recheck the chosen platform documentation and pinned dependencies before migration; this workspace verifies only the React/web contract.
| Target | Reference implementation/status at capture | Local handoff |
|---|---|---|
| This workspace | Private @mobtranslate/ui React DOM/CSS source package | Use Getting Started, generated API reference and actual component/pattern sources |
| Android Views | MDC-Android guide describes maintenance and a Compose-first direction | Existing XML/View apps need their own theme/dependency migration and regression checks |
| Jetpack Compose | Native Material 3 composables, theming, migration/adaptive resources, WearOS/XR pathways | Select the actual SDK/API version; map state, input, insets and native semantics rather than importing DOM wrappers |
| Flutter | Guide covers original M3 widgets and says Expressive is unavailable in that implementation | Use the installed Flutter API/defaults and widget migration guide; React props/CSS are not Flutter contracts |
| Material Web | Custom HTML elements; captured guide describes maintenance and no M3 Expressive implementation | Treat custom-element properties/events, form behavior and token namespaces as a separate integration |
| Angular Material | The web reference links a separate Angular implementation which can differ | Use that implementation’s actual version/API; a common component name does not prove interchangeability |
React and custom-element ownership
This package exports React components and native/exported compositions. Material Web exports custom elements with their own registration, property/event handling and encapsulated styling. Keep event, ref, form and style ownership explicit when bridging libraries. A JSX tag or an identically named button does not establish the same behavior.
Compare the concrete API before converting a call site: native button type, form names/values, controlled state, disabled/read-only policy, label/description/error links, keyboard operation, portal direction and focus return. Use supported exposed token hooks for an encapsulated component; do not assume an ordinary descendant CSS selector reaches its implementation.
The private workspace’s --color-* roles and component source specifications are not automatic aliases for Material Web’s --md-* namespaces. Carry semantic intent and required foreground/background pairs into a deliberate adapter, then verify actual rendered states. Keep an adapter scoped to its consumer instead of renaming every token globally.
Native defaults, migration and announcement boundaries
Separate design-system concepts from executable SDK defaults. The captured Material Flutter page describes setting useMaterial3 to true as an opt-in step; the current Flutter API page says the flag defaults to true. It also distinguishes constructing ThemeData from copyWith: changing the flag with copyWith does not recompute all associated defaults. Check the installed version and construction path rather than copying the older portal wording into a migration script.
The captured Android Views page describes maintenance and points to Compose-first development. Compose resources cover dependency setup, experimental APIs, theming, M2-to-M3 migration and adaptive sample apps; announcements about upcoming styles/navigation features are not proof that a chosen stable SDK implements them. Check the actual dependency and opt-in requirements.
Native watches and XR need their platform input, dimensions, lifecycle and accessibility APIs. The local Watches/XR chapters supply decision/handoff guidance and bounded web models; they do not establish WearOS/headset execution. Similarly, native dynamic color, motion/shape libraries and pickers require their own platform integration.
Cross-platform handoff and acceptance
- Record the target platform, exact package/SDK versions, source of design guidance and implemented API ownership. Keep announcements, implemented defaults and observed runtime results distinguishable.
- Map semantic roles, type recipes, shape/elevation/motion policy and input/state intent; record unit conversion assumptions rather than equating CSS pixels, rem, dp and sp. Preserve content spelling, source attribution and review/permission ownership.
- Choose one representative real task and verify validation, waiting, cancellation, recovery and the actual saved outcome on the target runtime. Reused vocabulary or a working web prototype is not that native result.
- Exercise labels/names, keyboard/switch/touch input, target spacing, direction, text enlargement, reduced motion, system/light/dark themes and unavailable capabilities. Include portal/native surface lifecycle and focus restoration.
- Stage a scoped adapter or consumer migration with a rollback point; preserve persisted values/preferences and data contracts. Use Composition, Theming, Migration and Contribution as the local web implementation process, and the chosen platform’s resources for native code.
Vocabulary for implementation decisions
| Term | Operational meaning |
|---|---|
| Component / composition | An exported reusable API versus an application-owned arrangement of native/exported parts. |
| Anatomy / token | Rendered parts/relationships versus the actual named CSS value used for presentation. |
| State / outcome | Current availability/value/progress versus a completed task effect in the actual model or persisted system. |
| Focus / selection | The current keyboard destination versus an explicitly committed value or chosen record. |
| Loaded / complete | Data available in this view versus verified completeness over a declared full scope. |
| Source / review / permission | Retrievable evidence, a qualified review event and an authorization decision; none substitutes for the others. |
| Direction / locale / language | Layout reading direction, formatting/interface choice and content-language metadata are independent. |
| Modal / supplemental | A focused task controlling background interaction versus a nonessential supporting disclosure. |
How to verify the full objective
- Follow every local family link and inspect the actual source/API against the public exports. Verify each topic’s task and failure paths rather than counting pages.
- Run checked-source/token freshness, lint/types/build, family browser suites and a complete route/fragment crawl. Inspect actual narrow/theme/direction rendering and native focus movement.
- Recheck the reference index when updating this mapping. Preserve new families as explicit work; do not shrink the comparison to the components that were already implemented.
- Full completion remains unproven until the requirement-by-requirement audit covers patterns, developer compatibility, every exported component and all intended verification gates.