Aller au contenu principal

LyraDesign System

Accueil Charte Aurora Identité & brands

Thème

PLÉIADES

© 2026

Composants

Le catalogue des blocs réutilisables du système — structure, primitives et composés. 32 composants · WCAG AA

Rechercher un composant

32 composants

L1 · Structure

StackBetaL1 — Primitive de layout flexbox : empile des enfants en ligne ou colonne, espacement via l'échelle --space-*. RSC-safe, zéro dépendance client.
GridBetaL1 — Primitive de layout CSS Grid : colonnes fixes avec breakpoints (colsSm/Md/Lg) ou mode auto-fit (minChildWidth). RSC-safe, zéro dépendance client.
ContainerBetaL1 — Contrainte de largeur + gouttières : centre le contenu, borne la largeur max sur l'échelle --bp-* (sm à 2xl). RSC-safe, zéro dépendance client.

L2 · Primitives

ButtonBetaL2 — '<'button'>' natif stylable : variantes primary/secondary/ghost/danger, tailles sm/md/lg, états disabled/loading. Touch-target ≥44px. RSC-safe (props-driven).
LinkBetaL2 — '<'a'>' natif stylable : variantes primary/subtle, lien externe (target=_blank + rel sécurisé + indice accessible), état disabled sans lien mort cliquable. RSC-safe.
InputBetaL2 — '<'input'>' natif + label + description + erreur. aria-describedby chaîné (description + erreur), aria-invalid, required. RSC-safe (non contrôlé côté Lyra).
CheckboxBetaL2 — '<'input type="checkbox"'>' natif + label + état indeterminate. "use client" (indeterminate posé via ref, seule capacité hors RSC). Touch-target ≥44px.
ToggleBetaL2 — Switch on/off, role="switch" sur '<'button'>' natif. "use client" (bascule d'état). Touch-target ≥44px, jamais couleur seule (position curseur + aria-checked).

L3 · Composés

HeaderStableAppBar présentationnel cross-app : lockup marque (mark VegaHarp + wordmark), navigation optionnelle, slot actions droite, sticky optionnel. Tokens-only, a11y landmark '<'header'>', 4 thèmes.
FooterStableFooter présentationnel cross-app : lockup copyright PLÉIADES, liens optionnels, tagline optionnel. Tokens-only, a11y landmark '<'footer'>', 4 thèmes.
AppSwitcherStableSélecteur d'applications Pléiades : bouton grille ouvrant un menu cross-app. Props-driven, tokens-only, 4 thèmes, a11y WCAG AA (aria-haspopup, navigation clavier, Échap).
AuroraCardStableCard elevated générique : glow optionnel (cyan / magenta / none), slot header + content + footer. Primitive Lyra réutilisable dans toute la suite.
LivePulseStableIndicateur métrique live : point plasma + valeur + trend. Glow pulsé disponible. Primitive générique d'affichage de métrique pour toute la suite.
ProgressArcStableArc de progression animé à l'entrée viewport (IntersectionObserver) — 2 variantes : linéaire + radiale (jauge FIRE). Tokens-only, prefers-reduced-motion. Primitive générique.
ProgressBarStableBarre de progression linéaire props-driven. Statut ok / near / over / neutral via tokens --color-envelope-*. A11y role=progressbar, prefers-reduced-motion.
StatusBadgeStableBadge d'état pill — couleur + TEXTE (jamais couleur seule, WCAG 1.4.1). Variants ok / warning / error / success.
SectionCardStableCarte de section avec titre + badge + slot contenu + footer optionnel. Trois surfaces : default / raised / kpi. Tokens Aurora sémantiques, a11y section+aria-labelledby.
ThemeSwitcherStableToggle Aurora clair/sombre — 3 variantes : row (pill header), stack (sidebar pleine largeur), icons (compact icône seule). A11y radiogroup, flèches ←/→ (roving tabindex), prefers-reduced-motion.
PulseDotStableAtome d'identité Aurora « Vivant » — indique sync active, marché ouvert, IA en cours. SVG natif, 4 variantes chromatiques (cyan / magenta / amber / dim), animation GPU-only, prefers-reduced-motion.
AuroraBackgroundStableFond aurora du design system — position:fixed, plein écran, z-index:-1. Thème sombre : quad WebGL + shader plasma Simplex. Thème clair : 3 orbes CSS animées. Zéro prop, zéro coût GPU hors famille aurora.
AuroraPlasmaCanvas (ambient)StableAurore ambiante identité app-wide (US-05c) — canvas WebGL plasma sinusoïdal 3 teintes : cyan dominant nord-ouest, magenta sud-est, trace orbitale. Rotation 360°/240s, respiration 14s, vitesse ×0.16. Opacités token-driven (--aurora-ambient-opacity-*), throttle fpsCap + plafond maxDpr pour l'allégé mobile. L'appelant gère reduced-motion / WebGL indispo (cf. AuroraAmbientBackdrop aethos-web).
DeltaChipBetaPuce de variation financière — direction up / down / flat dérivée automatiquement du signe de la valeur. Icône SVG inline optionnelle, tokens Aurora sémantiques, RSC-safe, CSS Modules.
Skeleton (Line / Card)BetaSquelette de chargement. SkeletonLine décorative (aria-hidden), SkeletonCard aria-busy ; le conteneur annonce le chargement. Animation shimmer CSS-only, désactivée sous prefers-reduced-motion. RSC-safe.
ErrorCardBetaCarte d'erreur avec titre, message optionnel, et bouton Réessayer optionnel. role=alert pour annonce immédiate. Tokens Aurora sémantiques (surface-error, border-error), CSS Modules.
StatusBadgeV2BetaBadge d'état pill V2 — 6 variantes : ok / warning / error / success / pending / neutral. Point indicateur optionnel (showDot). live=true ajoute aria-live=polite. CSS Modules, RSC-safe. Remplace progressivement StatusBadge (strangler fig).
FilterChipBetaChip de filtre interactif (toggle actif/inactif) — bouton natif, compteur optionnel, état disabled. Tokens accent Aurora, touch-target ≥ 44px. "use client" (gère onToggle).
ProgressStepperBetaIndicateur d'étapes multi-step (ex. wizard fiscal, flux /import). Étapes done / active / pending via tokens sémantiques. Clamp hors-bornes confirmé (current'<'0 → première étape, current≥length → dernière), aucune exception. RSC-safe.
KpiHeroBetaGrand chiffre héro — gradient radial d'accent optionnel (maquette .fiscal-hero), tone neutral/positive/negative. data-testid transmis au nœud racine (garde-fou P0). Composant neuf, ne remplace PAS PatrimoineKPI. RSC-safe.
SelectBetaL3 — Overlay react-aria-components (Select/ListBox/Popover) : liste déroulante accessible, typeahead, clavier complet. "use client". Statut beta — validation visuelle navigateur en attente (ADR-LYRA-V3-PRIMITIVES-001).
ModalBetaL3 — Overlay react-aria-components (ModalOverlay/Modal/Dialog) : focus trap, restauration de focus, dismiss Échap/clic-extérieur configurable. "use client". Statut beta — validation visuelle navigateur en attente (ADR-LYRA-V3-PRIMITIVES-001).
BottomSheetBetaL3 — Variante mobile du Dialog, bâtie sur le même socle Modal RAC : panneau glissant depuis le bas + poignée de drag-to-dismiss tactile optionnelle. "use client". Statut beta — validation visuelle navigateur en attente (ADR-LYRA-V3-PRIMITIVES-001).
ToastBetaL3 — File de notifications react-aria-components (ToastQueue/ToastRegion/Toast, API UNSTABLE_* côté Adobe — nom instable, comportement stable). Auto-dismiss + dismiss manuel, variantes info/success/warning/error. "use client". Statut beta — validation visuelle navigateur en attente (ADR-LYRA-V3-PRIMITIVES-001).