antiflex/ui
v0.1.0

Make room for one task.

Edit a sample project, review long content, or ask for a deliberate confirmation. Two modal primitives share one native foundation.

Tasks and confirmations

Modal workspaceLocal demonstration
Orbit workspace

Sample workspace · changes stay in this page

Active

Edit project

Update the details your team sees in this sample workspace.

A short note for your team.

Reset this draft?

This only resets the unsaved sample name. Your saved project is unchanged.

Try a reversible, local confirmation. No real project is affected.

Archive Orbit workspace?

The sample project will leave this page’s active list. You can restore it using the action shown afterwards.

Review before continuing

A long-content example with focus placed at the start.

Review topic 1

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 2

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 3

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 4

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 5

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 6

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 7

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Review topic 8

This sample describes how shared components keep workspace screens consistent. Read each section at your own pace. The modal scrolls within the available viewport, and the page behind it stays still.

Focus follows the task

Opening moves focus inside. Tab and Shift+Tab stay within the active modal; Escape closes the topmost modal. Closing restores its invoker. The edit example can open a nested confirmation without closing the parent.

Choose the right interruption

Dialog supports ordinary focused tasks and optional backdrop dismissal. Alert Dialog requires an explicit response and initially focuses its least destructive action. Keep inline feedback inline when it does not require a decision.

Native semantics, explicit ownership

The foundation uses HTMLDialogElement.showModal(). The browser owns the top layer and inert background. Controlled state, validation, asynchronous work, and the next logical focus target belong to the application. These examples update local state and never send project data to a server.

Implementation guidance follows the W3C modal dialog pattern, alert dialog pattern, and HTML dialog standard.