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. The enhancer wires open/close triggers and optional backdrop dismissal.

Modal

Open the dialog, then press Esc or click the backdrop to close. Toggle JS off to see the native fallback.

Live

Confirm action

This dialog is the native dialog element. Press Escape or click the backdrop to close.

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(container, { closeOnBackdrop, defaultOpen, onOpenChange });
// 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	—	Controlled visibility; pair with `onOpenChange`.
closeOnBackdrop	boolean	true	Dismiss when the backdrop is clicked.

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-overlay	Backdrop color.
--hl-radius-lg	Dialog corner radius.
--hl-shadow-lg	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.