@vscode-elements/elements 2.0.0-pre.1 → 2.0.0-pre.2

package/dist/vscode-scrollable/vscode-scrollable.js

@@ -5,25 +5,75 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { customElement, property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { VscElement } from '../includes/VscElement.js';
+import { customElement, VscElement } from '../includes/VscElement.js';
 import { stylePropertyMap } from '../includes/style-property-map.js';
 import styles from './vscode-scrollable.styles.js';
 /**
  * @tag vscode-scrollable
  *
- * @cssprop [--min-thumb-height=20px] - Scrollbar thumb minimum height
- * @cssprop --vscode-scrollbar-shadow
- * @cssprop --vscode-scrollbarSlider-background
- * @cssprop --vscode-scrollbarSlider-hoverBackground
- * @cssprop --vscode-scrollbarSlider-activeBackground
+ * @cssprop --min-thumb-height - (@deprecated) This css property is deprecated. Use the `minThumbSize` property instead.
+ * @cssprop [--vscode-scrollbar-shadow=#000000]
+ * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]
+ * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]
+ * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]
  */
 let VscodeScrollable = class VscodeScrollable extends VscElement {
+    /**
+     * Scroll position.
+     */
+    set scrollPos(val) {
+        this._scrollPos = val;
+        this._updateScrollbar();
+        this._updateThumbPosition();
+        this.requestUpdate();
+    }
+    get scrollPos() {
+        return this._scrollPos;
+    }
+    /**
+     * The maximum amount of the `scrollPos`.
+     */
+    get scrollMax() {
+        if (!this._scrollableContainer) {
+            return 0;
+        }
+        return this._scrollableContainer.scrollHeight;
+    }
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * By default, the scrollbar appears only when the cursor hovers over the
+         * component. With this option, the scrollbar will always be visible.
+         */
+        this.alwaysVisible = false;
+        /**
+         * Scrolling speed multiplier when pressing `Alt`. This property is designed to use the value of
+         * `editor.fastScrollSensitivity`, `workbench.list.fastScrollSensitivity` or
+         * `terminal.integrated.fastScrollSensitivity` depending on the context.
+         */
+        this.fastScrollSensitivity = 5;
+        /**
+         * This setting defines the scrollbar's minimum size when the component contains a large amount of content.
+         */
+        this.minThumbSize = 20;
+        /**
+         * A multiplier to be used on the `deltaY` of the mouse wheel scroll events. This property is
+         * designed to use the value of `editor.mouseWheelScrollSensitivity`,
+         * `workbench.list.mouseWheelScrollSensitivity` or
+         * `terminal.integrated.mouseWheelScrollSensitivity` depending on the context.
+         */
+        this.mouseWheelScrollSensitivity = 1;
+        /**
+         * Controls shadow visibility when content overflows.
+         */
         this.shadow = true;
+        /**
+         * It's true when `scrollPos` greater than 0
+         */
         this.scrolled = false;
+        this._scrollPos = 0;
         this._isDragging = false;
         this._thumbHeight = 0;
         this._thumbY = 0;
@@ -36,29 +86,63 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this._scrollbarTrackZ = 0;
         this._resizeObserverCallback = () => {
             this._updateScrollbar();
+            this._updateThumbPosition();
         };
-        this._onSlotChange = () => {
+        //#region event handlers
+        this._handleSlotChange = () => {
+            this._updateScrollbar();
+            this._updateThumbPosition();
             this._zIndexFix();
         };
-        this._onScrollThumbMouseMoveBound = this._onScrollThumbMouseMove.bind(this);
-        this._onScrollThumbMouseUpBound = this._onScrollThumbMouseUp.bind(this);
-        this._onComponentMouseOverBound = this._onComponentMouseOver.bind(this);
-        this._onComponentMouseOutBound = this._onComponentMouseOut.bind(this);
-    }
-    set scrollPos(val) {
-        this._scrollableContainer.scrollTop = val;
-    }
-    get scrollPos() {
-        if (!this._scrollableContainer) {
-            return 0;
-        }
-        return this._scrollableContainer.scrollTop;
-    }
-    get scrollMax() {
-        if (!this._scrollableContainer) {
-            return 0;
-        }
-        return this._scrollableContainer.scrollHeight;
+        this._handleScrollThumbMouseMove = (event) => {
+            const rawThumbPos = this._scrollThumbStartY + (event.screenY - this._mouseStartY);
+            this._thumbY = this._limitThumbPos(rawThumbPos);
+            this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);
+            this.dispatchEvent(new CustomEvent('vsc-scrollable-scroll', {
+                detail: this.scrollPos,
+            }));
+        };
+        this._handleScrollThumbMouseUp = (event) => {
+            this._isDragging = false;
+            this._thumbActive = false;
+            const cr = this.getBoundingClientRect();
+            const { x, y, width, height } = cr;
+            const { pageX, pageY } = event;
+            if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {
+                this._thumbFade = true;
+                this._thumbVisible = false;
+            }
+            document.removeEventListener('mousemove', this._handleScrollThumbMouseMove);
+            document.removeEventListener('mouseup', this._handleScrollThumbMouseUp);
+        };
+        this._handleComponentMouseOver = () => {
+            this._thumbVisible = true;
+            this._thumbFade = false;
+        };
+        this._handleComponentMouseOut = () => {
+            if (!this._thumbActive) {
+                this._thumbVisible = false;
+                this._thumbFade = true;
+            }
+        };
+        this._handleComponentWheel = (ev) => {
+            ev.preventDefault();
+            const multiplier = ev.altKey
+                ? this.mouseWheelScrollSensitivity * this.fastScrollSensitivity
+                : this.mouseWheelScrollSensitivity;
+            this.scrollPos = this._limitScrollPos(this.scrollPos + ev.deltaY * multiplier);
+            this.dispatchEvent(new CustomEvent('vsc-scrollable-scroll', {
+                detail: this.scrollPos,
+            }));
+        };
+        this._handleScrollableContainerScroll = (ev) => {
+            if (ev.currentTarget) {
+                this.scrollPos = ev.currentTarget.scrollTop;
+            }
+        };
+        this.addEventListener('mouseover', this._handleComponentMouseOver);
+        this.addEventListener('mouseout', this._handleComponentMouseOut);
+        this.addEventListener('wheel', this._handleComponentWheel);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -66,12 +150,10 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this._contentResizeObserver = new ResizeObserver(this._resizeObserverCallback);
         this.requestUpdate();
         this.updateComplete.then(() => {
-            this._scrollableContainer.addEventListener('scroll', this._onScrollableContainerScroll.bind(this));
             this._hostResizeObserver.observe(this);
             this._contentResizeObserver.observe(this._contentElement);
+            this._updateThumbPosition();
         });
-        this.addEventListener('mouseover', this._onComponentMouseOverBound);
-        this.addEventListener('mouseout', this._onComponentMouseOutBound);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -79,18 +161,25 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this._hostResizeObserver.disconnect();
         this._contentResizeObserver.unobserve(this._contentElement);
         this._contentResizeObserver.disconnect();
-        this.removeEventListener('mouseover', this._onComponentMouseOverBound);
-        this.removeEventListener('mouseout', this._onComponentMouseOutBound);
+    }
+    firstUpdated(_changedProperties) {
+        this._updateThumbPosition();
+    }
+    _calcThumbHeight() {
+        const componentHeight = this.offsetHeight;
+        const contentHeight = this._contentElement?.offsetHeight ?? 0;
+        const proposedSize = componentHeight * (componentHeight / contentHeight);
+        return Math.max(this.minThumbSize, proposedSize);
     }
     _updateScrollbar() {
-        const compCr = this.getBoundingClientRect();
-        const contentCr = this._contentElement.getBoundingClientRect();
-        if (compCr.height >= contentCr.height) {
+        const contentHeight = this._contentElement?.offsetHeight ?? 0;
+        const componentHeight = this.offsetHeight;
+        if (componentHeight >= contentHeight) {
             this._scrollbarVisible = false;
         }
         else {
             this._scrollbarVisible = true;
-            this._thumbHeight = compCr.height * (compCr.height / contentCr.height);
+            this._thumbHeight = this._calcThumbHeight();
         }
         this.requestUpdate();
     }
@@ -111,68 +200,69 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this._scrollbarTrackZ = highestZ + 1;
         this.requestUpdate();
     }
-    _onScrollThumbMouseDown(event) {
-        const cmpCr = this.getBoundingClientRect();
-        const thCr = this._scrollThumbElement.getBoundingClientRect();
-        this._mouseStartY = event.screenY;
-        this._scrollThumbStartY = thCr.top - cmpCr.top;
-        this._isDragging = true;
-        this._thumbActive = true;
-        document.addEventListener('mousemove', this._onScrollThumbMouseMoveBound);
-        document.addEventListener('mouseup', this._onScrollThumbMouseUpBound);
+    _updateThumbPosition() {
+        if (!this._scrollableContainer) {
+            return;
+        }
+        const scrollTop = this._scrollPos;
+        this.scrolled = scrollTop > 0;
+        const componentH = this.offsetHeight;
+        const thumbH = this._thumbHeight;
+        const contentH = this._contentElement.offsetHeight;
+        const overflown = contentH - componentH;
+        const ratio = scrollTop / overflown;
+        const thumbYMax = componentH - thumbH;
+        this._thumbY = Math.min(ratio * (componentH - thumbH), thumbYMax);
     }
-    _onScrollThumbMouseMove(event) {
-        const predictedPos = this._scrollThumbStartY + (event.screenY - this._mouseStartY);
-        let nextPos = 0;
+    _calculateScrollPosFromThumbPos(scrollPos) {
         const cmpH = this.getBoundingClientRect().height;
         const thumbH = this._scrollThumbElement.getBoundingClientRect().height;
         const contentH = this._contentElement.getBoundingClientRect().height;
-        if (predictedPos < 0) {
-            nextPos = 0;
+        const rawScrollPos = (scrollPos / (cmpH - thumbH)) * (contentH - cmpH);
+        return this._limitScrollPos(rawScrollPos);
+    }
+    _limitScrollPos(newPos) {
+        if (newPos < 0) {
+            return 0;
         }
-        else if (predictedPos > cmpH - thumbH) {
-            nextPos = cmpH - thumbH;
+        else if (newPos > this.scrollMax) {
+            return this.scrollMax;
         }
         else {
-            nextPos = predictedPos;
+            return newPos;
         }
-        this._thumbY = nextPos;
-        this._scrollableContainer.scrollTop =
-            (nextPos / (cmpH - thumbH)) * (contentH - cmpH);
     }
-    _onScrollThumbMouseUp(event) {
-        this._isDragging = false;
-        this._thumbActive = false;
-        const cr = this.getBoundingClientRect();
-        const { x, y, width, height } = cr;
-        const { pageX, pageY } = event;
-        if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {
-            this._thumbFade = true;
-            this._thumbVisible = false;
-        }
-        document.removeEventListener('mousemove', this._onScrollThumbMouseMoveBound);
-        document.removeEventListener('mouseup', this._onScrollThumbMouseUpBound);
-    }
-    _onScrollableContainerScroll() {
-        const scrollTop = this._scrollableContainer.scrollTop;
-        this.scrolled = scrollTop > 0;
+    _limitThumbPos(newPos) {
         const cmpH = this.getBoundingClientRect().height;
         const thumbH = this._scrollThumbElement.getBoundingClientRect().height;
-        const contentH = this._contentElement.getBoundingClientRect().height;
-        const overflown = contentH - cmpH;
-        const ratio = scrollTop / overflown;
-        this._thumbY = ratio * (cmpH - thumbH);
+        if (newPos < 0) {
+            return 0;
+        }
+        else if (newPos > cmpH - thumbH) {
+            return cmpH - thumbH;
+        }
+        else {
+            return newPos;
+        }
     }
-    _onComponentMouseOver() {
-        this._thumbVisible = true;
-        this._thumbFade = false;
+    _handleScrollThumbMouseDown(event) {
+        const cmpCr = this.getBoundingClientRect();
+        const thCr = this._scrollThumbElement.getBoundingClientRect();
+        this._mouseStartY = event.screenY;
+        this._scrollThumbStartY = thCr.top - cmpCr.top;
+        this._isDragging = true;
+        this._thumbActive = true;
+        document.addEventListener('mousemove', this._handleScrollThumbMouseMove);
+        document.addEventListener('mouseup', this._handleScrollThumbMouseUp);
     }
-    _onComponentMouseOut() {
-        if (!this._thumbActive) {
-            this._thumbVisible = false;
-            this._thumbFade = true;
+    _handleScrollbarTrackPress(ev) {
+        if (ev.target !== ev.currentTarget) {
+            return;
         }
+        this._thumbY = ev.offsetY - this._thumbHeight / 2;
+        this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);
     }
+    //#endregion
     render() {
         return html `
       <div
@@ -180,6 +270,8 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         .style=${stylePropertyMap({
             userSelect: this._isDragging ? 'none' : 'auto',
         })}
+        .scrollTop=${this._scrollPos}
+        @scroll=${this._handleScrollableContainerScroll}
       >
         <div
           class=${classMap({ shadow: true, visible: this.scrolled })}
@@ -195,29 +287,42 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
             'scrollbar-track': true,
             hidden: !this._scrollbarVisible,
         })}
+          @mousedown=${this._handleScrollbarTrackPress}
         >
           <div
             class=${classMap({
             'scrollbar-thumb': true,
-            visible: this._thumbVisible,
-            fade: this._thumbFade,
+            visible: this.alwaysVisible ? true : this._thumbVisible,
+            fade: this.alwaysVisible ? false : this._thumbFade,
             active: this._thumbActive,
         })}
             .style=${stylePropertyMap({
             height: `${this._thumbHeight}px`,
             top: `${this._thumbY}px`,
         })}
-            @mousedown=${this._onScrollThumbMouseDown}
+            @mousedown=${this._handleScrollThumbMouseDown}
           ></div>
         </div>
         <div class="content">
-          <slot @slotchange=${this._onSlotChange}></slot>
+          <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
       </div>
     `;
     }
 };
 VscodeScrollable.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'always-visible' })
+], VscodeScrollable.prototype, "alwaysVisible", void 0);
+__decorate([
+    property({ type: Number, attribute: 'fast-scroll-sensitivity' })
+], VscodeScrollable.prototype, "fastScrollSensitivity", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-thumb-size' })
+], VscodeScrollable.prototype, "minThumbSize", void 0);
+__decorate([
+    property({ type: Number, attribute: 'mouse-wheel-scroll-sensitivity' })
+], VscodeScrollable.prototype, "mouseWheelScrollSensitivity", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], VscodeScrollable.prototype, "shadow", void 0);

package/dist/vscode-scrollable/vscode-scrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACnE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD;;;;;;;;GAQG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAIL,WAAM,GAAG,IAAI,CAAC;QAGd,aAAQ,GAAG,KAAK,CAAC;QAwBT,gBAAW,GAAG,KAAK,CAAC;QAGpB,iBAAY,GAAG,CAAC,CAAC;QAGjB,YAAO,GAAG,CAAC,CAAC;QAGZ,kBAAa,GAAG,KAAK,CAAC;QAGtB,eAAU,GAAG,KAAK,CAAC;QAGnB,iBAAY,GAAG,KAAK,CAAC;QAgBrB,uBAAkB,GAAG,CAAC,CAAC;QACvB,iBAAY,GAAG,CAAC,CAAC;QACjB,sBAAiB,GAAG,IAAI,CAAC;QACzB,qBAAgB,GAAG,CAAC,CAAC;QAqCrB,4BAAuB,GAAG,GAAG,EAAE;YACrC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;QAqCM,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;QAoCM,iCAA4B,GAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAsBlC,+BAA0B,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAqBnE,+BAA0B,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QASnE,8BAAyB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IA6C3E,CAAC;IA3QC,IAAI,SAAS,CAAC,GAAW;QACvB,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAG,GAAG,CAAC;IAC5C,CAAC;IACD,IAAI,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;IAC7C,CAAC;IAGD,IAAI,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;IAChD,CAAC;IAuCQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,mBAAmB,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC5E,IAAI,CAAC,sBAAsB,GAAG,IAAI,cAAc,CAC9C,IAAI,CAAC,uBAAuB,CAC7B,CAAC;QAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CACxC,QAAQ,EACR,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAC7C,CAAC;YACF,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACvC,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACpE,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,sBAAsB,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;QACvE,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACvE,CAAC;IAMO,gBAAgB;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;QAE/D,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;QACzE,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,UAAU;QAChB,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YACnC,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;gBACjB,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAgB,CAAC,CAAC,MAAM,CAAC;gBACxE,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAEnD,IAAI,QAAQ,EAAE,CAAC;oBACb,QAAQ;wBACN,MAAM,CAAC,cAAc,CAAC,GAAG,QAAQ;4BAC/B,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;4BACxB,CAAC,CAAC,QAAQ,CAAC;gBACjB,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,GAAG,CAAC,CAAC;QACrC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAMO,uBAAuB,CAAC,KAAiB;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;QAE9D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC1E,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACxE,CAAC;IAEO,uBAAuB,CAAC,KAAiB;QAC/C,MAAM,YAAY,GAChB,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAChE,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACjD,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAErE,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;YACrB,OAAO,GAAG,CAAC,CAAC;QACd,CAAC;aAAM,IAAI,YAAY,GAAG,IAAI,GAAG,MAAM,EAAE,CAAC;YACxC,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,YAAY,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,oBAAoB,CAAC,SAAS;YACjC,CAAC,OAAO,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IACpD,CAAC;IAKO,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAE1B,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACxC,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,EAAE,CAAC;QACjC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC;QAE7B,IAAI,KAAK,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;QAED,QAAQ,CAAC,mBAAmB,CAC1B,WAAW,EACX,IAAI,CAAC,4BAA4B,CAClC,CAAC;QACF,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC3E,CAAC;IAIO,4BAA4B;QAClC,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,CAAC,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACjD,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAErE,MAAM,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC;QAClC,MAAM,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;QAEpC,IAAI,CAAC,OAAO,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAIO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAIQ,MAAM;QACb,OAAO,IAAI,CAAA;;;iBAGE,gBAAgB,CAAC;YACxB,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAC/C,CAAC;;;kBAGQ,QAAQ,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC;mBAC/C,gBAAgB,CAAC;YACxB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;SACtC,CAAC;;UAEF,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,yCAAyC;YAC/C,CAAC,CAAC,OAAO;;kBAED,QAAQ,CAAC;YACf,iBAAiB,EAAE,IAAI;YACvB,MAAM,EAAE,CAAC,IAAI,CAAC,iBAAiB;SAChC,CAAC;;;oBAGQ,QAAQ,CAAC;YACf,iBAAiB,EAAE,IAAI;YACvB,OAAO,EAAE,IAAI,CAAC,aAAa;YAC3B,IAAI,EAAE,IAAI,CAAC,UAAU;YACrB,MAAM,EAAE,IAAI,CAAC,YAAY;SAC1B,CAAC;qBACO,gBAAgB,CAAC;YACxB,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI;YAChC,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI;SACzB,CAAC;yBACW,IAAI,CAAC,uBAAuB;;;;8BAIvB,IAAI,CAAC,aAAa;;;KAG3C,CAAC;IACJ,CAAC;;AAnRe,uBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAC3B;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;iDAGjD;AAUD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;iDAOjD;AAGO;IADP,KAAK,EAAE;qDACoB;AAGpB;IADP,KAAK,EAAE;sDACiB;AAGjB;IADP,KAAK,EAAE;iDACY;AAGZ;IADP,KAAK,EAAE;uDACsB;AAGtB;IADP,KAAK,EAAE;oDACmB;AAGnB;IADP,KAAK,EAAE;sDACqB;AAGrB;IADP,KAAK,CAAC,UAAU,CAAC;yDACuB;AAGjC;IADP,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC;6DACa;AAGrC;IADP,KAAK,CAAC,uBAAuB,CAAC;8DACe;AAGtC;IADP,qBAAqB,EAAE;2DACa;AA1D1B,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAqR5B","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-scrollable.styles.js';\n\n/**\n * @tag vscode-scrollable\n *\n * @cssprop [--min-thumb-height=20px] - Scrollbar thumb minimum height\n * @cssprop --vscode-scrollbar-shadow\n * @cssprop --vscode-scrollbarSlider-background\n * @cssprop --vscode-scrollbarSlider-hoverBackground\n * @cssprop --vscode-scrollbarSlider-activeBackground\n */\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n  static override styles = styles;\n\n  @property({type: Boolean, reflect: true})\n  shadow = true;\n\n  @property({type: Boolean, reflect: true})\n  scrolled = false;\n\n  @property({type: Number, attribute: 'scroll-pos'})\n  set scrollPos(val: number) {\n    this._scrollableContainer.scrollTop = val;\n  }\n  get scrollPos(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollTop;\n  }\n\n  @property({type: Number, attribute: 'scroll-max'})\n  get scrollMax(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollHeight;\n  }\n\n  @state()\n  private _isDragging = false;\n\n  @state()\n  private _thumbHeight = 0;\n\n  @state()\n  private _thumbY = 0;\n\n  @state()\n  private _thumbVisible = false;\n\n  @state()\n  private _thumbFade = false;\n\n  @state()\n  private _thumbActive = false;\n\n  @query('.content')\n  private _contentElement!: HTMLDivElement;\n\n  @query('.scrollbar-thumb', true)\n  private _scrollThumbElement!: HTMLDivElement;\n\n  @query('.scrollable-container')\n  private _scrollableContainer!: HTMLDivElement;\n\n  @queryAssignedElements()\n  private _assignedElements!: NodeList;\n\n  private _hostResizeObserver!: ResizeObserver;\n  private _contentResizeObserver!: ResizeObserver;\n  private _scrollThumbStartY = 0;\n  private _mouseStartY = 0;\n  private _scrollbarVisible = true;\n  private _scrollbarTrackZ = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this._hostResizeObserver = new ResizeObserver(this._resizeObserverCallback);\n    this._contentResizeObserver = new ResizeObserver(\n      this._resizeObserverCallback\n    );\n\n    this.requestUpdate();\n\n    this.updateComplete.then(() => {\n      this._scrollableContainer.addEventListener(\n        'scroll',\n        this._onScrollableContainerScroll.bind(this)\n      );\n      this._hostResizeObserver.observe(this);\n      this._contentResizeObserver.observe(this._contentElement);\n    });\n\n    this.addEventListener('mouseover', this._onComponentMouseOverBound);\n    this.addEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this._hostResizeObserver.unobserve(this);\n    this._hostResizeObserver.disconnect();\n    this._contentResizeObserver.unobserve(this._contentElement);\n    this._contentResizeObserver.disconnect();\n\n    this.removeEventListener('mouseover', this._onComponentMouseOverBound);\n    this.removeEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  private _resizeObserverCallback = () => {\n    this._updateScrollbar();\n  };\n\n  private _updateScrollbar() {\n    const compCr = this.getBoundingClientRect();\n    const contentCr = this._contentElement.getBoundingClientRect();\n\n    if (compCr.height >= contentCr.height) {\n      this._scrollbarVisible = false;\n    } else {\n      this._scrollbarVisible = true;\n      this._thumbHeight = compCr.height * (compCr.height / contentCr.height);\n    }\n\n    this.requestUpdate();\n  }\n\n  private _zIndexFix() {\n    let highestZ = 0;\n\n    this._assignedElements.forEach((n) => {\n      if ('style' in n) {\n        const computedZIndex = window.getComputedStyle(n as HTMLElement).zIndex;\n        const isNumber = /([0-9-])+/g.test(computedZIndex);\n\n        if (isNumber) {\n          highestZ =\n            Number(computedZIndex) > highestZ\n              ? Number(computedZIndex)\n              : highestZ;\n        }\n      }\n    });\n\n    this._scrollbarTrackZ = highestZ + 1;\n    this.requestUpdate();\n  }\n\n  private _onSlotChange = () => {\n    this._zIndexFix();\n  };\n\n  private _onScrollThumbMouseDown(event: MouseEvent) {\n    const cmpCr = this.getBoundingClientRect();\n    const thCr = this._scrollThumbElement.getBoundingClientRect();\n\n    this._mouseStartY = event.screenY;\n    this._scrollThumbStartY = thCr.top - cmpCr.top;\n    this._isDragging = true;\n    this._thumbActive = true;\n\n    document.addEventListener('mousemove', this._onScrollThumbMouseMoveBound);\n    document.addEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseMove(event: MouseEvent) {\n    const predictedPos =\n      this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n    let nextPos = 0;\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    if (predictedPos < 0) {\n      nextPos = 0;\n    } else if (predictedPos > cmpH - thumbH) {\n      nextPos = cmpH - thumbH;\n    } else {\n      nextPos = predictedPos;\n    }\n\n    this._thumbY = nextPos;\n    this._scrollableContainer.scrollTop =\n      (nextPos / (cmpH - thumbH)) * (contentH - cmpH);\n  }\n\n  private _onScrollThumbMouseMoveBound =\n    this._onScrollThumbMouseMove.bind(this);\n\n  private _onScrollThumbMouseUp(event: MouseEvent) {\n    this._isDragging = false;\n    this._thumbActive = false;\n\n    const cr = this.getBoundingClientRect();\n    const {x, y, width, height} = cr;\n    const {pageX, pageY} = event;\n\n    if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {\n      this._thumbFade = true;\n      this._thumbVisible = false;\n    }\n\n    document.removeEventListener(\n      'mousemove',\n      this._onScrollThumbMouseMoveBound\n    );\n    document.removeEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseUpBound = this._onScrollThumbMouseUp.bind(this);\n\n  private _onScrollableContainerScroll() {\n    const scrollTop = this._scrollableContainer.scrollTop;\n    this.scrolled = scrollTop > 0;\n\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    const overflown = contentH - cmpH;\n    const ratio = scrollTop / overflown;\n\n    this._thumbY = ratio * (cmpH - thumbH);\n  }\n\n  private _onComponentMouseOver() {\n    this._thumbVisible = true;\n    this._thumbFade = false;\n  }\n\n  private _onComponentMouseOverBound = this._onComponentMouseOver.bind(this);\n\n  private _onComponentMouseOut() {\n    if (!this._thumbActive) {\n      this._thumbVisible = false;\n      this._thumbFade = true;\n    }\n  }\n\n  private _onComponentMouseOutBound = this._onComponentMouseOut.bind(this);\n\n  override render(): TemplateResult {\n    return html`\n      <div\n        class=\"scrollable-container\"\n        .style=${stylePropertyMap({\n          userSelect: this._isDragging ? 'none' : 'auto',\n        })}\n      >\n        <div\n          class=${classMap({shadow: true, visible: this.scrolled})}\n          .style=${stylePropertyMap({\n            zIndex: String(this._scrollbarTrackZ),\n          })}\n        ></div>\n        ${this._isDragging\n          ? html`<div class=\"prevent-interaction\"></div>`\n          : nothing}\n        <div\n          class=${classMap({\n            'scrollbar-track': true,\n            hidden: !this._scrollbarVisible,\n          })}\n        >\n          <div\n            class=${classMap({\n              'scrollbar-thumb': true,\n              visible: this._thumbVisible,\n              fade: this._thumbFade,\n              active: this._thumbActive,\n            })}\n            .style=${stylePropertyMap({\n              height: `${this._thumbHeight}px`,\n              top: `${this._thumbY}px`,\n            })}\n            @mousedown=${this._onScrollThumbMouseDown}\n          ></div>\n        </div>\n        <div class=\"content\">\n          <slot @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-scrollable': VscodeScrollable;\n  }\n}\n"]}
+{"version":3,"file":"vscode-scrollable.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-scrollable.styles.js';\n\nexport type VscScrollableScrollEvent = CustomEvent<number>;\n\n/**\n * @tag vscode-scrollable\n *\n * @cssprop --min-thumb-height - (@deprecated) This css property is deprecated. Use the `minThumbSize` property instead.\n * @cssprop [--vscode-scrollbar-shadow=#000000]\n * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]\n * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]\n * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]\n */\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n  static override styles = styles;\n\n  /**\n   * By default, the scrollbar appears only when the cursor hovers over the\n   * component. With this option, the scrollbar will always be visible.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'always-visible'})\n  alwaysVisible = false;\n\n  /**\n   * Scrolling speed multiplier when pressing `Alt`. This property is designed to use the value of\n   * `editor.fastScrollSensitivity`, `workbench.list.fastScrollSensitivity` or\n   * `terminal.integrated.fastScrollSensitivity` depending on the context.\n   */\n  @property({type: Number, attribute: 'fast-scroll-sensitivity'})\n  fastScrollSensitivity = 5;\n\n  /**\n   * This setting defines the scrollbar's minimum size when the component contains a large amount of content.\n   */\n  @property({type: Number, attribute: 'min-thumb-size'})\n  minThumbSize = 20;\n\n  /**\n   * A multiplier to be used on the `deltaY` of the mouse wheel scroll events. This property is\n   * designed to use the value of `editor.mouseWheelScrollSensitivity`,\n   * `workbench.list.mouseWheelScrollSensitivity` or\n   * `terminal.integrated.mouseWheelScrollSensitivity` depending on the context.\n   */\n  @property({type: Number, attribute: 'mouse-wheel-scroll-sensitivity'})\n  mouseWheelScrollSensitivity = 1;\n\n  /**\n   * Controls shadow visibility when content overflows.\n   */\n  @property({type: Boolean, reflect: true})\n  shadow = true;\n\n  /**\n   * It's true when `scrollPos` greater than 0\n   */\n  @property({type: Boolean, reflect: true})\n  scrolled = false;\n\n  /**\n   * Scroll position.\n   */\n  @property({type: Number, attribute: 'scroll-pos'})\n  set scrollPos(val: number) {\n    this._scrollPos = val;\n    this._updateScrollbar();\n    this._updateThumbPosition();\n    this.requestUpdate();\n  }\n  get scrollPos(): number {\n    return this._scrollPos;\n  }\n\n  private _scrollPos = 0;\n\n  /**\n   * The maximum amount of the `scrollPos`.\n   */\n  @property({type: Number, attribute: 'scroll-max'})\n  get scrollMax(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollHeight;\n  }\n\n  @state()\n  private _isDragging = false;\n\n  @state()\n  private _thumbHeight = 0;\n\n  @state()\n  private _thumbY = 0;\n\n  @state()\n  private _thumbVisible = false;\n\n  @state()\n  private _thumbFade = false;\n\n  @state()\n  private _thumbActive = false;\n\n  @query('.content')\n  private _contentElement!: HTMLDivElement;\n\n  @query('.scrollbar-thumb', true)\n  private _scrollThumbElement!: HTMLDivElement;\n\n  @query('.scrollable-container')\n  private _scrollableContainer!: HTMLDivElement;\n\n  @queryAssignedElements()\n  private _assignedElements!: NodeList;\n\n  private _hostResizeObserver!: ResizeObserver;\n  private _contentResizeObserver!: ResizeObserver;\n  private _scrollThumbStartY = 0;\n  private _mouseStartY = 0;\n  private _scrollbarVisible = true;\n  private _scrollbarTrackZ = 0;\n\n  constructor() {\n    super();\n    this.addEventListener('mouseover', this._handleComponentMouseOver);\n    this.addEventListener('mouseout', this._handleComponentMouseOut);\n    this.addEventListener('wheel', this._handleComponentWheel);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this._hostResizeObserver = new ResizeObserver(this._resizeObserverCallback);\n    this._contentResizeObserver = new ResizeObserver(\n      this._resizeObserverCallback\n    );\n\n    this.requestUpdate();\n\n    this.updateComplete.then(() => {\n      this._hostResizeObserver.observe(this);\n      this._contentResizeObserver.observe(this._contentElement);\n      this._updateThumbPosition();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this._hostResizeObserver.unobserve(this);\n    this._hostResizeObserver.disconnect();\n    this._contentResizeObserver.unobserve(this._contentElement);\n    this._contentResizeObserver.disconnect();\n  }\n\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\n    this._updateThumbPosition();\n  }\n\n  private _resizeObserverCallback = () => {\n    this._updateScrollbar();\n    this._updateThumbPosition();\n  };\n\n  private _calcThumbHeight() {\n    const componentHeight = this.offsetHeight;\n    const contentHeight = this._contentElement?.offsetHeight ?? 0;\n    const proposedSize = componentHeight * (componentHeight / contentHeight);\n\n    return Math.max(this.minThumbSize, proposedSize);\n  }\n\n  private _updateScrollbar() {\n    const contentHeight = this._contentElement?.offsetHeight ?? 0;\n    const componentHeight = this.offsetHeight;\n\n    if (componentHeight >= contentHeight) {\n      this._scrollbarVisible = false;\n    } else {\n      this._scrollbarVisible = true;\n      this._thumbHeight = this._calcThumbHeight();\n    }\n\n    this.requestUpdate();\n  }\n\n  private _zIndexFix() {\n    let highestZ = 0;\n\n    this._assignedElements.forEach((n) => {\n      if ('style' in n) {\n        const computedZIndex = window.getComputedStyle(n as HTMLElement).zIndex;\n        const isNumber = /([0-9-])+/g.test(computedZIndex);\n\n        if (isNumber) {\n          highestZ =\n            Number(computedZIndex) > highestZ\n              ? Number(computedZIndex)\n              : highestZ;\n        }\n      }\n    });\n\n    this._scrollbarTrackZ = highestZ + 1;\n    this.requestUpdate();\n  }\n\n  private _updateThumbPosition() {\n    if (!this._scrollableContainer) {\n      return;\n    }\n\n    const scrollTop = this._scrollPos;\n    this.scrolled = scrollTop > 0;\n\n    const componentH = this.offsetHeight;\n    const thumbH = this._thumbHeight;\n    const contentH = this._contentElement.offsetHeight;\n\n    const overflown = contentH - componentH;\n    const ratio = scrollTop / overflown;\n    const thumbYMax = componentH - thumbH;\n\n    this._thumbY = Math.min(ratio * (componentH - thumbH), thumbYMax);\n  }\n\n  private _calculateScrollPosFromThumbPos(scrollPos: number) {\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n    const rawScrollPos = (scrollPos / (cmpH - thumbH)) * (contentH - cmpH);\n\n    return this._limitScrollPos(rawScrollPos);\n  }\n\n  private _limitScrollPos(newPos: number) {\n    if (newPos < 0) {\n      return 0;\n    } else if (newPos > this.scrollMax) {\n      return this.scrollMax;\n    } else {\n      return newPos;\n    }\n  }\n\n  private _limitThumbPos(newPos: number) {\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n\n    if (newPos < 0) {\n      return 0;\n    } else if (newPos > cmpH - thumbH) {\n      return cmpH - thumbH;\n    } else {\n      return newPos;\n    }\n  }\n\n  //#region event handlers\n  private _handleSlotChange = () => {\n    this._updateScrollbar();\n    this._updateThumbPosition();\n    this._zIndexFix();\n  };\n\n  private _handleScrollThumbMouseDown(event: MouseEvent) {\n    const cmpCr = this.getBoundingClientRect();\n    const thCr = this._scrollThumbElement.getBoundingClientRect();\n\n    this._mouseStartY = event.screenY;\n    this._scrollThumbStartY = thCr.top - cmpCr.top;\n    this._isDragging = true;\n    this._thumbActive = true;\n\n    document.addEventListener('mousemove', this._handleScrollThumbMouseMove);\n    document.addEventListener('mouseup', this._handleScrollThumbMouseUp);\n  }\n\n  private _handleScrollThumbMouseMove = (event: MouseEvent) => {\n    const rawThumbPos =\n      this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n    this._thumbY = this._limitThumbPos(rawThumbPos);\n    this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n\n    this.dispatchEvent(\n      new CustomEvent('vsc-scrollable-scroll', {\n        detail: this.scrollPos,\n      })\n    );\n  };\n\n  private _handleScrollThumbMouseUp = (event: MouseEvent) => {\n    this._isDragging = false;\n    this._thumbActive = false;\n\n    const cr = this.getBoundingClientRect();\n    const {x, y, width, height} = cr;\n    const {pageX, pageY} = event;\n\n    if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {\n      this._thumbFade = true;\n      this._thumbVisible = false;\n    }\n\n    document.removeEventListener('mousemove', this._handleScrollThumbMouseMove);\n    document.removeEventListener('mouseup', this._handleScrollThumbMouseUp);\n  };\n\n  private _handleComponentMouseOver = () => {\n    this._thumbVisible = true;\n    this._thumbFade = false;\n  };\n\n  private _handleComponentMouseOut = () => {\n    if (!this._thumbActive) {\n      this._thumbVisible = false;\n      this._thumbFade = true;\n    }\n  };\n\n  private _handleComponentWheel = (ev: WheelEvent) => {\n    ev.preventDefault();\n\n    const multiplier = ev.altKey\n      ? this.mouseWheelScrollSensitivity * this.fastScrollSensitivity\n      : this.mouseWheelScrollSensitivity;\n\n    this.scrollPos = this._limitScrollPos(\n      this.scrollPos + ev.deltaY * multiplier\n    );\n    this.dispatchEvent(\n      new CustomEvent('vsc-scrollable-scroll', {\n        detail: this.scrollPos,\n      })\n    );\n  };\n\n  private _handleScrollbarTrackPress(ev: PointerEvent) {\n    if (ev.target !== ev.currentTarget) {\n      return;\n    }\n\n    this._thumbY = ev.offsetY - this._thumbHeight / 2;\n    this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n  }\n\n  private _handleScrollableContainerScroll = (ev: Event) => {\n    if (ev.currentTarget) {\n      this.scrollPos = (ev.currentTarget as HTMLDivElement).scrollTop;\n    }\n  };\n\n  //#endregion\n\n  override render(): TemplateResult {\n    return html`\n      <div\n        class=\"scrollable-container\"\n        .style=${stylePropertyMap({\n          userSelect: this._isDragging ? 'none' : 'auto',\n        })}\n        .scrollTop=${this._scrollPos}\n        @scroll=${this._handleScrollableContainerScroll}\n      >\n        <div\n          class=${classMap({shadow: true, visible: this.scrolled})}\n          .style=${stylePropertyMap({\n            zIndex: String(this._scrollbarTrackZ),\n          })}\n        ></div>\n        ${this._isDragging\n          ? html`<div class=\"prevent-interaction\"></div>`\n          : nothing}\n        <div\n          class=${classMap({\n            'scrollbar-track': true,\n            hidden: !this._scrollbarVisible,\n          })}\n          @mousedown=${this._handleScrollbarTrackPress}\n        >\n          <div\n            class=${classMap({\n              'scrollbar-thumb': true,\n              visible: this.alwaysVisible ? true : this._thumbVisible,\n              fade: this.alwaysVisible ? false : this._thumbFade,\n              active: this._thumbActive,\n            })}\n            .style=${stylePropertyMap({\n              height: `${this._thumbHeight}px`,\n              top: `${this._thumbY}px`,\n            })}\n            @mousedown=${this._handleScrollThumbMouseDown}\n          ></div>\n        </div>\n        <div class=\"content\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-scrollable': VscodeScrollable;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-scrollable-scroll': VscScrollableScrollEvent;\n  }\n}\n"]}

