From e1f77c90f159a4a07742e5939871b383987a10d2 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Tue, 19 Mar 2024 14:24:14 -0700
Subject: [PATCH 1/4] fix(BFormCheckBoxGroup): remove change & input events to
 conform to #1696

---
 .../src/data/components/ComponentReference.ts |  2 +-
 .../src/data/components/formCheckbox.data.ts  | 46 -------------------
 .../docs/src/docs/components/form-checkbox.md |  4 +-
 .../BFormCheckbox/BFormCheckboxGroup.vue      | 11 +----
 4 files changed, 4 insertions(+), 59 deletions(-)

diff --git a/apps/docs/src/data/components/ComponentReference.ts b/apps/docs/src/data/components/ComponentReference.ts
index 49248d3b8..5f6c07524 100644
--- a/apps/docs/src/data/components/ComponentReference.ts
+++ b/apps/docs/src/data/components/ComponentReference.ts
@@ -17,7 +17,7 @@ export interface ComponentReference {
     description?: string
   }[]
   slots: {
-    scope: SlotScopeReference[]
+    scope?: SlotScopeReference[]
     name: string
     description?: string
   }[]
diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
index a459c77e5..163ff948d 100644
--- a/apps/docs/src/data/components/formCheckbox.data.ts
+++ b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -161,30 +161,6 @@ export default {
             },
           ],
         },
