Core / Actions

Boutons et commandes.

Le poids visuel suit l’importance de l’action, pas sa position.

x-ui.icon-button

Action hierarchy

Primary, secondary et destructive.

.btn-*

Icon buttons

Label accessible obligatoire, tooltip selon la familiarité.

x-ui.icon-button

Grouped commands

Pour des commandes adjacentes, jamais pour simuler des tabs.

x-ui.button-group

Core / Navigation

Choisir le bon niveau de navigation.

Tabs pour des sections paires, view switcher pour remplacer une vue, segments pour un mode compact.

Tabs

Roving tabindex, flèches gauche/droite, Home et End.

x-ui.tabs

Fund overview

Strategy, domicile, vintage and reporting currency.

Segmented controls

Mode ou période mutuellement exclusive.

x-ui.segmented-control

View switcher

Un dropdown pour basculer une vue analytique complète.

x-ui.view-switcher

Separator

Décoratif par défaut ; :decorative="false" l’expose au lecteur d’écran.

x-ui.separator

Portfolio

Documents

Core / Forms

Le champ possède son label, son aide et son erreur.

Les composants conservent le contrat serveur tout en centralisant l’accessibilité.

x-ui.form-field · x-ui.*-input

Core / Feedback

Informer sans créer de bruit.

Inline pour la validation, alert pour le persistant, toast pour le résultat asynchrone.

Async feedback

Les toasts sont portés dans la couche globale.

window.kviewToast

Destructive confirmation

Le formulaire décrit la confirmation, le singleton gère le dialogue.

data-ui-confirm

Empty states

Collection vide, aucun résultat et récupération d’erreur.

x-ui.empty-state

Loading states

Préserver la géométrie finale et exposer l’état busy.

x-ui.loading-state

Core / Headers

Les headings suivent le document, pas la taille visuelle.

Chaque niveau possède une responsabilité de composition distincte.

Page header · h1

Resource header · h2

Section header · h3