@uzum-tech/ui 1.8.1 → 1.9.0

package/lib/_internal/scrollbar/src/Scrollbar.js

@@ -4,19 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XScrollbar = void 0;
-const vue_1 = require("vue");
 const evtd_1 = require("evtd");
-const vueuc_1 = require("vueuc");
-const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
 const _mixins_1 = require("../../../_mixins");
 const _utils_1 = require("../../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
-        type: Number,
-        default: 5
-    }, duration: {
+const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { duration: {
         type: Number,
         default: 0
     }, scrollable: {
@@ -27,7 +24,13 @@ const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props)
         default: 'hover'
     }, useUnifiedContainer: Boolean, triggerDisplayManually: Boolean, 
     // If container is set, resize observer won't not attached
-    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean });
+    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: [String, Array], contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean, yPlacement: {
+        type: String,
+        default: 'right'
+    }, xPlacement: {
+        type: String,
+        default: 'bottom'
+    } });
 const Scrollbar = (0, vue_1.defineComponent)({
     name: 'Scrollbar',
     props: scrollbarProps,
@@ -61,6 +64,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         let memoMouseX = 0;
         let memoMouseY = 0;
         const isIos = (0, vooks_1.useIsIos)();
+        const themeRef = (0, _mixins_1.useTheme)('Scrollbar', '-scrollbar', index_cssr_1.default, styles_1.scrollbarLight, props, mergedClsPrefixRef);
         const yBarSizeRef = (0, vue_1.computed)(() => {
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
@@ -71,7 +75,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 return 0;
             }
             else {
-                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight + props.size * 1.5);
+                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight +
+                    (0, seemly_1.depx)(themeRef.value.self.width) * 1.5);
             }
         });
         const yBarSizePxRef = (0, vue_1.computed)(() => {
@@ -87,7 +92,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 return 0;
             }
             else {
-                return (xRailSize * containerWidth) / contentWidth + props.size * 1.5;
+                return ((xRailSize * containerWidth) / contentWidth +
+                    (0, seemly_1.depx)(themeRef.value.self.height) * 1.5);
             }
         });
         const xBarSizePxRef = (0, vue_1.computed)(() => {
@@ -105,8 +111,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const heightDiff = contentHeight - containerHeight;
-                if (!heightDiff)
+                if (!heightDiff) {
                     return 0;
+                }
                 return ((containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value));
             }
         });
@@ -125,8 +132,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const widthDiff = contentWidth - containerWidth;
-                if (!widthDiff)
+                if (!widthDiff) {
                     return 0;
+                }
                 return ((containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value));
             }
         });
@@ -157,45 +165,24 @@ const Scrollbar = (0, vue_1.defineComponent)({
         });
         const mergedContainerRef = (0, vue_1.computed)(() => {
             const { container } = props;
-            if (container)
+            if (container) {
                 return container();
+            }
             return containerRef.value;
         });
         const mergedContentRef = (0, vue_1.computed)(() => {
             const { content } = props;
-            if (content)
+            if (content) {
                 return content();
-            return contentRef.value;
-        });
-        const activateState = (0, _utils_1.useReactivated)(() => {
-            // Only restore for builtin container & content
-            if (!props.container) {
-                // remount
-                scrollTo({
-                    top: containerScrollTopRef.value,
-                    left: containerScrollLeftRef.value
-                });
             }
+            return contentRef.value;
         });
-        // methods
-        const handleContentResize = () => {
-            if (activateState.isDeactivated)
-                return;
-            sync();
-        };
-        const handleContainerResize = (e) => {
-            if (activateState.isDeactivated)
-                return;
-            const { onResize } = props;
-            if (onResize)
-                onResize(e);
-            sync();
-        };
         const scrollTo = (options, y) => {
-            if (!props.scrollable)
+            if (!props.scrollable) {
                 return;
+            }
             if (typeof options === 'number') {
-                scrollToPosition(y !== null && y !== void 0 ? y : 0, options, 0, false, 'auto');
+                scrollToPosition(options, y !== null && y !== void 0 ? y : 0, 0, false, 'auto');
                 return;
             }
             const { left, top, index, elSize, position, behavior, el, debounce = true } = options;
@@ -215,12 +202,41 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 scrollToPosition(0, 0, 0, false, behavior);
             }
         };
