@materia-technologies-inc/chameleon-components-web

The Chameleon web components — a Material 3 Expressive design system built on Lit, as standard custom elements that work in any framework or none.

• One ESM entry point; no per-component subpaths
• lit is bundled, so you never install it and the page holds one copy
• Ships chameleon.css, a pre-hydration stylesheet that prevents a flash of unstyled content

Install

npm install @materia-technologies-inc/chameleon-components-web

A license grant is required

Chameleon is a commercial product. Your build exchanges an organization token for a signed grant and stamps it into the bundle; the components read it at runtime.

npm install --save-dev @materia-technologies-inc/chameleon-grant
export CHAMELEON_LICENSE_TOKEN="…"

The token alone stamps nothing: your bundler has to run the grant tooling — its Vite or Rollup plugin, or its command-line stamp — as the chameleon-grant README describes.

Without a grant every component renders watermarked and disabled: faded under an UNLICENSED mark, taking no input and no part in its form, with an error in the console. The token must reach a non-interactive shell — ~/.zshenv, or your CI's secret store — not ~/.zshrc.

Use

import "@materia-technologies-inc/chameleon-components-web";
import "@materia-technologies-inc/chameleon-components-web/chameleon.css";

<cw-button variant="filled">Save</cw-button>

Importing the package registers every cw-* element as a side effect. The same entry point also exports the element classes, their event types, the color utilities and lit's own API.

TypeScript

This package carries lit's declarations, so you install nothing else to type-check against it. Your lib must include ESNext.Decorators, which is where Symbol.metadata lives:

{ "compilerOptions": { "lib": ["ES2022", "ESNext.Decorators", "DOM", "DOM.Iterable"] } }

Links

• chameleonui.io — documentation, component gallery and live playground

License

Commercial. See License.md in this package.