Kanban Column

Accessibility

• The column is a section named by its title.
• With list, the cards form a list named by the title, so each child should be a list item.
• Collapse lives in the column menu, and Expand is a labelled button with an expanded state.
• The count reads as a number of cards.

Motion

• The column fades and rises 8 over 400 ms, unless appear is false.
• The drop slot fades in over 120 ms.
• With reduced motion, only state changes remain.

Responsive behavior

• 288 wide on Web and full width on Mobile.

Performance

• A collapsed column unmounts its cards and keeps only the header.
• The column and the drop slot each animate once, with the slot fading in over 120 ms.

• Import KanbanColumn from @/components/fetaui/kanban-column. It composes Button, Icon Button and Dropdown Menu, and takes Kanban Cards as children.
• It has no drag. Set dropIndex and over yourself from your drag code, or use Kanban for a working board. data-* props land on the section, so drag code can find it.
• count is yours and the empty state keys off it: it shows when count is 0 and dropIndex is unset.
• Rows in menu are added after Collapse, and menu={false} drops the menu. addPlacement picks which Add buttons show, icon replaces the status dot, and list makes the cards a named list. Use collapsed with onCollapsedChange to control it.