A reusable gb-dialog system to replace the one-off
sanction-risk-dialog.html (R12 — the product's highest-stakes moment).
All four ship: overlay, raised card, focus trap (visualised), Esc, and
role="dialog" + aria-modal="true". Same canonical tokens;
four incompatible form factors.
The conventional modal. A dark scrim dims the pane (1.4.11 boundary on the scrim
itself), a raised card sits dead-center, the scrim is the only
click-target that dismisses. All R12 weight lives in the centered card's
severity glyph + title — no scrim tricks, no sidesheet ambiguity. Best when
the interrupt must feel like a stop-the-world moment.
Italicization missing for case name. This is the only sanctioned interruption — please review before applying.
A right-edge sheet — context stays visible (the citation remains readable behind it) but the sheet is a first-class, hard-edged panel with a 1px hairline + soft shadow. Best when the user needs to compare dialog content against the document pane; weakest for stop-the-world moments. Suits the taskpane's 350 px width because it doesn't fight the rail.
This citation's case name is not italicized. Rule 10.2 requires italicization for case names in textual sentences.
The fix is reversible — Word's undo (⌘Z) reverts the change.
A bottom-anchored sheet with a 1× drag handle (visual cue, not a real gesture) — familiar from mobile OSes, surprisingly apt for the 350 px taskpane because it leaves the citation visible at the top. Best for "show me the citation next to the dialog content" use cases. Tone is confirmable rather than alarmist.
The following citation will be modified to comply with Bluebook 10.2:
Lorem v. Ipsum, 123 U.S. 456 (1923) → Lorem v. Ipsum, 123 U.S. 456 (1923)
An inline notice — no scrim, no float. The dialog occupies the top of the pane, the rest of the pane still scrolls beneath. Suits the engraved-parchment aesthetic (it reads like a printed margin note) and keeps the document visible at all times. R12 reads more like a "checked the title page and found this" than "stop the world". Weakest as an interrupt; strongest as a collaborative, glanceable flag.
The case name in this citation is not italicized. Rule 10.2 requires italicization; some courts have sanctioned briefs for this omission.
Lorem v. Ipsum, 123 U.S. 456 (1923)
A · modal: Full scrim, centered card. Strongest interrupt. The conventional choice — the audit's complaint that the current dialog "has no dark mode" is exactly this direction.
B · sheet-right: Edge-anchored, context visible. Suits comparison flows; weakest as stop-the-world.
C · sheet-bottom: Mobile-paradigm sheet. Familiar to anyone who's used a phone; reads as confirmable not alarmist. Good for 350 px width.
D · notice: Inline, no scrim. Most parchment-native (a marginal note, not a popup). Most collaborative; least interruptive.
All four use the same --raised + --hair + --err-tint tokens; none reuse the legacy red #c0392b from
sanction-risk-dialog.html. All four expose focus-visible rings, accessible names, and meet WCAG 2.1 AA in both modes.
Direction D also closes the audit finding that the current dialog has "no headings" — all four now have an <h2> title.