Primitive contract

Divider

Marks a meaningful horizontal separation with border tokens and native semantics.

Thematic or structural separator · @sanchika/primitives

Purpose and semantics

Marks a meaningful horizontal separation with border tokens and native semantics.

Recommended semantic: Prefer hr for thematic separation; use role="separator" only when that programmatic meaning is correct.

Anatomy

root

The native or explicitly semantic separator.

Finite variants and important states

Required states: default, forced-colors
Class hooks: .sk-divider

Composed synthetic exemplar

Rendered state matrix

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

forced colorsSystem colors retain boundaries and focus semantics.

Accessibility and consumer responsibility

Keyboard and screen reader

Divider is never keyboard focusable.
Use hr or role=separator only for meaningful separation.

Consumer owns

Decide whether the break is thematic
Avoid decorative overuse

Mobile

Spans the available inline size without overflow.

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

The boundary remains visible with CanvasText.

Compact API reference

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