Cursor rule

1---
2description: Conventions générales du Design Système du Bénin (DSBJ)
3globs: ["**/*.html", "**/*.scss", "**/*.ts", "**/*.css"]
4---
5 
6# DSBJ - Conventions générales
7 
8## Préfixe CSS
9- Toutes les classes CSS utilisent le préfixe `bj-` (ex: `bj-btn`, `bj-card`)
10- Toutes les variables CSS utilisent `--bj-*` (ex: `--bj-spacing-4v`, `--bj-color-vert-benin-main-491`)
11- Les composants suivent la convention BEM : `bj-composant`, `bj-composant__element`, `bj-composant--modifier`
12 
13## Structure des composants
14- Styles SCSS : `src/component/<name>/style/_<name>.scss`
15- JavaScript : `src/js/<name>.ts` (utilise `register()` de `src/js/core.ts`)
16- Documentation : `docs/composants/<name>.html`
17- Tests : `tests/<name>.test.ts`
18 
19## Attributs data
20- Les hooks JavaScript utilisent `data-bj-*` (ex: `data-bj-accordion-btn`, `data-bj-modal-open`)
21- L'état ouvert/actif est marqué par `data-bj-expanded`
22 
23## Polices et icônes
24- Corps : Open Sans (400, 500, 600, 700)
25- Titres éditoriaux : Spectral (400, 600)
26- Icônes : Remix Icon 4.1 (`ri-*`), toujours avec `aria-hidden="true"` quand décoratives
27 
28## Package et outils
29- Gestionnaire de paquets : `bun` (jamais npm/yarn)
30- Build : `vite build` (sortie dans `dist/`)
31- Tests : `vitest` avec jsdom
32- Serveur de dev docs : `bun run dev` (port 3000)
33 
34## Patterns JavaScript
35- Chaque module JS utilise `register(name, handler)` de `src/js/core.ts` pour s'auto-enregistrer
36- `boot()` est appelé au DOMContentLoaded et exécute tous les handlers enregistrés
37- `focusTrap.trap(el)` / `focusTrap.release(el)` pour piéger le focus dans les overlays
38