Primitive contract

InlineStatus

Pairs a marker and visible state text using package status triads without replacing Badge or adding implicit live-region behavior.

Compact visible state with optional source metadata · @sanchika/primitives

Purpose and semantics

Pairs a marker and visible state text using package status triads without replacing Badge or adding implicit live-region behavior.

Recommended semantic: Use a span, p, or status-bearing element appropriate to context; add role=status only for a genuine dynamic update.

Anatomy

marker

Visible non-color cue.

text

Understandable state wording.

metadata

Optional source or time.

Finite variants and important states

Variant · tone: neutral, success, warning, danger, info
Required states: default, with-metadata, forced-colors
Class hooks: .sk-inline-status · .sk-inline-status__marker · .sk-inline-status__meta

Composed synthetic exemplar

Rendered state matrix

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

Source review pending

with metadataThe with metadata contract remains visible and inspectable.

Source review pending

forced colorsSystem colors retain boundaries and focus semantics.

Source review pending

Accessibility and consumer responsibility

Keyboard and screen reader

Static status is not focusable.
Visible text remains understandable when marker is hidden
Consumer adds live semantics only for dynamic updates

Consumer owns

Supply visible wording
Choose live semantics only when warranted

Mobile

Wrap text and metadata without clipping

Reduced motion and forced colors

Visible wording, marker, and boundary remain without animation.

CanvasText boundary and visible wording remain

Compact API reference

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