#Plan Step

Plan Step is one observable unit inside a Task Plan. It presents a stable title, optional description, status, and one bounded action.

npm install @a3s-lab/ui@0.4.1

<li class="plan-step" data-state="active" aria-current="step">
  <span data-plan-marker aria-hidden="true">2</span>
  <div data-step-identity><h3>Verify responsive behavior</h3><p data-step-description>...</p></div>
  <span data-plan-step-status>Active</span>
</li>

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

#Usage

<li class="plan-step" data-state="active" aria-current="step">
  <span data-plan-marker aria-hidden="true">2</span>
  <div data-step-identity><h3>Verify responsive behavior</h3><p data-step-description>...</p></div>
  <span data-plan-step-status>Active</span>
</li>

#Parameters

#States and variants

Use blocked when external input or approval can resume the step. Use error when execution failed and recovery is required.

#Accessibility

The marker is decorative when the ordered list already conveys position. Never use color alone for blocked, error, or complete state.