diff --git a/package.json b/package.json
index fec6157..ae968ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-splitter",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-splitter.js",
   "scripts": {
diff --git a/tp-hsplitter.js b/tp-hsplitter.js
index c6999ad..fa98143 100644
--- a/tp-hsplitter.js
+++ b/tp-hsplitter.js
@@ -16,7 +16,7 @@ class TpHSplitter extends LitElement {
 
         :host([tophidden]),
         :host([bottomhidden]) {
-          grid-template-rows: 1fr;
+          grid-template-rows: 1fr !important;
         }
 
         [hidden] {
@@ -29,14 +29,19 @@ class TpHSplitter extends LitElement {
           overflow: hidden;
         }
 
-        .splitter {
-          background: var(--lighter-black);
+        #splitter {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          background: var(--tp-splitter-line-color, #3b3b3b);
           cursor: row-resize;
           opacity: 1;
+          z-index: 2;
         }
 
-        .splitter:hover {
-          background: var(--hl-color);
+        #splitter:hover {
+          background: var(--tp-splitter-line-color-hover, #007dd1);
           opacity: 0.5;
         }
       `
@@ -47,9 +52,9 @@ class TpHSplitter extends LitElement {
     const { topHidden, bottomHidden } = this;
 
     return html`
-      <div id="top" ?hidden=${topHidden}><slot name="top"></slot></div>
-      <div class="splitter" @mousedown=${this._enableDrag} ?hidden=${topHidden || bottomHidden}></div>
-      <div id="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div>
+      <div id="top" part="top" ?hidden=${topHidden}><slot name="top"></slot></div>
+      <div id="splitter" part="splitter" @mousedown=${this._enableDrag} ?hidden=${topHidden || bottomHidden}><slot name="splitter"></slot></div>
+      <div id="bottom" part="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div>
     `;
   }
 
@@ -57,8 +62,9 @@ class TpHSplitter extends LitElement {
     return {
       topHidden: { type: Boolean, reflect: true },
       bottomHidden: { type: Boolean, reflect: true },
+      lateResize: { type: Boolean },
       rows: { type: String },
-      _dragging: { type: Boolean },
+      dragging: { type: Boolean, reflect: true },
     };
   }
 
@@ -67,6 +73,7 @@ class TpHSplitter extends LitElement {
 
     this._disableDrag = this._disableDrag.bind(this);
     this._resize = this._resize.bind(this);
+    this._bufferedDelta = 0;
   }
 
   shouldUpdate(changes) {
@@ -85,24 +92,40 @@ class TpHSplitter extends LitElement {
     return this.shadowRoot.querySelector('#bottom');
   }
 
+  get splitter() {
+    return this.shadowRoot.querySelector('#splitter')
+  }
+
   _enableDrag(e) {
     document.addEventListener('mouseup', this._disableDrag)
     document.addEventListener('mousemove', this._resize);
     document.body.style['userSelect'] = 'none';
     this._startY = e.clientY;
     this._topHeight = this.top.offsetHeight;
-    this._dragging = true;
+    this.dragging = true;
   }
 
   _disableDrag() {
     document.removeEventListener('mouseup', this._disableDrag)
     document.removeEventListener('mousemove', this._resize);
     document.body.style['userSelect'] = '';
-    this._dragging = false;
+    this.dragging = false;
+
+    if (this.lateResize && this._bufferedDelta) {
+      this.splitter.style.transform = '';
+      this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
+      this._bufferedDelta = 0;
+    }
+
     this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
   }
 
   _resize(e) {
+    if (this.lateResize) {
+      this._bufferedDelta = e.clientY - this._startY;
+      this.splitter.style.transform = `translateY(${this._bufferedDelta}px)`;
+      return;
+    }
     const delta = e.clientY - this._startY;
     this.style.gridTemplateRows = `${this._topHeight + delta}px 5px 1fr`;
     this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
diff --git a/tp-vsplitter.js b/tp-vsplitter.js
index 6a98515..8a37862 100644
--- a/tp-vsplitter.js
+++ b/tp-vsplitter.js
@@ -21,13 +21,13 @@ class TpVSplitter extends LitElement {
         }
 
         .splitter {
-          background: var(--lighter-black);
+          background: var(--tp-splitter-line-color, #3b3b3b);
           cursor: col-resize;
           opacity: 1;
         }
 
         .splitter:hover {
-          background: var(--hl-color);
+          background: var(--tp-splitter-line-color-hover, #007dd1);
           opacity: 0.5;
         }
       `