[Drawer] Support an explicit drag area inside scrollable Content

I’d like a fixed header inside Drawer.Content to control the Drawer with mouse and touch, while the list scrolls underneath it.

✅ With an explicit drag area

Open solution in StackBlitz ↗

The whole header can expand, collapse and dismiss the Drawer, even after scrolling the list. Buttons still work.

https://github.com/user-attachments/assets/10ef2afd-a6b4-4f2c-8e11-3b994ca1e56b

❌ Current behavior

Open reproduction in StackBlitz ↗

Unfortunately, the same header gestures are blocked without the patch.

https://github.com/user-attachments/assets/6fadb01b-f5e1-4bf7-811a-ef1e080a33e1

Keeping the header inside the scroll container enables the scroll-linked background and blur shown above. The PoC uses a provisional attribute to mark the drag area:

<Drawer.Content>
  <header data-base-ui-drag-area="">
    {/* Handle, title, Back and Add */}
  </header>
  <AddressList />
</Drawer.Content>

Could this become a supported API, perhaps Drawer.DragArea?

If there’s interest from the maintainers, I’m ready to turn this PoC into a PR following the project’s contribution guidelines, with regression tests and any API adjustments you’d prefer.

Try it: Solution · Without the patch · Source and patch

Related discussions: independently draggable header (#38) · mouse/pen swipe behavior inside Content (#5286).