Design system Osmose (@pms/ui)

Vue d’ensemble

Le design system Osmose est le package @pms/ui (version 0.1.0), partagé par les 5 fronts Angular 20. Il contient 12 composants standalone zoneless, les tokens visuels et le système de thèmes.

Important : @pms/ui est consommé en source — pas de build dédié (ng-packagr non utilisé). Chaque app Angular configure deux points de jonction obligatoires :

paths tsconfig : "@pms/ui": ["../../packages/ui/src/index.ts"]
@source Tailwind dans styles.css : @source "../../../packages/ui/src"

Si l’un des deux est absent : respectivement imports cassés ou classes Tailwind purgées.

12 Composants standalone

Tous OnPush, zoneless, accessibles (WCAG AA) :

Composant	Description
`osm-avatar`	Avatar utilisateur (initiales ou photo)
`osm-badge`	Badge de comptage/statut
`osm-button`	Bouton avec variants (primary/secondary/ghost/danger) + états loading/disabled
`osm-card`	Carte conteneur avec variantes d’élévation
`osm-confirm-dialog`	Dialog de confirmation accessible : inert siblings, focus-trap, Escape, restauration focus ; `ConfirmDialogService` (montage programmatique `createComponent()`)
`osm-date-range-picker`	Sélecteur de plage de dates
`osm-drawer`	Panneau latéral (focus-trap, Escape)
`osm-field`	Wrapper de champ de formulaire (label, error, hint)
`osm-input`	Input accessible
`osm-kpi-card`	Carte KPI (valeur + libellé + tendance)
`osm-section-title`	Titre de section sémantique
`osm-status-badge`	Badge de statut : texte et couleur (jamais couleur seule — WCAG 1.4.1)

provideOsmoseIcons() — provider pour les icônes Lucide.

Tokens visuels

Définis dans packages/ui/src/styles/osmose.css via @theme (Tailwind v4) :

Primary — teal (--color-primary-*)
Sand/Clay — surfaces neutres
Accent — couleur d’accentuation
Sémantique — success/warning/danger/info avec niveaux -50/-500/-600
- Les tokens -600 sont la référence pour le texte (contraste AA garanti)
- Ne jamais utiliser les tokens -500 seuls pour du texte
Statuts chambre — rs-* (room status : available, occupied, dirty, OOO…)
Statuts réservation — bs-* (booking status : tentative, confirmed, checked-in…)

Mode sombre : classe .dark + prefers-color-scheme: dark (media query). White-label : variables CSS surchargeable par tenant.

Spec de garde tokens

osmose-tokens.spec.ts vérifie que tout token référencé par un composant existe dans osmose.css. Empêche les tokens orphelins qui passeraient sans erreur TS mais seraient invisibles au runtime.

Accessibilité

osm-confirm-dialog : role="alertdialog", inert sur les siblings, focus-trap au montage, restauration du focus à la fermeture
osm-drawer : focus-trap, Escape ferme
osm-status-badge : texte + couleur (jamais couleur seule)
osm-button : aria-label transmis, états disabled/loading correctement signalés
Contraste AA : tokens -600 pour le texte sur fond clair

Règles d’utilisation

window.confirm() est interdit — utiliser ConfirmDialogService
Les lignes de folio voidées s’affichent avec la classe line-through (barrées), jamais retirées du DOM (NF203 : inaltérabilité visuelle)
osm-status-badge obligatoire pour tout statut — jamais un simple <span> coloré
@pms/ui est agnostique i18n et money : l’app fournit les chaînes traduites et les montants pré-formatés (pas d’@ngx-translate ni de eurosToCents dans ui)

Tests

232 tests (gate 2026-06-11) :

Tests composants : Vitest + jsdom (sans TestBed — logique extraite pure)
Spec de garde tokens
E2e Playwright par app consommatrice (axe-core violations critical/serious bloquantes)