resize-done events only return the relevant width/height value instead of the grid styling string.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-splitter",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "",
   "main": "tp-splitter.js",
   "scripts": {

tp-hsplitter.js

@@ -65,6 +65,7 @@ class TpHSplitter extends LitElement {
       dragging: { type: Boolean, reflect: true },
       minSideHeight: { type: Number },
       lateResize: { type: Boolean },
+      initialTopHeight: { type: String },
     };
   }
 
@@ -88,6 +89,12 @@ class TpHSplitter extends LitElement {
     return this.shadowRoot.querySelector('#splitter')
   }
 
+  firstUpdated() {
+    if (this.initialTopHeight) {
+      this.style.gridTemplateRows = `${this.initialTopHeight} var(--tp-splitter-width, 5px) 1fr`;
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('mouseup', this._disableDrag)
@@ -110,13 +117,17 @@ class TpHSplitter extends LitElement {
     document.body.style['userSelect'] = '';
     this.dragging = false;
 
+    let finalHeight;
     if (this.lateResize && this._bufferedDelta) {
+      finalHeight = this._topHeight + this._bufferedDelta;
       this.splitter.style.transform = '';
-      this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
+      this.style.gridTemplateRows = `${finalHeight}px 5px 1fr`;
       this._bufferedDelta = 0;
+    } else {
+      finalHeight = this.top.offsetHeight;
     }
 
-    this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent('resize-done', { detail: finalHeight, bubbles: true, composed: true }));
   }
 
   _resize(e) {

tp-vsplitter.js

@@ -60,6 +60,7 @@ class TpVSplitter extends LitElement {
       dragging: { type: Boolean },
       minSideWidth: { type: Number },
       lateResize: { type: Boolean },
+      initialLeftWidth: { type: String },
     };
   }
 
@@ -83,6 +84,12 @@ class TpVSplitter extends LitElement {
     return this.shadowRoot.querySelector('#splitter')
   }
 
+  firstUpdated() {
+    if (this.initialLeftWidth) {
+      this.style.gridTemplateColumns = `${this.initialLeftWidth} var(--tp-splitter-width, 5px) 1fr`;
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('mouseup', this._disableDrag)
@@ -105,13 +112,17 @@ class TpVSplitter extends LitElement {
     document.body.style['userSelect'] = '';
     this.dragging = false;
 
+    let finalWidth;
     if (this.lateResize && this._bufferedDelta) {
+      finalWidth = this._leftWidth + this._bufferedDelta;
       this.splitter.style.transform = '';
-      this.style.gridTemplateColumns = `${this._leftWidth + this._bufferedDelta}px 5px 1fr`;
+      this.style.gridTemplateColumns = `${finalWidth}px 5px 1fr`;
       this._bufferedDelta = 0;
+    } else {
+      finalWidth = this.left.offsetWidth;
     }
 
-    this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateColumns, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent('resize-done', { detail: finalWidth, bubbles: true, composed: true }));
   }
 
   _resize(e) {