fix(RadioGroup): disabled state not passing on RadioGroupItem

packages/radix-vue/src/RadioGroup/Radio.vue

@@ -63,7 +63,7 @@ function handleClick(event: MouseEvent) {
     :aria-checked="checked"
     :aria-label="ariaLabel"
     :as-child="asChild"
-    :disabled="disabled ? true : undefined"
+    :disabled="disabled ? '' : undefined"
     :data-state="checked ? 'checked' : 'unchecked'"
     :data-disabled="disabled ? '' : undefined"
     :value="value"

packages/radix-vue/src/RadioGroup/RadioGroup.test.ts

@@ -58,6 +58,35 @@ describe('given a default RadioGroup', () => {
   })
 })
 
+describe('given disabled RadioGroup', () => {
+  let wrapper: VueWrapper<InstanceType<typeof RadioGroup>>
+  let radios: DOMWrapper<HTMLElement>[]
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(RadioGroup, { attachTo: document.body, props: { disabled: true } })
+    radios = wrapper.findAll('[role=radio]')
+  })
+
+  it('should pass axe accessibility tests', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should have default selected', () => {
+    expect(radios[0].attributes('data-state')).toBe('checked')
+  })
+
+  it.each([[0, 'checked'], [1, 'unchecked'], [2, 'unchecked']])('should not select any item', async (input, output) => {
+    await radios[input].trigger('click')
+    expect(radios[input].attributes('data-state')).toBe(output)
+  })
+
+  it.each([[0], [1], [2]])('should have disabled attribute on item', async (input) => {
+    expect(radios[input].attributes('disabled')).toBe('')
+    expect(radios[input].attributes('data-disabled')).toBe('true')
+  })
+})
+
 describe('given radio in a form', async () => {
   const wrapper = mount({
     props: ['handleSubmit'],

packages/radix-vue/src/RadioGroup/RadioGroupItem.vue

@@ -70,6 +70,7 @@ function handleFocus() {
       :ref="forwardRef"
       :checked="checked"
       :required="required"
+      :disabled="disabled"
       @update:checked="rootContext.changeModelValue(value)"
       @keydown.enter.prevent
       @focus="handleFocus"

packages/radix-vue/src/RadioGroup/story/_RadioGroup.vue

@@ -2,13 +2,17 @@
 import { ref } from 'vue'
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '../'
 
+defineProps<{
+  disabled?: boolean
+}>()
 const radioStateSingle = ref('default')
 </script>
 
 <template>
   <RadioGroupRoot
     v-model="radioStateSingle"
     :loop="false"
+    :disabled="disabled"
     class="flex flex-col gap-2.5"
     aria-label="View density"
     orientation="vertical"