@synerise/ds-scrollbar 2.0.7 → 2.0.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@2.0.7...@synerise/ds-scrollbar@2.0.8) (2026-10-22)
+
+
+### Bug Fixes
+
+* **scrollbar:** widen thumb hit area to the full rail width ([df915fc](https://github.com/Synerise/synerise-design/commit/df915fc79b099ac0ad731996f910ee5a02dab89d))
+
+
+
+
+
 ## [2.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@2.0.6...@synerise/ds-scrollbar@2.0.7) (2026-10-20)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/CLAUDE.md

@@ -109,7 +109,7 @@ Two layers of styling:
 2. **Less overrides** (`style/scrollbar.mixin.less`) — patches PerfectScrollbar's `.ps__rail-*` and `.ps__thumb-*` classes. The `.large-size` class (applied via `classnames` in `VirtualScrollbar`) activates the wide blue thumb variant.
 
 **Token usage:**
-- Default thumb: `grey-300` / `grey-500` (hover)
+- Default thumb: `grey-300` / `grey-500` (hover). In both variants the thumb element spans the full 11 px rail so it is easy to grab, and only a 3 px bar is painted by its `::before`
 - Large thumb: `blue-050` / `blue-100` (hover), `grey-300` border / `grey-400` border (hover)
 - Loading spinner in `Scrollbar.styles`: `grey-600`; in `DnDScrollbar.styles`: `blue-600`
 

package/dist/DnDScrollbar/DnDScrollbar.js

@@ -162,7 +162,7 @@ const DnDScrollbar = ({
     }, onScroll: handleScroll, onWheel: handleWheel, children: /* @__PURE__ */ jsx(ScrollbarWrapper, { ref: wrapperRef, loading, absolute, largeSize, children }) }),
     /* @__PURE__ */ jsxs(ScrollbarTrackWrapper, { largeSize, children: [
       /* @__PURE__ */ jsx(TrackVertical, { ref: scrollTrackRef, onClick: handleTrackClick }),
-      /* @__PURE__ */ jsx(ThumbVertical, { ref: scrollThumbRef, onMouseDown: handleThumbMousedown, style: {
+      /* @__PURE__ */ jsx(ThumbVertical, { ref: scrollThumbRef, largeSize, onMouseDown: handleThumbMousedown, style: {
         height: `${thumbHeight}px`
       } })
     ] })

package/dist/DnDScrollbar/DnDScrollbar.styles.js

@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 const ScrollbarContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ScrollbarContent",
   componentId: "sc-12t6y2d-0"
@@ -20,11 +20,11 @@ const ScrollbarWrapper = /* @__PURE__ */ styled.div.withConfig({
 const ThumbVertical = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ThumbVertical",
   componentId: "sc-12t6y2d-2"
-})(["width:", ";background-color:", ";border-radius:3px;right:", ";position:absolute;border:", ";&:hover,&:active{background-color:", ";border:", ";}"], (props) => props.largeSize ? "16px" : "3px", (props) => props.largeSize ? props.theme.palette["blue-050"] : props.theme.palette["grey-300"], (props) => props.largeSize ? "0" : "4px", (props) => props.largeSize ? `1px solid ${props.theme.palette["grey-300"]}` : "none", (props) => props.largeSize ? props.theme.palette["blue-100"] : props.theme.palette["grey-500"], (props) => props.largeSize ? `1px solid ${props.theme.palette["grey-400"]}` : "none");
+})(["position:absolute;", ""], (props) => props.largeSize ? css(["right:4px;width:16px;background-color:", ";border-radius:3px;border:1px solid ", ";&:hover,&:active{background-color:", ";border:1px solid ", ";}"], props.theme.palette["blue-050"], props.theme.palette["grey-300"], props.theme.palette["blue-100"], props.theme.palette["grey-400"]) : css(["right:0;width:11px;background-color:transparent;&::before{content:'';position:absolute;top:0;bottom:0;right:4px;width:3px;border-radius:3px;background-color:", ";}&:hover::before,&:active::before{background-color:", ";}"], props.theme.palette["grey-300"], props.theme.palette["grey-500"]));
 const ScrollbarTrackWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ScrollbarTrackWrapper",
   componentId: "sc-12t6y2d-3"
-})(["display:block;height:100%;position:absolute;width:", ";top:0;right:", ";bottom:0;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;", "{width:", ";background-color:", ";border:", ";}&:hover{", "{background-color:", ";border:", ";}}"], (props) => props.largeSize ? "24px" : "11px", (props) => props.largeSize ? "3px" : "0", ThumbVertical, (props) => props.largeSize ? "16px" : "3px", (props) => props.largeSize ? props.theme.palette["blue-050"] : props.theme.palette["grey-300"], (props) => props.largeSize ? `1px solid ${props.theme.palette["grey-300"]}` : "none", ThumbVertical, (props) => props.largeSize ? props.theme.palette["blue-100"] : props.theme.palette["grey-500"], (props) => props.largeSize ? `1px solid ${props.theme.palette["grey-400"]}` : "none");
+})(["display:block;height:100%;position:absolute;width:", ";top:0;right:", ";bottom:0;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;", " ", ""], (props) => props.largeSize ? "24px" : "11px", (props) => props.largeSize ? "3px" : "0", (props) => props.largeSize && css(["&:hover ", "{background-color:", ";border:1px solid ", ";}"], ThumbVertical, props.theme.palette["blue-100"], props.theme.palette["grey-400"]), (props) => !props.largeSize && css(["&:hover ", "::before{background-color:", ";}"], ThumbVertical, props.theme.palette["grey-500"]));
 const TrackVertical = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DnDScrollbarstyles__TrackVertical",
   componentId: "sc-12t6y2d-4"

