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

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) {