Chiralkit / UI Kit

UI Component Specs

Validated, implementation-neutral contracts for the components that carry the UI Kit across stacks.

Foundations

Taxonomy

Each component is a named, versioned primitive with a place in the shared system.

Tokens

Contracts name the design tokens a component consumes instead of tying it to one implementation.

Accessibility

Accessible semantics, keyboard behavior, and labeling requirements are part of the public contract.

Composition

Props, events, slots, and states make the component composable across runtimes.

Validated contracts

12 contracts

badge

Stable contract

Small chip for labeling type, state, or category.

v1.0.0 · Component contract

button

Stable contract

Base design system button — primary/secondary variants with a disabled state.

v1.0.0 · Component contract

card

Stable contract

Bordered, rounded surface for grouping content — no props, single default slot, no ARIA role. Consumers compose their own heading structure inside.

v1.0.0 · Component contract

Native <input type="checkbox"> wrapped as a design-system custom element — checked/indeterminate props forward to the DOM, dsChange emits the new boolean state. Keeps the browser's default checkbox rendering to preserve AT and forced-color-mode behavior.

v1.0.0 · Component contract

code-block

Stable contract

Code block with a language label and a built-in copy button.

v1.0.0 · Component contract

dialog

Stable contract

Native <dialog> element wrapped as a design-system custom element — showModal() delivers the modal state machine (focus trap, Escape to close, inert background, return-focus) via the browser platform, not scratch-built ARIA. Props: open, label|labelledBy, describedBy. Events: dsOpen, dsClose.

v1.0.0 · Component contract

input

Stable contract

Native <input> wrapped as a design-system custom element — supports text/email/password/search/tel/url/number types, invalid+describedBy for error states, and emits dsInput with the current value on every keystroke.

v1.0.0 · Component contract

loader

Stable contract

Indeterminate loading indicator built from the chiralkit logo path — two mirrored halves oscillate around the ring center.

v1.0.0 · Component contract

select

Stable contract

Native <select> wrapped as a design-system custom element — options passed as a prop, emits dsChange with the new value.

v1.0.0 · Component contract

tabs

Stable contract

WAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.

v1.0.0 · Component contract

textarea

Stable contract

Native <textarea> wrapped as a design-system custom element — multi-line text field with rows prop, invalid+describedBy for error states, and dsInput event fired on every keystroke.

v1.0.0 · Component contract

tooltip

Stable contract

WAI-ARIA Tooltip pattern (scratch build) — wraps the consumer's first Element child as the trigger, opens on hover (with openDelay) and focus (immediate), dismisses on Escape while keeping the trigger focused, and closes on blur or genuine mouseleave. shadow:false so aria-describedby on the trigger can reference the tooltip's id.

v1.0.0 · Component contract