Primitive contract

Cluster

Wraps actions, metadata, and compact facts without turning them into decorative pills.

Wrapping inline composition · @sanchika/primitives

Purpose and semantics

Wraps actions, metadata, and compact facts without turning them into decorative pills.

Recommended semantic: Use div, nav, ul, or another element that represents the grouped content.

Anatomy

root

The wrapping inline formatting context.

items

Related children that may wrap to new lines.

Finite variants and important states

Variant · gap: sm, md, lg
Variant · align: start, center, end
Variant · justify: start, between, end
Required states: default
Class hooks: .sk-cluster · .sk-cluster-gap-sm · .sk-cluster-gap-md · .sk-cluster-gap-lg · .sk-cluster-align-start · .sk-cluster-align-center · .sk-cluster-align-end · .sk-cluster-justify-start · .sk-cluster-justify-between · .sk-cluster-justify-end

Composed synthetic exemplar

Rendered state matrix

Cluster: 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

Cluster must not reorder interactive controls or change tab order.
Use nav or list semantics only when the content relationship warrants them.

Consumer owns

Keep DOM order logical
Choose semantic grouping markup

Mobile

Wraps instead of overflowing
Primary actions may become full width only in consumer composition

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Cluster adds no authored color or boundary.

Compact API reference

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