Skip to main content
SanchikaEvidence contracts
Primary navigation
Search Source

Primitive contract

Stepper

Presents process order and current/completed/upcoming state without implying navigation or beginning a product pattern.

Ordered process state · @sanchika/primitives

Purpose and semantics

Presents process order and current/completed/upcoming state without implying navigation or beginning a product pattern.

Recommended semantic: Use an ordered list; expose the current step with aria-current=step on the appropriate item or label.

Anatomy

ordered list

Process order.

step

One process stage.

marker

Visible number or completion symbol.

label

Visible step state and name.

Finite variants and important states

Variant · orientation
horizontal, vertical
Required states
complete, current, upcoming, blocked
Class hooks
.sk-stepper · .sk-stepper__step · .sk-stepper__marker · .sk-stepper__label

Composed synthetic exemplar

Rendered state matrix

Stepper: 4 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

completeCompletion is named in text and does not rely on color.
  1. Source received — complete
  2. CA review — current
  3. Decision — upcoming
currentThe current contract remains visible and inspectable.
  1. Source received — complete
  2. CA review — current
  3. Decision — upcoming
upcomingThe upcoming contract remains visible and inspectable.
  1. Source received — complete
  2. CA review — current
  3. Decision — upcoming
blockedProgress stops and the named dependency stays inspectable.
  1. Source received — complete
  2. CA review — current
  3. Decision — upcoming

Accessibility and consumer responsibility

Keyboard and screen reader
  • Static steps are not focusable
  • Navigation exists only when consumers provide real links
  • Source order is process order
  • Expose current step
  • State is present in text
Consumer owns
  • Own process meaning
  • Provide navigation only when real
  • Keep state labels visible
Mobile
  • Horizontal composition resolves to readable vertical flow without source reordering
Reduced motion and forced colors

No override is required.

  • Markers, connectors, and state text retain system-color boundaries

Compact API reference

Package
@sanchika/primitives
CSS
@sanchika/primitives/styles.css
Contract
primitiveSpecs.find((contract) => contract.name === "Stepper")
Primary class
.sk-stepper