Modal

Skořápka dialogu s a11y laťkou: focus trap, ESC, scroll lock, aria-modal a návrat fokusu na spouštěč.

Kdy použít

Obsah má překrýt obrazovku a vyžádat si rozhodnutí, než se dá pokračovat.
Delší editace záznamu — tam, kde je co vysvětlovat, dává dialog místo i soustředění na jednu věc. Rychlá úprava pár polí vedle seznamu zůstává v IngotDrawer.
Dialog není jen „potvrď / zruš“ — je v něm formulář, náhled nebo výběr.
Vždycky, když bys jinak psal <div className="fixed inset-0 …"> znovu. Dialog má být právě jeden způsob, ne tolik způsobů, kolik je obrazovek — a tohle primitivum je ten způsob.

Jde o potvrzení destruktivního kroku. Na to je IngotConfirm, který nad tímhle primitivem stojí a přidává tlačítka i veto.
Sdělení nikoho neblokuje („uloženo“, „nepovedlo se“). Dialog je nejtěžší afordance, kterou máš; hlášení v místě děje stačí.
Obsah je tak dlouhý, že se v panelu jenom posouvá. Pak je to obrazovka, ne dialog.

title: ReactNode — Vykreslí se do nadpisu h2, na který ukazuje aria-labelledby.
onClose: () => void — Volá ESC, kliknutí do pozadí i zavírací tlačítko.
children: ReactNode — Obsah panelu.
closeLabel: string — Přeložený aria-label křížku — Ingot překlady nemá.
width: number — Maximální šířka panelu v px. Výchozí 480.
testId: string — data-testid overlaye; panel dostane `${testId}-panel`.