diff --git a/packages/vue-split-panel/src/SplitPanel.vue b/packages/vue-split-panel/src/SplitPanel.vue
index d4d305e..0d4d742 100644
--- a/packages/vue-split-panel/src/SplitPanel.vue
+++ b/packages/vue-split-panel/src/SplitPanel.vue
@@ -126,8 +126,14 @@ defineExpose({ collapse, expand, toggle });
 </script>
 
 <template>
-	<div ref="split-panel" class="split-panel" :class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]" @transitionend="onTransitionEnd">
-		<div class="start">
+	<div
+		ref="split-panel"
+		class="split-panel"
+		:class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]"
+		data-testid="root"
+		@transitionend="onTransitionEnd"
+	>
+		<div class="start" data-testid="start">
 			<slot name="start" />
 		</div>
 		<div
@@ -140,6 +146,7 @@ defineExpose({ collapse, expand, toggle });
 			aria-valuemin="0"
 			aria-valuemax="100"
 			aria-label="Resize"
+			data-testid="divider"
 			@keydown="handleKeydown"
 			@dblclick="handleDblClick"
 		>
@@ -147,7 +154,7 @@ defineExpose({ collapse, expand, toggle });
 				<div />
 			</slot>
 		</div>
-		<div class="end">
+		<div class="end" data-testid="end">
 			<slot name="end" />
 		</div>
 	</div>