package/dist/style/index.css

@@ -1 +1 @@
-.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}.scrollbar-container{position:relative;height:100%}.ps__rail-x.ps__rail-x{opacity:0;height:11px;top:unset!important;bottom:0;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden;margin-right:12px;transition:opacity .3s ease-in-out}.ps__rail-y.ps__rail-y{opacity:0;width:11px;left:unset!important;right:0;position:absolute;height:calc(100% - 8px)!important;transform:translateY(4px);overflow:hidden;margin-bottom:12px;transition:opacity .3s ease-in-out}.ps:hover .ps__rail-x,.ps:hover .ps__rail-y{opacity:1}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:unset}.ps__thumb-x{background-color:#dbe0e3;border-radius:3px;height:3px;bottom:4px;margin:0 4px}.ps__thumb-y{background-color:#dbe0e3;border-radius:3px;width:3px;right:4px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#949ea6;height:3px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#949ea6;width:3px}.large-size .ps__rail-x.ps__rail-x,.large-size .ps__rail-y.ps__rail-y{width:26px;height:26px;position:absolute;overflow:hidden}.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y,.large-size .ps__thumb-x,.large-size .ps__thumb-y,.large-size .ps__thumb-y--clicking,.large-size .ps__thumb-y:hover{background-color:#f4faff;border-radius:3px;width:16px;height:16px;border:1px solid #dbe0e3}.large-size .ps__rail-x.ps--clicking .ps__thumb-x,.large-size .ps__rail-x:focus>.ps__thumb-x,.large-size .ps__rail-x:hover>.ps__thumb-x,.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y{background-color:#d9eeff;border:1px solid #b5bdc3;height:16px}
+.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}.scrollbar-container{position:relative;height:100%}.ps__rail-x.ps__rail-x{opacity:0;height:11px;top:unset!important;bottom:0;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden;margin-right:12px;transition:opacity .3s ease-in-out}.ps__rail-y.ps__rail-y{opacity:0;width:11px;left:unset!important;right:0;position:absolute;height:calc(100% - 8px)!important;transform:translateY(4px);overflow:hidden;margin-bottom:12px;transition:opacity .3s ease-in-out}.ps:hover .ps__rail-x,.ps:hover .ps__rail-y{opacity:1}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:unset}.ps__thumb-x,.ps__thumb-y{background-color:transparent;border-radius:0}.ps__thumb-x::before,.ps__thumb-y::before{content:'';position:absolute;background-color:#dbe0e3;border-radius:3px;transition:background-color .2s linear}.ps__thumb-x{height:11px;bottom:0;margin:0 4px}.ps__thumb-x::before{left:0;right:0;bottom:4px;height:3px}.ps__thumb-y{width:11px;right:0}.ps__thumb-y::before{top:0;bottom:0;right:4px;width:3px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x,.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:transparent}.ps__rail-x.ps--clicking .ps__thumb-x::before,.ps__rail-x:focus>.ps__thumb-x::before,.ps__rail-x:hover>.ps__thumb-x::before,.ps__rail-y.ps--clicking .ps__thumb-y::before,.ps__rail-y:focus>.ps__thumb-y::before,.ps__rail-y:hover>.ps__thumb-y::before{background-color:#949ea6}.large-size .ps__rail-x.ps__rail-x,.large-size .ps__rail-y.ps__rail-y{width:26px;height:26px;position:absolute;overflow:hidden}.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y,.large-size .ps__thumb-x,.large-size .ps__thumb-y,.large-size .ps__thumb-y--clicking,.large-size .ps__thumb-y:hover{background-color:#f4faff;border-radius:3px;width:16px;height:16px;border:1px solid #dbe0e3}.large-size .ps__thumb-x{bottom:4px}.large-size .ps__thumb-y{right:4px}.large-size .ps__thumb-x::before,.large-size .ps__thumb-y::before{content:none}.large-size .ps__rail-x.ps--clicking .ps__thumb-x,.large-size .ps__rail-x:focus>.ps__thumb-x,.large-size .ps__rail-x:hover>.ps__thumb-x,.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y{background-color:#d9eeff;border:1px solid #b5bdc3;height:16px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -53,5 +53,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "ac1a96b3cd66d2836b0639b3d9920fc0ebd7f8f3"
+  "gitHead": "953d50843fbcbec956b6252a6185def119652282"
 }