fix(Modal): button side-effects when used within a button group

[romhml]

🔗 Linked issue

Resolves #2978

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Fixes side-effects on button components in a modal which are rendered as if they are in a ButtonGroup if the modal is within a ButtonGroup.

The solution here is to override Button's group injection key in the Modal component. This is not ideal but solves the issue. A better solution could be to update the button groups style to only affect direct childs (https://github.com/nuxt/ui/blob/v3/src/theme/button-group.ts#L1).

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[cloudflare-workers-and-pages]

Deploying ui3 with    Cloudflare Pages

Latest commit:	cd9f97c
Status:	✅  Deploy successful!
Preview URL:	https://15302a26.ui-6q2.pages.dev
Branch Preview URL:	https://fix-modal-within-button-grou.ui-6q2.pages.dev

View logs

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3138

commit: cd9f97c

[benjamincanac]

@romhml We cannot affect only direct children as this whole system has been made to handle components that have their button wrapped with a div for example 😬

[romhml]

@benjamincanac isn't this case handled by the buttonGroupVariantWithRoot variant? I don't see a lot of use cases where a button that should not be affected by the ButtonGroup will be nested inside one aside for the modal component, if that's the case I think we can go with the solution here even though it's not perfect.