Primitive contract

Progress

Styles native progress semantics and visible labels without adding runtime behavior or implying completion from motion.

Visible determinate or pending progress · @sanchika/primitives

Purpose and semantics

Styles native progress semantics and visible labels without adding runtime behavior or implying completion from motion.

Recommended semantic: Prefer native progress with a visible label and value; consumers provide an equivalent semantic for indeterminate context when needed.

Anatomy

label

Visible process name.

native progress

Determinate value semantics.

value text

Visible numeric or state wording.

Finite variants and important states

Variant · state: determinate, indeterminate, complete, error
Required states: determinate, indeterminate, complete, error
Class hooks: .sk-progress · .sk-progress-indeterminate · .sk-progress-complete · .sk-progress-error · .sk-progress__header · .sk-progress__value

Composed synthetic exemplar

Rendered state matrix

Progress: 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.

determinateThe determinate contract remains visible and inspectable.

3 of 5

indeterminateThe indeterminate contract remains visible and inspectable.

3 of 5

completeCompletion is named in text and does not rely on color.

3 of 5

errorThe failure and recovery path remain visible together.

3 of 5

Accessibility and consumer responsibility

Keyboard and screen reader

Progress itself is not interactive.
Associate visible label
Keep value and text consistent
Do not announce cosmetic animation

Consumer owns

Update native values
Choose truthful pending/error wording
Do not claim completion prematurely

Mobile

Label and value wrap above the full-width meter

Reduced motion and forced colors

No override is required.

Native progress and visible text remain distinguishable

Compact API reference

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