Skip to main content
SanchikaEvidence contracts
Primary navigation
Search Source

Primitive contract

Stat

Presents a value with optional visible-direction delta, source/time metadata, and context without a chart or unsupported KPI certainty.

Labelled operational value · @sanchika/primitives

Purpose and semantics

Presents a value with optional visible-direction delta, source/time metadata, and context without a chart or unsupported KPI certainty.

Recommended semantic: Use a description list or labelled figure-like group so the label clearly associates with the value.

Anatomy

label

Meaning of value.

value

Formatted operational value.

delta

Optional visible direction and amount.

metadata

Optional source or time.

explanation

Optional uncertainty or context.

Finite variants and important states

Variant · alignment
start, end
Required states
default, with-delta, with-source
Class hooks
.sk-stat · .sk-stat__label · .sk-stat__value · .sk-stat__delta · .sk-stat__meta

Composed synthetic exemplar

Rendered state matrix

Stat: 3 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.

defaultSettled and available for its documented job.
Synthetic amount
₹12,34,567.00
Increase 2.4%
with deltaThe with delta contract remains visible and inspectable.
Synthetic amount
₹12,34,567.00
Increase 2.4%
with sourceThe with source contract remains visible and inspectable.
Synthetic amount
₹12,34,567.00
Increase 2.4%

Accessibility and consumer responsibility

Keyboard and screen reader
  • Static Stat is not focusable.
  • Label precedes or associates with value
  • Delta direction is spoken in text
Consumer owns
  • Use documented formatters
  • Source claims
  • Provide visible direction wording
Mobile
  • Long values wrap without clipping
Reduced motion and forced colors

No override is required.

  • Value, delta wording, and boundary remain readable

Compact API reference

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