Components
One page per component, each documenting its complete option surface — every class variant, every data-* attribute and every JavaScript method, not just a demo. Everything is rendered by the same kit this page loads from the CDN.
_78-btn and its variants, plus the icon button.
Surfaces, meta lines, card stacks, KPI stat cards, and the grids that lay them out.
The field wrapper, text inputs, selects, textareas and validation.
Checkboxes, radios and the toggle switch — native inputs, restyled.
Badges, the status line, tags, score pills and the eyebrow label.
The plain table style, with compact, striped and sticky variants.
Tabs and segmented controls, with the keyboard and ARIA wiring done.
The dropdown menu — click, Escape, outside click and arrow keys.
Modal, toast, inline alert and quiet notes — and the rule for choosing.
Sparklines, progress, bar rows, split bars, figure rows, donuts and trends. No library.
The disclosure — a styled <details>, with no JavaScript at all.
The “On this page” rail — sticky, with a scroll-spy, built from your headings.
The small helper classes: text, layout, spacing and screen-reader.
The one tone vocabulary — six names, the same on every component, live in both themes.
Topbar, sidebar, rail, drawer — and the shell JavaScript API.
Conventions
The same few rules hold across every component, so they are worth reading once.
- Everything is a class. There is nothing to register and nothing to initialize — write the markup and it works. The pieces that do have behavior mount themselves on load.
-
The
_78-prefix is on every class, and_78is the single JavaScript global. Nothing else is added to the page. -
Attributes are the authoring surface; JavaScript is the escape hatch. Most
components read
data-*attributes on load. Every one of them also has a JS call for content that arrives later, and both are documented on each page. -
Color is never the only signal. Values are carried as text or an
aria-label, progress tracks are realrole="progressbar"s, and status is never conveyed by hue alone. - Semantic colors stay conventional. Green, amber and red never follow your accent — see Theming.