Skip to main content
SanchikaEvidence contracts
Primary navigation
Search Source

Primitive contract

Disclosure

Styles details and summary for FAQ or simple disclosure while preserving native open/closed and keyboard behavior.

Native progressive disclosure · @sanchika/primitives

Purpose and semantics

Styles details and summary for FAQ or simple disclosure while preserving native open/closed and keyboard behavior.

Recommended semantic: Use native details and summary; associate a nearby heading when the disclosure needs section structure.

Anatomy

details

Native open-state owner.

summary

Keyboard-operable accessible name.

content

Revealed flow content.

Finite variants and important states

Required states
closed, open, long-content, nested-guidance
Class hooks
.sk-disclosure · .sk-disclosure__summary · .sk-disclosure__content

Composed synthetic exemplar

Rendered state matrix

Disclosure: 4 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.

closedThe summary remains descriptive while detail stays collapsed.
Source detail
Synthetic reference only.
openNative disclosure semantics expose the supporting content.
Source detail
Synthetic reference only.
long contentThe long content contract remains visible and inspectable.
Source detail
Synthetic reference only.
nested guidanceThe nested guidance contract remains visible and inspectable.
Source detail
Synthetic reference only.

Accessibility and consumer responsibility

Keyboard and screen reader
  • Native summary toggles with keyboard
  • Do not trap focus
  • Do not clip revealed focusable content
  • Summary is the accessible name
  • Document heading relationship
  • Retain native expanded state
Consumer owns
  • Use native semantics
  • Keep summary descriptive
  • Add script only for documented unmet native need
Mobile
  • Summary and long content wrap without horizontal overflow
Reduced motion and forced colors

Revealed content appears immediately in its settled position.

  • Summary focus and disclosure boundary use system colors

Compact API reference

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