# XWUIOverlayResponsiveModal

A single modal that renders as a centered dialog on desktop and as an edge-anchored sheet (top/bottom/left/right) on mobile - one component instead of hand-wiring `XWUIOverlayDialog` and `XWUIOverlayBottomSheet`/`XWUIOverlaySideSheet` to swap at a breakpoint. The switch is pure CSS, so it adapts live even while the modal is open.

## Basic Usage

Default bottom-sheet-on-mobile, centered-dialog-on-desktop modal.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Bottom sheet on mobile, centered dialog on desktop.
```

## Side Variants

Anchor the mobile sheet to any of the four edges.

```example
file: examples/SideVariants.ts
html: examples/SideVariants.html
title: Side Variants
description: Each of the four anchor edges.
```

```api
```