Primitives
Surface, Icon, state layer and focus ring (COMPONENT_SPEC §39). Every component builds on these; none re-implements its own state layer.
Surface
Tonal containers (no surface tint) and the six elevation levels.
surfacecontainer-lowestcontainer-lowcontainercontainer-highcontainer-highest
level0level1level2level3level4level5
Icon
<m3e-icon>, React <Icon> and.m3e-icon render the same DOM. Rows: default, fill, weight 700, grade −25 with optical size 20.
State layer and focus ring
Hover, keyboard focus (Tab) and press the tiles. The ripple grows from the press point; the focus ring only appears for keyboard focus.
Ripple for plain HTML
Plain-HTML components get their hover, focus and pressed overlays from m3e-css alone; the ripple needs JS. import '@kyralabs/m3e-elements/ripple.js' adds it to every button, icon button, assist chip, .m3e-state-layer, interactive card (pressed through .m3e-card__action) and navigation item (drawn on its indicator) in the document, current and future, through one set of delegated listeners. Hosts that m3e-react or attachRipple already drive carry data-ripple and are skipped. attachAutoRipple(root, signal) does the same within one root; this demo uses it.
Outlined card
The ripple grows on the card.