+        const activateState = (0, _utils_1.useReactivated)(() => {
+            // Only restore for builtin container & content
+            if (!props.container) {
+                // remount
+                scrollTo({
+                    top: containerScrollTopRef.value,
+                    left: containerScrollLeftRef.value
+                });
+            }
+        });
+        // methods
+        const handleContentResize = () => {
+            if (activateState.isDeactivated) {
+                return;
+            }
+            sync();
+        };
+        const handleContainerResize = (e) => {
+            if (activateState.isDeactivated) {
+                return;
+            }
+            const { onResize } = props;
+            if (onResize) {
+                onResize(e);
+            }
+            sync();
+        };
         const scrollBy = (options, y) => {
-            if (!props.scrollable)
+            if (!props.scrollable) {
                 return;
+            }
             const { value: container } = mergedContainerRef;
-            if (!container)
+            if (!container) {
                 return;
+            }
             if (typeof options === 'object') {
                 container.scrollBy(options);
             }
@@ -230,8 +246,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
         };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
             const { value: container } = mergedContainerRef;
-            if (!container)
+            if (!container) {
                 return;
+            }
             if (debounce) {
                 const { scrollTop, offsetHeight } = container;
                 if (top > scrollTop) {
@@ -296,8 +313,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
         }
         function handleScroll(e) {
             const { onScroll } = props;
-            if (onScroll)
+            if (onScroll) {
                 onScroll(e);
+            }
             syncScrollState();
         }
         function syncScrollState() {
@@ -356,8 +374,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
         }
         function sync() {
-            if (!props.scrollable)
+            if (!props.scrollable) {
                 return;
+            }
             if (props.useUnifiedContainer) {
                 syncUnifiedContainer();
             }
@@ -382,8 +401,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-            if (!xBarPressed)
+            if (!xBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -393,8 +413,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerWidth } = containerWidthRef;
             const { value: contentWidth } = contentWidthRef;
             const { value: xBarSize } = xBarSizeRef;
-            if (containerWidth === null || contentWidth === null)
+            if (containerWidth === null || contentWidth === null) {
                 return;
+            }
             const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
                 ? window.innerWidth - e.clientX - memoMouseX
                 : e.clientX - memoMouseX;
@@ -407,8 +428,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             if (container) {
                 container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 const { internalOnUpdateScrollLeft } = props;
-                if (internalOnUpdateScrollLeft)
+                if (internalOnUpdateScrollLeft) {
                     internalOnUpdateScrollLeft(toScrollLeft);
+                }
             }
         }
         function handleXScrollMouseUp(e) {
@@ -432,8 +454,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-            if (!yBarPressed)
+            if (!yBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -443,8 +466,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
             const { value: yBarSize } = yBarSizeRef;
-            if (containerHeight === null || contentHeight === null)
+            if (containerHeight === null || contentHeight === null) {
                 return;
+            }
             const dY = e.clientY - memoMouseY;
             const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize);
             const toScrollTopUpperBound = contentHeight - containerHeight;
@@ -499,8 +523,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             // if you pass inner to scrollbar, you may use a ref inside component
             // however, when scrollbar is mounted, ref is not ready at component
             // you need to init by yourself
-            if (props.container)
+            if (props.container) {
                 return;
+            }
             sync();
         });
         (0, vue_1.onBeforeUnmount)(() => {
@@ -513,16 +538,40 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mousemove', window, handleYScrollMouseMove, true);
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
         });
