CINQ UI components

Components

Tabs

Accessible, WAI-ARIA compliant tabs as a lightweight Web Component.

Read the Tabs docs

Modal

Native <dialog>-based modal with a tiny event-driven API.

Read the Modal docs

Drawer

Slide-in drawer with focus trap and scroll lock.

Read the Drawer docs

Spinbutton

Constrained numeric input following the WAI-ARIA spinbutton pattern via <cinq-spinbutton>.

Read the Spinbutton docs

Disclosure Button

Controller for aria-expanded triggers that show or hide controlled regions via <cinq-disclosure-button>.

Read the Disclosure Button docs

Switch

Binary on/off control following the WAI-ARIA switch pattern via <cinq-switch>.

Read the Switch docs

Toast

Transient live-region notices via <cinq-toast>. Consumer sets role="alert" or role="status".

Read the Toast docs

Accordion

Expandable sections with keyboard navigation via <cinq-accordion>.

Read the Accordion docs

Combobox

Editable list autocomplete following the WAI-ARIA combobox pattern via <cinq-combobox>.

Read the Combobox docs

Window Splitter

Resizable panes with a focusable separator via <cinq-windowsplitter> (layout wrapper).

Read the Window Splitter docs

Calendar

Date / range picker with keyboard grid navigation via <cinq-calendar>.

Read the Calendar docs

Snake

Canvas Snake with a requestAnimationFrame loop via <cinq-snake>.

Read the Snake docs

Reference

Utils

Event constants, dispatchEvent, focus trap, scroll lock, and attribute parsers shared across CINQ UI.

Read the Utils reference

Sandbox

Pixelate

Attribute-driven canvas pixelation: drive pixel from scroll, a spinbutton, or anything else.

Try Pixelate

Dual scroll

Two columns, one inverted scroll inside a sized zone. Spring easing, no full-page hijack.

Try Dual scroll

Philosophy

Web Components first: import once, drop the markup, the browser instantiates it.
HTML is the source of truth: you write the markup (native <dialog>, <input>, role="tab", aria-expanded, and the rest). Each package wires interactivity to that DOM. It extends HTML, it does not generate structure or silently replace semantics.
Event-driven: integrate with your app by listening to events and dispatching intents.
WAI‑ARIA aligned: keyboard navigation and ARIA states follow APG patterns.

Conventions

$ prefix: a property or local named with a leading $ (e.g. $button, $input) holds a DOM node: an HTMLElement (or a more specific subtype such as HTMLButtonElement). Plain names are reserved for values, IDs, and non-DOM state.

Interactive examples use AD&D 2nd Edition flavour: ability scores, spell slots, bestiary entries, and dungeon delves, so demos read like a campaign sheet rather than a generic web app.