Atoms rendered inside dropdown panels — 1:1 with CloposDS.jsx (SelItem · CheckItem ·
CheckOptItem · DropdownGroup row). Sizes 40 · 44 · 48 (CheckItem: 48 · 52). All colours/space/type from design tokens.
The expandable group and the panel are molecules/organisms assembled from these atoms next (Select menu).
SelItem
single-select row · grouped by type · each state labelled on the left
CheckOptItem · dropdown menu
menu option · control leading · hover fills · selected = checked icon · multi · single · dropdown · dot
CheckItem · select modal · POS
POS-specific · 2 types (single / multi) × description × badge · control leading · pick a size below · also in POS design system
DropdownGroup row (atom)
atomic rows — parent · child · nested header. The assembled expandable group is a molecule (built in the Select menu). Indent = 12 + level×24px.