Test de la propriété width
La propriété width est héritée par tous les composants depuis MerisiaElement. Elle applique max-width: calc(Nch + 1.5rem) directement sur l'hôte, où N est le nombre de caractères souhaité (patron du GOV.UK Design System — ex. width="2" pour un jour, width="4" pour une année). Cette page sert d'outil de diagnostic visuel : elle affiche merisia-input avec chaque valeur de width de 1 à 20, puis quelques cas limites, pour repérer rapidement les problèmes de débordement ou de troncature.
Valeurs de 1 à 20
Chaque champ ci-dessous utilise une valeur de width différente et contient une chaîne alphanumérique aléatoire, parfois plus longue que la largeur définie, pour révéler les cas de débordement.
Tests limites avec d'autres types de caractères
L'unité ch utilisée par width est basée sur la largeur du glyphe « 0 » de la police courante : elle est imprécise pour des caractères beaucoup plus étroits ou plus larges. Les cas ci-dessous testent ces limites.
À propos des valeurs testées
Le code source (merisia-element.ts) n'impose aucune validation de plage sur width : toute valeur numérique est acceptée, y compris 0, une valeur négative ou fractionnaire. La plage 1-20 utilisée sur cette page correspond simplement aux valeurs recommandées par le patron du GOV.UK Design System, pas à une limite technique du composant.