Element: #430 Sortable list (foundation/drag-and-drop) What it shows: A checklist whose rows reorder by dragging a grip, by touch press-and-hold, or with the keyboard (Space, arrows, Enter). When to use: Any short ordered list the user curates: checklists, playlists, priorities, form field order. Spec: - `const dnd = useDnd();` once per component; `{@attach dnd.sortable(() => ({` on the `ul` with `handle: '.sl__grip'`, `getItems` and `onDrop` - Each `li` carries `data-dnd-item={task.id}`; the grip `button` has `aria-describedby={dnd.instructionsId}` and an `aria-label` naming the task - `onDrop` commits the move with `applyMove({ list: tasks }, e, (t) => t.id).list`; nothing re-renders while the pointer moves - `` renders the keyboard instructions (`dnd.instructionsId`) and the drag styles once; every step is announced to screen readers Names: Sortable list | Drag to reorder | Reorderable list | Lista ordenável | Lista reordenable Tags: drag, drop, sortable, reorder, list, keyboard Needs: @codeatlasdev/ui@4.6.0 Components: DndLayer Live demo: https://ui.codeatlas.com.br/docs/foundation/drag-and-drop#sortable-list

({ id: 'list', label: 'Release checklist', handle: '.sl__grip', getItems: () => tasks.map((t) => t.id), getLabel: (id) => tasks.find((t) => t.id === id)?.title ?? id, onDrop }))} > {#each tasks as task (task.id)}
• {task.title}
{/each}