niuma-ui 2.0.3 → 2.0.9

package/dist/components/scrollbar/src/RsScrollbar.css

@@ -1,5 +1,5 @@
 
-.rs-scrollbar {
+.rs-scrollbar[data-v-507ffbba] {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -7,62 +7,109 @@
   border-radius: var(--rs-radius-sm);
   background: var(--rs-surface);
 }
-.rs-scrollbar__viewport {
+.rs-scrollbar__viewport[data-v-507ffbba] {
   width: 100%;
   height: 100%;
   border-radius: inherit;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
 }
-
-/* Reka 注入的 Primitive div。
-   必须用 height:100% 而非 min-height:100%：
-   只有父元素拥有"明确高度"时，子元素的 min-height:100% 才能解析（CSS 规范）。
-   height:100% 让 Primitive 与 viewport 等高（= 明确高度），
-   超出内容通过 overflow:visible 溢出 → viewport(overflow:scroll) 正常滚动。 */
-.rs-scrollbar__viewport > div {
-  height: 100%;
+.rs-scrollbar__viewport[data-v-507ffbba]::-webkit-scrollbar {
+  display: none;
 }
-
-/* rs-scrollbar__content 同理：height:100% = Primitive 的明确高度。
-   slot 内容若超出则溢出，滚动仍然工作；短内容时填满整个滚动区（空白可捕获右键）。 */
-.rs-scrollbar__content {
+.rs-scrollbar__content[data-v-507ffbba] {
   min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.rs-scrollbar__bar {
+.rs-scrollbar__bar[data-v-507ffbba] {
+  --rs-scrollbar-thumb-size: 18px;
+  --rs-scrollbar-thumb-offset: 0px;
+  position: absolute;
   user-select: none;
   touch-action: none;
   display: flex;
   padding: var(--rs-scrollbar-padding);
   background: transparent;
-  transition: background var(--rs-transition-fast);
+  transition:
+    background var(--rs-transition-fast),
+    opacity var(--rs-transition-fast);
 }
-.rs-scrollbar__bar[data-orientation='vertical'] {
+.rs-scrollbar__bar[data-state='hidden'][data-v-507ffbba] {
+  opacity: 0;
+  pointer-events: none;
+}
+.rs-scrollbar__bar--vertical[data-v-507ffbba] {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: var(--rs-scrollbar-corner, 0px);
   width: var(--rs-scrollbar-size);
 }
-.rs-scrollbar__bar[data-orientation='horizontal'] {
+.rs-scrollbar__bar--horizontal[data-v-507ffbba] {
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: var(--rs-scrollbar-corner, 0px);
   flex-direction: column;
   height: var(--rs-scrollbar-size);
 }
-.rs-scrollbar__bar:hover {
+.rs-scrollbar__bar[data-v-507ffbba]:hover {
   background: color-mix(in srgb, var(--rs-border-subtle) 80%, transparent);
 }
-.rs-scrollbar__thumb {
-  flex: 1;
+.rs-scrollbar__thumb[data-v-507ffbba] {
+  flex: 0 0 auto;
   border-radius: var(--rs-radius-full);
   background: color-mix(in srgb, var(--rs-muted) 60%, transparent);
   position: relative;
   transition: background var(--rs-transition-fast);
 }
-.rs-scrollbar__thumb::before {
+.rs-scrollbar__bar--vertical .rs-scrollbar__thumb[data-v-507ffbba] {
+  width: 100%;
+  height: var(--rs-scrollbar-thumb-size);
+  transform: translate3d(0, var(--rs-scrollbar-thumb-offset), 0);
+}
+.rs-scrollbar__bar--horizontal .rs-scrollbar__thumb[data-v-507ffbba] {
+  height: 100%;
+  width: var(--rs-scrollbar-thumb-size);
+  transform: translate3d(var(--rs-scrollbar-thumb-offset), 0, 0);
+}
+.rs-scrollbar__thumb[data-v-507ffbba]::before {
   content: '';
   position: absolute;
   inset: -0.375rem;
 }
-.rs-scrollbar__thumb:hover {
+.rs-scrollbar__thumb[data-v-507ffbba]:hover {
   background: color-mix(in srgb, var(--rs-primary) 40%, var(--rs-muted));
 }
-.rs-scrollbar__corner {
+.rs-scrollbar__corner[data-v-507ffbba] {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  width: var(--rs-scrollbar-size);
+  height: var(--rs-scrollbar-size);
   background: var(--rs-surface);
 }
+.rs-scrollbar__corner[data-state='hidden'][data-v-507ffbba] {
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-scrollbar__bar[data-v-507ffbba],
+  .rs-scrollbar__thumb[data-v-507ffbba] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-scrollbar[data-v-507ffbba] {
+    border: 1px solid CanvasText;
+    background: Canvas;
+    forced-color-adjust: none;
+}
+.rs-scrollbar__thumb[data-v-507ffbba] {
+    background: GrayText;
+}
+.rs-scrollbar__thumb[data-v-507ffbba]:hover {
+    background: Highlight;
+}
+}

package/dist/components/scrollbar/src/RsScrollbar.d.ts

@@ -1,4 +1,5 @@
 import { type RsScrollbarOrientation, type RsScrollbarType } from './scrollbar-utils';
+export type { RsScrollbarOrientation, RsScrollbarType };
 type __VLS_Props = {
     type?: RsScrollbarType;
     scrollHideDelay?: number;
@@ -7,14 +8,17 @@ type __VLS_Props = {
     maxHeight?: string | number;
     minHeight?: string | number;
 };
-declare var __VLS_15: {};
+declare function scrollTop(): void;
+declare function scrollTopLeft(): void;
+declare function getViewport(): HTMLElement | undefined;
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    scrollTop: () => void | undefined;
-    scrollTopLeft: () => void | undefined;
-    getViewport: () => HTMLElement | undefined;
+    scrollTop: typeof scrollTop;
+    scrollTopLeft: typeof scrollTopLeft;
+    getViewport: typeof getViewport;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     type: RsScrollbarType;
     height: string | number;

package/dist/components/scrollbar/src/RsScrollbar.impl.js

@@ -1,9 +1,16 @@
-import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../../_shared/src/reka.js";
-import { resolveScrollbarSize } from "./scrollbar-utils.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeStyle, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { getScrollPositionFromPointer, getThumbOffsetFromScroll, getThumbSize, isRsScrollbarBarVisible, isRsScrollbarOverflow, isScrollingWithinScrollbarBounds, resolveScrollbarSize, showsRsScrollbarAxis, toCssInt } from "./scrollbar-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, useTemplateRef, watch } from "vue";
 //#region src/components/scrollbar/src/RsScrollbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-scrollbar__content" };
+var _hoisted_1 = ["data-type", "data-orientation"];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = ["data-state"];
+var _hoisted_4 = ["data-state"];
+var _hoisted_5 = ["data-state"];
 var RsScrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsScrollbar",
 	__name: "RsScrollbar",
 	props: {
 		type: { default: "hover" },
@@ -15,7 +22,38 @@ var RsScrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
+		const { t } = useRsI18n();
+		const config = useRsConfigOptional();
+		const viewportLabel = computed(() => t("scrollbar.viewport"));
 		const rootRef = useTemplateRef("rootRef");
+		const viewportRef = useTemplateRef("viewportRef");
+		const contentRef = useTemplateRef("contentRef");
+		const barYRef = useTemplateRef("barYRef");
+		const barXRef = useTemplateRef("barXRef");
+		const hovering = ref(false);
+		const interacting = ref(false);
+		const scrollingY = ref(false);
+		const scrollingX = ref(false);
+		const overflowY = ref(false);
+		const overflowX = ref(false);
+		const showVertical = computed(() => showsRsScrollbarAxis(props.orientation, "y"));
+		const showHorizontal = computed(() => showsRsScrollbarAxis(props.orientation, "x"));
+		const barYVisible = computed(() => isRsScrollbarBarVisible({
+			type: props.type,
+			overflowing: overflowY.value,
+			hovering: hovering.value,
+			scrolling: scrollingY.value,
+			interacting: interacting.value
+		}));
+		const barXVisible = computed(() => isRsScrollbarBarVisible({
+			type: props.type,
+			overflowing: overflowX.value,
+			hovering: hovering.value,
+			scrolling: scrollingX.value,
+			interacting: interacting.value
+		}));
+		const showCorner = computed(() => showVertical.value && showHorizontal.value && barYVisible.value && barXVisible.value);
+		const textDir = computed(() => resolveDirMode(config?.dir.value ?? "auto", config?.locale.value ?? "zh-CN"));
 		const rootStyle = computed(() => {
 			const style = {};
 			const height = resolveScrollbarSize(props.height);
@@ -24,56 +62,343 @@ var RsScrollbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (height) style.height = height;
 			if (maxHeight) style.maxHeight = maxHeight;
 			if (minHeight) style.minHeight = minHeight;
-			return Object.keys(style).length > 0 ? style : void 0;
+			style["--rs-scrollbar-corner"] = showCorner.value ? "var(--rs-scrollbar-size)" : "0px";
+			return style;
+		});
+		const viewportStyle = computed(() => ({
+			overflowX: showHorizontal.value ? "scroll" : "hidden",
+			overflowY: showVertical.value ? "scroll" : "hidden"
+		}));
+		const contentStyle = computed(() => ({ minWidth: showHorizontal.value ? "fit-content" : void 0 }));
+		let hideYTimer;
+		let hideXTimer;
+		let hoverTimer;
+		let scrollRaf = 0;
+		let pendingScrollFlags = false;
+		let observer;
+		let dragging = null;
+		let pointerOffset = 0;
+		let prevUserSelect = "";
+		let userSelectLocked = false;
+		const canUseRaf = typeof requestAnimationFrame === "function";
+		function clearTimer(timer) {
+			if (timer !== void 0) clearTimeout(timer);
+		}
+		function scheduleFrame(fn) {
+			if (canUseRaf) return requestAnimationFrame(fn);
+			return setTimeout(() => fn(0), 16);
+		}
+		function cancelFrame(id) {
+			if (canUseRaf && typeof cancelAnimationFrame === "function") {
+				cancelAnimationFrame(id);
+				return;
+			}
+			clearTimeout(id);
+		}
+		function sizesFor(axis) {
+			const viewport = viewportRef.value;
+			const bar = axis === "y" ? barYRef.value : barXRef.value;
+			if (!viewport || !bar) return null;
+			const style = typeof getComputedStyle === "function" ? getComputedStyle(bar) : void 0;
+			if (axis === "y") return {
+				content: viewport.scrollHeight,
+				viewport: viewport.offsetHeight,
+				scrollbar: {
+					size: bar.clientHeight,
+					paddingStart: toCssInt(style?.paddingTop),
+					paddingEnd: toCssInt(style?.paddingBottom)
+				}
+			};
+			return {
+				content: viewport.scrollWidth,
+				viewport: viewport.offsetWidth,
+				scrollbar: {
+					size: bar.clientWidth,
+					paddingStart: toCssInt(style?.paddingInlineStart) || toCssInt(style?.paddingLeft),
+					paddingEnd: toCssInt(style?.paddingInlineEnd) || toCssInt(style?.paddingRight)
+				}
+			};
+		}
+		function writeThumb(axis) {
+			const viewport = viewportRef.value;
+			const bar = axis === "y" ? barYRef.value : barXRef.value;
+			const sizes = sizesFor(axis);
+			if (!viewport || !bar || !sizes) return;
+			const dir = axis === "x" ? textDir.value : "ltr";
+			const scrollPos = axis === "y" ? viewport.scrollTop : viewport.scrollLeft;
+			bar.style.setProperty("--rs-scrollbar-thumb-size", `${getThumbSize(sizes)}px`);
+			bar.style.setProperty("--rs-scrollbar-thumb-offset", `${getThumbOffsetFromScroll(scrollPos, sizes, dir)}px`);
+		}
+		function syncOverflow() {
+			const viewport = viewportRef.value;
+			if (!viewport) return;
+			overflowY.value = isRsScrollbarOverflow(viewport.offsetHeight, viewport.scrollHeight);
+			overflowX.value = isRsScrollbarOverflow(viewport.offsetWidth, viewport.scrollWidth);
+			writeThumb("y");
+			writeThumb("x");
+		}
+		function scheduleHide(axis) {
+			const delay = Math.max(0, props.scrollHideDelay);
+			if (axis === "y") {
+				clearTimer(hideYTimer);
+				hideYTimer = setTimeout(() => {
+					scrollingY.value = false;
+				}, delay);
+				return;
+			}
+			clearTimer(hideXTimer);
+			hideXTimer = setTimeout(() => {
+				scrollingX.value = false;
+			}, delay);
+		}
+		function flushSyncFrame() {
+			scrollRaf = 0;
+			const fromScroll = pendingScrollFlags;
+			pendingScrollFlags = false;
+			if (fromScroll) {
+				if (showVertical.value) {
+					scrollingY.value = true;
+					clearTimer(hideYTimer);
+					scheduleHide("y");
+				}
+				if (showHorizontal.value) {
+					scrollingX.value = true;
+					clearTimer(hideXTimer);
+					scheduleHide("x");
+				}
+			}
+			syncOverflow();
+		}
+		function scheduleSync(fromScroll = false) {
+			if (fromScroll) pendingScrollFlags = true;
+			if (scrollRaf) return;
+			scrollRaf = scheduleFrame(flushSyncFrame);
+		}
+		function onViewportScroll() {
+			if (!viewportRef.value) return;
+			scheduleSync(true);
+		}
+		function onRootEnter() {
+			clearTimer(hoverTimer);
+			hovering.value = true;
+		}
+		function onRootLeave() {
+			clearTimer(hoverTimer);
+			hoverTimer = setTimeout(() => {
+				hovering.value = false;
+			}, Math.max(0, props.scrollHideDelay));
+		}
+		function lockUserSelect() {
+			if (typeof document === "undefined" || userSelectLocked) return;
+			prevUserSelect = document.body.style.webkitUserSelect;
+			document.body.style.webkitUserSelect = "none";
+			userSelectLocked = true;
+		}
+		function unlockUserSelect() {
+			if (typeof document === "undefined" || !userSelectLocked) return;
+			document.body.style.webkitUserSelect = prevUserSelect;
+			prevUserSelect = "";
+			userSelectLocked = false;
+		}
+		function captureBarPointer(bar, pointerId) {
+			if (typeof bar.setPointerCapture !== "function") return;
+			try {
+				bar.setPointerCapture(pointerId);
+			} catch {}
+		}
+		function onBarPointerDown(event, axis) {
+			if (event.button !== 0) return;
+			const bar = event.currentTarget;
+			const viewport = viewportRef.value;
+			if (!viewport) return;
+			captureBarPointer(bar, event.pointerId);
+			interacting.value = true;
+			dragging = axis;
+			const rect = bar.getBoundingClientRect();
+			const pointerPos = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+			const thumb = event.target.closest(".rs-scrollbar__thumb");
+			if (thumb) {
+				const thumbRect = thumb.getBoundingClientRect();
+				pointerOffset = axis === "y" ? event.clientY - thumbRect.top : event.clientX - thumbRect.left;
+			} else pointerOffset = 0;
+			lockUserSelect();
+			viewport.style.scrollBehavior = "auto";
+			applyPointerScroll(axis, pointerPos);
+		}
+		function applyPointerScroll(axis, pointerPos) {
+			const viewport = viewportRef.value;
+			const sizes = sizesFor(axis);
+			if (!viewport || !sizes) return;
+			const dir = axis === "x" ? textDir.value : "ltr";
+			const next = getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir);
+			if (axis === "y") viewport.scrollTop = next;
+			else viewport.scrollLeft = next;
+		}
+		function onBarPointerMove(event, axis) {
+			if (dragging !== axis) return;
+			const rect = event.currentTarget.getBoundingClientRect();
+			applyPointerScroll(axis, axis === "y" ? event.clientY - rect.top : event.clientX - rect.left);
+		}
+		function endDrag() {
+			unlockUserSelect();
+			const viewport = viewportRef.value;
+			if (viewport) viewport.style.scrollBehavior = "";
+			dragging = null;
+			pointerOffset = 0;
+			interacting.value = false;
+		}
+		function onBarWheel(event, axis) {
+			const viewport = viewportRef.value;
+			if (!viewport) return;
+			const max = axis === "y" ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth;
+			if (axis === "y") viewport.scrollTop += event.deltaY;
+			else viewport.scrollLeft += event.deltaY;
+			if (isScrollingWithinScrollbarBounds(axis === "y" ? viewport.scrollTop : viewport.scrollLeft, max)) event.preventDefault();
+		}
+		function scrollTop() {
+			const el = viewportRef.value;
+			if (!el) return;
+			if (typeof el.scrollTo === "function") el.scrollTo({ top: 0 });
+			else el.scrollTop = 0;
+		}
+		function scrollTopLeft() {
+			const el = viewportRef.value;
+			if (!el) return;
+			if (typeof el.scrollTo === "function") el.scrollTo({
+				top: 0,
+				left: 0
+			});
+			else {
+				el.scrollTop = 0;
+				el.scrollLeft = 0;
+			}
+		}
+		function getViewport() {
+			return viewportRef.value ?? void 0;
+		}
+		function bindObservers() {
+			if (typeof ResizeObserver !== "function") {
+				syncOverflow();
+				return;
+			}
+			observer = new ResizeObserver(() => syncOverflow());
+			if (viewportRef.value) observer.observe(viewportRef.value);
+			if (contentRef.value) observer.observe(contentRef.value);
+		}
+		const onBarYWheel = (event) => onBarWheel(event, "y");
+		const onBarXWheel = (event) => onBarWheel(event, "x");
+		let boundY;
+		let boundX;
+		function bindBarWheels() {
+			unbindBarWheels();
+			boundY = barYRef.value ?? void 0;
+			boundX = barXRef.value ?? void 0;
+			boundY?.addEventListener("wheel", onBarYWheel, { passive: false });
+			boundX?.addEventListener("wheel", onBarXWheel, { passive: false });
+		}
+		function unbindBarWheels() {
+			boundY?.removeEventListener("wheel", onBarYWheel);
+			boundX?.removeEventListener("wheel", onBarXWheel);
+			boundY = void 0;
+			boundX = void 0;
+		}
+		onMounted(() => {
+			bindObservers();
+			syncOverflow();
+			viewportRef.value?.addEventListener("scroll", onViewportScroll, { passive: true });
+			bindBarWheels();
+		});
+		onUpdated(() => {
+			scheduleSync(false);
+		});
+		onBeforeUnmount(() => {
+			viewportRef.value?.removeEventListener("scroll", onViewportScroll);
+			unbindBarWheels();
+			observer?.disconnect();
+			observer = void 0;
+			if (scrollRaf) cancelFrame(scrollRaf);
+			scrollRaf = 0;
+			pendingScrollFlags = false;
+			clearTimer(hideYTimer);
+			clearTimer(hideXTimer);
+			clearTimer(hoverTimer);
+			endDrag();
+		});
+		watch(() => [
+			props.orientation,
+			props.type,
+			props.height,
+			props.maxHeight,
+			props.minHeight
+		], async () => {
+			unbindBarWheels();
+			await nextTick();
+			bindBarWheels();
+			syncOverflow();
 		});
-		const showVertical = computed(() => props.orientation === "vertical" || props.orientation === "both");
-		const showHorizontal = computed(() => props.orientation === "horizontal" || props.orientation === "both");
 		__expose({
-			scrollTop: () => rootRef.value?.scrollTop(),
-			scrollTopLeft: () => rootRef.value?.scrollTopLeft(),
-			getViewport: () => rootRef.value?.viewport
+			scrollTop,
+			scrollTopLeft,
+			getViewport
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScrollAreaRoot), {
+			return openBlock(), createElementBlock("div", {
 				ref_key: "rootRef",
 				ref: rootRef,
 				class: "rs-scrollbar",
-				type: __props.type,
-				"scroll-hide-delay": __props.scrollHideDelay,
-				style: normalizeStyle(rootStyle.value)
-			}, {
-				default: withCtx(() => [
-					createVNode(unref(ScrollAreaViewport), { class: "rs-scrollbar__viewport" }, {
-						default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])]),
-						_: 3
-					}),
-					showVertical.value ? (openBlock(), createBlock(unref(ScrollAreaScrollbar), {
-						key: 0,
-						class: "rs-scrollbar__bar rs-scrollbar__bar--vertical",
-						orientation: "vertical"
-					}, {
-						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), { class: "rs-scrollbar__thumb" })]),
-						_: 1
-					})) : createCommentVNode("", true),
-					showHorizontal.value ? (openBlock(), createBlock(unref(ScrollAreaScrollbar), {
-						key: 1,
-						class: "rs-scrollbar__bar rs-scrollbar__bar--horizontal",
-						orientation: "horizontal"
-					}, {
-						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), { class: "rs-scrollbar__thumb" })]),
-						_: 1
-					})) : createCommentVNode("", true),
-					showVertical.value && showHorizontal.value ? (openBlock(), createBlock(unref(ScrollAreaCorner), {
-						key: 2,
-						class: "rs-scrollbar__corner"
-					})) : createCommentVNode("", true)
-				]),
-				_: 3
-			}, 8, [
-				"type",
-				"scroll-hide-delay",
-				"style"
-			]);
+				"data-type": __props.type,
+				"data-orientation": __props.orientation,
+				style: normalizeStyle(rootStyle.value),
+				onPointerenter: onRootEnter,
+				onPointerleave: onRootLeave
+			}, [
+				createElementVNode("section", {
+					ref_key: "viewportRef",
+					ref: viewportRef,
+					class: "rs-scrollbar__viewport",
+					"aria-label": viewportLabel.value,
+					style: normalizeStyle(viewportStyle.value)
+				}, [createElementVNode("div", {
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: "rs-scrollbar__content",
+					style: normalizeStyle(contentStyle.value)
+				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 4)], 12, _hoisted_2),
+				showVertical.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "barYRef",
+					ref: barYRef,
+					class: "rs-scrollbar__bar rs-scrollbar__bar--vertical",
+					"data-orientation": "vertical",
+					"aria-hidden": "true",
+					"data-state": barYVisible.value ? "visible" : "hidden",
+					onPointerdown: _cache[0] || (_cache[0] = ($event) => onBarPointerDown($event, "y")),
+					onPointermove: _cache[1] || (_cache[1] = ($event) => onBarPointerMove($event, "y")),
+					onPointerup: endDrag,
+					onPointercancel: endDrag,
+					onLostpointercapture: endDrag
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("div", { class: "rs-scrollbar__thumb" }, null, -1)])], 40, _hoisted_3)) : createCommentVNode("", true),
+				showHorizontal.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref_key: "barXRef",
+					ref: barXRef,
+					class: "rs-scrollbar__bar rs-scrollbar__bar--horizontal",
+					"data-orientation": "horizontal",
+					"aria-hidden": "true",
+					"data-state": barXVisible.value ? "visible" : "hidden",
+					onPointerdown: _cache[2] || (_cache[2] = ($event) => onBarPointerDown($event, "x")),
+					onPointermove: _cache[3] || (_cache[3] = ($event) => onBarPointerMove($event, "x")),
+					onPointerup: endDrag,
+					onPointercancel: endDrag,
+					onLostpointercapture: endDrag
+				}, [..._cache[5] || (_cache[5] = [createElementVNode("div", { class: "rs-scrollbar__thumb" }, null, -1)])], 40, _hoisted_4)) : createCommentVNode("", true),
+				showVertical.value && showHorizontal.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: "rs-scrollbar__corner",
+					"aria-hidden": "true",
+					"data-state": showCorner.value ? "visible" : "hidden"
+				}, null, 8, _hoisted_5)) : createCommentVNode("", true)
+			], 44, _hoisted_1);
 		};
 	}
 });

