Bibliothèque de composants
Les 12 composants Hz* couvrent l'intégralité de l'écran de référence (HZ-SFD-002 §2.3). Chaque composant est présenté avec tous ses états applicables ; les survols sont réels (passez la souris). Tout est rendu avec les tokens, sans aucune couleur en dur.
HzBadge
Hauteur 22 px, rayon complet, texte 12 px demi-gras. Le statut n'est jamais porté par la seule couleur : le libellé textuel est obligatoire.
HzKpiCard
Libellé 12 px muted, valeur 24 px forte, badge de variation (vert ou rouge selon signe ; mention simple pour le rappel de versement), sparkline 76×30 alignée à droite.
HzTabs
Texte 14 px ; actif : texte fort + soulignement 2,5 px primary-700 [calé maquette, P-04]. Navigation clavier : flèches, Début, Fin ; rôles ARIA tablist / tab / tabpanel.
HzTopbar
Fil d'ariane à gauche, recherche en pilule (320 px, raccourci « / », suggestions dès 2 caractères), cloche avec pastille de non-lus, avatar avec initiales.
HzScenarioSwitch
Groupe segmenté à trois positions ; position active : fond primary-900, texte blanc. Bascule locale sous 1 seconde (RNF-03), rôle radiogroup au clavier.
HzChartProjection
Axe Y en k€ (graduations 12,5 / 25 / 37,5 / 50), axe X A1 à AN, série capital (ligne 2 px, points), série versements (pointillés), info-bulle sombre « An N » + montant, remplissage léger sous la courbe. Échelle stable entre scénarios : borne haute = dizaine de k€ supérieure du maximum des trois séries.
HzDonutAllocation
Anneau 158 px, épaisseur 23 px, départ à 12 h en sens horaire dans l'ordre de la légende ; centre « 100 % investi » ; légende : puce carrée, libellé, pourcentage aligné à droite. Somme contrôlée à 100 % (RG-04).
HzTable
En-tête 12 px muted, lignes 44 px, survol bg-app (réel ci-dessous), case de sélection, tri au clic d'en-tête (flèche), menu d'actions par ligne.
HzProgress
Piste chart-grid 6 px, remplissage primary-500, pourcentage 12 px à droite. Sans objectif de capital renseigné : tiret (RG-13).
HzPagination
Compteur « i-j sur N échéances » à gauche, pages à droite ; page active : fond primary-900. Taille de page 4 par défaut (maquette), options 4 / 10 / 25 en préférence utilisateur.
Champ de saisie [Proposition]
Requis par la modale « Nouvelle simulation » et les formulaires (non visible sur la maquette) : hauteur 36 px, rayon 8 px, bordure --hz-border, focus primary-500, erreur reliée au champ.