Overlays

Modals & Drawers Builder Component

Modals use 12px radius and shadow-lg. Max-width 560px (content modal 1080px). Drawers are 460px right-anchored panels. Scrim: rgba(35,64,59,.15) (Alpine 15%) — warm, on-brand, and non-obscuring.

Pick your variant first: the variant controls button colors and max-width — always choose by the action's destructive nature, not by visual preference.

If the dialog…	Variant	Default buttons
Confirms a destructive action (Delete, Archive, Remove — cannot be undone)	`alert`	outline Cancel + danger primary
Confirms a non-destructive action (Publish, Save, Enable, Send)	`confirm`	outline Cancel + Alpine primary
Contains a form, comparison view, or scrollable body content	`content`	None — author specifies

Alert Modal Component

Destructive-confirmation pattern. Button-color rule: outline Cancel (Alpine border + Alpine text) on the left, danger primary on the right (Canyonlands bg + Salt text). Verified against DS button rules — these are the canonical pairings for destructive confirmations.

Menu Dropdown Component

Floating menu container. Items can carry an icon, a destructive flag (red Delete), a separator, or a section header. Shortcuts render right-aligned for keyboard discoverability.

Modal variants

Confirm (non-destructive)

Content (1080px)

Mount point:

<div class="bsn-modal-mount" data-bsn-modal='{"variant":"alert","title":"…","body":"…","actions":[…],"closable":true}'></div>

Variants: alert (560px, destructive — outline Cancel + danger primary), confirm (560px, non-destructive — outline Cancel + primary OK), content (1080px, scrollable body — for forms / comparisons / content browsing).

Config: variant, title, body (plain text — escaped + wrapped in default paragraph) OR bodyHtml (raw HTML), actions[] (each with label, variant = "outline"|"primary"|"danger"|"secondary", optional size = "sm"|"md"), closable (default true), overlay (default true — pass false for inline docs/static previews), class.

Button-color rules (audited against DS): Alert variant defaults to outline + danger. Confirm variant defaults to outline + primary. Never use primary on Alpine/dark surfaces — see anti-pattern in SKILL.md. Destructive actions use danger (Canyonlands bg, Salt text). Hardcoded modal HTML is a violation — always use the mount point.

Menu config: items[] entries are one of: {label, icon?, shortcut?, value?} (normal item), {separator:true} (1px divider), {section:"…"} (uppercase section header), {label, danger:true, …} (red destructive item), or {disabled:true, …} (muted, non-interactive). Mount: .bsn-menu-mount · Config: data-bsn-menu.