Primitive contract

Split

Pairs a primary region with supporting context using evidence-backed ratios and a deliberate narrow-screen stack.

Asymmetrical primary and supporting composition · @sanchika/primitives

Purpose and semantics

Pairs a primary region with supporting context using evidence-backed ratios and a deliberate narrow-screen stack.

Recommended semantic: Use a neutral wrapper with meaningful child regions; use section, article, or aside for slots only when their semantics are real.

Anatomy

primary

The dominant task or proof region.

supporting

Context, evidence, explanation, or secondary action.

Finite variants and important states

Variant · ratio: balanced, primary, supporting
Variant · gap: sm, md, lg
Required states: default, stacked
Class hooks: .sk-split · .sk-split-ratio-balanced · .sk-split-ratio-primary · .sk-split-ratio-supporting · .sk-split-primary · .sk-split-supporting · .sk-split-gap-sm · .sk-split-gap-md · .sk-split-gap-lg

Composed synthetic exemplar

Rendered state matrix

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

…

stackedThe stacked contract remains visible and inspectable.

…

Accessibility and consumer responsibility

Keyboard and screen reader

Split must not change tab order or use CSS ordering that contradicts the DOM.
Primary content must precede supporting content when that is the meaningful reading order.

Consumer owns

Choose semantic child regions
Keep source order logical
Do not imply Split handles application behavior

Mobile

Stacks to one column
Retains logical source order
Avoids horizontal overflow

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Split adds no authored color or boundary.

Compact API reference

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