ropav 0.1.5 → 0.1.7

package/dist/scroll-area.js

@@ -1,202 +1,72 @@
 import './scroll-area.css';
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, nextTick, on, onBeforeUnmount, onMounted, reactive, ref, renderEffect, setDynamicProps, setInsertionState, template, unref, useId, watch } from "vue";
-//#region src/components/scroll-area/scrollAreaCore.ts
-var minimumThumbSize = 18;
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
+import { r as normalizeDelay, t as clamp } from "./number.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { n as toPositiveCssLength } from "./css.js";
+import { n as isMatchingPointer, t as getPointerId } from "./pointer.js";
+import { t as createRafScheduler } from "./rafScheduler.js";
+import { i as isNodeWithinElement } from "./events.js";
+import { child, computed, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, nextTick, on, onBeforeUnmount, onMounted, reactive, ref, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useId, watch } from "vue";
+//#region src/utils/dom/scroll.ts
+function getScrollDirection(element) {
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
 }
-function isAxisEnabled(scrollbars, axis) {
-	if (scrollbars === false) return false;
-	if (axis === "x") return scrollbars === "x" || scrollbars === "both";
-	return scrollbars === "y" || scrollbars === "both";
+function getLogicalHorizontalScrollPosition(scrollLeft, maxPosition, direction) {
+	return clamp(direction === "rtl" ? -scrollLeft : scrollLeft, 0, maxPosition);
 }
-function isScrollbarActive(type, enabled, overflowing) {
-	if (!enabled || type === "never") return false;
-	return type === "always" || overflowing;
+function getRawHorizontalScrollPosition(position, maxPosition, direction) {
+	const logicalPosition = clamp(position, 0, maxPosition);
+	return direction === "rtl" && logicalPosition !== 0 ? -logicalPosition : logicalPosition;
 }
-function getThumbGeometry(trackSize, viewportSize, scrollSize) {
+function getScrollThumbGeometry(trackSize, viewportSize, scrollSize, minimumSize) {
 	if (trackSize <= 0 || viewportSize <= 0 || scrollSize <= viewportSize) return {
 		size: 100,
 		offsetRatio: 1
 	};
-	const sizeRatio = clamp(viewportSize / scrollSize * trackSize, minimumThumbSize, trackSize) / trackSize;
+	const sizeRatio = clamp(viewportSize / scrollSize * trackSize, minimumSize, trackSize) / trackSize;
 	return {
 		size: sizeRatio * 100,
 		offsetRatio: sizeRatio
 	};
 }
-function getThumbOffset(position, maxPosition, sizeRatio) {
+function getScrollThumbOffset(position, maxPosition, sizeRatio) {
 	if (sizeRatio >= 1 || maxPosition <= 0) return 0;
 	return position / maxPosition * ((1 - sizeRatio) / sizeRatio) * 100;
 }
-function getLengthValue(value) {
-	if (typeof value === "number") return Number.isFinite(value) && value > 0 ? `${value}px` : "";
-	return value?.trim() ?? "";
-}
-//#endregion
-//#region src/components/scroll-area/useScrollAreaControls.ts
-function useScrollAreaControls(options) {
-	let previousPosition = {
-		x: 0,
-		y: 0
-	};
-	function onViewportScroll(event) {
-		options.metrics.update();
-		options.showDuringScroll();
-		const position = {
-			x: options.metrics.getPosition("x"),
-			y: options.metrics.getPosition("y")
-		};
-		const reachedBoundaries = getReachedBoundaries(position);
-		previousPosition = position;
-		options.emitScroll(event);
-		options.emitPositionChange({
-			x: options.metrics.metrics.x,
-			y: options.metrics.metrics.y
-		});
-		for (const boundary of reachedBoundaries) emitReachedBoundary(boundary, event);
-	}
-	function getReachedBoundaries(position) {
-		const boundaries = [];
-		if (options.metrics.getOverflow("y")) {
-			const maxPosition = options.metrics.getMaxPosition("y");
-			if (position.y <= 1 && previousPosition.y > 1) boundaries.push("top");
-			if (position.y >= maxPosition - 1 && previousPosition.y < maxPosition - 1) boundaries.push("bottom");
-		}
-		if (options.metrics.getOverflow("x")) {
-			const maxPosition = options.metrics.getMaxPosition("x");
-			const reachedStart = position.x <= 1 && previousPosition.x > 1;
-			const reachedEnd = position.x >= maxPosition - 1 && previousPosition.x < maxPosition - 1;
-			if (reachedStart || reachedEnd) {
-				const viewport = options.viewportRef.value;
-				const view = viewport?.ownerDocument.defaultView;
-				const rtl = viewport ? view?.getComputedStyle(viewport).direction === "rtl" : false;
-				if (reachedStart) boundaries.push(rtl ? "right" : "left");
-				if (reachedEnd) boundaries.push(rtl ? "left" : "right");
-			}
-		}
-		return boundaries;
-	}
-	function emitReachedBoundary(boundary, event) {
-		switch (boundary) {
-			case "top":
-				options.emitReachTop(event);
-				break;
-			case "bottom":
-				options.emitReachBottom(event);
-				break;
-			case "left":
-				options.emitReachLeft(event);
-				break;
-			case "right":
-				options.emitReachRight(event);
-				break;
-		}
-	}
-	function writeAxisPosition(axis, value) {
-		const viewport = options.viewportRef.value;
-		if (!viewport) return;
-		if (axis === "x") viewport.scrollLeft = (viewport.scrollLeft < 0 ? -1 : 1) * clamp(value, 0, options.metrics.getMaxPosition("x"));
-		else viewport.scrollTop = clamp(value, 0, options.metrics.getMaxPosition("y"));
-		options.metrics.update();
-		options.showDuringScroll();
-	}
-	function onScrollbarKeydown(axis, event) {
-		const viewport = options.viewportRef.value;
-		if (!viewport || !options.metrics.getOverflow(axis)) return;
-		const current = options.metrics.getPosition(axis);
-		const pageSize = axis === "x" ? viewport.clientWidth : viewport.clientHeight;
-		const nextPosition = getKeyboardPosition(event.key, current, pageSize, options.metrics.getMaxPosition(axis));
-		if (nextPosition === void 0) return;
-		event.preventDefault();
-		writeAxisPosition(axis, nextPosition);
-	}
-	function onScrollbarWheel(axis, event) {
-		if (!options.metrics.getOverflow(axis)) return;
-		const delta = axis === "x" ? event.deltaX || event.deltaY : event.deltaY;
-		if (!delta) return;
-		event.preventDefault();
-		writeAxisPosition(axis, options.metrics.getPosition(axis) + delta);
-	}
-	function scrollTo(scrollOptions) {
-		const viewport = options.viewportRef.value;
-		if (!viewport) return;
-		if (typeof viewport.scrollTo === "function") viewport.scrollTo(scrollOptions);
-		else setFallbackPosition(viewport, scrollOptions, false);
-		options.metrics.scheduleUpdate();
-	}
-	function scrollBy(scrollOptions) {
-		const viewport = options.viewportRef.value;
-		if (!viewport) return;
-		if (typeof viewport.scrollBy === "function") viewport.scrollBy(scrollOptions);
-		else setFallbackPosition(viewport, scrollOptions, true);
-		options.metrics.scheduleUpdate();
-	}
-	return {
-		onViewportScroll,
-		onScrollbarKeydown,
-		onScrollbarWheel,
-		writeAxisPosition,
-		scrollTo,
-		scrollBy
-	};
-}
-function getKeyboardPosition(key, current, pageSize, max) {
+function getKeyboardScrollPosition({ axis, key, current, pageSize, maxPosition, direction, lineStep }) {
 	switch (key) {
-		case "ArrowLeft":
-		case "ArrowUp": return current - 40;
-		case "ArrowRight":
-		case "ArrowDown": return current + 40;
+		case "ArrowLeft": return current + (axis === "x" && direction === "rtl" ? lineStep : -lineStep);
+		case "ArrowUp": return current - lineStep;
+		case "ArrowRight": return current + (axis === "x" && direction === "rtl" ? -lineStep : lineStep);
+		case "ArrowDown": return current + lineStep;
 		case "PageUp": return current - pageSize;
 		case "PageDown": return current + pageSize;
 		case "Home": return 0;
-		case "End": return max;
+		case "End": return maxPosition;
 		default: return;
 	}
 }
-function setFallbackPosition(viewport, scrollOptions, relative) {
-	if (scrollOptions.left !== void 0) viewport.scrollLeft = (relative ? viewport.scrollLeft : 0) + scrollOptions.left;
-	if (scrollOptions.top !== void 0) viewport.scrollTop = (relative ? viewport.scrollTop : 0) + scrollOptions.top;
+function getWheelScrollDelta(axis, event, direction) {
+	if (axis === "y") return event.deltaY;
+	if (!event.deltaX) return event.deltaY;
+	return direction === "rtl" ? -event.deltaX : event.deltaX;
 }
-//#endregion
-//#region src/utils/rafScheduler.ts
-function createRafScheduler(callback, getView) {
-	let frameId;
-	let frameView;
-	let generation = 0;
-	function cancel() {
-		generation += 1;
-		if (frameId !== void 0) frameView?.cancelAnimationFrame(frameId);
-		frameId = void 0;
-		frameView = void 0;
-	}
-	function schedule() {
-		if (frameId !== void 0) return;
-		const view = getView();
-		if (!view?.requestAnimationFrame) {
-			callback();
-			return;
-		}
-		const scheduledGeneration = generation;
-		frameView = view;
-		frameId = view.requestAnimationFrame(() => {
-			if (generation !== scheduledGeneration || frameView !== view) return;
-			frameId = void 0;
-			frameView = void 0;
-			callback();
-		});
-	}
-	return {
-		cancel,
-		schedule
-	};
+function applyFallbackScrollPosition(element, options, mode) {
+	const relative = mode === "relative";
+	if (options.left !== void 0) element.scrollLeft = (relative ? element.scrollLeft : 0) + options.left;
+	if (options.top !== void 0) element.scrollTop = (relative ? element.scrollTop : 0) + options.top;
+}
+function getPointerAxisCoordinate(axis, event) {
+	return axis === "x" ? event.clientX : event.clientY;
 }
 //#endregion
-//#region src/components/scroll-area/useScrollAreaMetrics.ts
-function useScrollAreaMetrics(options) {
-	const metrics = reactive({
+//#region src/components/scroll-area/scrollAreaModel.ts
+var boundaryTolerance = 1;
+function createScrollAreaMetrics() {
+	return {
+		direction: "ltr",
 		clientWidth: 0,
 		clientHeight: 0,
 		scrollWidth: 0,
@@ -209,66 +79,276 @@ function useScrollAreaMetrics(options) {
 		horizontalThumbOffset: 0,
 		verticalThumbSize: 100,
 		verticalThumbOffset: 0
+	};
+}
+function isScrollAreaAxisEnabled(scrollbars, axis) {
+	if (scrollbars === false) return false;
+	if (axis === "x") return scrollbars === "x" || scrollbars === "both";
+	return scrollbars === "y" || scrollbars === "both";
+}
+function isScrollAreaScrollbarActive(type, enabled, overflowing) {
+	if (!enabled || type === "never") return false;
+	return type === "always" || overflowing;
+}
+function isScrollAreaScrollbarVisible({ active, axis, draggingAxis, focusWithin, hovered, scrolling, type }) {
+	if (!active) return false;
+	switch (type) {
+		case "always":
+		case "auto": return true;
+		case "hover": return hovered || focusWithin || draggingAxis === axis;
+		case "scroll": return scrolling || draggingAxis === axis;
+		default: return false;
+	}
+}
+function getScrollAreaAxisPosition(metrics, axis) {
+	return axis === "x" ? metrics.x : metrics.y;
+}
+function getScrollAreaMaxPosition(metrics, axis) {
+	return axis === "x" ? Math.max(0, metrics.scrollWidth - metrics.clientWidth) : Math.max(0, metrics.scrollHeight - metrics.clientHeight);
+}
+function getScrollAreaOverflow(metrics, axis) {
+	return axis === "x" ? metrics.overflowX : metrics.overflowY;
+}
+function getScrollAreaAxisState(metrics, axis) {
+	return {
+		direction: metrics.direction,
+		maxPosition: getScrollAreaMaxPosition(metrics, axis),
+		overflow: getScrollAreaOverflow(metrics, axis),
+		position: getScrollAreaAxisPosition(metrics, axis)
+	};
+}
+function getReachedScrollAreaBoundaries(position, previousPosition, metrics) {
+	const boundaries = [];
+	appendVerticalBoundaries(boundaries, position, previousPosition, metrics);
+	appendHorizontalBoundaries(boundaries, position, previousPosition, metrics);
+	return boundaries;
+}
+function appendVerticalBoundaries(boundaries, position, previousPosition, metrics) {
+	if (!metrics.overflowY) return;
+	const maxPosition = getScrollAreaMaxPosition(metrics, "y");
+	if (position.y <= boundaryTolerance && previousPosition.y > boundaryTolerance) boundaries.push("top");
+	if (position.y >= maxPosition - boundaryTolerance && previousPosition.y < maxPosition - boundaryTolerance) boundaries.push("bottom");
+}
+function appendHorizontalBoundaries(boundaries, position, previousPosition, metrics) {
+	if (!metrics.overflowX) return;
+	const maxPosition = getScrollAreaMaxPosition(metrics, "x");
+	const reachedStart = position.x <= boundaryTolerance && previousPosition.x > boundaryTolerance;
+	const reachedEnd = position.x >= maxPosition - boundaryTolerance && previousPosition.x < maxPosition - boundaryTolerance;
+	if (reachedStart) boundaries.push(metrics.direction === "rtl" ? "right" : "left");
+	if (reachedEnd) boundaries.push(metrics.direction === "rtl" ? "left" : "right");
+}
+function getScrollAreaTrackPosition({ axis, coordinate, direction, maxPosition, thumbSize, trackSize, trackStart }) {
+	const travel = Math.max(0, trackSize - thumbSize);
+	if (travel === 0) return void 0;
+	const physicalRatio = clamp((coordinate - trackStart - thumbSize / 2) / travel, 0, 1);
+	return (axis === "x" && direction === "rtl" ? 1 - physicalRatio : physicalRatio) * maxPosition;
+}
+function getScrollAreaDragPosition({ coordinate, coordinateDirection, maxPosition, startCoordinate, startPosition, travel }) {
+	if (travel <= 0) return startPosition;
+	return startPosition + coordinateDirection * (coordinate - startCoordinate) * maxPosition / travel;
+}
+function getScrollAreaRootStyle(scrollbarSize) {
+	const length = toPositiveCssLength(scrollbarSize);
+	return length ? { "--_rp-scroll-area-scrollbar-size": length } : {};
+}
+//#endregion
+//#region src/components/scroll-area/useScrollAreaAttributes.ts
+function useScrollAreaAttributes({ metrics, onViewportScroll, props, rootHandlers, state, viewport }) {
+	const generatedId = useId();
+	const viewportId = computed(() => `${props.id || generatedId}-viewport`);
+	const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+	const rootAttrs = computed(() => getRootAttrs({
+		id: props.id,
+		class: "rp-scroll-area",
+		style: getScrollAreaRootStyle(props.scrollbarSize),
+		"data-type": props.type,
+		"data-direction": metrics.direction,
+		"data-scrollbars": props.scrollbars === false ? "none" : props.scrollbars,
+		"data-overflow-x": toPresenceAttribute(metrics.overflowX),
+		"data-overflow-y": toPresenceAttribute(metrics.overflowY),
+		"data-scrollbar-x-active": toPresenceAttribute(state.horizontalActive.value),
+		"data-scrollbar-y-active": toPresenceAttribute(state.verticalActive.value),
+		"data-scrollbar-x-visible": toPresenceAttribute(state.horizontalVisible.value),
+		"data-scrollbar-y-visible": toPresenceAttribute(state.verticalVisible.value),
+		...rootHandlers
+	}));
+	const viewportAttrs = computed(() => {
+		const compatibilityAttrs = props.viewportAttrs ?? {};
+		const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(compatibilityAttrs);
+		return {
+			...forwardedAttributes,
+			...getPartAttrs("viewport", {
+				class: "rp-scroll-area__viewport",
+				compatibilityClass,
+				compatibilityStyle
+			}),
+			id: viewportId.value,
+			role: forwardedAttributes.role ?? (hasAccessibleName(props, forwardedAttributes) ? "region" : void 0),
+			tabindex: forwardedAttributes.tabindex ?? 0,
+			"aria-label": props.ariaLabel || forwardedAttributes["aria-label"] || void 0,
+			"aria-labelledby": props.ariaLabelledby || forwardedAttributes["aria-labelledby"] || void 0,
+			"aria-describedby": props.ariaDescribedby || forwardedAttributes["aria-describedby"] || void 0,
+			onScroll: composeEventHandlers(onViewportScroll, compatibilityAttrs.onScroll)
+		};
+	});
+	const contentAttrs = computed(() => {
+		const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(props.contentAttrs ?? {});
+		return {
+			...forwardedAttributes,
+			...getPartAttrs("content", {
+				class: "rp-scroll-area__content",
+				compatibilityClass,
+				compatibilityStyle
+			})
+		};
 	});
-	const position = computed(() => ({
-		x: metrics.x,
-		y: metrics.y
+	const horizontalScrollbarAttrs = computed(() => getScrollbarAttrs("x"));
+	const verticalScrollbarAttrs = computed(() => getScrollbarAttrs("y"));
+	const horizontalThumbAttrs = computed(() => getThumbAttrs("x"));
+	const verticalThumbAttrs = computed(() => getThumbAttrs("y"));
+	const cornerAttrs = computed(() => ({
+		...getPartAttrs("corner", { class: "rp-scroll-area__corner" }),
+		"aria-hidden": true,
+		"data-direction": metrics.direction,
+		"data-visible": toPresenceAttribute(state.horizontalActive.value && state.verticalActive.value)
 	}));
+	function getScrollbarAttrs(axis) {
+		const vertical = axis === "y";
+		const active = vertical ? state.verticalActive.value : state.horizontalActive.value;
+		const visible = vertical ? state.verticalVisible.value : state.horizontalVisible.value;
+		return {
+			...getPartAttrs("scrollbar", { class: ["rp-scroll-area__scrollbar", `rp-scroll-area__scrollbar--${vertical ? "vertical" : "horizontal"}`] }),
+			role: "scrollbar",
+			tabindex: !props.embedded && active ? 0 : -1,
+			"aria-controls": viewport.value?.id || void 0,
+			"aria-orientation": vertical ? "vertical" : "horizontal",
+			"aria-valuemin": 0,
+			"aria-valuemax": getScrollAreaMaxPosition(metrics, axis),
+			"aria-valuenow": Math.round(getScrollAreaAxisPosition(metrics, axis)),
+			"aria-disabled": !getScrollAreaOverflow(metrics, axis) || void 0,
+			"aria-hidden": props.embedded || !active || void 0,
+			"data-orientation": vertical ? "vertical" : "horizontal",
+			"data-direction": metrics.direction,
+			"data-active": toPresenceAttribute(active),
+			"data-visible": toPresenceAttribute(visible)
+		};
+	}
+	function getThumbAttrs(axis) {
+		const horizontal = axis === "x";
+		return getPartAttrs("thumb", {
+			class: "rp-scroll-area__thumb",
+			style: {
+				"--_rp-scroll-area-thumb-size": `${horizontal ? metrics.horizontalThumbSize : metrics.verticalThumbSize}%`,
+				"--_rp-scroll-area-thumb-offset": `${horizontal ? metrics.horizontalThumbOffset : metrics.verticalThumbOffset}%`
+			}
+		});
+	}
+	return {
+		contentAttrs,
+		cornerAttrs,
+		horizontalScrollbarAttrs,
+		horizontalThumbAttrs,
+		rootAttrs,
+		verticalScrollbarAttrs,
+		verticalThumbAttrs,
+		viewportAttrs
+	};
+}
+function hasAccessibleName(props, attrs) {
+	return Boolean(props.ariaLabel || props.ariaLabelledby || attrs["aria-label"] || attrs["aria-labelledby"]);
+}
+//#endregion
+//#region src/components/scroll-area/useScrollAreaDerivedState.ts
+function useScrollAreaDerivedState(props, metrics) {
+	const renderHorizontalScrollbar = computed(() => isScrollAreaAxisEnabled(props.scrollbars, "x") && props.type !== "never");
+	const renderVerticalScrollbar = computed(() => isScrollAreaAxisEnabled(props.scrollbars, "y") && props.type !== "never");
+	return {
+		horizontalScrollbarActive: computed(() => isScrollAreaScrollbarActive(props.type ?? "hover", isScrollAreaAxisEnabled(props.scrollbars, "x"), metrics.overflowX)),
+		renderHorizontalScrollbar,
+		renderVerticalScrollbar,
+		verticalScrollbarActive: computed(() => isScrollAreaScrollbarActive(props.type ?? "hover", isScrollAreaAxisEnabled(props.scrollbars, "y"), metrics.overflowY))
+	};
+}
+//#endregion
+//#region src/components/scroll-area/useScrollAreaMeasurement.ts
+function useScrollAreaMeasurement({ elements, isAxisEnabled, minimumThumbSize }) {
+	const metrics = reactive(createScrollAreaMetrics());
 	let resizeObserver;
-	let mutationObserver;
-	const scheduler = createRafScheduler(update, () => options.viewportRef.value?.ownerDocument.defaultView);
+	let contentObserver;
+	let directionObserver;
+	let observerView;
+	let horizontalThumbSizeRatio = 1;
+	let verticalThumbSizeRatio = 1;
+	const updateScheduler = createRafScheduler(update, () => elements.viewport.value?.ownerDocument.defaultView);
+	const positionScheduler = createRafScheduler(updatePosition, () => elements.viewport.value?.ownerDocument.defaultView);
 	function update() {
-		const viewport = options.viewportRef.value;
+		const viewport = elements.viewport.value;
 		if (!viewport) return;
-		readViewportMetrics(viewport);
-		updateThumbMetrics(viewport);
+		readViewportGeometry(viewport);
+		updateThumbGeometry(viewport);
+		updatePosition(viewport);
 	}
-	function readViewportMetrics(viewport) {
+	function readViewportGeometry(viewport) {
 		metrics.clientWidth = viewport.clientWidth;
 		metrics.clientHeight = viewport.clientHeight;
 		metrics.scrollWidth = viewport.scrollWidth;
 		metrics.scrollHeight = viewport.scrollHeight;
-		metrics.x = viewport.scrollLeft;
-		metrics.y = viewport.scrollTop;
-		metrics.overflowX = options.horizontalEnabled.value && viewport.scrollWidth > viewport.clientWidth + 1;
-		metrics.overflowY = options.verticalEnabled.value && viewport.scrollHeight > viewport.clientHeight + 1;
-	}
-	function updateThumbMetrics(viewport) {
-		const horizontalGeometry = getThumbGeometry(options.horizontalScrollbarRef.value?.clientWidth ?? viewport.clientWidth, viewport.clientWidth, viewport.scrollWidth);
-		const verticalGeometry = getThumbGeometry(options.verticalScrollbarRef.value?.clientHeight ?? viewport.clientHeight, viewport.clientHeight, viewport.scrollHeight);
+		metrics.overflowX = isAxisEnabled("x") && viewport.scrollWidth > viewport.clientWidth + 1;
+		metrics.overflowY = isAxisEnabled("y") && viewport.scrollHeight > viewport.clientHeight + 1;
+	}
+	function updateThumbGeometry(viewport) {
+		const horizontalGeometry = getScrollThumbGeometry(elements.horizontalScrollbar.value?.clientWidth ?? viewport.clientWidth, viewport.clientWidth, viewport.scrollWidth, minimumThumbSize);
+		const verticalGeometry = getScrollThumbGeometry(elements.verticalScrollbar.value?.clientHeight ?? viewport.clientHeight, viewport.clientHeight, viewport.scrollHeight, minimumThumbSize);
 		metrics.horizontalThumbSize = horizontalGeometry.size;
-		metrics.horizontalThumbOffset = getThumbOffset(clamp(Math.abs(viewport.scrollLeft), 0, getMaxPosition("x")), getMaxPosition("x"), horizontalGeometry.offsetRatio);
+		horizontalThumbSizeRatio = horizontalGeometry.offsetRatio;
 		metrics.verticalThumbSize = verticalGeometry.size;
-		metrics.verticalThumbOffset = getThumbOffset(clamp(viewport.scrollTop, 0, getMaxPosition("y")), getMaxPosition("y"), verticalGeometry.offsetRatio);
-	}
-	function getPosition(axis) {
-		return axis === "x" ? Math.abs(metrics.x) : metrics.y;
-	}
-	function getMaxPosition(axis) {
-		return axis === "x" ? Math.max(0, metrics.scrollWidth - metrics.clientWidth) : Math.max(0, metrics.scrollHeight - metrics.clientHeight);
+		verticalThumbSizeRatio = verticalGeometry.offsetRatio;
 	}
-	function getOverflow(axis) {
-		return axis === "x" ? metrics.overflowX : metrics.overflowY;
+	function updatePosition(viewport = elements.viewport.value) {
+		if (!viewport) return;
+		metrics.direction = getScrollDirection(viewport);
+		metrics.x = getLogicalHorizontalScrollPosition(viewport.scrollLeft, getScrollAreaMaxPosition(metrics, "x"), metrics.direction);
+		metrics.y = clamp(viewport.scrollTop, 0, getScrollAreaMaxPosition(metrics, "y"));
+		metrics.horizontalThumbOffset = getScrollThumbOffset(metrics.x, getScrollAreaMaxPosition(metrics, "x"), horizontalThumbSizeRatio);
+		metrics.verticalThumbOffset = getScrollThumbOffset(metrics.y, getScrollAreaMaxPosition(metrics, "y"), verticalThumbSizeRatio);
 	}
 	function attachObservers() {
-		const viewport = options.viewportRef.value;
+		const viewport = elements.viewport.value;
 		if (!viewport) return;
-		const view = viewport.ownerDocument.defaultView;
-		const ResizeObserverConstructor = view?.ResizeObserver ?? globalThis.ResizeObserver;
+		observerView = viewport.ownerDocument.defaultView;
+		const ResizeObserverConstructor = observerView?.ResizeObserver ?? globalThis.ResizeObserver;
 		if (ResizeObserverConstructor) {
-			resizeObserver = new ResizeObserverConstructor(scheduler.schedule);
-			resizeObserver.observe(viewport);
-			if (options.contentRef.value) resizeObserver.observe(options.contentRef.value);
-		} else attachMutationObserver(view);
-		view?.addEventListener("resize", scheduler.schedule);
+			const observer = new ResizeObserverConstructor(updateScheduler.schedule);
+			observer.observe(viewport);
+			if (elements.content.value) observer.observe(elements.content.value);
+			resizeObserver = observer;
+		} else attachContentObserver(observerView);
+		attachDirectionObserver(observerView, viewport);
+		observerView?.addEventListener("resize", updateScheduler.schedule);
+	}
+	function attachDirectionObserver(view, viewport) {
+		const MutationObserverConstructor = view?.MutationObserver ?? globalThis.MutationObserver;
+		if (!MutationObserverConstructor) return;
+		directionObserver = new MutationObserverConstructor(positionScheduler.schedule);
+		let element = viewport;
+		while (element) {
+			directionObserver.observe(element, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"dir",
+					"style"
+				]
+			});
+			element = element.parentElement;
+		}
 	}
-	function attachMutationObserver(view) {
+	function attachContentObserver(view) {
 		const MutationObserverConstructor = view?.MutationObserver ?? globalThis.MutationObserver;
-		const content = options.contentRef.value;
+		const content = elements.content.value;
 		if (!MutationObserverConstructor || !content) return;
-		const observer = new MutationObserverConstructor(scheduler.schedule);
-		mutationObserver = observer;
-		observer.observe(content, {
+		contentObserver = new MutationObserverConstructor(updateScheduler.schedule);
+		contentObserver.observe(content, {
 			attributes: true,
 			childList: true,
 			characterData: true,
@@ -276,29 +356,30 @@ function useScrollAreaMetrics(options) {
 		});
 	}
 	function detachObservers() {
-		const view = options.viewportRef.value?.ownerDocument.defaultView;
 		resizeObserver?.disconnect();
-		mutationObserver?.disconnect();
+		contentObserver?.disconnect();
+		directionObserver?.disconnect();
 		resizeObserver = void 0;
-		mutationObserver = void 0;
-		view?.removeEventListener("resize", scheduler.schedule);
+		contentObserver = void 0;
+		directionObserver = void 0;
+		observerView?.removeEventListener("resize", updateScheduler.schedule);
+		observerView = void 0;
 	}
 	onMounted(() => {
 		attachObservers();
-		nextTick(scheduler.schedule);
+		nextTick(updateScheduler.schedule);
 	});
 	onBeforeUnmount(() => {
 		detachObservers();
-		scheduler.cancel();
+		updateScheduler.cancel();
+		positionScheduler.cancel();
 	});
 	return {
 		metrics,
-		position,
+		schedulePositionUpdate: positionScheduler.schedule,
+		scheduleUpdate: updateScheduler.schedule,
 		update,
-		scheduleUpdate: scheduler.schedule,
-		getPosition,
-		getMaxPosition,
-		getOverflow
+		updatePosition
 	};
 }
 //#endregion
@@ -307,47 +388,54 @@ function useScrollAreaPointer(options) {
 	let dragSession;
 	function onScrollbarPointerdown(axis, event) {
 		if (event.target !== event.currentTarget || event.button !== 0) return;
-		if (!options.metrics.getOverflow(axis)) return;
+		const state = options.refreshAxis(axis);
+		if (!state.overflow) return;
 		const scrollbar = event.currentTarget;
 		const thumb = scrollbar.firstElementChild;
 		const trackRect = scrollbar.getBoundingClientRect();
 		const thumbRect = thumb?.getBoundingClientRect();
-		const trackStart = axis === "x" ? trackRect.left : trackRect.top;
-		const trackSize = axis === "x" ? trackRect.width : trackRect.height;
-		const thumbSize = thumbRect ? axis === "x" ? thumbRect.width : thumbRect.height : 0;
-		const coordinate = getPointerCoordinate(axis, event);
-		const travel = Math.max(0, trackSize - thumbSize);
-		if (travel === 0) return;
+		const horizontal = axis === "x";
+		const position = getScrollAreaTrackPosition({
+			axis,
+			coordinate: getPointerAxisCoordinate(axis, event),
+			direction: state.direction,
+			maxPosition: state.maxPosition,
+			thumbSize: thumbRect ? horizontal ? thumbRect.width : thumbRect.height : 0,
+			trackSize: horizontal ? trackRect.width : trackRect.height,
+			trackStart: horizontal ? trackRect.left : trackRect.top
+		});
+		if (position === void 0) return;
 		event.preventDefault();
-		const ratio = clamp((coordinate - trackStart - thumbSize / 2) / travel, 0, 1);
-		options.controls.writeAxisPosition(axis, ratio * options.metrics.getMaxPosition(axis));
+		options.writeAxisPosition(axis, position);
 	}
 	function onThumbPointerdown(axis, event) {
 		if (event.button !== 0 || event.isPrimary === false) return;
-		if (!options.metrics.getOverflow(axis)) return;
+		const state = options.refreshAxis(axis);
+		if (!state.overflow) return;
 		const scrollbar = getScrollbar(axis);
 		const thumb = event.currentTarget;
 		if (!scrollbar) return;
 		const trackRect = scrollbar.getBoundingClientRect();
 		const thumbRect = thumb.getBoundingClientRect();
-		const trackSize = axis === "x" ? trackRect.width : trackRect.height;
-		const thumbSize = axis === "x" ? thumbRect.width : thumbRect.height;
+		const horizontal = axis === "x";
+		const trackSize = horizontal ? trackRect.width : trackRect.height;
+		const thumbSize = horizontal ? thumbRect.width : thumbRect.height;
 		const travel = Math.max(0, trackSize - thumbSize);
 		if (travel === 0) return;
 		event.preventDefault();
-		event.stopPropagation();
 		stopDragging();
-		if (options.shouldFocusScrollbar()) scrollbar.focus({ preventScroll: true });
-		startDragging(axis, event, scrollbar, travel);
+		if (!options.isEmbedded()) scrollbar.focus({ preventScroll: true });
+		startDragging(axis, event, scrollbar, travel, state);
 	}
-	function startDragging(axis, event, scrollbar, travel) {
+	function startDragging(axis, event, scrollbar, travel, state) {
 		const view = scrollbar.ownerDocument.defaultView;
 		dragSession = {
 			axis,
-			pointerId: Number.isFinite(event.pointerId) ? event.pointerId : void 0,
-			startCoordinate: getPointerCoordinate(axis, event),
-			startPosition: options.metrics.getPosition(axis),
-			maxPosition: options.metrics.getMaxPosition(axis),
+			coordinateDirection: axis === "x" && state.direction === "rtl" ? -1 : 1,
+			maxPosition: state.maxPosition,
+			pointerId: getPointerId(event),
+			startCoordinate: getPointerAxisCoordinate(axis, event),
+			startPosition: state.position,
 			travel,
 			view
 		};
@@ -358,12 +446,18 @@ function useScrollAreaPointer(options) {
 	}
 	function onPointermove(event) {
 		const session = dragSession;
-		if (!session || !isCurrentPointer(event, session)) return;
-		const delta = getPointerCoordinate(session.axis, event) - session.startCoordinate;
-		options.controls.writeAxisPosition(session.axis, session.startPosition + delta / session.travel * session.maxPosition);
+		if (!session || !isMatchingPointer(event, session.pointerId)) return;
+		options.writeAxisPosition(session.axis, getScrollAreaDragPosition({
+			coordinate: getPointerAxisCoordinate(session.axis, event),
+			coordinateDirection: session.coordinateDirection,
+			maxPosition: session.maxPosition,
+			startCoordinate: session.startCoordinate,
+			startPosition: session.startPosition,
+			travel: session.travel
+		}));
 	}
 	function onPointerend(event) {
-		if (!dragSession || !isCurrentPointer(event, dragSession)) return;
+		if (!dragSession || !isMatchingPointer(event, dragSession.pointerId)) return;
 		stopDragging();
 	}
 	function stopDragging() {
@@ -375,7 +469,7 @@ function useScrollAreaPointer(options) {
 		options.setDraggingAxis(null);
 	}
 	function getScrollbar(axis) {
-		return axis === "x" ? options.horizontalScrollbarRef.value : options.verticalScrollbarRef.value;
+		return axis === "x" ? options.elements.horizontalScrollbar.value : options.elements.verticalScrollbar.value;
 	}
 	onBeforeUnmount(stopDragging);
 	return {
@@ -383,257 +477,226 @@ function useScrollAreaPointer(options) {
 		onThumbPointerdown
 	};
 }
-function getPointerCoordinate(axis, event) {
-	return axis === "x" ? event.clientX : event.clientY;
-}
-function isCurrentPointer(event, session) {
-	return session.pointerId === void 0 || event.pointerId === session.pointerId;
-}
 //#endregion
 //#region src/components/scroll-area/useScrollAreaVisibility.ts
 function useScrollAreaVisibility(options) {
-	const isHovered = ref(false);
-	const hasFocusWithin = ref(false);
-	const isScrolling = ref(false);
+	const hovered = ref(false);
+	const focusWithin = ref(false);
+	const scrolling = ref(false);
 	const draggingAxis = ref(null);
 	let scrollEndTimer;
-	const renderHorizontalScrollbar = computed(() => options.horizontalEnabled.value && options.props.type !== "never");
-	const renderVerticalScrollbar = computed(() => options.verticalEnabled.value && options.props.type !== "never");
-	const horizontalScrollbarActive = computed(() => isScrollbarActive(options.props.type ?? "hover", options.horizontalEnabled.value, options.overflowX()));
-	const verticalScrollbarActive = computed(() => isScrollbarActive(options.props.type ?? "hover", options.verticalEnabled.value, options.overflowY()));
-	const horizontalScrollbarVisible = computed(() => isVisible(horizontalScrollbarActive.value, "x"));
-	const verticalScrollbarVisible = computed(() => isVisible(verticalScrollbarActive.value, "y"));
-	function isVisible(active, axis) {
-		if (!active) return false;
-		switch (options.props.type) {
-			case "always":
-			case "auto": return true;
-			case "hover": return isHovered.value || hasFocusWithin.value || draggingAxis.value === axis;
-			case "scroll": return isScrolling.value || draggingAxis.value === axis;
-			default: return false;
+	const horizontalVisible = computed(() => isVisible("x"));
+	const verticalVisible = computed(() => isVisible("y"));
+	const rootHandlers = {
+		onPointerenter() {
+			hovered.value = true;
+		},
+		onPointerleave() {
+			hovered.value = false;
+		},
+		onFocusin() {
+			focusWithin.value = true;
+		},
+		onFocusout(event) {
+			if (isNodeWithinElement(event.relatedTarget, options.root.value)) return;
+			focusWithin.value = false;
 		}
+	};
+	function isVisible(axis) {
+		return isScrollAreaScrollbarVisible({
+			active: options.isScrollbarActive(axis),
+			axis,
+			draggingAxis: draggingAxis.value,
+			focusWithin: focusWithin.value,
+			hovered: hovered.value,
+			scrolling: scrolling.value,
+			type: options.getType()
+		});
 	}
 	function showDuringScroll() {
-		isScrolling.value = true;
-		resetScrollEndTimer();
+		scrolling.value = true;
+		clearScrollEndTimer();
 		scrollEndTimer = setTimeout(() => {
-			isScrolling.value = false;
+			scrolling.value = false;
 			scrollEndTimer = void 0;
-		}, normalizeDelay(options.props.scrollHideDelay));
+		}, normalizeDelay(options.getHideDelay()));
+	}
+	function clearScrollEndTimer() {
+		if (scrollEndTimer === void 0) return;
+		clearTimeout(scrollEndTimer);
+		scrollEndTimer = void 0;
 	}
 	function setDraggingAxis(axis) {
 		draggingAxis.value = axis;
 	}
-	function onPointerenter() {
-		isHovered.value = true;
-	}
-	function onPointerleave() {
-		isHovered.value = false;
-	}
-	function onFocusin() {
-		hasFocusWithin.value = true;
-	}
-	function onFocusout(event) {
-		const nextTarget = event.relatedTarget;
-		if (nextTarget instanceof Node && options.rootRef.value?.contains(nextTarget)) return;
-		hasFocusWithin.value = false;
-	}
-	function resetScrollEndTimer() {
-		if (scrollEndTimer !== void 0) clearTimeout(scrollEndTimer);
-	}
-	watch(() => options.props.scrollHideDelay, () => {
-		if (isScrolling.value) showDuringScroll();
+	watch(options.getHideDelay, () => {
+		if (scrolling.value) showDuringScroll();
 	});
-	onBeforeUnmount(resetScrollEndTimer);
+	onBeforeUnmount(clearScrollEndTimer);
 	return {
-		renderHorizontalScrollbar,
-		renderVerticalScrollbar,
-		horizontalScrollbarActive,
-		verticalScrollbarActive,
-		horizontalScrollbarVisible,
-		verticalScrollbarVisible,
-		showDuringScroll,
+		horizontalVisible,
+		rootHandlers,
 		setDraggingAxis,
-		onPointerenter,
-		onPointerleave,
-		onFocusin,
-		onFocusout
+		showDuringScroll,
+		verticalVisible
 	};
 }
-function normalizeDelay(delay) {
-	return Number.isFinite(delay) ? Math.max(0, delay ?? 0) : 0;
-}
 //#endregion
 //#region src/components/scroll-area/useScrollArea.ts
-function useScrollArea(options) {
+var minimumThumbSize = 18;
+var keyboardScrollStep = 40;
+function useScrollArea(props, emit) {
 	const rootRef = ref(null);
 	const viewportRef = ref(null);
-	const contentRef = ref(null);
-	const horizontalScrollbarRef = ref(null);
-	const verticalScrollbarRef = ref(null);
-	const horizontalEnabled = computed(() => isAxisEnabled(options.props.scrollbars, "x"));
-	const verticalEnabled = computed(() => isAxisEnabled(options.props.scrollbars, "y"));
-	const measurements = useScrollAreaMetrics({
-		viewportRef,
-		contentRef,
-		horizontalScrollbarRef,
-		verticalScrollbarRef,
-		horizontalEnabled,
-		verticalEnabled
+	const templateRefs = {
+		root: rootRef,
+		viewport: viewportRef,
+		content: ref(null),
+		horizontalScrollbar: ref(null),
+		verticalScrollbar: ref(null)
+	};
+	const { metrics, schedulePositionUpdate, scheduleUpdate, update, updatePosition } = useScrollAreaMeasurement({
+		elements: templateRefs,
+		isAxisEnabled: (axis) => isScrollAreaAxisEnabled(props.scrollbars, axis),
+		minimumThumbSize
 	});
+	const { horizontalScrollbarActive, renderHorizontalScrollbar, renderVerticalScrollbar, verticalScrollbarActive } = useScrollAreaDerivedState(props, metrics);
 	const visibility = useScrollAreaVisibility({
-		props: options.props,
-		rootRef,
-		horizontalEnabled,
-		verticalEnabled,
-		overflowX: () => measurements.metrics.overflowX,
-		overflowY: () => measurements.metrics.overflowY
-	});
-	const controls = useScrollAreaControls({
-		viewportRef,
-		metrics: measurements,
-		showDuringScroll: visibility.showDuringScroll,
-		emitScroll: options.emitScroll,
-		emitPositionChange: options.emitPositionChange,
-		emitReachTop: options.emitReachTop,
-		emitReachBottom: options.emitReachBottom,
-		emitReachLeft: options.emitReachLeft,
-		emitReachRight: options.emitReachRight
+		getHideDelay: () => props.scrollHideDelay,
+		getType: () => props.type ?? "hover",
+		isScrollbarActive: (axis) => axis === "x" ? horizontalScrollbarActive.value : verticalScrollbarActive.value,
+		root: rootRef
 	});
-	const pointer = useScrollAreaPointer({
-		horizontalScrollbarRef,
-		verticalScrollbarRef,
-		metrics: measurements,
-		controls,
+	const { onScrollbarPointerdown, onThumbPointerdown } = useScrollAreaPointer({
+		elements: templateRefs,
+		isEmbedded: () => Boolean(props.embedded),
+		refreshAxis,
 		setDraggingAxis: visibility.setDraggingAxis,
-		shouldFocusScrollbar: () => !options.props.embedded
+		writeAxisPosition
 	});
-	watch([
-		visibility.horizontalScrollbarActive,
-		visibility.verticalScrollbarActive,
-		visibility.renderHorizontalScrollbar,
-		visibility.renderVerticalScrollbar
-	], () => void nextTick(measurements.scheduleUpdate));
-	return {
-		rootRef,
-		viewportRef,
-		contentRef,
-		horizontalScrollbarRef,
-		verticalScrollbarRef,
-		metrics: measurements.metrics,
-		position: measurements.position,
-		update: measurements.update,
-		getPosition: measurements.getPosition,
-		getMaxPosition: measurements.getMaxPosition,
-		getOverflow: measurements.getOverflow,
-		...visibility,
-		...controls,
-		...pointer
+	let previousPosition = {
+		x: 0,
+		y: 0
 	};
-}
-//#endregion
-//#region src/components/scroll-area/useScrollAreaPresentation.ts
-function useScrollAreaPresentation(props, scrollArea) {
-	const generatedId = useId();
-	const viewportId = computed(() => `${props.id || generatedId}-viewport`);
-	const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-	const rootAttrs = computed(() => getRootAttrs({
-		id: props.id,
-		class: "rp-scroll-area",
-		style: getRootStyle(props.scrollbarSize),
-		"data-type": props.type,
-		"data-scrollbars": props.scrollbars === false ? "none" : props.scrollbars,
-		"data-overflow-x": presence(scrollArea.metrics.overflowX),
-		"data-overflow-y": presence(scrollArea.metrics.overflowY),
-		"data-scrollbar-x-active": presence(scrollArea.horizontalScrollbarActive.value),
-		"data-scrollbar-y-active": presence(scrollArea.verticalScrollbarActive.value),
-		"data-scrollbar-x-visible": presence(scrollArea.horizontalScrollbarVisible.value),
-		"data-scrollbar-y-visible": presence(scrollArea.verticalScrollbarVisible.value),
-		onPointerenter: scrollArea.onPointerenter,
-		onPointerleave: scrollArea.onPointerleave,
-		onFocusin: scrollArea.onFocusin,
-		onFocusout: scrollArea.onFocusout
-	}));
-	const viewportAttrs = computed(() => {
-		const { class: compatibilityClass, style: compatibilityStyle, onScroll: compatibilityOnScroll, ...attrs } = props.viewportAttrs ?? {};
-		return {
-			...attrs,
-			...getPartAttrs("viewport", {
-				class: "rp-scroll-area__viewport",
-				compatibilityClass,
-				compatibilityStyle
-			}),
-			id: viewportId.value,
-			role: attrs.role ?? (hasAccessibleName(props, attrs) ? "region" : void 0),
-			tabindex: attrs.tabindex ?? 0,
-			"aria-label": props.ariaLabel || attrs["aria-label"] || void 0,
-			"aria-labelledby": props.ariaLabelledby || attrs["aria-labelledby"] || void 0,
-			"aria-describedby": props.ariaDescribedby || attrs["aria-describedby"] || void 0,
-			onScroll(event) {
-				scrollArea.onViewportScroll(event);
-				compatibilityOnScroll?.(event);
-			}
-		};
-	});
-	const contentAttrs = computed(() => {
-		const { class: compatibilityClass, style: compatibilityStyle, ...attrs } = props.contentAttrs ?? {};
-		return {
-			...attrs,
-			...getPartAttrs("content", {
-				class: "rp-scroll-area__content",
-				compatibilityClass,
-				compatibilityStyle
-			})
-		};
+	const { contentAttrs, cornerAttrs, horizontalScrollbarAttrs, horizontalThumbAttrs, rootAttrs, verticalScrollbarAttrs, verticalThumbAttrs, viewportAttrs } = useScrollAreaAttributes({
+		metrics,
+		onViewportScroll,
+		props,
+		rootHandlers: visibility.rootHandlers,
+		state: {
+			horizontalActive: horizontalScrollbarActive,
+			horizontalVisible: visibility.horizontalVisible,
+			verticalActive: verticalScrollbarActive,
+			verticalVisible: visibility.verticalVisible
+		},
+		viewport: viewportRef
 	});
-	const horizontalScrollbarAttrs = computed(() => getScrollbarAttrs("x"));
-	const verticalScrollbarAttrs = computed(() => getScrollbarAttrs("y"));
-	const horizontalThumbAttrs = computed(() => getThumbAttrs("x"));
-	const verticalThumbAttrs = computed(() => getThumbAttrs("y"));
-	const cornerAttrs = computed(() => ({
-		...getPartAttrs("corner", { class: "rp-scroll-area__corner" }),
-		"aria-hidden": true,
-		"data-visible": presence(scrollArea.horizontalScrollbarActive.value && scrollArea.verticalScrollbarActive.value)
-	}));
 	const slotProps = computed(() => ({
-		position: scrollArea.position.value,
-		overflowX: scrollArea.metrics.overflowX,
-		overflowY: scrollArea.metrics.overflowY,
-		scrollTo: scrollArea.scrollTo,
-		scrollBy: scrollArea.scrollBy,
-		update: scrollArea.update
+		position: {
+			x: metrics.x,
+			y: metrics.y
+		},
+		overflowX: metrics.overflowX,
+		overflowY: metrics.overflowY,
+		scrollTo,
+		scrollBy,
+		update
 	}));
-	function getScrollbarAttrs(axis) {
-		const vertical = axis === "y";
-		const active = vertical ? scrollArea.verticalScrollbarActive.value : scrollArea.horizontalScrollbarActive.value;
-		const visible = vertical ? scrollArea.verticalScrollbarVisible.value : scrollArea.horizontalScrollbarVisible.value;
-		return {
-			...getPartAttrs("scrollbar", { class: ["rp-scroll-area__scrollbar", `rp-scroll-area__scrollbar--${vertical ? "vertical" : "horizontal"}`] }),
-			role: "scrollbar",
-			tabindex: !props.embedded && active ? 0 : -1,
-			"aria-controls": scrollArea.viewportRef.value?.id || void 0,
-			"aria-orientation": vertical ? "vertical" : "horizontal",
-			"aria-valuemin": 0,
-			"aria-valuemax": scrollArea.getMaxPosition(axis),
-			"aria-valuenow": Math.round(scrollArea.getPosition(axis)),
-			"aria-disabled": !scrollArea.getOverflow(axis) || void 0,
-			"aria-hidden": props.embedded || !active || void 0,
-			"data-orientation": vertical ? "vertical" : "horizontal",
-			"data-active": presence(active),
-			"data-visible": presence(visible)
+	function refreshAxis(axis) {
+		updatePosition();
+		return getScrollAreaAxisState(metrics, axis);
+	}
+	function onViewportScroll(event) {
+		updatePosition();
+		visibility.showDuringScroll();
+		const position = {
+			x: getScrollAreaAxisPosition(metrics, "x"),
+			y: getScrollAreaAxisPosition(metrics, "y")
 		};
+		const reachedBoundaries = getReachedScrollAreaBoundaries(position, previousPosition, metrics);
+		previousPosition = position;
+		emit("scroll", event);
+		emit("scrollPositionChange", {
+			x: metrics.x,
+			y: metrics.y
+		});
+		for (const boundary of reachedBoundaries) emitReachedBoundary(boundary, event);
 	}
-	function getThumbAttrs(axis) {
-		const horizontal = axis === "x";
-		return getPartAttrs("thumb", {
-			class: "rp-scroll-area__thumb",
-			style: {
-				"--_rp-scroll-area-thumb-size": `${horizontal ? scrollArea.metrics.horizontalThumbSize : scrollArea.metrics.verticalThumbSize}%`,
-				"--_rp-scroll-area-thumb-offset": `${horizontal ? scrollArea.metrics.horizontalThumbOffset : scrollArea.metrics.verticalThumbOffset}%`
-			}
+	function emitReachedBoundary(boundary, event) {
+		switch (boundary) {
+			case "top":
+				emit("reachTop", event);
+				break;
+			case "bottom":
+				emit("reachBottom", event);
+				break;
+			case "left":
+				emit("reachLeft", event);
+				break;
+			case "right":
+				emit("reachRight", event);
+				break;
+		}
+	}
+	function writeAxisPosition(axis, value) {
+		const viewport = viewportRef.value;
+		if (!viewport) return;
+		if (axis === "x") viewport.scrollLeft = getRawHorizontalScrollPosition(value, getScrollAreaMaxPosition(metrics, "x"), metrics.direction);
+		else viewport.scrollTop = clamp(value, 0, getScrollAreaMaxPosition(metrics, "y"));
+		updatePosition();
+		visibility.showDuringScroll();
+	}
+	function onScrollbarKeydown(axis, event) {
+		const viewport = viewportRef.value;
+		if (!viewport || !getScrollAreaOverflow(metrics, axis)) return;
+		updatePosition(viewport);
+		const current = getScrollAreaAxisPosition(metrics, axis);
+		const pageSize = axis === "x" ? viewport.clientWidth : viewport.clientHeight;
+		const nextPosition = getKeyboardScrollPosition({
+			axis,
+			key: event.key,
+			current,
+			pageSize,
+			maxPosition: getScrollAreaMaxPosition(metrics, axis),
+			direction: metrics.direction,
+			lineStep: keyboardScrollStep
 		});
+		if (nextPosition === void 0) return;
+		event.preventDefault();
+		writeAxisPosition(axis, nextPosition);
 	}
+	function onScrollbarWheel(axis, event) {
+		if (!getScrollAreaOverflow(metrics, axis)) return;
+		updatePosition();
+		const delta = getWheelScrollDelta(axis, event, metrics.direction);
+		if (!delta) return;
+		event.preventDefault();
+		writeAxisPosition(axis, getScrollAreaAxisPosition(metrics, axis) + delta);
+	}
+	function scrollTo(scrollOptions) {
+		const viewport = viewportRef.value;
+		if (!viewport) return;
+		if (typeof viewport.scrollTo === "function") viewport.scrollTo(scrollOptions);
+		else applyFallbackScrollPosition(viewport, scrollOptions, "absolute");
+		schedulePositionUpdate();
+	}
+	function scrollBy(scrollOptions) {
+		const viewport = viewportRef.value;
+		if (!viewport) return;
+		if (typeof viewport.scrollBy === "function") viewport.scrollBy(scrollOptions);
+		else applyFallbackScrollPosition(viewport, scrollOptions, "relative");
+		schedulePositionUpdate();
+	}
+	watch([
+		horizontalScrollbarActive,
+		verticalScrollbarActive,
+		renderHorizontalScrollbar,
+		renderVerticalScrollbar
+	], () => void nextTick(scheduleUpdate));
 	return {
+		templateRefs,
+		renderHorizontalScrollbar,
+		renderVerticalScrollbar,
 		rootAttrs,
 		viewportAttrs,
 		contentAttrs,
@@ -642,22 +705,21 @@ function useScrollAreaPresentation(props, scrollArea) {
 		horizontalThumbAttrs,
 		verticalThumbAttrs,
 		cornerAttrs,
-		slotProps
+		slotProps,
+		onScrollbarKeydown,
+		onScrollbarWheel,
+		onScrollbarPointerdown,
+		onThumbPointerdown,
+		scrollTo,
+		scrollBy,
+		update
 	};
 }
-function getRootStyle(scrollbarSize) {
-	const length = getLengthValue(scrollbarSize);
-	return length ? { "--_rp-scroll-area-scrollbar-size": length } : {};
-}
-function hasAccessibleName(props, attrs) {
-	return Boolean(props.ariaLabel || props.ariaLabelledby || attrs["aria-label"] || attrs["aria-labelledby"]);
-}
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-f5c4e940><div data-v-f5c4e940></div>");
-var t1 = template("<div data-v-f5c4e940>");
-var t2 = template("<div data-v-f5c4e940><div data-v-f5c4e940><div data-v-f5c4e940></div></div>", 1);
-delegateEvents("pointerdown", "keydown");
+var t0 = template("<div data-v-cd2fe353><div data-v-cd2fe353></div>");
+var t1 = template("<div data-v-cd2fe353>");
+var t2 = template("<div data-v-cd2fe353><div data-v-cd2fe353><div data-v-cd2fe353></div></div>", 1);
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue
 var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -703,21 +765,9 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		"reachRight"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const scrollArea = useScrollArea({
-			props,
-			emitScroll: (event) => emit("scroll", event),
-			emitPositionChange: (position) => emit("scrollPositionChange", position),
-			emitReachTop: (event) => emit("reachTop", event),
-			emitReachBottom: (event) => emit("reachBottom", event),
-			emitReachLeft: (event) => emit("reachLeft", event),
-			emitReachRight: (event) => emit("reachRight", event)
-		});
-		const { rootRef, viewportRef, contentRef, horizontalScrollbarRef, verticalScrollbarRef, renderHorizontalScrollbar, renderVerticalScrollbar, onScrollbarKeydown, onScrollbarWheel, onScrollbarPointerdown, onThumbPointerdown, scrollTo, scrollBy, update } = scrollArea;
-		const { rootAttrs, viewportAttrs, contentAttrs, horizontalScrollbarAttrs, verticalScrollbarAttrs, horizontalThumbAttrs, verticalThumbAttrs, cornerAttrs, slotProps } = useScrollAreaPresentation(props, scrollArea);
+		const { templateRefs, renderHorizontalScrollbar, renderVerticalScrollbar, rootAttrs, viewportAttrs, contentAttrs, horizontalScrollbarAttrs, verticalScrollbarAttrs, horizontalThumbAttrs, verticalThumbAttrs, cornerAttrs, slotProps, onScrollbarKeydown, onScrollbarWheel, onScrollbarPointerdown, onThumbPointerdown, scrollTo, scrollBy, update } = useScrollArea(__props, __emit);
 		__expose({
-			viewport: viewportRef,
+			viewport: templateRefs.viewport,
 			scrollTo,
 			scrollBy,
 			update
@@ -733,20 +783,23 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		});
 		setInsertionState(n1, null, 0);
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-		_setTemplateRef(n1, contentRef, null, "contentRef");
-		_setTemplateRef(n2, viewportRef, null, "viewportRef");
+		renderEffect(() => {
+			const _templateRefs = unref(templateRefs);
+			_setTemplateRef(n1, _templateRefs.content);
+			_setTemplateRef(n2, _templateRefs.viewport);
+		});
 		setInsertionState(n14, null, 1);
 		createIf(() => unref(renderHorizontalScrollbar), () => {
 			const n6 = t0();
 			const n5 = child(n6);
-			n5.$evtpointerdown = createInvoker(($event) => unref(onThumbPointerdown)("x", $event));
-			n6.$evtkeydown = createInvoker(($event) => unref(onScrollbarKeydown)("x", $event));
-			n6.$evtpointerdown = createInvoker(($event) => unref(onScrollbarPointerdown)("x", $event));
+			on(n5, "pointerdown", ($event) => unref(onThumbPointerdown)("x", $event));
+			on(n6, "keydown", ($event) => unref(onScrollbarKeydown)("x", $event));
+			on(n6, "pointerdown", ($event) => unref(onScrollbarPointerdown)("x", $event));
 			on(n6, "wheel", ($event) => unref(onScrollbarWheel)("x", $event));
-			_setTemplateRef(n6, horizontalScrollbarRef, null, "horizontalScrollbarRef");
 			renderEffect(() => {
 				setDynamicProps(n6, [unref(horizontalScrollbarAttrs)]);
 				setDynamicProps(n5, [unref(horizontalThumbAttrs)]);
+				_setTemplateRef(n6, unref(templateRefs).horizontalScrollbar);
 			});
 			return n6;
 		});
@@ -754,14 +807,14 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createIf(() => unref(renderVerticalScrollbar), () => {
 			const n10 = t0();
 			const n9 = child(n10);
-			n9.$evtpointerdown = createInvoker(($event) => unref(onThumbPointerdown)("y", $event));
-			n10.$evtkeydown = createInvoker(($event) => unref(onScrollbarKeydown)("y", $event));
-			n10.$evtpointerdown = createInvoker(($event) => unref(onScrollbarPointerdown)("y", $event));
+			on(n9, "pointerdown", ($event) => unref(onThumbPointerdown)("y", $event));
+			on(n10, "keydown", ($event) => unref(onScrollbarKeydown)("y", $event));
+			on(n10, "pointerdown", ($event) => unref(onScrollbarPointerdown)("y", $event));
 			on(n10, "wheel", ($event) => unref(onScrollbarWheel)("y", $event));
-			_setTemplateRef(n10, verticalScrollbarRef, null, "verticalScrollbarRef");
 			renderEffect(() => {
 				setDynamicProps(n10, [unref(verticalScrollbarAttrs)]);
 				setDynamicProps(n9, [unref(verticalThumbAttrs)]);
+				_setTemplateRef(n10, unref(templateRefs).verticalScrollbar);
 			});
 			return n10;
 		});
@@ -771,9 +824,9 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			renderEffect(() => setDynamicProps(n13, [unref(cornerAttrs)]));
 			return n13;
 		});
-		_setTemplateRef(n14, rootRef, null, "rootRef");
+		setTemplateRefBinding(n14, () => unref(templateRefs).root);
 		return n14;
 	}
-}), [["__scopeId", "data-v-f5c4e940"]]);
+}), [["__scopeId", "data-v-cd2fe353"]]);
 //#endregion
 export { scroll_area_default as t };