diff --git a/packages/components/separator/src/separator.test.ts b/packages/components/separator/src/separator.test.ts
new file mode 100644
index 000000000..d47d60875
--- /dev/null
+++ b/packages/components/separator/src/separator.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import { OkuSeparator } from './separator'
+
+describe('OkuSeparator', () => {
+  const wrapper = mount(OkuSeparator)
+
+  it('renders correctly', async () => {
+    expect(wrapper.html()).toBe(`<div role="separator" data-orientation="horizontal">
+  <!---->
+</div>`)
+  })
+
+  it('renders ref correctly', async () => {
+    // TODO: outerHTML is not available on VueWrapper
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    expect(wrapper.vm.innerRef.outerHTML).toBe('<div role="separator" data-orientation="horizontal"><!----></div>')
+  })
+
+  it('sets role as separator without decorative', async () => {
+    expect(wrapper.attributes('role')).toBe('separator')
+  })
+
+  it('sets default orientation horizontal', async () => {
+    expect(wrapper.attributes('data-orientation')).toBe('horizontal')
+  })
+
+  it('sets role as none on adding decorative', async () => {
+    const wrapper = shallowMount(OkuSeparator, {
+      propsData: {
+        decorative: true,
+      },
+    })
+    expect(wrapper.attributes('role')).toBe('none')
+  })
+
+  it('sets orientation vertical', async () => {
+    const wrapper = shallowMount(OkuSeparator, {
+      propsData: {
+        orientation: 'vertical',
+      },
+    })
+    expect(wrapper.attributes('data-orientation')).toBe('vertical')
+  })
+})
diff --git a/packages/components/separator/src/separator.ts b/packages/components/separator/src/separator.ts
index 0e074fdeb..19d334516 100644
--- a/packages/components/separator/src/separator.ts
+++ b/packages/components/separator/src/separator.ts
@@ -48,6 +48,7 @@ const Separator = defineComponent({
     // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
     const ariaOrientation = orientation === 'vertical' ? orientation : undefined
     const semanticProps = props.decorative ? { role: 'none' } : { 'aria-orientation': ariaOrientation, 'role': 'separator' }
+    const dataOrientation = { 'data-orientation': orientation }
 
     const innerRef = ref<ComponentPublicInstance>()
 
@@ -62,13 +63,15 @@ const Separator = defineComponent({
           ...attrs,
           ref: innerRef,
           ...semanticProps,
-          dataOrientation: orientation,
+          ...dataOrientation,
           style: {
             ...domProps,
             border: 'none',
           },
         },
-        slots.default?.(),
+        {
+          default: () => slots.default?.(),
+        },
       )
 
     return originalReturn as unknown as {