Primitive contract

Stack

Arranges related children in one block-axis flow using gap rather than child margins.

Vertical composition · @sanchika/primitives

Purpose and semantics

Arranges related children in one block-axis flow using gap rather than child margins.

Recommended semantic: Use div, ul, ol, fieldset, section, or another element that matches the child relationship.

Anatomy

root

The vertical formatting context.

items

Direct children kept in logical reading order.

Finite variants and important states

Variant · gap: sm, md, lg
Variant · align: start, center, stretch
Required states: default
Class hooks: .sk-stack · .sk-stack-gap-sm · .sk-stack-gap-md · .sk-stack-gap-lg · .sk-stack-align-start · .sk-stack-align-center · .sk-stack-align-stretch

Composed synthetic exemplar

Rendered state matrix

Stack: 1 required state

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.

…

Accessibility and consumer responsibility

Keyboard and screen reader

Stack must not alter tab order.
Preserve list semantics when children form a list.

Consumer owns

Choose semantic list markup where applicable
Keep children in meaningful source order

Mobile

Remains one-dimensional
Never requires horizontal scrolling

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Stack adds no authored color or boundary.

Compact API reference

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