From 9f762c78503f9e34a2c1e119f2dcae1c679773d5 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 17:47:01 -0400
Subject: [PATCH 1/9] Add tests for use-grid-template

---
 .../src/composables/use-grid-template.test.ts | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 packages/vue-split-panel/src/composables/use-grid-template.test.ts

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');
+	});
+});

From a567ca10f2c7c808064f31b7ae96bb26842dc558 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 17:59:15 -0400
Subject: [PATCH 2/9] Add tests for use keyboard

---
 .../src/composables/use-keyboard.test.ts      | 312 ++++++++++++++++++
 1 file changed, 312 insertions(+)
 create mode 100644 packages/vue-split-panel/src/composables/use-keyboard.test.ts

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();
+	});
+});

From 0444806fa052bb3b345a3e6acb2f2266bae1ec62 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:04:21 -0400
Subject: [PATCH 3/9] Add tests for use-pointer

---
 .../src/composables/use-pointer.test.ts       | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 packages/vue-split-panel/src/composables/use-pointer.test.ts

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..84137b2
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-pointer.test.ts
@@ -0,0 +1,104 @@
+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: any;
+	let sizePercentage: any;
+	let sizePixels: any;
+	let options: UsePointerOptions;
+	let dividerEl: any;
+	let panelEl: any;
+
+	beforeEach(() => {
+		collapsed = ref(false);
+		sizePercentage = ref(50);
+		sizePixels = ref(200);
+
+		// Create mock DOM elements
+		dividerEl = ref({
+			getBoundingClientRect: () => ({ left: 0, top: 0, width: 10, height: 10 }),
+			style: {},
+			addEventListener: () => {},
+			removeEventListener: () => {},
+		});
+
+		panelEl = ref({
+			getBoundingClientRect: () => ({ left: 0, top: 0, width: 400, height: 400 }),
+			style: {},
+		});
+
+		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
+	});
+});

From d28efe9a055e62bfe42dd31a66eeef6ee3138eec Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:26:18 -0400
Subject: [PATCH 4/9] Add tests for use resize

---
 .../src/composables/use-resize.test.ts        | 80 +++++++++++++++++++
 .../src/composables/use-resize.ts             |  9 ++-
 2 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 packages/vue-split-panel/src/composables/use-resize.test.ts

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 };
 };

From 3fac853838e43e2f395f01ee6e80373c4145ebe7 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:32:40 -0400
Subject: [PATCH 5/9] Improve testing

---
 packages/vue-split-panel/src/SplitPanel.vue   |  13 +-
 .../src/composables/use-sizes.test.ts         | 188 ++++++++++++++++++
 .../vue-split-panel/tests/collapse.test.ts    |  12 +-
 .../vue-split-panel/tests/mounting.test.ts    |   6 +-
 4 files changed, 207 insertions(+), 12 deletions(-)
 create mode 100644 packages/vue-split-panel/src/composables/use-sizes.test.ts

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-sizes.test.ts b/packages/vue-split-panel/src/composables/use-sizes.test.ts
new file mode 100644
index 0000000..8781fc0
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-sizes.test.ts
@@ -0,0 +1,188 @@
+import type { Ref } from 'vue';
+import type { UseSizesOptions } from './use-sizes';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { nextTick, 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 undefined when minSize is undefined', () => {
+			const options = { ...defaultOptions, minSize: undefined as any };
+			const { minSizePercentage } = useSizes(size, options);
+			expect(minSizePercentage.value).toBeUndefined();
+		});
+
+		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 undefined when minSize is undefined', () => {
+			const options = { ...defaultOptions, minSize: undefined as any };
+			const { minSizePixels } = useSizes(size, options);
+			expect(minSizePixels.value).toBeUndefined();
+		});
+
+		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/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', () => {

From 2727d367eda323ec3852f7719e0109c1df3dbd91 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:39:24 -0400
Subject: [PATCH 6/9] Fix type sig

---
 packages/vue-split-panel/src/composables/use-sizes.test.ts | 4 ++--
 packages/vue-split-panel/src/composables/use-sizes.ts      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-split-panel/src/composables/use-sizes.test.ts b/packages/vue-split-panel/src/composables/use-sizes.test.ts
