Chips

Filter chips (m3e-css)

A <label class="m3e-filter-chip"> around a native checkbox (.m3e-filter-chip__input; Compose's Role.Checkbox), the __leading slot with the check icon and the __label. Space toggles it with no JavaScript, and the check expands in when it is selected. An icon in the leading slot shows while unselected (the check replaces it). Hovering a flat chip raises it to Level1, selected or not, as Compose's filterChipElevation. With --expressive a chip opts into Compose's shapes overload: 12dp corners, full when selected and 8dp while pressed, morphing on the fast spatial spring; tonal colors and 4dp spacing next to icons.

Input chips (<m3e-chip-set>)

Input chips are rows of a grid. <m3e-chip-set> renders the .m3e-chip-set around its chips and wires them as React Aria's TagGroup does: one tab stop, arrow keys between the chips, and Backspace or Delete on a focused chip (or its remove button, labelled "Remove name") emits remove; unless canceled, the chip goes and the focus moves to the next one. An avatar (.m3e-input-chip__avatar: an image or content) takes precedence over a leading icon.

Removed: none.

Suggestion chips (m3e-css)

Buttons (or links) like the assist chip, with one optional icon before the label; the label is on-surface-variant.

Chip sets

.m3e-chip-set wraps chips onto 48dp rows, 8dp apart (Compose's ChipGroupReflowSample); --single-line (the single-line attribute) keeps one scrolling row (ChipGroupSingleLineSample). In <m3e-chip-set> the set is one tab stop with arrow keys between its chips.

React

<FilterChip variant isExpressive isSelected defaultSelected onChange leadingIcon trailingIcon isDisabled name value> (React Aria useCheckbox), <InputChipGroup onRemove selectionMode isExpressive> with <InputChip id avatar leadingIcon isDisabled> children (React Aria useTagGroup), <SuggestionChip variant icon onPress href> and <ChipSet singleLine>; the same DOM as the markup above.