Composants

AppIcon Le mark commun à toutes les apps Pelote : un Material Symbol rempli sur la forme cookie9, en violet. Marque

Button Pilule de 40px qui lance une action, en cinq variantes classées par emphase. Actions

FAB Bouton d'action flottant étendu, 56px, pour l'action principale d'un écran mobile. Actions

IconButton Bouton rond de 40px qui ne porte qu'une icône de 24px, pour les actions compactes. Actions

Card Conteneur sc de rayon 28, sans ombre ni bordure, qui regroupe un sujet. Contenu

ExpressiveShape 26 des 35 formes officielles de Material 3 Expressive, aux tracés exacts. Contenu

ListRow Ligne de liste avec élément de tête, titre et sous-titre, élément de fin. Contenu

MetricCard Carte de mesure : libellé, grande valeur, barre ondulée et forme qui tourne lentement. Contenu

SectionHeading Titre de section numéroté, badge cookie9, titre 36px et filet qui remplit la ligne. Contenu

Cover Carte de couverture du README : nom, accroche, chips et formes expressives. Contenu

Checkbox Case de 18px dans une cible de 40px, pour un choix validé par un bouton. Sélection

Chip Petite étiquette de rayon 8 pour une métadonnée, un statut ou un filtre. Sélection

Slider Piste épaisse de 16px, poignée verticale de 4×44 et bulle de valeur. Sélection

Switch Interrupteur 52×32 pour un réglage qui s'applique immédiatement. Sélection

Dialog Fenêtre modale sch de rayon 28, 480px max, pour confirmer ou saisir brièvement. Retours

Snackbar Message bref en bas au centre, fond inversé, rayon 12, ombre flottante. Retours

Tooltip Bulle simple au survol et au focus d'un élément sans libellé visible. Retours

StatusDot Pastille de 12px avec halo, toujours accompagnée d'un mot ou d'une icône. Retours

TextField Champ outlined de 52px et barre de recherche pilule de 56px. Saisie

NavigationBar Barre du bas mobile : 3 à 5 destinations, pilule active secc, fond sc. Navigation

NavigationRail Rail vertical de 96px à gauche, logo cookie et destinations en pilule 56×32. Navigation

Icon Toujours un Material Symbol : Rounded pour M3E et Plaza, Sharp pour Chrome. Iconographie

MaterialYou Quatre couleurs source, trois matières, les mêmes rôles M3 partout. Variantes

ExampleToday L'écran Aujourd'hui de Stabilité, recomposé dans les trois matières. Exemples d'interfaces

ExampleDashboard La vue Overview de vps-admin en M3, puis en Plaza et en Chrome. Exemples d'interfaces

ExamplePortfolio Une section du portfolio : trame de points, titre numéroté, cartes projet. Exemples d'interfaces

ReadmeKit Le gabarit des README GitHub : banner, badges, sommaire, sections, footer. README GitHub

ReadmeAssets Le kit d'images des README : banner, séparateur de section et footer. README GitHub

Loader Indicateur M3E qui change de forme, barre ondulée et squelettes. Mouvement

IdleMotion Animations de décor lentes, une par zone, coupées par prefers-reduced-motion. Mouvement

Transitions Entrées, dialogues, ripple et morphing de bouton, avec leurs courbes. Mouvement

Layout Le shell responsive : barre en bas, rail à gauche, bento et deux volets. Mise en page

Localisation Boutons qui passent en pile, textes qui ne se tronquent pas, formats via Intl. Localisation

Plus