-        {
-          event: 'input',
-          description: 'Emitted before the checked value is changed',
-          args: [
-            {
-              arg: 'checked',
-              type: 'CheckboxValue | readonly CheckboxValue[]',
-              description:
-                'Value of the checkbox before the event. Value will be an array for grouped checkboxes or a single value for standalone checkboxes.',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: 'Emitted when the checked value is changed',
-          args: [
-            {
-              arg: 'checked',
-              type: 'CheckboxValue | readonly CheckboxValue[]',
-              description:
-                'Value of the checkbox.  Value will be an array for grouped checkboxes or a single value for standalone checkboxes.',
-            },
-          ],
-        },
       ],
       slots: [
         {
@@ -345,28 +321,6 @@ export default {
             },
           ],
         },
-        {
-          event: 'input',
-          description: 'Emitted before the selected value(s) are changed',
-          args: [
-            {
-              arg: 'input',
-              type: 'CheckboxValue[]',
-              description: 'Value of the checkboxes before the event. Value will be an array.',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: 'Emitted when the selected value(s) are changed',
-          args: [
-            {
-              arg: 'change',
-              type: 'CheckboxValue[]',
-              description: 'Value of the checkboxes. Value will be an array.',
-            },
-          ],
-        },
       ],
       slots: [
         {
diff --git a/apps/docs/src/docs/components/form-checkbox.md b/apps/docs/src/docs/components/form-checkbox.md
index ab55a00a9..cd6ed24c3 100644
--- a/apps/docs/src/docs/components/form-checkbox.md
+++ b/apps/docs/src/docs/components/form-checkbox.md
@@ -934,7 +934,7 @@ const indeterminate = ref(true)
               v-model:indeterminate="asIndeterminate"
               aria-describedby="flavors"
               aria-controls="flavors"
-              @change="toggleAll"
+              @update:modelValue="toggleAll"
             >
               {{ allSelected ? 'Un-select All' : 'Select All' }}
             </BFormCheckbox>
@@ -972,7 +972,7 @@ const indeterminate = ref(true)
         v-model:indeterminate="asIndeterminate"
         aria-describedby="flavors"
         aria-controls="flavors"
-        @change="toggleAll"
+        @update:modelValue="toggleAll"
       >
         {{ allSelected ? 'Un-select All' : 'Select All' }}
       </BFormCheckbox>
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
index e12d78df6..8fe044145 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, provide, ref, toRef, watch} from 'vue'
+import {computed, provide, ref, toRef} from 'vue'
 import BFormCheckbox from './BFormCheckbox.vue'
 import type {AriaInvalid, ButtonVariant, CheckboxOptionRaw, CheckboxValue, Size} from '../../types'
 import {getGroupAttr, getGroupClasses, useId} from '../../composables'
@@ -78,8 +78,6 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  'change': [value: CheckboxValue[]]
-  'input': [value: CheckboxValue[]]
   'update:modelValue': [value: CheckboxValue[]]
 }>()
 
@@ -116,13 +114,6 @@ provide(checkboxGroupKey, {
   disabled: toRef(() => props.disabled),
 })
 
-watch(modelValue, (newValue) => {
-  emit('input', [...newValue])
-  nextTick(() => {
-    emit('change', [...newValue])
-  })
-})
-
 const normalizeOptions = computed(() =>
   props.options.map((el, ind) =>
     typeof el === 'string' || typeof el === 'number'

From 804e9601b962a60035bafe69579bd8b1c4b9c55c Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 21 Mar 2024 10:26:36 -0700
Subject: [PATCH 2/4] feat(BFormCheckbox): Add 'reverse' property to checkbox
 and checkboxgroup

---
 .../src/data/components/formCheckbox.data.ts  | 12 ++++++++++++
 .../docs/src/docs/components/form-checkbox.md | 19 +++++++++++++++++++
 .../BFormCheckbox/BFormCheckbox.vue           |  3 +++
 .../BFormCheckbox/BFormCheckboxGroup.vue      |  3 +++
 .../BFormCheckbox/form-checkbox.spec.ts       | 18 ++++++++++++++++--
 .../src/composables/useFormCheck.ts           |  2 ++
 packages/bootstrap-vue-next/src/utils/keys.ts |  1 +
 7 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
index 163ff948d..e9aadb0ed 100644
--- a/apps/docs/src/data/components/formCheckbox.data.ts
+++ b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -116,6 +116,12 @@ export default {
           description:
             'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the checkboxe or switch on the opposite side',
+        },
         {
           prop: 'switch',
           type: 'boolean',
@@ -265,6 +271,12 @@ export default {
           default: false,
           description: 'Adds the `required` attribute to the form control',
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the checkboxes and switches on the opposite side',
+        },
         {
           prop: 'size',
           type: 'Size',
diff --git a/apps/docs/src/docs/components/form-checkbox.md b/apps/docs/src/docs/components/form-checkbox.md
index cd6ed24c3..45e435666 100644
--- a/apps/docs/src/docs/components/form-checkbox.md
+++ b/apps/docs/src/docs/components/form-checkbox.md
@@ -412,6 +412,25 @@ Use the `size` prop to control the size of the checkbox. The default size is med
   </template>
 </HighlightCard>
 
+## Reverse
+
+Use the `reverse` prop to put your checkboxes and switches on the opposite side of the label.
+
+<HighlightCard>
+  <BFormCheckbox reverse>Reverse checkbox</BFormCheckbox>
+  <BFormCheckbox reverse disabled>Disabled reverse checkbox</BFormCheckbox>
+  <BFormCheckbox reverse switch>Reverse switch ceckbox input</BFormCheckbox>
+  <template #html>
+
+```vue-html
+<BFormCheckbox reverse>Reverse checkbox</BFormCheckbox>
+<BFormCheckbox reverse disabled>Disabled reverse checkbox</BFormCheckbox>
+<BFormCheckbox reverse switch>Reverse switch ceckbox input</BFormCheckbox>
+```
+
+  </template>
+</HighlightCard>
+
 ## Checkbox values and `v-model`
 
 By default, `BFormCheckbox` value will be true when checked and false when unchecked. You can customize the checked and unchecked values by specifying the `value` and `unchecked-value` properties, respectively.
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
index 0408ff033..0325f1dbe 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
@@ -54,6 +54,7 @@ const props = withDefaults(
     name?: string
     plain?: boolean
     required?: boolean
+    reverse?: boolean
     size?: Size
     state?: boolean | null
     switch?: boolean
@@ -76,6 +77,7 @@ const props = withDefaults(
     name: undefined,
     plain: false,
     required: undefined,
+    reverse: false,
     size: undefined,
     state: null,
     switch: false,
@@ -138,6 +140,7 @@ const classesObject = computed(() => ({
   plain: props.plain || (parentData?.plain.value ?? false),
   button: props.button || (parentData?.buttons.value ?? false),
   inline: props.inline || (parentData?.inline.value ?? false),
+  reverse: props.reverse || (parentData?.reverse.value ?? false),
   switch: props.switch || (parentData?.switch.value ?? false),
   state: props.state || parentData?.state.value,
   size: props.size ?? parentData?.size.value ?? 'md', // This is where the true default is made
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
index 8fe044145..5bd669f35 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
@@ -44,6 +44,7 @@ const props = withDefaults(
     options?: readonly CheckboxOptionRaw[]
     plain?: boolean
     required?: boolean
+    reverse?: boolean
     size?: Size
     stacked?: boolean
     state?: boolean | null
@@ -67,6 +68,7 @@ const props = withDefaults(
     options: () => [],
     plain: false,
     required: false,
+    reverse: false,
     size: 'md',
     stacked: false,
     state: null,
@@ -109,6 +111,7 @@ provide(checkboxGroupKey, {
   plain: toRef(() => props.plain),
   size: toRef(() => props.size),
   inline: toRef(() => !props.stacked),
+  reverse: toRef(() => props.reverse),
   required: toRef(() => props.required),
   buttons: toRef(() => props.buttons),
   disabled: toRef(() => props.disabled),
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
index 22853f507..16f766ac2 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
@@ -5,7 +5,7 @@ import BFormCheckbox from './BFormCheckbox.vue'
 describe('form-checkbox', () => {
   enableAutoUnmount(afterEach)
 
-  describe('useFormCHeck attributes', () => {
+  describe('useFormCheck attributes', () => {
     it('tag is div', () => {
       const wrapper = mount(BFormCheckbox)
       expect(wrapper.element.tagName).toBe('DIV')
@@ -46,13 +46,27 @@ describe('form-checkbox', () => {
       expect(wrapper.classes()).toContain('form-check-inline')
     })
 
-    it('has class form-check-inline when prop inline', () => {
+    it('does not have class form-check-inline when prop inline', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {inline: false},
       })
       expect(wrapper.classes()).not.toContain('form-check-inline')
     })
 
+    it('has class form-check-reverse when prop inline', () => {
+      const wrapper = mount(BFormCheckbox, {
+        props: {reverse: true},
+      })
+      expect(wrapper.classes()).toContain('form-check-reverse')
+    })
+
+    it('does not have class form-check-reverse when prop inline', () => {
+      const wrapper = mount(BFormCheckbox, {
+        props: {reverse: false},
+      })
+      expect(wrapper.classes()).not.toContain('form-check-reverse')
+    })
+
     it('does not have class form-switch when prop switch is false', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {switch: false},
diff --git a/packages/bootstrap-vue-next/src/composables/useFormCheck.ts b/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
index 2e88a14fe..010c0436f 100644
--- a/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
+++ b/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
@@ -7,6 +7,7 @@ interface ClassesItemsInput {
   plain?: boolean
   button?: boolean
   inline?: boolean
+  reverse?: boolean
   switch?: boolean
   size?: Size
 }
@@ -16,6 +17,7 @@ const getClasses = (items: MaybeRefOrGetter<ClassesItemsInput>) =>
     const resolvedItems = toValue(items)
     return {
       'form-check': resolvedItems.plain === false && resolvedItems.button === false,
+      'form-check-reverse': resolvedItems.reverse === true,
       'form-check-inline': resolvedItems.inline === true,
       'form-switch': resolvedItems.switch === true,
       [`form-control-${resolvedItems.size}`]:
diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
index f75f3d0e2..4f1ca34a6 100644
--- a/packages/bootstrap-vue-next/src/utils/keys.ts
+++ b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -93,6 +93,7 @@ export const checkboxGroupKey: InjectionKey<{
   plain: Readonly<Ref<boolean>>
   size: Readonly<Ref<Size>>
   inline: Readonly<Ref<boolean>>
+  reverse: Readonly<Ref<boolean>>
   required: Readonly<Ref<boolean>>
   buttons: Readonly<Ref<boolean>>
   disabled: Readonly<Ref<boolean>>

From f4ea153ba205e0355036897ae2b478ce4ccab249 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 21 Mar 2024 12:56:18 -0700
Subject: [PATCH 3/4] feat(BFormCheckbox): Handle no-label case

---
 .../src/data/components/formCheckbox.data.ts  |  2 +-
 .../src/data/components/formRadio.data.ts     |  6 +++++
 .../BFormCheckbox/BFormCheckbox.vue           |  1 +
 .../BFormCheckbox/form-checkbox.spec.ts       | 12 ++++++++--
 .../src/components/BFormRadio/BFormRadio.vue  |  4 ++++
 .../components/BFormRadio/BFormRadioGroup.vue |  3 +++
 .../components/BFormRadio/form-radio.spec.ts  | 24 +++++++++++++++++++
 .../src/composables/useFormCheck.ts           |  6 ++++-
 packages/bootstrap-vue-next/src/utils/keys.ts |  1 +
 9 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
index e9aadb0ed..5edf6d04d 100644
--- a/apps/docs/src/data/components/formCheckbox.data.ts
+++ b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -120,7 +120,7 @@ export default {
           prop: 'reverse',
           type: 'boolean',
           default: false,
-          description: 'When set, renders the checkboxe or switch on the opposite side',
+          description: 'When set, renders the checkbox or switch on the opposite side',
         },
         {
           prop: 'switch',
diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
index f94061b94..da62be271 100644
--- a/apps/docs/src/data/components/formRadio.data.ts
+++ b/apps/docs/src/data/components/formRadio.data.ts
@@ -80,6 +80,12 @@ export default {
           type: 'boolean',
           default: false,
         },
+        {
+          prop: 'reverse',
+          type: 'boolean',
+          default: false,
+          description: 'When set, renders the radio button on the opposite side',
+        },
         {
           prop: 'state',
           type: 'boolean | null',
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
index 0325f1dbe..c66143f57 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
@@ -145,6 +145,7 @@ const classesObject = computed(() => ({
   state: props.state || parentData?.state.value,
   size: props.size ?? parentData?.size.value ?? 'md', // This is where the true default is made
   buttonVariant: props.buttonVariant ?? parentData?.buttonVariant.value ?? 'secondary', // This is where the true default is made
+  hasDefaultSlot: hasDefaultSlot.value,
 }))
 const computedClasses = getClasses(classesObject)
 const inputClasses = getInputClasses(classesObject)
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
index 16f766ac2..a017ad8e6 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
@@ -14,6 +14,9 @@ describe('form-checkbox', () => {
     it('has class form-check if prop plain and prop button are false', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {plain: false, button: false},
+        slots: {
+          default: 'checkbox',
+        },
       })
       expect(wrapper.classes()).toContain('form-check')
     })
@@ -25,6 +28,11 @@ describe('form-checkbox', () => {
       expect(wrapper.classes()).not.toContain('form-check')
     })
 
+    it('does not have class form-check if default slot is empty', () => {
+      const wrapper = mount(BFormCheckbox, {})
+      expect(wrapper.classes()).not.toContain('form-check')
+    })
+
     it('does not have class form-check if prop plain false and prop button true', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {plain: false, button: true},
@@ -53,14 +61,14 @@ describe('form-checkbox', () => {
       expect(wrapper.classes()).not.toContain('form-check-inline')
     })
 
-    it('has class form-check-reverse when prop inline', () => {
+    it('has class form-check-reverse when prop reverse', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {reverse: true},
       })
       expect(wrapper.classes()).toContain('form-check-reverse')
     })
 
-    it('does not have class form-check-reverse when prop inline', () => {
+    it('does not have class form-check-reverse when prop reverse', () => {
       const wrapper = mount(BFormCheckbox, {
         props: {reverse: false},
       })
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
index 8aa457705..0d0ea8f6b 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -50,6 +50,7 @@ const props = withDefaults(
     name?: string
     plain?: boolean
     required?: boolean
+    reverse?: boolean
     size?: Size
     state?: boolean | null
     value?: RadioValue
@@ -69,6 +70,7 @@ const props = withDefaults(
     name: undefined,
     plain: false,
     required: false,
+    reverse: false,
     size: undefined,
     state: null,
     value: true,
@@ -121,8 +123,10 @@ const classesObject = computed(() => ({
   button: props.button || (parentData?.buttons.value ?? false),
   inline: props.inline || (parentData?.inline.value ?? false),
   state: props.state || parentData?.state.value,
+  reverse: props.reverse || (parentData?.reverse.value ?? false),
   size: props.size ?? parentData?.size.value ?? 'md', // This is where the true default is made
   buttonVariant: props.buttonVariant ?? parentData?.buttonVariant.value ?? 'secondary', // This is where the true default is made
+  hasDefaultSlot: hasDefaultSlot.value,
 }))
 const computedClasses = getClasses(classesObject)
 const inputClasses = getInputClasses(classesObject)
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index 919e56e28..414e4eb76 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -49,6 +49,7 @@ const props = withDefaults(
     options?: readonly RadioOptionRaw[]
     plain?: boolean
     required?: boolean
+    reverse?: boolean
     size?: Size
     stacked?: boolean
     state?: boolean | null
@@ -71,6 +72,7 @@ const props = withDefaults(
     options: () => [],
     plain: false,
     required: false,
+    reverse: false,
     size: 'md',
     stacked: false,
     state: null,
@@ -114,6 +116,7 @@ provide(radioGroupKey, {
   plain: toRef(() => props.plain),
   size: toRef(() => props.size),
   inline: toRef(() => !props.stacked),
+  reverse: toRef(() => !props.reverse),
   required: toRef(() => props.required),
   disabled: toRef(() => props.disabled),
 })
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio.spec.ts b/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio.spec.ts
index c13ebb090..a67e7d281 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio.spec.ts
@@ -13,6 +13,9 @@ describe('form-radio', () => {
   it('has class form-check if prop plain and prop button are false', () => {
     const wrapper = mount(BFormRadio, {
       props: {plain: false, button: false},
+      slots: {
+        default: 'checkbox',
+      },
     })
     expect(wrapper.classes()).toContain('form-check')
   })
@@ -38,6 +41,13 @@ describe('form-radio', () => {
     expect(wrapper.classes()).not.toContain('form-check')
   })
 
+  it('does not have class form-check if default slot is empty', () => {
+    const wrapper = mount(BFormRadio, {
+      props: {plain: true, button: false},
+    })
+    expect(wrapper.classes()).not.toContain('form-check')
+  })
+
   it('has class form-check-inline when prop inline', () => {
     const wrapper = mount(BFormRadio, {
       props: {inline: true},
@@ -52,6 +62,20 @@ describe('form-radio', () => {
     expect(wrapper.classes()).not.toContain('form-check-inline')
   })
 
+  it('has class form-check-reverse when prop reverse', () => {
+    const wrapper = mount(BFormRadio, {
+      props: {reverse: true},
+    })
+    expect(wrapper.classes()).toContain('form-check-reverse')
+  })
+
+  it('does not have class form-check-reverse when prop reverse', () => {
+    const wrapper = mount(BFormRadio, {
+      props: {reverse: false},
+    })
+    expect(wrapper.classes()).not.toContain('form-check-reverse')
+  })
+
   it('does not have class form-switch when prop switch is false', () => {
     const wrapper = mount(BFormRadio, {
       props: {switch: false},
diff --git a/packages/bootstrap-vue-next/src/composables/useFormCheck.ts b/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
index 010c0436f..bfdf533f5 100644
--- a/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
+++ b/packages/bootstrap-vue-next/src/composables/useFormCheck.ts
@@ -10,13 +10,17 @@ interface ClassesItemsInput {
   reverse?: boolean
   switch?: boolean
   size?: Size
+  hasDefaultSlot?: boolean
 }
 
 const getClasses = (items: MaybeRefOrGetter<ClassesItemsInput>) =>
   computed(() => {
     const resolvedItems = toValue(items)
     return {
-      'form-check': resolvedItems.plain === false && resolvedItems.button === false,
+      'form-check':
+        resolvedItems.plain === false &&
+        resolvedItems.button === false &&
+        resolvedItems.hasDefaultSlot,
       'form-check-reverse': resolvedItems.reverse === true,
       'form-check-inline': resolvedItems.inline === true,
       'form-switch': resolvedItems.switch === true,
diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
index 4f1ca34a6..1ac3709dc 100644
--- a/packages/bootstrap-vue-next/src/utils/keys.ts
+++ b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -109,6 +109,7 @@ export const radioGroupKey: InjectionKey<{
   plain: Readonly<Ref<boolean>>
   size: Readonly<Ref<Size>>
   inline: Readonly<Ref<boolean>>
+  reverse: Readonly<Ref<boolean>>
   required: Readonly<Ref<boolean>>
   disabled: Readonly<Ref<boolean>>
 }> = Symbol('radioGroup')

From 13c194d1a8f00a7da3be7cdb3da58067ff29abfc Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Fri, 22 Mar 2024 11:42:47 -0700
Subject: [PATCH 4/4] fix(BRadioGroup)!: Remove change and input events, use
 update:modelValue

---
 .../src/data/components/formRadio.data.ts     | 44 -------------------
 .../components/BFormRadio/BFormRadioGroup.vue | 11 +----
 2 files changed, 1 insertion(+), 54 deletions(-)

diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
index da62be271..048be1949 100644
--- a/apps/docs/src/data/components/formRadio.data.ts
+++ b/apps/docs/src/data/components/formRadio.data.ts
@@ -98,28 +98,6 @@ export default {
         },
       ],
       emits: [
-        {
-          event: 'input',
-          description: '',
-          args: [
-            {
-              arg: 'input',
-              description: '',
-              type: 'boolean | string | unknown[] | Record<string, unknown> | number',
-            },
-          ],
-        },
-        {
-          event: 'change',
-          description: '',
-          args: [
-            {
-              arg: 'change',
-              description: '',
-              type: 'boolean | string | unknown[] | Record<string, unknown> | number',
-            },
-          ],
-        },
         {
           event: 'update:modelValue',
           description: '',
@@ -245,17 +223,6 @@ export default {
         },
       ],
       emits: [
-        {
-          args: [
-            {
-              arg: 'input',
-              description: '',
-              type: 'unknown',
-            },
-          ],
-          description: '',
-          event: 'input',
-        },
         {
           args: [
             {
@@ -267,17 +234,6 @@ export default {
           description: '',
           event: 'update:modelValue',
         },
-        {
-          args: [
-            {
-              arg: 'change',
-              description: '',
-              type: 'unknown',
-            },
-          ],
-          description: '',
-          event: 'change',
-        },
       ],
       slots: [],
     },
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index 414e4eb76..cab346d1d 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -27,7 +27,7 @@
 
 <script setup lang="ts">
 import type {AriaInvalid, ButtonVariant, RadioOptionRaw, RadioValue, Size} from '../../types'
-import {computed, nextTick, provide, ref, toRef, watch} from 'vue'
+import {computed, provide, ref, toRef} from 'vue'
 import {radioGroupKey} from '../../utils'
 import BFormRadio from './BFormRadio.vue'
 import {getGroupAttr, getGroupClasses, useId} from '../../composables'
@@ -83,8 +83,6 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  'change': [value: RadioValue]
-  'input': [value: RadioValue]
   'update:modelValue': [value: RadioValue]
 }>()
 
@@ -121,13 +119,6 @@ provide(radioGroupKey, {
   disabled: toRef(() => props.disabled),
 })
 
-watch(modelValue, (newValue) => {
-  emit('input', newValue)
-  nextTick(() => {
-    emit('change', newValue)
-  })
-})
-
 const normalizeOptions = computed(() =>
   props.options.map((el, ind) =>
     typeof el === 'string' || typeof el === 'number'