Smooth Drawer

Accessibility

• A native modal dialog labelled by the title.
• Details are inert at Peek, so focus cannot land below the fold.
• The toggle reports aria-expanded, so nobody has to drag.

Motion

• Moves with transform only, so resizing never lays out the page.
• Rubber bands 0.3 past the top and snaps on a 0.25 spring. Over 500 px/s picks the next height.
• Order details moves the sheet and turns the chevron in 280 ms.
• Totals roll when an option changes.
• With reduced motion, it jumps to each height and totals swap.

Responsive behavior

• Peek ends 18 px under Order details. Expanded hugs its content and stops 48 below the top.
• 424 wide on Web and the screen width minus 16 on Mobile, docked to the bottom edge.

Performance

• Position is one motion value on a transform, so a drag re-renders nothing until the sheet settles.
• The details fade is derived from the same value, with no scroll or drag listeners of its own.
• Details stay mounted and inert at Peek, so expanding has nothing to load.

• Import SmoothDrawer and SmoothOption from @/components/fetaui/smooth-drawer after installing it.
• title, peek and children are required. peek holds the main action and peekHeight defaults to 210.
• showLabel defaults to Show details and hideLabel to Hide details. Pass your own, like Order details at checkout.
• Totals and delivery in the demo are local state. There is no lock prop, so gate a payment in your own handler. Composes Modal and Button.