diff --git a/packages/vue-split-panel/src/composables/use-grid-template.test.ts b/packages/vue-split-panel/src/composables/use-grid-template.test.ts
new file mode 100644
index 0000000..3a7a10c
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-grid-template.test.ts
@@ -0,0 +1,88 @@
+import type { ComputedRef } from 'vue';
+import type { UseGridTemplateOptions } from './use-grid-template';
+import { describe, expect, it } from 'vitest';
+import { computed, ref } from 'vue';
+import { useGridTemplate } from './use-grid-template';
+
+describe('useGridTemplate', () => {
+	const createOptions = (overrides = {}): UseGridTemplateOptions => ({
+		collapsed: ref(false),
+		minSizePercentage: computed(() => {}) as ComputedRef<number | undefined>,
+		maxSizePercentage: computed(() => {}) as ComputedRef<number | undefined>,
+		sizePercentage: computed(() => 50),
+		dividerSize: computed(() => 4),
+		primary: 'start',
+		direction: 'ltr',
+		orientation: 'horizontal',
+		...overrides,
+	});
+
+	it('returns collapsed state when collapsed is true', () => {
+		const options = createOptions({ collapsed: ref(true) });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('0 4px auto');
+	});
+
+	it('returns basic clamp template when no min/max constraints', () => {
+		const options = createOptions();
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+
+	it('returns complex clamp template with min/max constraints', () => {
+		const options = createOptions({
+			minSizePercentage: computed(() => 20),
+			maxSizePercentage: computed(() => 80),
+		});
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, clamp(20%, 50%, 80%), calc(100% - 4px)) 4px auto');
+	});
+
+	it('reverses order when primary is end and direction is ltr', () => {
+		const options = createOptions({ primary: 'end' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('reverses order when direction is rtl and primary is start', () => {
+		const options = createOptions({ direction: 'rtl' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('handles vertical orientation correctly', () => {
+		const options = createOptions({ orientation: 'vertical' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+
+	it('handles vertical orientation with end primary', () => {
+		const options = createOptions({
+			orientation: 'vertical',
+			primary: 'end',
+		});
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('uses custom divider size', () => {
+		const options = createOptions({ dividerSize: computed(() => 8) });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 8px)) 8px auto');
+	});
+
+	it('handles undefined primary as start', () => {
+		const options = createOptions({ primary: undefined });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+});
diff --git a/packages/vue-split-panel/src/composables/use-keyboard.test.ts b/packages/vue-split-panel/src/composables/use-keyboard.test.ts
new file mode 100644
index 0000000..f7a0944
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-keyboard.test.ts
@@ -0,0 +1,312 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useKeyboard } from './use-keyboard';
+
+describe('useKeyboard', () => {
+	const createMockKeyboardEvent = (key: string, shiftKey = false): KeyboardEvent => {
+		const event = new KeyboardEvent('keydown', { key, shiftKey });
+		vi.spyOn(event, 'preventDefault');
+		return event;
+	};
+
+	it('should return handleKeydown function', () => {
+		const sizePercentage = ref(50);
+		const collapsed = ref(false);
+		const options = {
+			disabled: false,
+			collapsible: true,
+			primary: 'start' as const,
+			orientation: 'horizontal' as const,
+		};
+
+		const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+
+		expect(typeof handleKeydown).toBe('function');
+	});
+
+	it('should do nothing when disabled', () => {
+		const sizePercentage = ref(50);
+		const collapsed = ref(false);
+		const options = {
+			disabled: true,
+			collapsible: true,
+			primary: 'start' as const,
+			orientation: 'horizontal' as const,
+		};
+
+		const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+		const event = createMockKeyboardEvent('ArrowRight');
+
+		handleKeydown(event);
+
+		expect(sizePercentage.value).toBe(50);
+		expect(event.preventDefault).not.toHaveBeenCalled();
+	});
+
+	describe('horizontal orientation', () => {
+		it('should decrease size on ArrowLeft when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowLeft');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(49);
+			expect(event.preventDefault).toHaveBeenCalled();
+		});
+
+		it('should increase size on ArrowRight when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowRight');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(51);
+			expect(event.preventDefault).toHaveBeenCalled();
+		});
+
+		it('should increase size on ArrowLeft when primary is end', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'end' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowLeft');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(51);
+		});
+	});
+
+	describe('vertical orientation', () => {
+		it('should decrease size on ArrowUp when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'vertical' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowUp');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(49);
+		});
+
+		it('should increase size on ArrowDown when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'vertical' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowDown');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(51);
+		});
+	});
+
+	describe('shift key modifier', () => {
+		it('should change by 10 when shift key is pressed', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowRight', true);
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(60);
+		});
+	});
+
+	describe('Home and End keys', () => {
+		it('should set to 0 on Home when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('Home');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(0);
+		});
+
+		it('should set to 100 on End when primary is start', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('End');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(100);
+		});
+
+		it('should set to 100 on Home when primary is end', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'end' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('Home');
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(100);
+		});
+	});
+
+	describe('Enter key and collapsible', () => {
+		it('should toggle collapsed state on Enter when collapsible is true', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('Enter');
+
+			handleKeydown(event);
+
+			expect(collapsed.value).toBe(true);
+		});
+
+		it('should not toggle collapsed state on Enter when collapsible is false', () => {
+			const sizePercentage = ref(50);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: false,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('Enter');
+
+			handleKeydown(event);
+
+			expect(collapsed.value).toBe(false);
+		});
+	});
+
+	describe('clamping values', () => {
+		it('should clamp size to 0 minimum', () => {
+			const sizePercentage = ref(2);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowLeft', true);
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(0);
+		});
+
+		it('should clamp size to 100 maximum', () => {
+			const sizePercentage = ref(98);
+			const collapsed = ref(false);
+			const options = {
+				disabled: false,
+				collapsible: true,
+				primary: 'start' as const,
+				orientation: 'horizontal' as const,
+			};
+
+			const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+			const event = createMockKeyboardEvent('ArrowRight', true);
+
+			handleKeydown(event);
+
+			expect(sizePercentage.value).toBe(100);
+		});
+	});
+
+	it('should ignore non-handled keys', () => {
+		const sizePercentage = ref(50);
+		const collapsed = ref(false);
+		const options = {
+			disabled: false,
+			collapsible: true,
+			primary: 'start' as const,
+			orientation: 'horizontal' as const,
+		};
+
+		const { handleKeydown } = useKeyboard(sizePercentage, collapsed, options);
+		const event = createMockKeyboardEvent('KeyA');
+
+		handleKeydown(event);
+
+		expect(sizePercentage.value).toBe(50);
+		expect(event.preventDefault).not.toHaveBeenCalled();
+	});
+});
diff --git a/packages/vue-split-panel/src/composables/use-pointer.test.ts b/packages/vue-split-panel/src/composables/use-pointer.test.ts
new file mode 100644
index 0000000..8a711e3
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-pointer.test.ts
@@ -0,0 +1,101 @@
+import type { Ref } from 'vue';
+import type { UsePointerOptions } from './use-pointer';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { computed, ref } from 'vue';
+import { usePointer } from './use-pointer';
+
+describe('usePointer', () => {
+	let collapsed: Ref<boolean>;
+	let sizePercentage: Ref<number>;
+	let sizePixels: Ref<number>;
+	let options: UsePointerOptions;
+	let dividerEl: Ref<HTMLElement | null>;
+	let panelEl: Ref<HTMLElement | null>;
+
+	beforeEach(() => {
+		collapsed = ref(false);
+		sizePercentage = ref(50);
+		sizePixels = ref(200);
+
+		// Create mock DOM elements using real HTMLElements for better type safety
+		const dividerElement = document.createElement('div');
+		dividerElement.getBoundingClientRect = () => new DOMRect(0, 0, 10, 10);
+		dividerEl = ref(dividerElement);
+
+		const panelElement = document.createElement('div');
+		panelElement.getBoundingClientRect = () => new DOMRect(0, 0, 400, 400);
+		panelEl = ref(panelElement);
+
+		options = {
+			disabled: ref(false),
+			collapsible: ref(true),
+			primary: ref('start'),
+			orientation: ref('horizontal'),
+			direction: ref('ltr'),
+			collapseThreshold: ref(10),
+			snapThreshold: ref(5),
+			dividerEl,
+			panelEl,
+			componentSize: computed(() => 400),
+			minSizePixels: computed(() => 50),
+			snapPixels: computed(() => [100, 200, 300]),
+		};
+	});
+
+	it('should return handleDblClick and isDragging', () => {
+		const result = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		expect(result).toHaveProperty('handleDblClick');
+		expect(result).toHaveProperty('isDragging');
+		expect(typeof result.handleDblClick).toBe('function');
+		expect(typeof result.isDragging.value).toBe('boolean');
+	});
+
+	it('should handle double click to snap to closest point', () => {
+		const { handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		sizePixels.value = 195; // Close to 200
+		handleDblClick();
+
+		expect(sizePixels.value).toBe(200);
+	});
+
+	it('should remain collapsed on handle double click when collapsed', () => {
+		collapsed.value = true;
+		const { handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		handleDblClick();
+
+		expect(collapsed.value).toBe(true);
+	});
+
+	it('should not snap on double click when disabled', () => {
+		options.disabled = ref(true);
+		const originalSize = sizePixels.value;
+		const { handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		handleDblClick();
+
+		expect(sizePixels.value).toBe(originalSize);
+	});
+
+	it('should not snap on double click when no snap points exist', () => {
+		options.snapPixels = computed(() => []);
+		const originalSize = sizePixels.value;
+		const { handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		handleDblClick();
+
+		expect(sizePixels.value).toBe(originalSize);
+	});
+
+	it('should handle when collapsible is false', () => {
+		options.collapsible = ref(false);
+		collapsed.value = false;
+		const { handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, options);
+
+		handleDblClick();
+
+		expect(collapsed.value).toBe(false); // Should remain visible when not collapsible
+	});
+});
diff --git a/packages/vue-split-panel/src/composables/use-resize.test.ts b/packages/vue-split-panel/src/composables/use-resize.test.ts
new file mode 100644
index 0000000..857d52e
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-resize.test.ts
@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { computed, defineComponent, ref } from 'vue';
+import { useResize } from './use-resize';
+
+describe('useResize', () => {
+	let mockObserver: ResizeObserver;
+
+	beforeEach(() => {
+		mockObserver = new ResizeObserver(() => {});
+	});
+
+	it('should not reset sizePercentage when no primary has been set', () => {
+		const sizePercentage = ref(100);
+
+		const wrapper = mount(defineComponent({
+			template: '<div />',
+			setup() {
+				return useResize(sizePercentage, {
+					sizePixels: computed(() => 50),
+					panelEl: document.createElement('div'),
+					orientation: ref('horizontal'),
+					primary: ref(undefined),
+				});
+			},
+		}));
+
+		const entry = { contentRect: { width: 75, height: 75 } } as ResizeObserverEntry;
+
+		wrapper.vm.onResize([entry], mockObserver);
+
+		expect(sizePercentage.value).toBe(100);
+	});
+
+	it('should set the sizePercentage based on the primary size width', () => {
+		const sizePercentage = ref(50);
+
+		const wrapper = mount(defineComponent({
+			template: '<div />',
+			setup() {
+				return useResize(sizePercentage, {
+					sizePixels: computed(() => 250),
+					panelEl: document.createElement('div'),
+					orientation: ref('horizontal'),
+					primary: ref('start'),
+				});
+			},
+		}));
+
+		const entry = { contentRect: { width: 400, height: 150 } } as ResizeObserverEntry;
+
+		wrapper.vm.onResize([entry], mockObserver);
+
+		// Pixel size of 250 on a total width of 400 = 62.5%
+		expect(sizePercentage.value).toBe(62.5);
+	});
+
+	it('should use the height when orientation is vertical', () => {
+		const sizePercentage = ref(50);
+
+		const wrapper = mount(defineComponent({
+			template: '<div />',
+			setup() {
+				return useResize(sizePercentage, {
+					sizePixels: computed(() => 250),
+					panelEl: document.createElement('div'),
+					orientation: ref('vertical'),
+					primary: ref('start'),
+				});
+			},
+		}));
+
+		const entry = { contentRect: { width: 150, height: 400 } } as ResizeObserverEntry;
+
+		wrapper.vm.onResize([entry], mockObserver);
+
+		// Pixel size of 250 on a total width of 400 = 62.5%
+		expect(sizePercentage.value).toBe(62.5);
+	});
+});
diff --git a/packages/vue-split-panel/src/composables/use-resize.ts b/packages/vue-split-panel/src/composables/use-resize.ts
index 922848f..b7b191d 100644
--- a/packages/vue-split-panel/src/composables/use-resize.ts
+++ b/packages/vue-split-panel/src/composables/use-resize.ts
@@ -1,3 +1,4 @@
+import type { ResizeObserverCallback } from '@vueuse/core';
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
 import type { Orientation, Primary } from '../types';
 import { useResizeObserver } from '@vueuse/core';
@@ -23,7 +24,7 @@ export const useResize = (sizePercentage: Ref<number>, options: UseResizeOptions
 		cachedSizePixels = newPixels;
 	});
 
-	useResizeObserver(options.panelEl, (entries) => {
+	const onResize: ResizeObserverCallback = (entries) => {
 		const entry = entries[0];
 		const { width, height } = entry.contentRect;
 		const size = toValue(options.orientation) === 'horizontal' ? width : height;
@@ -31,5 +32,9 @@ export const useResize = (sizePercentage: Ref<number>, options: UseResizeOptions
 		if (toValue(options.primary)) {
 			sizePercentage.value = pixelsToPercentage(size, cachedSizePixels);
 		}
-	});
+	};
+
+	useResizeObserver(options.panelEl, onResize);
+
+	return { onResize };
 };
diff --git a/packages/vue-split-panel/src/composables/use-sizes.test.ts b/packages/vue-split-panel/src/composables/use-sizes.test.ts
new file mode 100644
index 0000000..0d7ea56
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-sizes.test.ts
@@ -0,0 +1,176 @@
+import type { Ref } from 'vue';
+import type { UseSizesOptions } from './use-sizes';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useSizes } from './use-sizes';
+
+describe('useSizes', () => {
+	let mockPanelEl: HTMLElement;
+	let mockDividerEl: HTMLElement;
+	let size: Ref<number>;
+	let defaultOptions: UseSizesOptions;
+
+	beforeEach(() => {
+		mockPanelEl = document.createElement('div');
+		mockDividerEl = document.createElement('div');
+
+		Object.defineProperty(mockPanelEl, 'offsetWidth', { value: 400, writable: true });
+		Object.defineProperty(mockPanelEl, 'offsetHeight', { value: 300, writable: true });
+		Object.defineProperty(mockDividerEl, 'offsetWidth', { value: 8, writable: true });
+		Object.defineProperty(mockDividerEl, 'offsetHeight', { value: 8, writable: true });
+
+		size = ref(50);
+
+		defaultOptions = {
+			disabled: false,
+			collapsible: false,
+			primary: 'start',
+			orientation: 'horizontal',
+			sizeUnit: '%',
+			minSize: 10,
+			maxSize: 90,
+			snapPoints: [25, 50, 75],
+			panelEl: mockPanelEl,
+			dividerEl: mockDividerEl,
+		};
+	});
+
+	describe('componentSize', () => {
+		it('should return width for horizontal orientation', () => {
+			const { componentSize } = useSizes(size, defaultOptions);
+			expect(componentSize.value).toBe(400);
+		});
+
+		it('should return height for vertical orientation', () => {
+			const options = { ...defaultOptions, orientation: 'vertical' as const };
+			const { componentSize } = useSizes(size, options);
+			expect(componentSize.value).toBe(300);
+		});
+	});
+
+	describe('dividerSize', () => {
+		it('should return divider width for horizontal orientation', () => {
+			const { dividerSize } = useSizes(size, defaultOptions);
+			expect(dividerSize.value).toBe(8);
+		});
+
+		it('should return divider height for vertical orientation', () => {
+			const options = { ...defaultOptions, orientation: 'vertical' as const };
+			const { dividerSize } = useSizes(size, options);
+			expect(dividerSize.value).toBe(8);
+		});
+	});
+
+	describe('sizePercentage', () => {
+		it('should return size value when sizeUnit is percentage', () => {
+			const { sizePercentage } = useSizes(size, defaultOptions);
+			expect(sizePercentage.value).toBe(50);
+		});
+
+		it('should convert pixels to percentage when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const };
+			size.value = 200; // 200px out of 400px = 50%
+			const { sizePercentage } = useSizes(size, options);
+			expect(sizePercentage.value).toBe(50);
+		});
+
+		it('should update size when setting percentage value with percentage unit', () => {
+			const { sizePercentage } = useSizes(size, defaultOptions);
+			sizePercentage.value = 75;
+			expect(size.value).toBe(75);
+		});
+
+		it('should convert and update size when setting percentage value with pixel unit', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const };
+			const { sizePercentage } = useSizes(size, options);
+			sizePercentage.value = 75; // 75% of 400px = 300px
+			expect(size.value).toBe(300);
+		});
+	});
+
+	describe('sizePixels', () => {
+		it('should return size value when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const };
+			size.value = 200;
+			const { sizePixels } = useSizes(size, options);
+			expect(sizePixels.value).toBe(200);
+		});
+
+		it('should convert percentage to pixels when sizeUnit is percentage', () => {
+			size.value = 50; // 50% of 400px = 200px
+			const { sizePixels } = useSizes(size, defaultOptions);
+			expect(sizePixels.value).toBe(200);
+		});
+
+		it('should update size when setting pixel value with pixel unit', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const };
+			const { sizePixels } = useSizes(size, options);
+			sizePixels.value = 300;
+			expect(size.value).toBe(300);
+		});
+
+		it('should convert and update size when setting pixel value with percentage unit', () => {
+			const { sizePixels } = useSizes(size, defaultOptions);
+			sizePixels.value = 300; // 300px out of 400px = 75%
+			expect(size.value).toBe(75);
+		});
+	});
+
+	describe('minSizePercentage', () => {
+		it('should return minSize value when sizeUnit is percentage', () => {
+			const { minSizePercentage } = useSizes(size, defaultOptions);
+			expect(minSizePercentage.value).toBe(10);
+		});
+
+		it('should convert pixels to percentage when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const, minSize: 40 };
+			const { minSizePercentage } = useSizes(size, options);
+			expect(minSizePercentage.value).toBe(10); // 40px out of 400px = 10%
+		});
+	});
+
+	describe('minSizePixels', () => {
+		it('should return minSize value when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const, minSize: 40 };
+			const { minSizePixels } = useSizes(size, options);
+			expect(minSizePixels.value).toBe(40);
+		});
+
+		it('should convert percentage to pixels when sizeUnit is percentage', () => {
+			const { minSizePixels } = useSizes(size, defaultOptions);
+			expect(minSizePixels.value).toBe(40); // 10% of 400px = 40px
+		});
+	});
+
+	describe('maxSizePercentage', () => {
+		it('should return undefined when maxSize is undefined', () => {
+			const options = { ...defaultOptions, maxSize: undefined };
+			const { maxSizePercentage } = useSizes(size, options);
+			expect(maxSizePercentage.value).toBeUndefined();
+		});
+
+		it('should return maxSize value when sizeUnit is percentage', () => {
+			const { maxSizePercentage } = useSizes(size, defaultOptions);
+			expect(maxSizePercentage.value).toBe(90);
+		});
+
+		it('should convert pixels to percentage when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const, maxSize: 360 };
+			const { maxSizePercentage } = useSizes(size, options);
+			expect(maxSizePercentage.value).toBe(90); // 360px out of 400px = 90%
+		});
+	});
+
+	describe('snapPixels', () => {
+		it('should return snapPoints as-is when sizeUnit is pixels', () => {
+			const options = { ...defaultOptions, sizeUnit: 'px' as const, snapPoints: [100, 200, 300] };
+			const { snapPixels } = useSizes(size, options);
+			expect(snapPixels.value).toEqual([100, 200, 300]);
+		});
+
+		it('should convert percentage snapPoints to pixels when sizeUnit is percentage', () => {
+			const { snapPixels } = useSizes(size, defaultOptions);
+			expect(snapPixels.value).toEqual([100, 200, 300]); // 25%, 50%, 75% of 400px
+		});
+	});
+});
diff --git a/packages/vue-split-panel/src/composables/use-sizes.ts b/packages/vue-split-panel/src/composables/use-sizes.ts
index cba55a4..eb68349 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.ts
@@ -57,15 +57,11 @@ export const useSizes = (size: Ref<number>, options: UseSizesOptions) => {
 	});
 
 	const minSizePercentage = computed(() => {
-		if (toValue(options.minSize) === undefined) return;
-
 		if (toValue(options.sizeUnit) === '%') return toValue(options.minSize);
 		return pixelsToPercentage(componentSize.value, toValue(options.minSize));
 	});
 
 	const minSizePixels = computed(() => {
-		if (toValue(options.minSize) === undefined) return;
-
 		if (toValue(options.sizeUnit) === 'px') return toValue(options.minSize);
 		return percentageToPixels(componentSize.value, toValue(options.minSize));
 	});
