We will not create any tokens for this.

Resolution: Create demo page to identify problematic use cases where two elements try to be on the top layer (open dialog with toast message) and try to figure out how we can control which takes precedence. Also, confirm with an example if e.g. dropdowns or tooltips work in an open dialog in the top layer.

Here is a codepen testing multiple popovers on the same page: https://codepen.io/leamcg/pen/yyBxxKE

The behaviour with popover elements is that the most recent one to appear on the screen will always be placed on top of others within the #top-layer. Adjusting the z-index won't change the stacking order of these elements.

A popover inside another (e.g., a dialog within a dialog, or a tooltip inside a dialog) should not cause any issues. The child popover is not restricted by the parent. However, there is a potential concern with toasts and alerts, as they may end up appearing beneath a dialog backdrop, making them less visible. If the toast or alert is a popover, its visibility depends on when it appears relative to the dialog: if the toast appears before the dialog opens, it will be positioned behind it; if it appears after, it will be on top and clearly visible. A solution could be to listen to popovers appearing on the page and simply rerendering toasts when they do to make sure they are always on top. Though the native behavour might actually make sense - if a toast is visible and a user interacts with the UI to open a dialog, it's reasonable to assume the toast is less important and can be obscured.

Proposed resolution: use top layer the standard way for components that can benefit from it (e.g. not the header megadropdown).