Toasts can't close when Modal is up

[nicolehollant]

Description

I noticed there can be some conflicts between <UNotifications /> and headless ui's dialogs. This makes it so toasts can't be closed when a <UModal /> is up. I'm not sure how to best solve this since it seems like it's more-so because of headless ui's focus trapping, but I've had some luck with changing where I mount <UNotifications /> so it's teleported to the body

<Teleport to="body">
  <UNotifications />
</Teleport>

Stackblitz for this: https://stackblitz.com/edit/nuxt-ui-vyjawz?file=pages%2FwithTeleport.vue

• pages/index.vue mimics the current docs recommendation
• pages/withTeleport.vue teleports <UNotifications /> to the body (allows you to click the close button but can't tab to it)
• pages/withOpenDialog.vue has some rough ideas for dealing with headless ui's focus management. I'm pretty much just conditionally rendering the primary <UNotifications /> based off the modal being open and toasts existing, but it's pretty hacky and jumpy

Additional context

No response

[benjamincanac]

The UNotifications component should already be teleported to the body since #909. It has been released in 2.11.0.