{#if visibleTasks.length === 0}
No active tasks
{:else}
{#each visibleTasks as task (task.id)}
completeTask(task.id)} aria-label="Complete task" >
{task.text}
toggleExpand(task.id)} aria-label={expandedTaskIds.has(task.id) ? 'Collapse steps' : 'Expand steps'} style="transition: opacity var(--duration-ui)" > {#if expandedTaskIds.has(task.id)}
{:else}
{/if}
deleteTask(task.id)} aria-label="Delete task" > ×
{#if expandedTaskIds.has(task.id)}
{/if}
{/each}
{/if} {#if hasOverflow}
showOverflow = !showOverflow} >
{overflowTasks.length} more in your list
{#if showOverflow}
{#each overflowTasks as task (task.id)}
{task.text}
{/each}
{/if} {/if} {#if activeTasks.length > 0}
{Math.min(activeTasks.length, wipLimit)}/{wipLimit} active
{/if}