stylish
Draws the Material 3 state-layer overlay on top of this component's content.
Implements the M3 state-layer pattern for custom components: while the interactionSource reports a hover, a translucent onSurface overlay of 4 % alpha is drawn over the content; while it reports a press, the overlay darkens to 8 % alpha. A pressed state always wins over a hovered state. When neither state is active, nothing is drawn and the modifier has no visual effect.
The overlay is drawn with drawWithContent, so it renders on top of the component's content. The overlay follows shape (which should match the container's shape), so rounded or circular containers get a matching overlay without clipping the container or its shadow.
The overlay color is derived from MaterialTheme.colorScheme.onSurface, matching the Material 3 state-layer specification. This helper is intended for custom Surface-based Stylish components (such as the Fab and chip families); components that wrap Material 3 widgets already receive the M3 ripple and state layer internally and should not add this modifier again.
Parameters
The source to observe for hover and press interactions. Typically the same source hoisted through the component's interactionSource parameter (or an internally remembered one).
The shape the overlay is drawn with. Defaults to RectangleShape; pass the container's shape (e.g. CircleShape) for non-rectangular surfaces.