Add optional safe triangle to <post-popovercontainer>

[gfellerph]

A safe triangle allows hovering a different active area with your mouse without triggering another hover event.

Safe triangle

Example of red colored safe triangle from shoelace. The safe triangle allows the mouse to move to level 2 menu entries directly and not triggering another level 1 hover interaction when the mouse path crosses another level 1 item. The safe triangle spans from the current mouse position to the nearest edges of the open menu.

sr1.mp4

https://shoelace.style/components/menu

Safe trapezoid

A safe trapezoid builds a bridge between two elements, e.g. a tooltip and it's trigger so the mouse can safely move between the two elements without closing the tooltip. The safe trapezoid connects the nearest outer edges of each element and does not depend on the mouse position.

Proposed API

<post-popovercontainer safe-space="triangle|trapezoid">
  <slot></slot>
</post-popovercontainer>

Implementation reference

• Shoelace menu styles
• Shoelace menu logic

Tasks

Preview Give feedback

1. Implement a new API for the <post-popovercontainer> allowing to conditionally enable safe spaces