Overlay & Alert

Modal dialogs for focused interactions and inline alerts for contextual messages. Modal has focus trap, backdrop dismiss, and Escape key support. Alert is an in-flow callout (unlike Toast which floats).

Alert

Note: This pipeline requires a configured source connection before activation.

Build passed. All 14 tests passed. Pattern published to registry.

Schema drift detected. 3 columns added since last sync. Review before proceeding.

CI failed. Linting errors in main.py line 42. Fix and push to retry.

Modal

Modal Sizes

sm 360px — rename, confirm, single-field forms

default 480px — standard dialogs, short forms

lg 640px — schema preview, code editor, data tables

Panel

Slide-over drawer for editing, detail views, and settings. Opens from either edge. Focus-trapped with Escape key support. Can be made persistent for sidebar layouts.

Side & Persistent

Use side="left" for navigation drawers and history panels. Use persistent to render the panel inline without a backdrop — ideal for split-view layouts on wider screens.

Panel Props

Width

narrow 360px — settings, simple forms

default 480px — edit forms, detail views

wide 640px — code editors, data tables, schema previews

Side

right Default. Slides from the right edge — edit forms, detail views, settings.

left Slides from the left edge — navigation drawers, conversation history, sidebar content.

Persistent

false Default. Overlay mode — backdrop, focus trap, fixed position, Escape to close.

true Inline mode — no backdrop, no focus trap, relative position. Use in flex layouts for split-view patterns.

TOKEN REFERENCE

Alert:

--alert-radius: var(--radius-md) --alert-padding: var(--space-md) --alert-border: var(--elevation-border) --alert-bg: var(--color-surface)

Modal:

--modal-width: 480px --modal-radius: var(--radius-lg) --modal-shadow: var(--elevation-overlay) --modal-backdrop: var(--color-overlay)

Panel:

--panel-width: 480px --panel-radius: 0 --panel-shadow: var(--elevation-overlay) --panel-backdrop: var(--color-overlay)