package/dist/vscode-scrollable/vscode-scrollable.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA8Fb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"vscode-scrollable.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA0Gb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/vscode-scrollable/vscode-scrollable.styles.js

@@ -23,7 +23,7 @@ const styles = [
     }
 
     .shadow {
-      box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
+      box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset;
       display: none;
       height: 3px;
       left: 0;
@@ -61,24 +61,36 @@ const styles = [
     }
 
     .scrollbar-thumb.visible {
-      background-color: var(--vscode-scrollbarSlider-background);
+      background-color: var(
+        --vscode-scrollbarSlider-background,
+        rgba(121, 121, 121, 0.4)
+      );
       opacity: 1;
       transition: opacity 100ms;
     }
 
     .scrollbar-thumb.fade {
-      background-color: var(--vscode-scrollbarSlider-background);
+      background-color: var(
+        --vscode-scrollbarSlider-background,
+        rgba(121, 121, 121, 0.4)
+      );
       opacity: 0;
       transition: opacity 800ms;
     }
 
     .scrollbar-thumb.visible:hover {
-      background-color: var(--vscode-scrollbarSlider-hoverBackground);
+      background-color: var(
+        --vscode-scrollbarSlider-hoverBackground,
+        rgba(100, 100, 100, 0.7)
+      );
     }
 
     .scrollbar-thumb.visible.active,
     .scrollbar-thumb.visible.active:hover {
-      background-color: var(--vscode-scrollbarSlider-activeBackground);
+      background-color: var(
+        --vscode-scrollbarSlider-activeBackground,
+        rgba(191, 191, 191, 0.4)
+      );
     }
 
     .prevent-interaction {

package/dist/vscode-scrollable/vscode-scrollable.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.styles.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    .scrollable-container {\n      height: 100%;\n      overflow: auto;\n    }\n\n    .scrollable-container::-webkit-scrollbar {\n      cursor: default;\n      width: 0;\n    }\n\n    .scrollable-container {\n      scrollbar-width: none;\n    }\n\n    .shadow {\n      box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;\n      display: none;\n      height: 3px;\n      left: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n\n    .shadow.visible {\n      display: block;\n    }\n\n    .scrollbar-track {\n      height: 100%;\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 10px;\n      z-index: 100;\n    }\n\n    .scrollbar-track.hidden {\n      display: none;\n    }\n\n    .scrollbar-thumb {\n      background-color: transparent;\n      min-height: var(--min-thumb-height, 20px);\n      opacity: 0;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n\n    .scrollbar-thumb.visible {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 1;\n      transition: opacity 100ms;\n    }\n\n    .scrollbar-thumb.fade {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 0;\n      transition: opacity 800ms;\n    }\n\n    .scrollbar-thumb.visible:hover {\n      background-color: var(--vscode-scrollbarSlider-hoverBackground);\n    }\n\n    .scrollbar-thumb.visible.active,\n    .scrollbar-thumb.visible.active:hover {\n      background-color: var(--vscode-scrollbarSlider-activeBackground);\n    }\n\n    .prevent-interaction {\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n      position: absolute;\n      z-index: 99;\n    }\n\n    .content {\n      overflow: hidden;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-scrollable.styles.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    .scrollable-container {\n      height: 100%;\n      overflow: auto;\n    }\n\n    .scrollable-container::-webkit-scrollbar {\n      cursor: default;\n      width: 0;\n    }\n\n    .scrollable-container {\n      scrollbar-width: none;\n    }\n\n    .shadow {\n      box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset;\n      display: none;\n      height: 3px;\n      left: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n\n    .shadow.visible {\n      display: block;\n    }\n\n    .scrollbar-track {\n      height: 100%;\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 10px;\n      z-index: 100;\n    }\n\n    .scrollbar-track.hidden {\n      display: none;\n    }\n\n    .scrollbar-thumb {\n      background-color: transparent;\n      min-height: var(--min-thumb-height, 20px);\n      opacity: 0;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n\n    .scrollbar-thumb.visible {\n      background-color: var(\n        --vscode-scrollbarSlider-background,\n        rgba(121, 121, 121, 0.4)\n      );\n      opacity: 1;\n      transition: opacity 100ms;\n    }\n\n    .scrollbar-thumb.fade {\n      background-color: var(\n        --vscode-scrollbarSlider-background,\n        rgba(121, 121, 121, 0.4)\n      );\n      opacity: 0;\n      transition: opacity 800ms;\n    }\n\n    .scrollbar-thumb.visible:hover {\n      background-color: var(\n        --vscode-scrollbarSlider-hoverBackground,\n        rgba(100, 100, 100, 0.7)\n      );\n    }\n\n    .scrollbar-thumb.visible.active,\n    .scrollbar-thumb.visible.active:hover {\n      background-color: var(\n        --vscode-scrollbarSlider-activeBackground,\n        rgba(191, 191, 191, 0.4)\n      );\n    }\n\n    .prevent-interaction {\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n      position: absolute;\n      z-index: 99;\n    }\n\n    .content {\n      overflow: hidden;\n    }\n  `,\n];\n\nexport default styles;\n"]}