Destructive Confirm Dialog
A type-to-confirm dialog built on native <dialog>, so the focus trap, top layer and escape handling come from the browser. Focus lands on Cancel, and the button says the verb.
Dialogs, side panels, bottom sheets and confirmations.
The choice between a modal and a drawer is about context: a modal takes the screen and demands an answer, a drawer keeps the page visible so you can compare against it. Detail views want drawers; destructive confirmations want modals. These cover both, plus the phone case, where a bottom sheet is what the platform has trained people to expect.
A type-to-confirm dialog built on native <dialog>, so the focus trap, top layer and escape handling come from the browser. Focus lands on Cancel, and the button says the verb.
Facets with per-option counts, zero-result options disabled rather than hidden so the list never jumps, and a pending selection applied on a button that says how many choices changed.
The share modal where a design mistake is a data leak: general access stated as its consequence rather than its setting, and a copy button that never silently widens access.
Half and full snap points where the content owns the scroll and overscroll-contain keeps the page behind still. The drag handle is a real button, Escape and the backdrop close it, and safe-area padding keeps the last row pressable.
Per-category consent where refusing is exactly as easy as accepting, nothing non-essential is pre-ticked, and the page behind it stays readable — the shape the law expects, wired to your own script gating.
A side sheet for editing a record without losing the list behind it — native <dialog> for the trapping, a data attribute for the slide, and a sticky footer so Save never scrolls away.
The interception that keeps work: three answers rather than two, the changed fields listed by name, a destructive-styled discard, and Escape resolving to cancel.
A non-modal drawer that keeps the list on screen, with previous and next controls for moving between records and an activity tab beside the fields.
Backdrops, sheets, drawers and dialog transitions.
Inboxes, unread badges, grouped feeds and preference panels.
Profile, preferences, team, security and danger zones.
Frosted panels with a blurred backdrop, in copy-paste CSS.
Mega footers, minimal bars, newsletter and sitemap columns.
Month grids, availability pickers, booking flows and time slots.