Drawer

catnip-drawer is a modal, end-side panel for focused tasks that need more vertical space than a Dialog, such as editing details, reviewing records, or completing a multi-field form.

It renders with the native <dialog> element and uses a controlled open state. Consumers compose all visible content through the header slot, the default body slot, and the footer slot; the Drawer does not prescribe heading or footer-action APIs. Grid-aligned widths are s = 492px, m = 578px, and l = 664px. --catnip-drawer-width overrides the t-shirt size on desktop.

Live example

Accessibility

• Opens with showModal(), exposes role="dialog" and aria-modal="true", and makes the page behind it inert.
• Moves focus into the drawer, honors an autofocus descendant, relies on native focus containment, and uses a fallback Tab trap when native modal opening is unavailable.
• Restores focus to the previously focused element after closing.
• Requires consumers to provide an accessible name through ariaLabel or ariaLabelledby; optional supporting copy can be connected with ariaDescribedby.
• Native dialog semantics announce the drawer's role, name, and optional description when focus enters. An aria-live region is intentionally not added because it would duplicate that announcement.
• Escape requests dismissal when closable=true; backdrop dismissal remains opt-in.