Data

Tasks

Step list with a counter, a spinning in-progress item and struck-through completed ones.

data-u="tasks"

Example

2 steps left

Read the project config
Generate the light theme tokens
Generate the dark theme tokens
Publish the component package
Run tests and build

<article class="u-card u-wall" data-wall="tasks">
  <div class="u-tasks" style="padding:var(--s2)" data-u="tasks" data-u-props='{"auto": true}'>
    <div class="u-tasks__head"><svg class="u-tasks__spin" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" opacity=".18"/><path class="u-arc" d="M12 3a9 9 0 0 1 9 9"/></svg><span data-count aria-live="polite">2 steps left</span></div>
    <ul class="u-tasks__list">
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Read the project config</span></li>
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Generate the light theme tokens</span></li>
      <li class="u-task" data-state="done"><span class="u-task__mark"></span><span class="u-task__text">Generate the dark theme tokens</span></li>
      <li class="u-task" data-state="doing"><span class="u-task__mark"></span><span class="u-task__text">Publish the component package</span></li>
      <li class="u-task" data-state="todo"><span class="u-task__mark"></span><span class="u-task__text">Run tests and build</span></li>
    </ul>
  </div>
</article>

Installation

Tasks ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses tasks:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-tasks

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`auto`	boolean	false	Advances on its own: the in-progress step completes and the next one starts. Turns off with reduced motion and off screen.
`every`	number	2600	Advance interval, in ms.

Classes and variants

Class	What it does
`u-tasks`	The host.
`u-tasks__list > li.u-task`	Each step, with `data-state` todo, doing or done.
`u-task__mark`	The marker. The JS draws the three states.
`[data-count]`	Receives `"N steps left"` or `"All done"`.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
`[data-count]`	`aria-live="polite"`	Announces how many are left.
host	`data-complete`	Shows when everything is done.

Clicking an item toggles it between done and pending. Items are li and don't take keyboard focus.