package/dist/components/scrollbar/src/RsScrollbar.js

@@ -1,7 +1,8 @@
 import './RsScrollbar.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsScrollbar_vue_vue_type_script_setup_true_lang_default from "./RsScrollbar.impl.js";
 
 //#region src/components/scrollbar/src/RsScrollbar.vue
-var RsScrollbar_default = RsScrollbar_vue_vue_type_script_setup_true_lang_default;
+var RsScrollbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsScrollbar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-507ffbba"]]);
 //#endregion
 export { RsScrollbar_default as default };

package/dist/components/scrollbar/src/scrollbar-utils.d.ts

@@ -1,3 +1,35 @@
-export type RsScrollbarType = 'auto' | 'always' | 'scroll' | 'hover';
-export type RsScrollbarOrientation = 'vertical' | 'horizontal' | 'both';
+export declare const RS_SCROLLBAR_TYPES: readonly ["auto", "always", "scroll", "hover"];
+export type RsScrollbarType = (typeof RS_SCROLLBAR_TYPES)[number];
+export declare const RS_SCROLLBAR_ORIENTATIONS: readonly ["vertical", "horizontal", "both"];
+export type RsScrollbarOrientation = (typeof RS_SCROLLBAR_ORIENTATIONS)[number];
+export type RsScrollbarAxis = 'x' | 'y';
+export interface RsScrollbarSizes {
+    content: number;
+    viewport: number;
+    scrollbar: {
+        size: number;
+        paddingStart: number;
+        paddingEnd: number;
+    };
+}
+export declare function isRsScrollbarType(value: unknown): value is RsScrollbarType;
+export declare function isRsScrollbarOrientation(value: unknown): value is RsScrollbarOrientation;
+export declare function resolveRsScrollbarType(type?: RsScrollbarType | null): RsScrollbarType;
+export declare function resolveRsScrollbarOrientation(orientation?: RsScrollbarOrientation | null): RsScrollbarOrientation;
 export declare function resolveScrollbarSize(size: number | string | undefined): string | undefined;
+export declare function showsRsScrollbarAxis(orientation: RsScrollbarOrientation | undefined, axis: RsScrollbarAxis): boolean;
+export declare function isRsScrollbarOverflow(viewport: number, content: number): boolean;
+export declare function isRsScrollbarBarVisible(input: {
+    type: RsScrollbarType;
+    overflowing: boolean;
+    hovering: boolean;
+    scrolling: boolean;
+    interacting?: boolean;
+}): boolean;
+export declare function getThumbRatio(viewportSize: number, contentSize: number): number;
+export declare function getThumbSize(sizes: RsScrollbarSizes): number;
+export declare function clampRsNumber(value: number, min: number, max: number): number;
+export declare function getThumbOffsetFromScroll(scrollPos: number, sizes: RsScrollbarSizes, dir?: 'ltr' | 'rtl'): number;
+export declare function getScrollPositionFromPointer(pointerPos: number, pointerOffset: number, sizes: RsScrollbarSizes, dir?: 'ltr' | 'rtl'): number;
+export declare function toCssInt(value?: string): number;
+export declare function isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPos: number): boolean;