Dialog
Dialog base prototype
<wc-base-dialog-root class="relative inline-block">
<wc-base-dialog-trigger class="rounded border px-3 py-1.5 cursor-pointer select-none">
Open Dialog
</wc-base-dialog-trigger>
<wc-base-dialog-mask class="base-dialog-demo-mask bg-black/50"></wc-base-dialog-mask>
<wc-base-dialog-content class="base-dialog-demo-content w-full max-w-md rounded-lg border bg-white p-6 shadow-xl">
<wc-base-dialog-title class="text-lg font-semibold mb-2">Confirm Action</wc-base-dialog-title>
<wc-base-dialog-description class="text-sm text-slate-600 mb-6">
Are you sure you want to proceed? This action cannot be undone.
</wc-base-dialog-description>
<div class="flex gap-3 justify-end">
<wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded border cursor-pointer select-none">Cancel</wc-base-dialog-close>
<wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded bg-blue-600 text-white cursor-pointer select-none">Confirm</wc-base-dialog-close>
</div>
</wc-base-dialog-content>
</wc-base-dialog-root>The Dialog family provides protocol-layer building blocks for modal windows. Root owns the open state; this page does not introduce a non-modal modal switch.
- dialog-root: Holds the
openstate and provides context to all child parts. - dialog-trigger: Opens or toggles the dialog on click.
- dialog-mask: Renders the backdrop mask and follows the open state for enter/leave transitions.
- dialog-content: Handles focus trapping, overlay dismissal strategies (ESC, outside press), and enter/leave transitions.
- dialog-title: Semantic title automatically linked to content via
aria-labelledby. - dialog-description: Semantic description automatically linked to content via
aria-describedby. - dialog-close: Closes the dialog on click.
Pass alert to dialog-root to turn it into an alert dialog: it sets role="alertdialog" and disables outside-press dismissal while keeping ESC close.
Draft workspace Mask behavior
Section titled “Draft workspace Mask behavior”The workspace revision of P-BASE-DIALOG-MASK-DEFAULT-ACTION keeps Content as the independent focus/dismissal owner. A participating Mask requests default-action prevention for its root-scoped pointer.down, so the background pointer default cannot overwrite Content’s close-time focus restoration. A Mask with passthrough=true does not request this prevention. Mask does not take over dismissal, propagation or keyboard handling, and does not promise to distinguish arbitrary native descendants that lack an independent interaction owner inside it.
This is the draft workspace behavior introduced by PR #777, not a claim about the previously published 0.2 package. A decorative Surface can consume existing Transition facts for paint; it must not become another Dialog, focus or dismissal owner.