diff --git a/packages/vue-split-panel/tests/collapse.test.ts b/packages/vue-split-panel/tests/collapse.test.ts
index 0ce934f..977ea31 100644
--- a/packages/vue-split-panel/tests/collapse.test.ts
+++ b/packages/vue-split-panel/tests/collapse.test.ts
@@ -8,7 +8,7 @@ describe('collapse', () => {
 			props: { collapsed: true },
 		});
 
-		expect(wrapper.find('.split-panel').classes()).toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).toContain('collapsed');
 	});
 
 	it('is not collapsed when collapsed is set to false', () => {
@@ -16,7 +16,7 @@ describe('collapse', () => {
 			props: { collapsed: false },
 		});
 
-		expect(wrapper.find('.split-panel').classes()).not.toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).not.toContain('collapsed');
 	});
 
 	it('can be collapsed through a prop even when collapsible is false', () => {
@@ -24,7 +24,7 @@ describe('collapse', () => {
 			props: { collapsible: false, collapsed: true },
 		});
 
-		expect(wrapper.find('.split-panel').classes()).toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).toContain('collapsed');
 	});
 
 	it('sets size to 0 when collapsed', async () => {
@@ -35,7 +35,7 @@ describe('collapse', () => {
 
 		await wrapper.setProps({ collapsed: true });
 
-		expect(wrapper.find('[role="separator"]').attributes('aria-valuenow')).toBe('0');
+		expect(wrapper.find('[data-testid="divider"]').attributes('aria-valuenow')).toBe('0');
 	});
 
 	it('preserves size when expanding back from collapsed state', async () => {
@@ -45,10 +45,10 @@ describe('collapse', () => {
 
 		// Collapse
 		await wrapper.setProps({ collapsed: true });
-		expect(wrapper.find('[role="separator"]').attributes('aria-valuenow')).toBe('0');
+		expect(wrapper.find('[data-testid="divider"]').attributes('aria-valuenow')).toBe('0');
 
 		// Expand back
 		await wrapper.setProps({ collapsed: false });
-		expect(wrapper.find('[role="separator"]').attributes('aria-valuenow')).toBe('75');
+		expect(wrapper.find('[data-testid="divider"]').attributes('aria-valuenow')).toBe('75');
 	});
 });
diff --git a/packages/vue-split-panel/tests/mounting.test.ts b/packages/vue-split-panel/tests/mounting.test.ts
index c78a859..d72afdc 100644
--- a/packages/vue-split-panel/tests/mounting.test.ts
+++ b/packages/vue-split-panel/tests/mounting.test.ts
@@ -10,9 +10,9 @@ describe('basic mounting and rendering', () => {
 
 	it('renders start, divider, and end slots', () => {
 		const wrapper = mount(SplitPanel);
-		expect(wrapper.find('.start').exists()).toBe(true);
-		expect(wrapper.find('.divider').exists()).toBe(true);
-		expect(wrapper.find('.end').exists()).toBe(true);
+		expect(wrapper.find('[data-testid="start"]').exists()).toBe(true);
+		expect(wrapper.find('[data-testid="divider"]').exists()).toBe(true);
+		expect(wrapper.find('[data-testid="end"]').exists()).toBe(true);
 	});
 
 	it('renders slot content correctly', () => {