Drawer

A side panel for editing with the same accessibility floor as the dialog: focus trap, ESC, scroll lock and focus returned to the trigger.

When to use it

Editing where the operator needs to keep seeing the list behind it — the panel covers only part of the screen.
A quick edit of a few fields while the list stays in play. A longer edit that needs explaining belongs in IngotModal — that is where the room and the focus are.
Editing a record from a table row: the drawer opens beside it and the row's context stays in sight.

The content runs longer than roughly two screens. Then it is a page of its own, not a side panel.
The user must decide right now ("confirm / cancel") — that is IngotModal, or IngotConfirm.
Never open another overlay on top of an open drawer. One overlay at a time; announce the result of an action with a toast.

title: ReactNode — Rendered into the h2 heading that aria-labelledby points at.
onClose: () => void — Called by ESC, the close button and — with dismissable — a backdrop click.
children: ReactNode — The panel body. It scrolls on its own; the header and footer stay put.
closeLabel: string — Translated aria-label for the close icon — the Ingot has no translations of its own.
subtitle: ReactNode — Context of the edited record under the title; carried by aria-describedby.
footer: ReactNode — The action bar. Always visible — it never scrolls out with the body.
side: "right" | "left" — Which side the panel slides from. Defaults to right.
width: number — Panel width in px. Defaults to 400, hard cap at 560.
dismissable: boolean — Whether a backdrop click closes (default yes). Turn it off for a form in progress.
testId: string — data-testid of the overlay; the panel gets `${testId}-panel`.