{# Each task: <li class="ui-check-item"><input class="ui-checkbox" type="checkbox" id="…" name="done[]" value="…"><div class="ui-check-main"><label class="ui-check-text" for="…">Task</label><div class="ui-check-meta">owner, due date (<span data-overdue> when late), status badge</div></div></li> #}
<.checklist label="Launch tasks">
<li class="ui-check-item"><input class="ui-checkbox" type="checkbox" id="task_1" name="done[]" value="1" checked><div class="ui-check-main"><label class="ui-check-text" for="task_1">Update the pricing page copy</label><div class="ui-check-meta"><span><.avatar name="Ada Lovelace" size="sm" />Ada Lovelace</span><span><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>Done 7 Oct by Ada Lovelace</span></div></div></li>
<li class="ui-check-item"><input class="ui-checkbox" type="checkbox" id="task_2" name="done[]" value="2"><div class="ui-check-main"><label class="ui-check-text" for="task_2">Send the launch email to beta customers</label><div class="ui-check-meta"><span><.avatar name="Grace Hopper" size="sm" />Grace Hopper</span><span data-overdue><.icon name="calendar" />Due 6 Oct</span><.badge variant="destructive">Overdue</.badge></div></div></li>
<li class="ui-check-item"><input class="ui-checkbox" type="checkbox" id="task_3" name="done[]" value="3"><div class="ui-check-main"><label class="ui-check-text" for="task_3">Record the product walkthrough</label><div class="ui-check-meta"><span><.avatar name="Katherine Johnson" size="sm" />Katherine Johnson</span><span><.icon name="calendar" />Due 14 Oct</span><.badge variant="info">In progress</.badge></div></div></li>
</.checklist>