Primitives
Choose a semantic building block and its failure state.
Use these rendered contracts to verify purpose, anatomy, keyboard behavior, and ownership before a component enters a product.
28 authoritative package contracts · @sanchika/primitives- Rendered example
- Each index entry opens its rendered state proof.
- Contract / API
- @sanchika/primitives
- Limit
- Primitives ship CSS and metadata, not a hidden runtime.
- Failure state
- If a consumer cannot meet a required state or interaction, it must not present the primitive as complete.
Contract index
Triggers an action without implying navigation and preserves the v0.0.2 tone, size, class, and visible-state contract.
6 states · keyboard-operable · visible-focus · non-color-disabled-stateGrouped information surfaceCardPreserves the v0.0.2 Card API as a specialized grouped-content plane built on Surface styling rather than the default wrapper for every section.
2 states · semantic-heading · non-color-status-textShort status or classification labelBadgeNames a compact status or classification with visible text and supporting tone while preserving the v0.0.2 API.
1 states · visible-text-required · color-not-only-signalAccessible label, control, hint, and error wrapperFieldGroups visible form guidance and preserves the v0.0.2 class/state contract without implementing validation or input behavior.
4 states · label-required · error-associated · keyboard-operableBounded page or region measureContainerCenters content, applies safe logical inline gutters, and selects an evidence-backed maximum measure without preventing full-bleed composition.
1 states · logical-inline-gutters · zoom-safe · no-horizontal-overflowVertical rhythm regionSectionCreates finite section-level block rhythm and an optional structural boundary without child-margin hacks.
1 states · heading-relationship · forced-colors-boundary · logical-block-rhythmVertical compositionStackArranges related children in one block-axis flow using gap rather than child margins.
1 states · source-order-preserved · long-content-safeWrapping inline compositionClusterWraps actions, metadata, and compact facts without turning them into decorative pills.
1 states · writing-mode-safe · wrap-safe · source-order-preservedRepeated peer-item compositionGridArranges repeated peers with one intrinsic mode and a restrained set of explicit column modes.
1 states · source-order-preserved · no-horizontal-overflow · semantic-list-compatibleAsymmetrical primary and supporting compositionSplitPairs a primary region with supporting context using evidence-backed ratios and a deliberate narrow-screen stack.
2 states · source-order-preserved · no-css-reordering · narrow-stackSemantic visual planeSurfaceCreates a restrained visual plane from package surface, border, radius, and elevation tokens while leaving content semantics to the chosen element.
2 states · forced-colors-boundary · semantic-element-owned-by-consumer · non-color-statusThematic or structural separatorDividerMarks a meaningful horizontal separation with border tokens and native semantics.
2 states · native-hr-preferred · not-focusable · forced-colors-visibleAssistive-technology-only textVisuallyHiddenKeeps essential text available to assistive technology while removing it from the visual flow without a zoom clipping defect.
1 states · assistive-technology-available · zoom-safe · not-display-noneSemantic presentation rolesTextApplies evidence-backed display, heading, body, lead, caption, eyebrow, data, or mono presentation without choosing document semantics for the consumer.
2 states · semantic-html-preserved · long-content-safe · not-size-utilityNavigation targetLinkNavigates to another document, route, fragment, or downloadable resource with a persistent non-color affordance.
4 states · persistent-link-affordance · visible-focus · native-anchorSingle navigation target with grouped contextLinkCardMakes a bounded content group one accessible navigation target without nested interactive controls.
3 states · single-tab-stop · no-nested-interactive · whole-boundary-focusLabelled local filtering controlSearchFieldDefines a visible-label search field, accessible clear action, result-status region, no-results recovery, and error association without exporting filtering behavior.
8 states · visible-label-required · clear-name-required · focus-retained · result-status-associated · error-associatedCompact visible state with optional source metadataInlineStatusPairs a marker and visible state text using package status triads without replacing Badge or adding implicit live-region behavior.
3 states · visible-text-required · color-not-only-signal · no-implicit-live-regionLayout-preserving loading placeholderSkeletonPreserves approximate layout during a truthful loading context without implying that content is loaded, verified, or complete.
3 states · owner-busy · shape-hidden · nonanimated-reduced-motionGuided absence and next actionEmptyStateExplains why useful content is absent and provides an appropriate next action without an implicit alert.
3 states · clear-heading · explicit-next-action · no-implicit-alertRecoverable failure explanationErrorStateNames a failure, preserves source or reference context, and exposes explicit recovery without blame or false certainty.
3 states · explicit-recovery · focus-not-stolen · contextual-announcementVisible determinate or pending progressProgressStyles native progress semantics and visible labels without adding runtime behavior or implying completion from motion.
4 states · native-progress · visible-value · non-color-stateOrdered process stateStepperPresents process order and current/completed/upcoming state without implying navigation or beginning a product pattern.
4 states · ordered-list · current-step · non-color-completionNative progressive disclosureDisclosureStyles details and summary for FAQ or simple disclosure while preserving native open/closed and keyboard behavior.
4 states · native-details-summary · keyboard-operable · no-clipping-animationExplicit copy command with visible feedbackCopyButtonDefines activation, success, reset, failure, disabled, and announcement obligations while leaving clipboard access in gallery or consumer code.
4 states · explicit-activation · focus-retained · visible-and-announced-feedbackCurrent-location navigation trailBreadcrumbProvides a landmark and ordered route trail with decorative separators and an unlinked current page.
3 states · navigation-landmark · ordered-list · current-page · decorative-separator-hiddenLabelled operational valueStatPresents a value with optional visible-direction delta, source/time metadata, and context without a chart or unsupported KPI certainty.
3 states · label-value-associated · non-color-delta · no-count-animationSemantic responsive table wrapperTableShellStyles native table content, density, numeric alignment, optional sticky header, and honest overflow affordance without providing data-grid behavior.
6 states · native-table · caption-and-headers · focus-visible-scroll-region · zoom-reachableLocal index
Find the contract behind the interface.
Generated from routes and package metadata. No request, tracking, or external index.
61 routes
No contract matches that search.
Try a product mode, component, state, or boundary.