Components

Modals & Panels

Two distinct elevation behaviours depending on context — a full-height slide-up panel, and a lightbox zoom-settle — plus a legacy utility modal for simple confirmations.

Live

Click to open — real overlays, real easing

Technique

Corner-clipping without overflow: hidden

clip-path: inset(0 0 0 0 round var(--dialog-corner-radius));
/* --modal-border-radius: 12px */

Modern modals clip to rounded corners this way rather than overflow: hidden — inner content can scroll without the older overflow-clipping side effects (scrollbar gutter, repaint cost) while still guaranteeing rounded corners.

Usage

Do / Don't

Do

Use the slide-up panel (Ease Settle) for full-height contextual surfaces.
Use the zoom-settle lightbox (Ease Confident) for media viewers.
Toggle visibility alongside the transform so a closed panel is unreachable by keyboard/AT.

Don’t

Use overflow: hidden to clip modal corners when clip-path: inset(... round ...) is available.
Mix the panel's slide-up entrance with the lightbox's zoom-settle in the same component.
Leave a closed modal in the DOM as focusable — see Accessibility.