Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Dialog

Dialog is the first functional controller in this package. It enhances existing Seventh UI CSS markup with state, events, keyboard behavior, focus management, and cleanup.

Playground

The example below is initialized by SeventhUI.init(document) from the browser bundle.

Sizes

Dialog sizes are visual modifiers owned by @seventh-ui/css. The VanillaJS runtime behavior is the same for every size.

Size Class Published width Footer actions
Small sui-dialog--small 288px Stacked, full width.
Medium sui-dialog--medium 474px Stacked, full width.
Expanded sui-dialog--expanded 585px Inline when viewport space allows.
Large sui-dialog--large 648px Inline when viewport space allows.
X-large sui-dialog--x-large 780px Inline when viewport space allows.

Hooks

Dialog uses explicit runtime hooks and preserves the `.sui-dialog` visual contract from `@seventh-ui/css`.

Hook Role
data-sui-dialog Dialog root initialized by the component registry.
data-sui-trigger="dialog" Element that opens the target dialog.
data-sui-target Target id or selector resolved by the trigger.
data-sui-dialog-close Control that closes the active dialog.
data-sui-close-on-outside Opt-in outside pointer dismissal.

Events

Before events are cancellable. After events fire only after DOM state changes.

sui:dialog:before-open
sui:dialog:open
sui:dialog:before-close
sui:dialog:close

Markup

<button data-sui-trigger="dialog" data-sui-target="runtime-dialog">
  Open runtime dialog
</button>

<section id="runtime-dialog" class="sui-dialog" data-sui-dialog>
  <button data-sui-dialog-close>Close</button>
</section>