What these pages are

Every page mounts the same definition from shared.js through a different adapter, so a difference between two adapters is visible by opening them side by side. They are also the fixture the Playwright suite runs against, which is why the ids below are stable.

The library is served from src/ through the dev server, aliased to the published specifiers, so each page reads exactly like consumer code.

The shared definition

A plain item, a danger variant, a brand variant that exists only in playground.css, an item disabled on a locked row, an item hidden on a folder row, a checkbox, a radio group, separators that collapse when the item between them is hidden, a two level submenu, and a submenu whose items resolve asynchronously.

Right-click a file row and then a folder row: Download disappears and the two separators around it collapse into one.

The three placement traps

Each page carries all three, because they are the whole reason the menu lives in the top layer.

#trap-overflow clips its children (overflow: hidden; height: 200px). #trap-transform is a containing block for fixed positioning (transform: translateZ(0)). #trap-edge sits inside 50px of the inline-end and block-end viewport edges, so the menu must flip on both axes.