Primitive contract

Text

Applies evidence-backed display, heading, body, lead, caption, eyebrow, data, or mono presentation without choosing document semantics for the consumer.

Semantic presentation roles · @sanchika/primitives

Purpose and semantics

Applies evidence-backed display, heading, body, lead, caption, eyebrow, data, or mono presentation without choosing document semantics for the consumer.

Recommended semantic: Choose h1-h6, p, span, data, code, time, or another correct element; the class changes presentation only.

Anatomy

text

Consumer-authored content on the correct semantic element.

Finite variants and important states

Variant · role: display, heading, body, lead, caption, eyebrow, data, mono
Required states: default, long-content
Class hooks: .sk-text · .sk-text-display · .sk-text-heading · .sk-text-body · .sk-text-lead · .sk-text-caption · .sk-text-eyebrow · .sk-text-data · .sk-text-mono

Composed synthetic exemplar

Rendered state matrix

Text: 2 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.

Source evidence

long contentThe long content contract remains visible and inspectable.

Source evidence

Accessibility and consumer responsibility

Keyboard and screen reader

Text roles add no keyboard behavior.
Preserve semantic headings and data relationships
Do not communicate hierarchy through visual size alone

Consumer owns

Choose semantic HTML
Provide correct heading order
Avoid display roles in dense controls
Apply lang where pronunciation or script requires it

Mobile

Long words and identifiers wrap
Display and heading roles remain within the available inline size

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Text inherits system-adjusted foreground unless a semantic parent supplies another system color.

Compact API reference

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