Stylish
A vertically connected column of selectable chips with animated selection-state color transitions, suited for sidebar filters or vertically stacked category selectors.
This is the Finish-layer component: it supplies the Stylish chip rendering (DefaultStylishConnectedChip) to the headless Structure layout ConnectedChipColumn, which owns arrangement and connection geometry. Outline edges and corner radii are computed automatically from each item's index so that the first chip rounds only its top corners, the last chip rounds only its bottom corners, and middle chips have square corners. Every chip fills the full available width. Tapping an actionable chip triggers a haptic feedback pulse and animates the container/content colors over 180 ms. Chips are assigned Role.Tab semantics with the selected state reflected from StylishConnectedChipItem.selected. Pass a custom chip to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedChipItem data objects that describe each chip's label, selection state, click action, and optional leading/trailing slot content.
The vertical gap between adjacent chips. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
Maximum number of lines for the chip label text. Defaults to 1.
The TextOverflow strategy for the chip label when it exceeds labelMaxLines. Defaults to TextOverflow.Ellipsis.
The TextStyle applied to each chip's label. Defaults to MaterialTheme.typography.labelLarge.
The background color of a selected chip. Defaults to MaterialTheme.colorScheme.primary.
The content color of a selected chip. Defaults to MaterialTheme.colorScheme.onPrimary.
The background color of an unselected chip. Defaults to MaterialTheme.stylishComponentColors.groupedContainer.
The content color of an unselected chip. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.
The inner padding of each chip. Defaults to 14 dp horizontal and 10 dp vertical.
The horizontal gap between the leading slot, label, and trailing slot inside each chip. Defaults to 6 dp.
The MutableInteractionSource forwarded to each actionable chip to observe press/hover/focus interactions for the state layer. When null, each chip remembers its own. Pass a shared source to observe group-level interaction, e.g. to trigger a state update from a parent.
A composable lambda that renders a single chip. Receives the item data, a modifier (including fill-max-width), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedChip, dressed in the Stylish look with the label, color, and padding parameters above.