{#each activeItems as item (item.id)}
toggleItem(item.id)} class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]" data-testid="checklist-checkbox" />
updateText(item.id, (e.target as HTMLInputElement).value)} onkeydown={(e) => handleKeydown(e, item.id)} class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}" placeholder="List item" data-testid="checklist-input" />
removeItem(item.id)} class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100" aria-label="Remove item" data-testid="checklist-remove" >
{/each}
addItem(items.length - 1)} class="flex items-center gap-2 text-sm text-[var(--text-muted)] hover:text-[var(--text)]" data-testid="checklist-add" >
Add item
{#if doneCount > 0}
(doneExpanded = !doneExpanded)} class="flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text)]" data-testid="checklist-toggle-done" >
{doneCount} done
{#if doneExpanded}
{#each doneItems as item (item.id)}
toggleItem(item.id)} class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]" data-testid="checklist-done-checkbox" />
{item.text}
removeItem(item.id)} class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100" aria-label="Remove item" data-testid="checklist-done-remove" >
{/each}
{/if}
{/if}