@colletdev/core

60 accessible web components built in Rust, compiled to WASM, distributed as Custom Elements. Component-level WCAG 2.2 AA constraints are enforced at compile time -- page-level integration (focus order, layout, slotted content) remains the consumer's responsibility. WASM loads on interaction only.

Install

npm install @colletdev/core

Quick Start

import { init } from '@colletdev/core';

await init(); // registers all <cx-*> elements

<cx-button variant="filled" label="Save" intent="primary"></cx-button>
<cx-text-input label="Email" kind="email" placeholder="[email protected]"></cx-text-input>

Selective Loading

await init({ components: ['button', 'text-input', 'select'] }); // tree-shakes the rest
await init({ lazy: true });                                      // defer WASM until interaction

Size and dependencies

@colletdev/core has zero runtime dependencies.

What a browser actually downloads, measured with a real Vite build loaded in Chromium and compressed at brotli quality 11:

| Your app uses | Brotli | of which WASM | |---|--:|--:| | 5 components | 250 KB | 205 KB | | 20 components | 269 KB | 205 KB | | all 60 components | 398 KB | 280 KB |

The WASM binary is the same file in every row, so the 6th component is nearly free and the 60th is too. But 205 KB is a floor — there is no configuration in which a Collet page costs less. For comparison, measured with the identical harness on the same machine: Shoelace 24 KB and Material Web 28 KB for the same five components. Collet is 5–10× heavier than the closest web-component peers, and the crossover point is past 500 components — it never arrives.

Reproduce all of it:

node bench/footprint/measure.mjs     # what a browser downloads
node bench/footprint/timing.mjs      # first-visit timings
node scripts/check-size-budget.mjs   # artifact budgets + structural checks

The full comparison — install sizes, dependency counts and per-component costs for Shoelace, Web Awesome, Material Web, Carbon, Spectrum, Lit, Radix, MUI, Ant Design, Mantine, Park UI and Ark UI, with the method stated so you can check it — is in size-and-dependencies.md, also shipped in @colletdev/docs.

Fonts are opt-in

Inter, Instrument Serif and JetBrains Mono ship in dist/fonts/ but are not requested by default — Inter alone is 344 KB. tokens.css puts local(...) first and falls back to system-ui / Georgia / ui-monospace, so the default look is correct with zero font bytes. To use the real webfonts on the zero-config path, host them and say where:

await init({ fonts: '/fonts/' }); // copy dist/fonts/*.woff2 there first

On the stylesheet path (init({ baseUrl }), or importing dist/tokens.css through a bundler) the relative url(fonts/…) resolves correctly on its own.

Theming

Collet uses CSS custom properties for all colors, spacing, typography, and motion. Override the defaults in your own stylesheet or generate a custom tokens.css with @colletdev/tokens.

:root {
  --color-primary: oklch(0.55 0.22 265);
  --color-surface: oklch(0.98 0 0);
  --radius-md: 0.5rem;
}

Vite Plugin

Handles WASM MIME types, asset copying, preload hints, and Declarative Shadow DOM pre-rendering.

import { colletPlugin } from '@colletdev/core/vite-plugin';
export default defineConfig({ plugins: [colletPlugin()] });

SSR

Server-side rendering helpers are available via the /server export:

import { renderToString } from '@colletdev/core/server';

Exports

| Export | Description | |--------|-------------| | @colletdev/core | init(), element registrations, TypeScript types | | @colletdev/core/runtime | Base classes (CxElement, CxFormElement) | | @colletdev/core/vite-plugin | Vite integration | | @colletdev/core/server | SSR utilities | | @colletdev/core/markdown | renderMarkdown() / renderMarkdownSync() | | @colletdev/core/chat-builders | Chat message/turn builder helpers | | @colletdev/core/brand | Runtime brand-theme switching | | @colletdev/core/types | Shared component prop/config TypeScript types | | @colletdev/core/elements/* | Individual Custom Element definitions |

IDE Support

A custom-elements.json manifest is included. VS Code, WebStorm, and Lit-based tooling will pick it up for autocomplete and documentation on <cx-*> tags.

License

MIT -- github.com/Danrozen87/collet