Modal

Three parts at gap 16: a 32 title row, the 140 slot, a 96 button column. Height hugs inside 24 of top padding and 20 at the bottom. The stroke sits outside and costs no size. The title fills the row, the 32 close takes what it needs. Radius is 32 on the top two corners, 0 on the bottom two, on a component the file calls a centred dialog.

The pink marks an empty slot in the docs, not something the component ships. The buttons are a Brand Filled and a Brand Link at md, stacked, not side by side, so a long label never truncates.

The hatch is this page's ground. The sheet is white on glass, so a white stage leaves nothing to see and nothing for the blur to act on. Only the top edge ships: 11 of a second sheet behind, then 23 of the front one. The Drag Handle sits at y 34 inside a 34 tall frame that clips, so it never draws. liquidGlass/mid uses refraction and dispersion CSS cannot express, so this runs a 72 percent fill with a 15px blur, an approximation, not a match.

No State axis, no size axis, no boolean. The two buttons are Button instances with their own properties: a destructive dialog swaps the first to Type Error on the instance, not here. The close is a Compact Button at Style Transparent. A modal with no decision is a Toast or an Alert.

The last two are single mode primitives: the back sheet stays white 24 percent and the drag handle black 16 percent even on a dark sheet, though the handle never renders. Geometry runs on radius/3xl 32, spacing/6 24, spacing/5 20, spacing/4 16 and spacing/2 8, icon stroke 2 and 2.5 on the close.

One modal at a time, never one opened from another. The close button and the secondary action do the same job here, so give the secondary a real label, not a second dismiss. Reach for Modal Sheet when the content is a list or a picker: a sheet is easier to reach with a thumb and easier to leave.