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

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