Enterprise Grade

Enterprise
by Default

TypeScript-first. CEM-driven. Token-powered.

Not enterprise as an afterthought. Every architectural choice -- from strict TypeScript to W3C design tokens to the Custom Elements Manifest pipeline -- was made to serve teams building at scale.

100% TypeScript. Zero Exceptions.

Strict mode is not optional. Every component, every utility, every test is fully typed. The compiler catches bugs before they reach production.

tsconfig.json Rules
"strict": true -- all strict checks enabled
"noUncheckedIndexedAccess": true -- arrays can be undefined
"noImplicitOverride": true -- explicit override keyword
"exactOptionalPropertyTypes": true -- undefined vs missing
"useDefineForClassFields": true -- Lit 3.x class fields
Zero any types in the entire codebase
What This Buys You
IDE autocomplete for every property, event, slot, and CSS variable
Compile-time detection of property type mismatches in TWIG templates
Refactoring confidence -- rename a property, find every usage instantly
CEM generates accurate API docs from TypeScript type annotations
Storybook controls auto-generated from typed properties
New team members productive in hours, not weeks
Typical Approach
class MyButton extends LitElement {
  @property()
  variant: any;  // What values?

  @property()
  size;  // What type??

  handleClick(e) {
    // e is implicitly 'any'
    this.dispatchEvent(new CustomEvent('click'));
  }
}
WC-2026 Approach
type ButtonVariant = 'primary' | 'secondary' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';

class WcButton extends LitElement {
  /** Button visual style */
  @property({ reflect: true })
  variant: ButtonVariant = 'primary';

  /** Button size */
  @property({ reflect: true })
  size: ButtonSize = 'md';
}

The CEM Pipeline

Write JSDoc once. The Custom Elements Manifest generates everything else -- Storybook controls, API docs, IDE hints, and Drupal tooling.

JSDoc
Annotations
CEM Analyzer
Build Step
CEM JSON
Manifest
Consumers
4 Outputs
Storybook
Auto-generated controls, args, and argTypes via @wc-toolkit
Starlight Docs
API reference pages with properties, events, slots, CSS parts
IDE IntelliSense
VS Code autocomplete for custom elements in HTML and TWIG
Drupal Tooling
Auto-generated .libraries.yml and TWIG template stubs

Three-Tier Token Architecture

W3C DTCG-compliant design tokens flow from global primitives through brand decisions to component-specific values. Change one tier, everything downstream updates.

Global
Tier 1
Raw design primitives. Color scales, spacing values, font stacks, shadow definitions. These are the atomic values that never reference other tokens.
--wc-color-blue-500 --wc-space-4 --wc-font-sans --wc-shadow-md
Brand
Tier 2
Semantic decisions. Maps global tokens to brand intent. "Primary" means blue-500 for Brand A but green-600 for Brand B. Theme switching happens here.
--wc-brand-primary --wc-brand-surface --wc-brand-text --wc-brand-border
Component
Tier 3
Component-specific overrides. Each component exposes CSS custom properties that map to brand tokens by default but can be overridden per-instance.
--wc-button-bg --wc-card-padding --wc-input-border --wc-modal-overlay

Automated at Every Layer

Six quality gates that run on every commit. No component ships without passing all of them.

Unit Tests
Vitest 4.x
Property validation, event dispatching, state transitions. 2-10x faster than Jest.
Component Tests
Web Test Runner
Real browser rendering. Shadow DOM traversal, slot projection, CSS custom property verification.
Integration Tests
Playwright
Cross-browser testing across Chrome, Firefox, Safari. Keyboard navigation, screen reader flows.
Accessibility
axe-core + Storybook a11y
Every story checked for WCAG violations. Color contrast, ARIA, focus management, keyboard traps.
Visual Regression
Chromatic
Pixel-level screenshot comparison. Catch unintended visual changes before they merge.
Static Analysis
ESLint + lit-analyzer
Lit-specific linting rules. Template type-checking, unused property detection, deprecation warnings.
100%
TypeScript Coverage
6
Quality Gates
0
Manual Steps to Ship
<2s
Full Library Build

Write Once, Publish Everywhere

JSDoc annotations in your component source are the single input. Four documentation outputs are generated automatically -- no manual sync, no stale docs, no drift.

Storybook Autodocs
Every component automatically gets a docs page with live examples, property tables, event documentation, and slot descriptions. Zero manual configuration via @wc-toolkit/storybook-helpers.
Starlight API Reference
Static HTML API reference pages generated from the CEM. Searchable, linkable, and indexed by Pagefind. Ships with zero JavaScript overhead.
IDE IntelliSense
VS Code, WebStorm, and Neovim get full autocomplete for custom elements in HTML files. Property types, event names, slot names, and CSS custom properties -- all from the CEM.