#Task Plan

Task Plan exposes a bounded sequence of work without turning internal reasoning into interface copy. The host owns plan creation, step transitions, persistence, and cancellation.

npm install @a3s-lab/ui

<section class="task-plan" data-state="active" data-variant="plain">
  <header>
    <h2>Execution plan</h2>
    <span data-plan-status>In progress</span>
  </header>
  <ol>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
</section>

import "@a3s-lab/ui/a3s.css";

#Usage

<section class="task-plan" data-state="active" aria-labelledby="plan-title">
  <header>
    <h2 id="plan-title">Release plan</h2>
    ...
  </header>
  <ol>
    <li class="plan-step" data-state="complete">...</li>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
  <footer>...</footer>
</section>

#Parameters

#States and variants

Keep completed work visible and preserve the active step when execution pauses. An error belongs to the affected Plan Step unless the entire plan cannot continue. Use data-variant="plain" only when a parent surface already owns the boundary; it removes the Task Plan border and inline padding without changing step semantics.

<section class="task-plan" data-state="active" data-variant="plain">
  <header>
    <h2>Execution plan</h2>
    <span data-plan-status>In progress</span>
  </header>
  <ol>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
</section>

#Accessibility

Name the section with a heading. Use aria-current="step" once. Progress text must remain available when a visual progressbar is omitted.