-        const themeRef = (0, _mixins_1.useTheme)('Scrollbar', '-scrollbar', index_cssr_1.default, styles_1.scrollbarLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { color, colorHover, height, width, borderRadius, railInsetHorizontalTop, railInsetHorizontalBottom, railInsetVerticalRight, railInsetVerticalLeft, railColor } } = themeRef.value;
+            const { top: railTopHorizontalTop, right: railRightHorizontalTop, bottom: railBottomHorizontalTop, left: railLeftHorizontalTop } = (0, seemly_1.getPadding)(railInsetHorizontalTop);
+            const { top: railTopHorizontalBottom, right: railRightHorizontalBottom, bottom: railBottomHorizontalBottom, left: railLeftHorizontalBottom } = (0, seemly_1.getPadding)(railInsetHorizontalBottom);
+            const { top: railTopVerticalRight, right: railRightVerticalRight, bottom: railBottomVerticalRight, left: railLeftVerticalRight } = (0, seemly_1.getPadding)((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? (0, _utils_1.rtlInset)(railInsetVerticalRight)
+                : railInsetVerticalRight);
+            const { top: railTopVerticalLeft, right: railRightVerticalLeft, bottom: railBottomVerticalLeft, left: railLeftVerticalLeft } = (0, seemly_1.getPadding)((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? (0, _utils_1.rtlInset)(railInsetVerticalLeft)
+                : railInsetVerticalLeft);
             return {
                 '--u-scrollbar-bezier': cubicBezierEaseInOut,
                 '--u-scrollbar-color': color,
                 '--u-scrollbar-color-hover': colorHover,
-                '--u-scrollbar-border-radius': scrollbarBorderRadius,
-                '--u-scrollbar-width': scrollbarWidth,
-                '--u-scrollbar-height': scrollbarHeight
+                '--u-scrollbar-border-radius': borderRadius,
+                '--u-scrollbar-width': width,
+                '--u-scrollbar-height': height,
+                '--u-scrollbar-rail-top-horizontal-top': railTopHorizontalTop,
+                '--u-scrollbar-rail-right-horizontal-top': railRightHorizontalTop,
+                '--u-scrollbar-rail-bottom-horizontal-top': railBottomHorizontalTop,
+                '--u-scrollbar-rail-left-horizontal-top': railLeftHorizontalTop,
+                '--u-scrollbar-rail-top-horizontal-bottom': railTopHorizontalBottom,
+                '--u-scrollbar-rail-right-horizontal-bottom': railRightHorizontalBottom,
+                '--u-scrollbar-rail-bottom-horizontal-bottom': railBottomHorizontalBottom,
+                '--u-scrollbar-rail-left-horizontal-bottom': railLeftHorizontalBottom,
+                '--u-scrollbar-rail-top-vertical-right': railTopVerticalRight,
+                '--u-scrollbar-rail-right-vertical-right': railRightVerticalRight,
+                '--u-scrollbar-rail-bottom-vertical-right': railBottomVerticalRight,
+                '--u-scrollbar-rail-left-vertical-right': railLeftVerticalRight,
+                '--u-scrollbar-rail-top-vertical-left': railTopVerticalLeft,
+                '--u-scrollbar-rail-right-vertical-left': railRightVerticalLeft,
+                '--u-scrollbar-rail-bottom-vertical-left': railBottomVerticalLeft,
+                '--u-scrollbar-rail-left-vertical-left': railLeftVerticalLeft,
+                '--u-scrollbar-rail-color': railColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -549,15 +598,18 @@ const Scrollbar = (0, vue_1.defineComponent)({
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
-        if (!this.scrollable)
+        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail, yPlacement, xPlacement, xScrollable } = this;
+        if (!this.scrollable) {
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
+        }
         const triggerIsNone = this.trigger === 'none';
-        const createYRail = (style) => {
+        const createYRail = (className, style) => {
             return ((0, vue_1.h)("div", { ref: "yRailRef", class: [
                     `${mergedClsPrefix}-scrollbar-rail`,
-                    `${mergedClsPrefix}-scrollbar-rail--vertical`
-                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hiddens": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                    `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                    `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
+                    className
+                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                 default: () => this.needYBar && this.isShowYBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                         height: this.yBarSizePx,
                         top: this.yBarTopPx
@@ -598,10 +650,11 @@ const Scrollbar = (0, vue_1.defineComponent)({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                internalHoistYRail ? null : createYRail(undefined),
-                this.xScrollable && ((0, vue_1.h)("div", { ref: "xRailRef", class: [
+                internalHoistYRail ? null : createYRail(undefined, undefined),
+                xScrollable && ((0, vue_1.h)("div", { ref: "xRailRef", class: [
                         `${mergedClsPrefix}-scrollbar-rail`,
-                        `${mergedClsPrefix}-scrollbar-rail--horizontal`
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal`,
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
                     ], style: this.horizontalRailStyle, "data-scrollbar-rail": true, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
@@ -617,7 +670,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         if (internalHoistYRail) {
             return ((0, vue_1.h)(vue_1.Fragment, null,
                 scrollbarNode,
-                createYRail(this.cssVars)));
+                createYRail(this.themeClass, this.cssVars)));
         }
         else {
             return scrollbarNode;

package/lib/_internal/scrollbar/src/styles/index.cssr.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-const cssr_1 = require("../../../../_utils/cssr");
 const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr");
+const cssr_1 = require("../../../../_utils/cssr");
 // vars:
 // --u-scrollbar-bezier
 // --u-scrollbar-color
@@ -12,6 +12,9 @@ const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr");
 // --u-scrollbar-width
 // --u-scrollbar-height
 // --u-scrollbar-border-radius
+// --u-scrollbar-rail-inset-horizontal
+// --u-scrollbar-rail-inset-vertical
+// --u-scrollbar-rail-color
 exports.default = (0, cssr_1.cB)('scrollbar', `
  overflow: hidden;
  position: relative;
@@ -29,40 +32,54 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  width: 0;
  height: 0;
  display: none;
- `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-content', `
+ `), (0, cssr_1.c)('>', [
+// We can't set overflow hidden since it affects positioning.
+(0, cssr_1.cB)('scrollbar-content', `
  box-sizing: border-box;
  min-width: 100%;
  `)])])]), (0, cssr_1.c)('>, +', [(0, cssr_1.cB)('scrollbar-rail', `
  position: absolute;
  pointer-events: none;
  user-select: none;
+ background: var(--u-scrollbar-rail-color);
  -webkit-user-select: none;
  `, [(0, cssr_1.cM)('horizontal', `
- left: 2px;
- right: 2px;
- bottom: 4px;
  height: var(--u-scrollbar-height);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
  height: var(--u-scrollbar-height);
  border-radius: var(--u-scrollbar-border-radius);
  right: 0;
- `)])]), (0, cssr_1.cM)('vertical', `
- right: 4px;
- top: 2px;
- bottom: 2px;
+ `)])]), (0, cssr_1.cM)('horizontal--top', `
+ top: var(--u-scrollbar-rail-top-horizontal-top); 
+ right: var(--u-scrollbar-rail-right-horizontal-top); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-top); 
+ left: var(--u-scrollbar-rail-left-horizontal-top); 
+ `), (0, cssr_1.cM)('horizontal--bottom', `
+ top: var(--u-scrollbar-rail-top-horizontal-bottom); 
+ right: var(--u-scrollbar-rail-right-horizontal-bottom); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-bottom); 
+ left: var(--u-scrollbar-rail-left-horizontal-bottom); 
+ `), (0, cssr_1.cM)('vertical', `
  width: var(--u-scrollbar-width);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
  width: var(--u-scrollbar-width);
  border-radius: var(--u-scrollbar-border-radius);
  bottom: 0;
- `)])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', {
-  pointerEvents: 'none'
-})])]), (0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ `)])]), (0, cssr_1.cM)('vertical--left', `
+ top: var(--u-scrollbar-rail-top-vertical-left); 
+ right: var(--u-scrollbar-rail-right-vertical-left); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-left); 
+ left: var(--u-scrollbar-rail-left-vertical-left); 
+ `), (0, cssr_1.cM)('vertical--right', `
+ top: var(--u-scrollbar-rail-top-vertical-right); 
+ right: var(--u-scrollbar-rail-right-vertical-right); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-right); 
+ left: var(--u-scrollbar-rail-left-vertical-right); 
+ `), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', 'pointer-events: none;')])]), (0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ z-index: 1;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  background-color: var(--u-scrollbar-color);
  transition: background-color .2s var(--u-scrollbar-bezier);
- `, [(0, fade_in_cssr_1.fadeInTransition)(), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--u-scrollbar-color-hover)'
-})])])])])]);
+ `, [(0, fade_in_cssr_1.fadeInTransition)(), (0, cssr_1.c)('&:hover', 'background-color: var(--u-scrollbar-color-hover);')])])])])]);

package/lib/_internal/scrollbar/styles/common.d.ts

@@ -0,0 +1,7 @@
+export declare const commonVars: {
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
+};

package/lib/_internal/scrollbar/styles/common.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonVars = void 0;
+exports.commonVars = {
+    railInsetHorizontalBottom: 'auto 2px 4px 2px',
+    railInsetHorizontalTop: '4px 2px auto 2px',
+    railInsetVerticalRight: '2px 4px 2px auto',
+    railInsetVerticalLeft: '2px auto 2px 4px',
+    railColor: 'transparent'
+};

package/lib/_internal/scrollbar/styles/light.d.ts

@@ -1,8 +1,16 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 import type { Theme } from '../../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    width: string;
+    borderRadius: string;
     color: string;
     colorHover: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
 };
 export type ScrollbarThemeVars = ReturnType<typeof self>;
 declare const scrollbarLight: Theme<'Scrollbar', ScrollbarThemeVars>;

package/lib/_internal/scrollbar/styles/light.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../../_styles/common");
+const common_2 = require("./common");
 const self = (vars) => {
-    const { scrollbarColor, scrollbarColorHover } = vars;
-    return {
-        color: scrollbarColor,
-        colorHover: scrollbarColorHover
-    };
+    const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars;
+    return Object.assign(Object.assign({}, common_2.commonVars), { height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover });
 };
 exports.self = self;
 const scrollbarLight = {

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -101,8 +101,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -158,8 +166,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -215,8 +231,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -280,8 +304,16 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -319,7 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualListRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
-        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
     } | null>;
     scrollbarRef: import("vue").Ref<{
         $el: HTMLElement;
@@ -475,8 +507,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -532,8 +572,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -589,8 +637,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;

package/lib/_internal/select-menu/styles/light.d.ts

@@ -67,8 +67,16 @@ declare const internalSelectMenuLight: import("../../../_mixins").Theme<"Interna
     loadingColor: string;
 }, {
     Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>;
     Empty: import("../../../_mixins").Theme<"Empty", {
         iconSizeSmall: string;