diff --git a/package.json b/package.json
index aef2aea..765e0a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-splitter",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "",
   "main": "tp-splitter.js",
   "scripts": {
diff --git a/tp-hsplitter.js b/tp-hsplitter.js
index b3857b7..d6bb79b 100644
--- a/tp-hsplitter.js
+++ b/tp-hsplitter.js
@@ -124,17 +124,28 @@ class TpHSplitter extends LitElement {
     document.body.style['userSelect'] = '';
     this.dragging = false;
 
-    let finalHeight;
+    let finalTopHeight;
     if (this.lateResize && this._bufferedDelta) {
-      finalHeight = this._topHeight + this._bufferedDelta;
+      finalTopHeight = this._topHeight + this._bufferedDelta;
       this.splitter.style.transform = '';
-      this.style.gridTemplateRows = `${finalHeight}px 5px 1fr`;
+      this.style.gridTemplateRows = `${finalTopHeight}px 5px 1fr`;
       this._bufferedDelta = 0;
     } else {
-      finalHeight = this.top.offsetHeight;
+      finalTopHeight = this.top.offsetHeight;
     }
 
-    this.dispatchEvent(new CustomEvent('resize-done', { detail: finalHeight, bubbles: true, composed: true }));
+    // Calculate bottom height
+    const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
+    const finalBottomHeight = this.offsetHeight - finalTopHeight - splitterWidth;
+
+    this.dispatchEvent(new CustomEvent('resize-done', { 
+      detail: { 
+        topHeight: finalTopHeight, 
+        bottomHeight: finalBottomHeight 
+      }, 
+      bubbles: true, 
+      composed: true 
+    }));
   }
 
   _resize(e) {
diff --git a/tp-vsplitter.js b/tp-vsplitter.js
index a7039ea..d1231fe 100644
--- a/tp-vsplitter.js
+++ b/tp-vsplitter.js
@@ -123,17 +123,28 @@ class TpVSplitter extends LitElement {
     document.body.style['userSelect'] = '';
     this.dragging = false;
 
-    let finalWidth;
+    let finalLeftWidth;
     if (this.lateResize && this._bufferedDelta) {
-      finalWidth = this._leftWidth + this._bufferedDelta;
+      finalLeftWidth = this._leftWidth + this._bufferedDelta;
       this.splitter.style.transform = '';
-      this.style.gridTemplateColumns = `${finalWidth}px 5px 1fr`;
+      this.style.gridTemplateColumns = `${finalLeftWidth}px 5px 1fr`;
       this._bufferedDelta = 0;
     } else {
-      finalWidth = this.left.offsetWidth;
+      finalLeftWidth = this.left.offsetWidth;
     }
 
-    this.dispatchEvent(new CustomEvent('resize-done', { detail: finalWidth, bubbles: true, composed: true }));
+    // Calculate right width
+    const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
+    const finalRightWidth = this.offsetWidth - finalLeftWidth - splitterWidth;
+
+    this.dispatchEvent(new CustomEvent('resize-done', { 
+      detail: { 
+        leftWidth: finalLeftWidth, 
+        rightWidth: finalRightWidth 
+      }, 
+      bubbles: true, 
+      composed: true 
+    }));
   }
 
   _resize(e) {