1 viewer
Component · Overlay
Modal
Focus-managed dialog with backdrop and dismiss affordances.
- Category
- Overlay
- Slots
- 6
- States
- 2
- Writer
- Shared
Preview
Hermetic Sandboxed Container
This container executes within CRE8VM with bounded gas and no external host authority.
<Modal title="Hermetic Sandboxed Container" trigger="Open Execution Modal">
<Text
text="This container executes within CRE8VM with bounded gas and no external host authority."
/>
</Modal>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-modal |
| backdrop | .primitive-modal__backdrop |
| header | .primitive-modal__header |
| title | .primitive-modal__title |
| close | .primitive-modal__close |
| body | .primitive-modal__body |
- Modifier
- primitive-modal--{state}
- State attribute
- data-statefrom the state prop
- Role
- dialog
- Hydration markers
- data-cre8-modal, data-cre8-modal-dismiss
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
Accessibility
Focus enters, stays within, and returns from the dialog.
- Dialog has role=dialog, aria-modal, and either a visible title or an aria-label.
- Escape and backdrop dismiss return focus to the triggering control unless the dialog explicitly disables those accidental-dismiss paths.