Modal — Unfold

Features

• Surfaces, ink, shape, and elevation adapt to every supported design system through --elevation-modal / --card-shadow.
• Disclosure state keeps aria-controls and aria-expanded synchronized, with 44px minimum targets.
• Editorial hero with a terracotta eyebrow, italic serif headline, subline, and a single wax-warm call-to-action
• One accessible dialog that reveals with the signature Unfold animation
• The letter unfolds from scaleY(0.8) to full height with a top-center origin; the inner copy is counter-scaled so it never squashes
• Letter content — wax seal, dateline, serif title, hairline rule, body, actions — staggers in with small translateY and opacity delays
• A wax-seal mark, dateline caption, and hairline rule carry the component's paper-and-ink identity
• Closes via the × button, Set aside, Reply, overlay click, or the Escape key
• Focus moves into the open dialog box and returns to the trigger on close, with a focus trap on Tab
• Responsive layout that stacks the dialog actions on small screens
• Fully respects prefers-reduced-motion

Accessibility

Dialog semantics

The dialog box carries role="dialog", aria-modal="true", and aria-labelledby pointing at its title

Hidden state

The closed dialog is aria-hidden="true" and inert; JS flips both when opening

Focus management

The dialog box (tabindex="-1") receives focus on open; focus returns to the trigger on close

Focus trap

Tab and Shift+Tab cycle within the dialog while it is open

Trigger semantics

Native <button> trigger with aria-haspopup="dialog" and an explicit aria-label

Button labels

Every button — close, Set aside, Reply — has an explicit aria-label

Escape hatch

Escape key, overlay click, and three buttons all dismiss the dialog

Focus indicators

Global :focus-visible outline using the --ring token

Reduced motion

prefers-reduced-motion: reduce disables all transitions

Customise it with AI

Open Modal — Unfold in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the modal is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.