npm package: @genexus/nova
Description: Nova Design System — a scalable foundation for building digital products with a unified visual language.
Latest version: 0.2.0

# @genexus/nova

Nova Design System — a scalable foundation for building digital products with a unified visual language. Built on [Chameleon web components](https://www.npmjs.com/package/@genexus/chameleon-controls-library).

## Installation

```bash
npm install @genexus/nova
```

### Peer dependency

Nova requires Chameleon Controls Library:

```bash
npm install @genexus/chameleon-controls-library@^6.33.1
```

## Usage

### 1. Load CSS bundles

Nova provides CSS bundles that style Chameleon components. You can load them in two ways:

#### Option A: Load everything at once

Add a `<link>` to the `all.css` bundle, which includes all tokens, base styles, components, and utilities:

```html
<link rel="stylesheet" href="/path/to/nova/bundles/css/all.css" />
```

#### Option B: Load individual bundles with `ch-theme` (recommended)

Use `getBundles()` or `getThemeBundles()` with Chameleon's `<ch-theme>` component for on-demand loading:

```typescript
import { getBundles } from "@genexus/nova/bundles.js";

// Load specific bundles
const CSS = getBundles(
  ["base/base", "components/button", "components/input", "utils/form"],
  "/assets/css/nova/"
);

// Or load all theme bundles (components + utils + resets, excludes base)
import { getThemeBundles } from "@genexus/nova/bundles.js";
const allCSS = getThemeBundles("/assets/css/nova/");
```

Then bind to `<ch-theme>`:

```html
<ch-theme .model=${CSS}></ch-theme>
```

### 2. Register Nova assets (icons)

```typescript
import { registerNova } from "@genexus/nova/register-nova.js";

registerNova();
```

### 3. Serve Nova assets

#### Vite (recommended)

Use the official Vite plugin — it handles CSS hashing, asset serving in dev, and distribution builds automatically:

```bash
npm install @genexus/vite-plugin-nova @genexus/nova-build --save-dev
```

```typescript
// vite.config.ts
import { defineConfig } from "vite";
import { nova } from "@genexus/vite-plugin-nova";

export default defineConfig({
  plugins: [nova()]
});
```

The plugin will:
- Serve Nova CSS, fonts, and icons during development
- Hash CSS filenames for cache-busting in production builds
- Inject `setBundleMapping()` into the HTML so `getBundles()` resolves hashed filenames
- Inline critical CSS (`base/base`, `resets/box-sizing`) and preload `base/icons`

See [`@genexus/vite-plugin-nova`](../nova-plugins/vite-plugin-nova/README.md) for all options.

#### Other frameworks

Copy the contents of `node_modules/@genexus/nova/dist/` to your app's public/static directory so CSS bundles, fonts, and icons are served at runtime. For Angular, configure `angular.json` assets. Ensure the `bundles/css/` and `assets/` directories are accessible at the base path you pass to `getBundles()`.

## Available bundles

| Category | Bundles |
|----------|---------|
| **Base** | `base/base`, `base/icons` |
| **Scope** | `scope/theme-nova` |
| **Resets** | `resets/box-sizing` |
| **Components** | `components/accordion`, `components/avatar`, `components/breadcrumb`, `components/button`, `components/card`, `components/chat`, `components/checkbox`, `components/combo-box`, `components/dialog`, `components/dropdown`, `components/input`, `components/listbox`, `components/navigation-bar`, `components/pagination`, `components/pill`, `components/progress`, `components/radio-group`, `components/rating`, `components/search`, `components/segmented-control`, `components/sidebar`, `components/slider`, `components/splitter`, `components/switch`, `components/tabs`, `components/textarea`, `components/thumbs`, `components/toast`, `components/tooltip` |
| **Utilities** | `utils/elevation`, `utils/form`, `utils/form--full`, `utils/layout`, `utils/link`, `utils/spacing`, `utils/typography` |
| **All-in-one** | `all` (includes everything) |

## dist/ structure

```
dist/
├── bundles/css/          # CSS bundles (components, utils, base, scope, resets)
│   ├── all.css           # All-in-one bundle
│   ├── base/
│   ├── components/
│   ├── resets/
│   ├── scope/
│   └── utils/
├── assets/
│   ├── fonts/            # Inter + Raleway .woff2 files
│   └── icons/            # Icon sprite sheets
├── index.js              # Main entry (re-exports all)
├── bundles.js            # getBundles(), getThemeBundles(), setBundleMapping()
├── register-nova.js      # registerNova()
└── assets-manager.js     # Asset management utilities
```

## License

Apache-2.0