# @zazz-ui/core Zazz is a CSS and vanilla JavaScript UI kit that does not require a build step. It uses semantic design tokens, cascade layers, `data-*` variants, and browser APIs such as popover, ``, invoker commands, anchor positioning, and view transitions. Docs: (component gallery, tokens, guides, and a [build-your-first-page tutorial](https://zazz.sh/docs/getting-started/first-page)) ## Install ```bash pnpm add @zazz-ui/core ``` ```js import "@zazz-ui/core/index.css"; // all styles, imported in cascade order import "@zazz-ui/core"; // custom elements and shared behaviors ``` From a CDN: ```html ``` Use an exact version in CDN URLs. Each release includes `dist/sri.json`, which lists the SHA-384 hash for every published file. Use those hashes in `integrity` attributes. You can also copy files directly. Each primitive has a folder under `src/primitives//` containing its stylesheet, script, and HTML examples. A `zazz-ui` CLI for copying primitives and their dependencies is planned. ## Usage ```html ``` Components are classes (`.ui-button`, `.ui-dialog`, `.ui-field`), and variants are `data-*` attributes (`data-variant`, `data-size`) rather than modifier classes. ## Theming Every value in the kit resolves from a CSS custom property, which gives you three override surfaces: ```css /* 1. Global tokens move the whole system */ :root { --primary: oklch(0.6 0.2 145); --radius-md: 0; } /* 2. Component hooks (--ui-*) restyle one primitive everywhere */ :root { --ui-button-radius: var(--radius-full); } ``` ```html ``` Color roles resolve through `light-dark()`, so light and dark themes work out of the box and follow the OS preference (pin one with a `.dark` class on ``). Styles live in cascade layers, so your own CSS can override anything without `!important` or specificity fights. The [extending guide](https://zazz.sh/docs/core-concepts/extending) covers adding your own tokens, utilities, and variants. ## Layout The `.container` is not a fixed-width box. A region (`main`, `header`, `footer`, `section`, `article`) holding a `.container` becomes a grid of named width bands, and each direct child of the container picks its band. Measured text and full-bleed media can be siblings in the same flow: ```html

Sits in the default md band

Back to the md band.

``` See [layout and containers](https://zazz.sh/docs/core-concepts/layout) for the band model, the article reading-measure variant, and responsive container variants. ## Browser support Zazz targets the latest Chrome, Firefox, and Safari, two versions back. Features below that floor are feature-detected with a polyfill or a graceful fallback where practical. The kit leans on modern CSS (cascade layers, container style queries, subgrid, `light-dark()`), so older browsers get a degraded but functional experience rather than a pixel-perfect one. The head loads exactly one polyfill: `invokers/interest`, for Interest Invokers (`interestfor`), which is Chromium-only and drives tooltip triggers. Everything else the kit builds on — the Popover API, Invoker Commands, native ``, `

` — is native across the floor. CSS anchor positioning is below the floor and is gated behind `@supports` with a UA-centered fallback. ## Package layout ```text src/ ├── index.css stylesheet entry: @imports base + every primitive in cascade order ├── index.js script entry: registers every custom element / behavior ├── base/ tokens, reset, typography, utilities, layout + shared runtime └── primitives// one folder per primitive: .css, .ts, examples (.html) dist/ ├── zazz.css flattened single-file bundle (loaded by CDN tags) ├── zazz.js └── sri.json sha384 hashes of every published css/js file ``` The package includes readable, unminified `.js` and matching `.d.ts` files compiled from TypeScript. Component scripts are optional: the CSS works on its own, and the scripts add behaviors (typeahead, carousels, command menus, hotkeys) as custom elements and small helpers. ## Development This package is part of the [zazz-ui](https://github.com/dereknelsen/zazz-ui) monorepo. `pnpm build` compiles TypeScript beside each `.ts` file, then runs `vp pack`. `pnpm dev` runs the TypeScript compiler in watch mode. See [CONVENTIONS.styles.md](./CONVENTIONS.styles.md) and [CONVENTIONS.scripts.md](./CONVENTIONS.scripts.md) before contributing. ## License MIT