Actions & Overlays

Modal

A dialog overlay built on the native <dialog> element.

stableEnhancer: enhanceModalBuilt on <dialog>hydrateless/modal.css

A dialog overlay built on the native <dialog> element and showModal(), which provides top-layer rendering and focus containment for free. Buttons open and close it declaratively with HTML Invoker Commands (command="show-modal" and command="close"), so it works with no JavaScript; the enhancer adds labeling, background scroll locking, a backdrop dismissal fallback, and the controlled API.

Modal

Open the dialog, then press Esc or click the backdrop to close. With JS off, backdrop dismissal requires native closedby support.

Live

Confirm action

This is a native dialog. Press Escape or choose Cancel or Confirm to close it.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceModal } from '@hydrateless/enhancers/modal';

const handle = enhanceModal(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
open	boolean	Not set	Controlled visibility; pair with `onOpenChange` (Vue: `v-model:open`, Svelte: `bind:open`).
defaultOpen	boolean	false	Uncontrolled initial visibility.
onOpenChange	(open: boolean) => void	Not set	Called after the dialog opens or closes, including native `Esc` and backdrop dismissal.
closeOnBackdrop	boolean	true	Sets `closedby="any"` so clicking the backdrop dismisses the dialog.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires whenever the dialog opens or closes.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Dialog background.
--hl-scrim	Backdrop color.
--hl-modal-inline-size	Dialog width.
--hl-radius-lg	Dialog corner radius.
--hl-overlay-shadow	Dialog elevation.

Accessibility

• showModal() renders in the top layer, traps focus, and makes the rest of the page inert.
• Esc closes natively and focus returns to the trigger on close.

Related

DrawerAn off-canvas panel built on the native <dialog>.PopoverFloating content anchored to a trigger.Command PaletteA filterable list of commands with keyboard navigation.