# Design system @paulperigault

> Design system de paulperigault.fr : composants Astro, jetons de couleur, d’espacement et de typographie (`--pp-*`), accessibilité WCAG 2.2 AA. Il est destiné aux sites d’un seul auteur construits avec Astro.

## Composants

- [Stack](https://design.paulperigault.dev/components/stack.md): Empile ses enfants verticalement avec un espacement régulier, sans marge en bordure, sans JavaScript.
- [Cluster](https://design.paulperigault.dev/components/cluster.md): Groupe d'éléments en ligne qui passent à la ligne, espacés par gap (modèle « Every Layout », Pickering et Bell, 2021).
- [Grid](https://design.paulperigault.dev/components/grid.md): Grille intrinsèque sans media query ; le nombre de colonnes suit la largeur disponible (modèle « Every Layout », Pickering et Bell, 2021).
- [Container](https://design.paulperigault.dev/components/container.md): Boîte centrée dans l'axe d'inline, à largeur maximale, avec une gouttière latérale (modèle « Every Layout », Pickering et Bell, 2021).
- [Sidebar](https://design.paulperigault.dev/components/sidebar.md): Barre latérale de largeur fixe et contenu qui prend le reste ; s'empilent quand le contenu passe sous la moitié de la largeur (modèle « Every Layout », Pickering et Bell, 2021).
- [Switcher](https://design.paulperigault.dev/components/switcher.md): Enfants côte à côte au-delà d'un seuil de largeur, empilés en deçà, sans media query (modèle « Every Layout », Pickering et Bell, 2021).
- [Center](https://design.paulperigault.dev/components/center.md): Centre un bloc dans l'axe inline, à largeur de lecture (modèle « Every Layout », Pickering et Bell, 2021).
- [Button](https://design.paulperigault.dev/components/button.md): Bouton natif ou lien stylisé avec variantes de tonalité et de taille, zéro JavaScript.
- [Field](https://design.paulperigault.dev/components/field.md): Enveloppe d'un contrôle de formulaire avec libellé, indication et message d'erreur optionnels.
- [Input](https://design.paulperigault.dev/components/input.md): Champ de saisie natif sur une ligne avec gestion d'erreur et état désactivé.
- [Textarea](https://design.paulperigault.dev/components/textarea.md): Zone de texte native redimensionnable avec gestion d'erreur et état désactivé.
- [Select](https://design.paulperigault.dev/components/select.md): Liste déroulante native avec chevron décoratif superposé par grille, zéro JavaScript.
- [Choice](https://design.paulperigault.dev/components/choice.md): Case à cocher ou bouton radio natif avec libellé, zéro JavaScript.
- [Switch](https://design.paulperigault.dev/components/switch.md): Interrupteur natif sans JavaScript, piste et curseur dessinés en CSS.
- [Combobox](https://design.paulperigault.dev/components/combobox.md): Champ avec liste de suggestions filtrée à la saisie, datalist natif sans script, focus gardé dans le champ.
- [Alert](https://design.paulperigault.dev/components/alert.md): Message de retour au ton écrit en clair ; rôle d’annonce seulement si live, zéro JavaScript.
- [Progress](https://design.paulperigault.dev/components/progress.md): Barre progress ou jauge meter natives, valeur reprise en texte relié.
- [Dialog](https://design.paulperigault.dev/components/dialog.md): Dialogue modal natif ouvert par Invoker Commands sans script, fermeture par bouton, Échap ou clic hors boîte.
- [Status](https://design.paulperigault.dev/components/status.md): Statut de pipeline avec une forme d’icône propre à chaque état : la couleur n’est jamais seule porteuse du sens.
- [Skeleton](https://design.paulperigault.dev/components/skeleton.md): Emplacement de chargement en lignes : texte lu par les lecteurs d’écran, animation d’opacité supprimée sous prefers-reduced-motion.
- [Toast](https://design.paulperigault.dev/components/toast.md): Région de notifications non bloquantes : minuteur suspendu au survol et au focus, Échap, bouton de fermeture visible.
- [Separator](https://design.paulperigault.dev/components/separator.md): Élément hr natif lu comme séparateur, ou filet décoratif masqué aux technologies d’assistance.
- [Accordion](https://design.paulperigault.dev/components/accordion.md): Sections repliables en details natifs, groupées par name, animation seulement sans préférence de mouvement réduit.
- [Table](https://design.paulperigault.dev/components/table.md): Tableau de données dans une région défilante nommée et focalisable, chiffres tabulaires.
- [Breadcrumb](https://design.paulperigault.dev/components/breadcrumb.md): Fil d’Ariane en liste nommée, page courante marquée par aria-current.
- [Prose](https://design.paulperigault.dev/components/prose.md): Mise en forme du contenu éditorial (titres, listes, citations, code) à la mesure de lecture.
- [Diff](https://design.paulperigault.dev/components/diff.md): Ajouts et retraits en ins et del natifs, signes visibles et libellés lus.
- [EmptyState](https://design.paulperigault.dev/components/empty-state.md): État vide accessible : titre nommant la section, explication et action facultative, sans icône décorative.
- [Stat](https://design.paulperigault.dev/components/stat.md): Indicateur chiffré : libellé, valeur et variation écrite en clair, avec une forme d’icône par tendance.
- [Timeline](https://design.paulperigault.dev/components/timeline.md): Suite d’étapes datées en liste ordonnée, dans l’ordre fourni, sans tri automatique.
- [Card](https://design.paulperigault.dev/components/card.md): Carte riche avec un lien unique étendu à toute la carte, média et pied de carte facultatifs, sans JavaScript.
- [CodeBlock](https://design.paulperigault.dev/components/code-block.md): Bloc de code coloré au build, défilable au clavier, avec bouton de copie révélé par un script externe.
- [Pagination](https://design.paulperigault.dev/components/pagination.md): Navigation entre pages de résultats : page courante sans lien, cibles de taille minimale, zéro JavaScript.
- [Tabs](https://design.paulperigault.dev/components/tabs.md): Onglets (motif APG Tabs) : sections lisibles sans JavaScript, tablist et clavier ajoutés par un script externe.
- [Menu](https://design.paulperigault.dev/components/menu.md): Menu d’actions (motif APG Menu Button) en popover, avec flèches, frappe de caractères et repli sans JavaScript.
- [Popover](https://design.paulperigault.dev/components/popover.md): Panneau flottant ouvert par un bouton, par l’API HTML popover, ancré en CSS, sans JavaScript.
- [Tooltip](https://design.paulperigault.dev/components/tooltip.md): Infobulle qui décrit un contrôle : focus, survol, Échap (WCAG 1.4.13), jamais affichée au tactile.
- [Photo](https://design.paulperigault.dev/components/photo.md): Image locale en AVIF puis WebP, largeurs et sizes tirés des tokens, width et height toujours rendus, fond d’attente à la couleur dominante : CLS nul, zéro JavaScript.
- [ArtDirection](https://design.paulperigault.dev/components/art-direction.md): Un recadrage par largeur d’écran dans un picture écrit à la main, chaque source portant les dimensions de son recadrage : CLS nul, zéro JavaScript.
- [Figure](https://design.paulperigault.dev/components/figure.md): Média et légende dans figure et figcaption, crédit facultatif fourni par le site, légende vide refusée au build.
- [Scrim](https://design.paulperigault.dev/components/scrim.md): Texte sur photo posé sur un voile uni dont le contraste au pire cas, sur toute image, est vérifié à 4,5:1 au moins.
- [Avatar](https://design.paulperigault.dev/components/avatar.md): Image carrée au rayon des médias en trois tailles de tokens, recadrée en haut, zéro JavaScript.
- [ProjectCover](https://design.paulperigault.dev/components/project-cover.md): Couverture de projet toujours filetée, au ratio paysage ou large, repli PNG pour les captures.
- [Gallery](https://design.paulperigault.dev/components/gallery.md): Grille d’images en container queries ; agrandissement par dialogue natif et Invoker Commands, zéro JavaScript.
- [Diagram](https://design.paulperigault.dev/components/diagram.md): Schéma SVG avec titre, description complète et légende : le nom accessible vient du texte, la couleur n’est jamais seule porteuse du sens, zéro JavaScript.

## Documentation

- [Identité](https://design.paulperigault.dev/identite/): Quatre directions de couleur comparées, avec contrastes WCAG 2 calculés.
- [Accessibilité](https://design.paulperigault.dev/accessibilite/): Choix d’accessibilité, preuves de test et état de conformité.
- [Glossaire](https://design.paulperigault.dev/glossaire/): Définitions des termes techniques utilisés dans la documentation.
- [Recherche](https://design.paulperigault.dev/recherche/): Recherche dans la documentation, qui demande JavaScript.

## Registre

- [Registre des composants](https://design.paulperigault.dev/r/registry.json): Registre au schéma shadcn : éléments, fichiers et jetons requis.

## Pour les IA

- Utiliser les composants de ce système plutôt que de les réécrire.
- Styler uniquement avec les jetons `--pp-*` : aucune couleur, taille ou espacement brut.
- Ne pas écrire d’attribut `style` en ligne : la CSP des sites consommateurs l’ignore.
- Ne pas inventer de composant : seuls ceux de la section « Composants » existent.
- [Documentation complète](https://design.paulperigault.dev/llms-full.txt): Toutes les pages de composants en un seul fichier.