index 8781fc0..4ad6b34 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.test.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.test.ts
@@ -118,7 +118,7 @@ describe('useSizes', () => {
 
 	describe('minSizePercentage', () => {
 		it('should return undefined when minSize is undefined', () => {
-			const options = { ...defaultOptions, minSize: undefined as any };
+			const options = { ...defaultOptions, minSize: undefined };
 			const { minSizePercentage } = useSizes(size, options);
 			expect(minSizePercentage.value).toBeUndefined();
 		});
@@ -137,7 +137,7 @@ describe('useSizes', () => {
 
 	describe('minSizePixels', () => {
 		it('should return undefined when minSize is undefined', () => {
-			const options = { ...defaultOptions, minSize: undefined as any };
+			const options = { ...defaultOptions, minSize: undefined };
 			const { minSizePixels } = useSizes(size, options);
 			expect(minSizePixels.value).toBeUndefined();
 		});
diff --git a/packages/vue-split-panel/src/composables/use-sizes.ts b/packages/vue-split-panel/src/composables/use-sizes.ts
index cba55a4..139b85e 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.ts
@@ -12,7 +12,7 @@ export interface UseSizesOptions {
 	primary: MaybeRefOrGetter<Primary | undefined>;
 	orientation: MaybeRefOrGetter<Orientation>;
 	sizeUnit: MaybeRefOrGetter<SizeUnit>;
-	minSize: MaybeRefOrGetter<number>;
+	minSize: MaybeRefOrGetter<number | undefined>;
 	maxSize: MaybeRefOrGetter<number | undefined>;
 	snapPoints: MaybeRefOrGetter<number[]>;
 	panelEl: MaybeComputedElementRef;

From caf14cade33c32e0d2209dc6980a3d538671a855 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:43:13 -0400
Subject: [PATCH 7/9] Fix type signatures

---
 .../src/composables/use-pointer.test.ts       | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/vue-split-panel/src/composables/use-pointer.test.ts b/packages/vue-split-panel/src/composables/use-pointer.test.ts
index 84137b2..8a711e3 100644
--- a/packages/vue-split-panel/src/composables/use-pointer.test.ts
+++ b/packages/vue-split-panel/src/composables/use-pointer.test.ts
@@ -1,33 +1,30 @@
+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: any;
-	let sizePercentage: any;
-	let sizePixels: any;
+	let collapsed: Ref<boolean>;
+	let sizePercentage: Ref<number>;
+	let sizePixels: Ref<number>;
 	let options: UsePointerOptions;
-	let dividerEl: any;
-	let panelEl: any;
+	let dividerEl: Ref<HTMLElement | null>;
+	let panelEl: Ref<HTMLElement | null>;
 
 	beforeEach(() => {
 		collapsed = ref(false);
 		sizePercentage = ref(50);
 		sizePixels = ref(200);
 
-		// Create mock DOM elements
-		dividerEl = ref({
-			getBoundingClientRect: () => ({ left: 0, top: 0, width: 10, height: 10 }),
-			style: {},
-			addEventListener: () => {},
-			removeEventListener: () => {},
-		});
-
-		panelEl = ref({
-			getBoundingClientRect: () => ({ left: 0, top: 0, width: 400, height: 400 }),
-			style: {},
-		});
+		// 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),

From 9e23d59cd88f61b15e02c030a31f02e816899574 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:44:19 -0400
Subject: [PATCH 8/9] Remove unused import

---
 packages/vue-split-panel/src/composables/use-sizes.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-split-panel/src/composables/use-sizes.test.ts b/packages/vue-split-panel/src/composables/use-sizes.test.ts
index 4ad6b34..0de1d8d 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.test.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.test.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 import type { UseSizesOptions } from './use-sizes';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { nextTick, ref } from 'vue';
+import { ref } from 'vue';
 import { useSizes } from './use-sizes';
 
 describe('useSizes', () => {

From 0af035bc3da1f4b24a434bd829ee90a1aa09e17a Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 18:48:12 -0400
Subject: [PATCH 9/9] Remove undefined check for minSize

It has a default value
---
 .../src/composables/use-sizes.test.ts                | 12 ------------
 .../vue-split-panel/src/composables/use-sizes.ts     |  6 +-----
 2 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/vue-split-panel/src/composables/use-sizes.test.ts b/packages/vue-split-panel/src/composables/use-sizes.test.ts
index 0de1d8d..0d7ea56 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.test.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.test.ts
@@ -117,12 +117,6 @@ describe('useSizes', () => {
 	});
 
 	describe('minSizePercentage', () => {
-		it('should return undefined when minSize is undefined', () => {
-			const options = { ...defaultOptions, minSize: undefined };
-			const { minSizePercentage } = useSizes(size, options);
-			expect(minSizePercentage.value).toBeUndefined();
-		});
-
 		it('should return minSize value when sizeUnit is percentage', () => {
 			const { minSizePercentage } = useSizes(size, defaultOptions);
 			expect(minSizePercentage.value).toBe(10);
@@ -136,12 +130,6 @@ describe('useSizes', () => {
 	});
 
 	describe('minSizePixels', () => {
-		it('should return undefined when minSize is undefined', () => {
-			const options = { ...defaultOptions, minSize: undefined };
-			const { minSizePixels } = useSizes(size, options);
-			expect(minSizePixels.value).toBeUndefined();
-		});
-
 		it('should return minSize value when sizeUnit is pixels', () => {
 			const options = { ...defaultOptions, sizeUnit: 'px' as const, minSize: 40 };
 			const { minSizePixels } = useSizes(size, options);
diff --git a/packages/vue-split-panel/src/composables/use-sizes.ts b/packages/vue-split-panel/src/composables/use-sizes.ts
index 139b85e..eb68349 100644
--- a/packages/vue-split-panel/src/composables/use-sizes.ts
+++ b/packages/vue-split-panel/src/composables/use-sizes.ts
@@ -12,7 +12,7 @@ export interface UseSizesOptions {
 	primary: MaybeRefOrGetter<Primary | undefined>;
 	orientation: MaybeRefOrGetter<Orientation>;
 	sizeUnit: MaybeRefOrGetter<SizeUnit>;
-	minSize: MaybeRefOrGetter<number | undefined>;
+	minSize: MaybeRefOrGetter<number>;
 	maxSize: MaybeRefOrGetter<number | undefined>;
 	snapPoints: MaybeRefOrGetter<number[]>;
 	panelEl: MaybeComputedElementRef;
@@ -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));
 	});