Runtime

Scripts live next to their primitives (src/primitives/<name>/<name>.ts) and share a small runtime in src/base/. They are written in TypeScript and emitted in place as readable .js ES modules, so a page can load them without a bundler: index.js imports every primitive's script.

<script type="module" src="./zazz/index.js"></script>

Two bare specifiers reach the page through the import map buildHead() writes: signal-polyfill (the TC39 Signals polyfill) and the Embla packages behind the carousel. The single-file build dist/zazz.js keeps the same bare specifiers, so the import map stays.

Principles

• HTML drives configuration. A script reads data-<primitive>-* attributes on its root (data-carousel-loop="true", data-command-hotkey="mod+k"); it never takes options from JavaScript.
• Light DOM, progressive. Every scripted primitive is a light-DOM custom element that augments markup already styled by CSS. Without JavaScript the markup still renders and native elements still work; you lose only the enhancement (filtering, keyboard navigation, animation).
• Scripts write state, not style. A script writes data-<primitive>-state on the elements it manages, the theme-dark / theme-light token in <html>'s data-ui (a theme toggle), and data-ui-stuck (the scroll-state polyfill); the toaster and multiselect also write data-ui on elements they create. Read state tokens in selectors; never author them.

Modules

Each scripted primitive documents its own attributes and events under Behavior on its page.