input group with nested dropdown differs from btn group

[VividLemon]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

https://getbootstrap.com/docs/5.3/components/button-group/#nesting

https://getbootstrap.com/docs/5.3/forms/input-group/#buttons-with-dropdowns

button can render a nested div while input groups cannot. It's not that they can, they are not allowed to otherwise it breaks the class.

Since there is no wrapper div, I'm not sure how one would apply https://getbootstrap.com/docs/5.3/components/dropdowns/#directions

I'm not sure if technically this is feasible, I've seen remarks about input group being an annoying class to deal with.

Motivation and context

Originally the issue stemmed from https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue#L2

We always render a wrapping div here to protect Vue directives. However, due to this constraint, I think we may need to render a fragment. Which has drawbacks. Practically I don't think there is significant usage with directives to need some hacky implementation, with the best solution on our end just being to render a fragment.

There is also the question on how to render those direction classes