BottomSheet
BetaL3 — 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).
import { BottomSheet } from "@lyra/tokens/components";Playground
Démo interactive — réglages du playground (props ajustables en direct) à venir.
const [open, setOpen] = useState(false);
<BottomSheet isOpen={open} onOpenChange={setOpen} title="Filtrer">
{/* contrôles de filtre */}
</BottomSheet>Documentation
Aperçu unique — pas de variantes documentées.
isOpen, onOpenChange, title, children, isDismissable, enableDragToDismiss, closeLabelconst [open, setOpen] = useState(false);
<BottomSheet isOpen={open} onOpenChange={setOpen} title="Filtrer">
{/* contrôles de filtre */}
</BottomSheet>- Même socle a11y que Modal : focus trap, restauration de focus, role='dialog', titre lié.
- Drag-to-dismiss = raccourci tactile optionnel — Échap/clic-extérieur/bouton fermer suffisent seuls (WCAG 2.5.1, pas de geste requis).
- Poignée de drag hors du tab order (décorative + pointeur uniquement) — n'intercepte jamais la navigation clavier.
- prefers-reduced-motion : transition d'entrée/sortie supprimée (apparition/disparition instantanée).