Roadmap

This page lists what petal-elements has done and what it plans to do. Plans can change; open a discussion on GitHub if you need something that is not here.

• Fork of material-web (2026-10) with petal- tags and the petal-elements package. CSS custom properties keep their --md- names.
• Token pipeline: Material Design web tokens v34 → W3C design token (DTCG) files → CSS (tokens/css/), checked against Jetpack Compose Material 3. See Design tokens.
• Core components on the v34 token values: buttons, icon buttons, FAB, checkbox, radio, switch, text fields, chips, progress indicators and tabs. See Token update v0.192 → v34.
• Material 3 Expressive, opt-in: button sizes (xsmall to xlarge), round and square shapes, toggle buttons, shape morphing with spring motion, the expressive motion scheme, button groups and solid FABs. See Material 3 Expressive features.
• Pixel-exact visual regression tests (Playwright) and doc images rendered from the components.

Roughly in this order:

• Move the remaining components (dialog, list, menu, select, slider, ...) to the v34 token values.
• More Expressive components and features, checked against Compose: split button, toolbar, loading indicator, FAB menu, the new FAB sizes, shape morphing for icon buttons.
• Components that are missing, for example navigation bar and rail, top app bar, snackbar, card, badge, tooltip, search, date and time pickers.
• Comparing the renderings with Jetpack Compose Material 3 screenshots.

Expressive components that upstream builds in labs/gb are a reference for this work; we follow upstream and do not duplicate it where it can be reused.