ropav 0.1.2 → 0.1.4

package/dist/scroll-area.js

@@ -0,0 +1,779 @@
+import './scroll-area.css';
+import { n as useStylesApi, t as presence } from "./styles-api.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));
+}
+function isAxisEnabled(scrollbars, axis) {
+	if (scrollbars === false) return false;
+	if (axis === "x") return scrollbars === "x" || scrollbars === "both";
+	return scrollbars === "y" || scrollbars === "both";
+}
+function isScrollbarActive(type, enabled, overflowing) {
+	if (!enabled || type === "never") return false;
+	return type === "always" || overflowing;
+}
+function getThumbGeometry(trackSize, viewportSize, scrollSize) {
+	if (trackSize <= 0 || viewportSize <= 0 || scrollSize <= viewportSize) return {
+		size: 100,
+		offsetRatio: 1
+	};
+	const sizeRatio = clamp(viewportSize / scrollSize * trackSize, minimumThumbSize, trackSize) / trackSize;
+	return {
+		size: sizeRatio * 100,
+		offsetRatio: sizeRatio
+	};
+}
+function getThumbOffset(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) {
+	switch (key) {
+		case "ArrowLeft":
+		case "ArrowUp": return current - 40;
+		case "ArrowRight":
+		case "ArrowDown": return current + 40;
+		case "PageUp": return current - pageSize;
+		case "PageDown": return current + pageSize;
+		case "Home": return 0;
+		case "End": return max;
+		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;
+}
+//#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
+	};
+}
+//#endregion
+//#region src/components/scroll-area/useScrollAreaMetrics.ts
+function useScrollAreaMetrics(options) {
+	const metrics = reactive({
+		clientWidth: 0,
+		clientHeight: 0,
+		scrollWidth: 0,
+		scrollHeight: 0,
+		x: 0,
+		y: 0,
+		overflowX: false,
+		overflowY: false,
+		horizontalThumbSize: 100,
+		horizontalThumbOffset: 0,
+		verticalThumbSize: 100,
+		verticalThumbOffset: 0
+	});
+	const position = computed(() => ({
+		x: metrics.x,
+		y: metrics.y
+	}));
+	let resizeObserver;
+	let mutationObserver;
+	const scheduler = createRafScheduler(update, () => options.viewportRef.value?.ownerDocument.defaultView);
+	function update() {
+		const viewport = options.viewportRef.value;
+		if (!viewport) return;
+		readViewportMetrics(viewport);
+		updateThumbMetrics(viewport);
+	}
+	function readViewportMetrics(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.horizontalThumbSize = horizontalGeometry.size;
+		metrics.horizontalThumbOffset = getThumbOffset(clamp(Math.abs(viewport.scrollLeft), 0, getMaxPosition("x")), getMaxPosition("x"), 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);
+	}
+	function getOverflow(axis) {
+		return axis === "x" ? metrics.overflowX : metrics.overflowY;
+	}
+	function attachObservers() {
+		const viewport = options.viewportRef.value;
+		if (!viewport) return;
+		const view = viewport.ownerDocument.defaultView;
+		const ResizeObserverConstructor = view?.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);
+	}
+	function attachMutationObserver(view) {
+		const MutationObserverConstructor = view?.MutationObserver ?? globalThis.MutationObserver;
+		const content = options.contentRef.value;
+		if (!MutationObserverConstructor || !content) return;
+		const observer = new MutationObserverConstructor(scheduler.schedule);
+		mutationObserver = observer;
+		observer.observe(content, {
+			attributes: true,
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+	}
+	function detachObservers() {
+		const view = options.viewportRef.value?.ownerDocument.defaultView;
+		resizeObserver?.disconnect();
+		mutationObserver?.disconnect();
+		resizeObserver = void 0;
+		mutationObserver = void 0;
+		view?.removeEventListener("resize", scheduler.schedule);
+	}
+	onMounted(() => {
+		attachObservers();
+		nextTick(scheduler.schedule);
+	});
+	onBeforeUnmount(() => {
+		detachObservers();
+		scheduler.cancel();
+	});
+	return {
+		metrics,
+		position,
+		update,
+		scheduleUpdate: scheduler.schedule,
+		getPosition,
+		getMaxPosition,
+		getOverflow
+	};
+}
+//#endregion
+//#region src/components/scroll-area/useScrollAreaPointer.ts
+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 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;
+		event.preventDefault();
+		const ratio = clamp((coordinate - trackStart - thumbSize / 2) / travel, 0, 1);
+		options.controls.writeAxisPosition(axis, ratio * options.metrics.getMaxPosition(axis));
+	}
+	function onThumbPointerdown(axis, event) {
+		if (event.button !== 0 || event.isPrimary === false) return;
+		if (!options.metrics.getOverflow(axis)) 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 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);
+	}
+	function startDragging(axis, event, scrollbar, travel) {
+		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),
+			travel,
+			view
+		};
+		options.setDraggingAxis(axis);
+		view?.addEventListener("pointermove", onPointermove);
+		view?.addEventListener("pointerup", onPointerend);
+		view?.addEventListener("pointercancel", onPointerend);
+	}
+	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);
+	}
+	function onPointerend(event) {
+		if (!dragSession || !isCurrentPointer(event, dragSession)) return;
+		stopDragging();
+	}
+	function stopDragging() {
+		const view = dragSession?.view;
+		view?.removeEventListener("pointermove", onPointermove);
+		view?.removeEventListener("pointerup", onPointerend);
+		view?.removeEventListener("pointercancel", onPointerend);
+		dragSession = void 0;
+		options.setDraggingAxis(null);
+	}
+	function getScrollbar(axis) {
+		return axis === "x" ? options.horizontalScrollbarRef.value : options.verticalScrollbarRef.value;
+	}
+	onBeforeUnmount(stopDragging);
+	return {
+		onScrollbarPointerdown,
+		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 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;
+		}
+	}
+	function showDuringScroll() {
+		isScrolling.value = true;
+		resetScrollEndTimer();
+		scrollEndTimer = setTimeout(() => {
+			isScrolling.value = false;
+			scrollEndTimer = void 0;
+		}, normalizeDelay(options.props.scrollHideDelay));
+	}
+	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();
+	});
+	onBeforeUnmount(resetScrollEndTimer);
+	return {
+		renderHorizontalScrollbar,
+		renderVerticalScrollbar,
+		horizontalScrollbarActive,
+		verticalScrollbarActive,
+		horizontalScrollbarVisible,
+		verticalScrollbarVisible,
+		showDuringScroll,
+		setDraggingAxis,
+		onPointerenter,
+		onPointerleave,
+		onFocusin,
+		onFocusout
+	};
+}
+function normalizeDelay(delay) {
+	return Number.isFinite(delay) ? Math.max(0, delay ?? 0) : 0;
+}
+//#endregion
+//#region src/components/scroll-area/useScrollArea.ts
+function useScrollArea(options) {
+	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 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
+	});
+	const pointer = useScrollAreaPointer({
+		horizontalScrollbarRef,
+		verticalScrollbarRef,
+		metrics: measurements,
+		controls,
+		setDraggingAxis: visibility.setDraggingAxis,
+		shouldFocusScrollbar: () => !options.props.embedded
+	});
+	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
+	};
+}
+//#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 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
+	}));
+	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 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}%`
+			}
+		});
+	}
+	return {
+		rootAttrs,
+		viewportAttrs,
+		contentAttrs,
+		horizontalScrollbarAttrs,
+		verticalScrollbarAttrs,
+		horizontalThumbAttrs,
+		verticalThumbAttrs,
+		cornerAttrs,
+		slotProps
+	};
+}
+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");
+//#endregion
+//#region src/components/scroll-area/scroll-area.vue
+var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpScrollArea",
+	inheritAttrs: false,
+	__name: "scroll-area",
+	props: {
+		id: String,
+		embedded: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: String,
+			default: "hover"
+		},
+		scrollbars: {
+			type: [String, Boolean],
+			default: "both"
+		},
+		scrollbarSize: {
+			type: [Number, String],
+			default: 10
+		},
+		scrollHideDelay: {
+			type: Number,
+			default: 600
+		},
+		ariaLabel: String,
+		ariaLabelledby: String,
+		ariaDescribedby: String,
+		viewportAttrs: Object,
+		contentAttrs: Object,
+		classNames: Object,
+		styles: Object
+	},
+	emits: [
+		"scroll",
+		"scrollPositionChange",
+		"reachTop",
+		"reachBottom",
+		"reachLeft",
+		"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);
+		__expose({
+			viewport: viewportRef,
+			scrollTo,
+			scrollBy,
+			update
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n14 = t2();
+		const n2 = child(n14);
+		const n1 = child(n2);
+		renderEffect(() => {
+			setDynamicProps(n14, [unref(rootAttrs)]);
+			setDynamicProps(n2, [unref(viewportAttrs)]);
+			setDynamicProps(n1, [unref(contentAttrs)]);
+		});
+		setInsertionState(n1, null, 0);
+		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+		_setTemplateRef(n1, contentRef, null, "contentRef");
+		_setTemplateRef(n2, viewportRef, null, "viewportRef");
+		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(n6, "wheel", ($event) => unref(onScrollbarWheel)("x", $event));
+			_setTemplateRef(n6, horizontalScrollbarRef, null, "horizontalScrollbarRef");
+			renderEffect(() => {
+				setDynamicProps(n6, [unref(horizontalScrollbarAttrs)]);
+				setDynamicProps(n5, [unref(horizontalThumbAttrs)]);
+			});
+			return n6;
+		});
+		setInsertionState(n14, null, 2);
+		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(n10, "wheel", ($event) => unref(onScrollbarWheel)("y", $event));
+			_setTemplateRef(n10, verticalScrollbarRef, null, "verticalScrollbarRef");
+			renderEffect(() => {
+				setDynamicProps(n10, [unref(verticalScrollbarAttrs)]);
+				setDynamicProps(n9, [unref(verticalThumbAttrs)]);
+			});
+			return n10;
+		});
+		setInsertionState(n14, null, 3);
+		createIf(() => unref(renderHorizontalScrollbar) && unref(renderVerticalScrollbar), () => {
+			const n13 = t1();
+			renderEffect(() => setDynamicProps(n13, [unref(cornerAttrs)]));
+			return n13;
+		});
+		_setTemplateRef(n14, rootRef, null, "rootRef");
+		return n14;
+	}
+}), [["__scopeId", "data-v-f5c4e940"]]);
+//#endregion
+export { scroll_area_default as t };