solid-baseui 0.1.0-alpha.0

package/dist/lib/server/scroll-area/index.js

@@ -0,0 +1,993 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
+import { mergeStyles } from "../internals/mergeStyles.js";
+import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrHydrationKey } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
+import { makeResizeObserver } from "@solid-primitives/resize-observer";
+import { makeEventListener } from "@solid-primitives/event-listener";
+//#region src/scroll-area/utils/dom.ts
+function getEventElement(event) {
+	const target = event.composedPath()[0] ?? event.target;
+	if (!target || typeof target.nodeType !== "number") return null;
+	const node = target;
+	return node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+}
+function contains(container, target) {
+	if (!container || !target || typeof target.nodeType !== "number") return false;
+	let node = target;
+	while (node) {
+		if (container.contains(node)) return true;
+		const root = node.getRootNode();
+		node = root.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in root ? root.host : null;
+	}
+	return false;
+}
+//#endregion
+//#region src/scroll-area/utils/getOffset.ts
+function getOffset(element, property, axis) {
+	if (!element) return 0;
+	const styles = element.ownerDocument.defaultView?.getComputedStyle(element);
+	if (!styles) return 0;
+	const key = `${property}${axis === "x" ? "Inline" : "Block"}`;
+	const start = Number.parseFloat(styles[`${key}Start`]) || 0;
+	if (axis === "x" && property === "margin") return start * 2;
+	return start + (Number.parseFloat(styles[`${key}End`]) || 0);
+}
+//#endregion
+//#region src/scroll-area/root/ScrollAreaRootContext.ts
+var MISSING_CONTEXT$2 = Symbol("ScrollAreaRootContext");
+var ScrollAreaRootContext = createContext(MISSING_CONTEXT$2);
+function useScrollAreaRootContext() {
+	const context = useContext(ScrollAreaRootContext);
+	if (context === MISSING_CONTEXT$2) throw new Error("Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollArea.Root>.");
+	return context;
+}
+//#endregion
+//#region src/scroll-area/root/stateAttributes.ts
+var booleanAttribute = (name) => (value) => value ? { [name]: "" } : null;
+var scrollAreaStateAttributesMapping = {
+	hasOverflowX: booleanAttribute("data-has-overflow-x"),
+	hasOverflowY: booleanAttribute("data-has-overflow-y"),
+	overflowXStart: booleanAttribute("data-overflow-x-start"),
+	overflowXEnd: booleanAttribute("data-overflow-x-end"),
+	overflowYStart: booleanAttribute("data-overflow-y-start"),
+	overflowYEnd: booleanAttribute("data-overflow-y-end"),
+	cornerHidden: () => null
+};
+//#endregion
+//#region src/scroll-area/root/ScrollAreaRoot.tsx
+var _tmpl$ = [
+	"<style",
+	"",
+	">.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}</style>"
+];
+var DEFAULT_SIZE = {
+	width: 0,
+	height: 0
+};
+var DEFAULT_OVERFLOW_EDGES = {
+	xStart: false,
+	xEnd: false,
+	yStart: false,
+	yEnd: false
+};
+var DEFAULT_HIDDEN_STATE = {
+	x: true,
+	y: true,
+	corner: true
+};
+/** Groups all parts of the scroll area. */
+function ScrollAreaRoot(props) {
+	const csp = useCSPContext();
+	const internalProps = props;
+	const allProps = props;
+	const rootId = `base-ui-${createUniqueId()}`;
+	const [viewportElement, setViewportElement] = createSignal();
+	const [scrollbarYElement, setScrollbarYElement] = createSignal();
+	const [scrollbarXElement, setScrollbarXElement] = createSignal();
+	const [thumbYElement, setThumbYElement] = createSignal();
+	const [thumbXElement, setThumbXElement] = createSignal();
+	const [cornerElement, setCornerElement] = createSignal();
+	const [hovering, setHovering] = createSignal(false);
+	const [scrollingX, setScrollingX] = createSignal(false);
+	const [scrollingY, setScrollingY] = createSignal(false);
+	const [touchModality, setTouchModality] = createSignal(false);
+	const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = createSignal(false);
+	const [cornerSize, setCornerSizeSignal] = createSignal(DEFAULT_SIZE);
+	const [thumbSize, setThumbSizeSignal] = createSignal(DEFAULT_SIZE);
+	const [overflowEdges, setOverflowEdgesSignal] = createSignal(DEFAULT_OVERFLOW_EDGES);
+	const [hiddenState, setHiddenStateSignal] = createSignal(DEFAULT_HIDDEN_STATE);
+	let rootElement;
+	let activePointerId = null;
+	let startY = 0;
+	let startX = 0;
+	let startScrollTop = 0;
+	let startScrollLeft = 0;
+	let currentOrientation = "vertical";
+	let scrollPosition = {
+		x: 0,
+		y: 0
+	};
+	let savedSnapType = null;
+	let scrollXTimer;
+	let scrollYTimer;
+	const others = omit(allProps, "as", "children", "class", "onPointerDown", "onPointerEnter", "onPointerLeave", "onPointerMove", "overflowEdgeThreshold", "ref", "style");
+	const overflowEdgeThreshold = createMemo(() => normalizeOverflowEdgeThreshold(internalProps.overflowEdgeThreshold));
+	const state = createMemo(() => {
+		const hidden = hiddenState();
+		const edges = overflowEdges();
+		return {
+			scrolling: scrollingX() || scrollingY(),
+			hasOverflowX: !hidden.x,
+			hasOverflowY: !hidden.y,
+			overflowXStart: edges.xStart,
+			overflowXEnd: edges.xEnd,
+			overflowYStart: edges.yStart,
+			overflowYEnd: edges.yEnd,
+			cornerHidden: hidden.corner
+		};
+	});
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const size = cornerSize();
+		const external = resolveStyle(props.style, state());
+		if (typeof external === "string") return `position:relative;--scroll-area-corner-height:${size.height}px;--scroll-area-corner-width:${size.width}px;${external}`;
+		return mergeStyles({
+			position: "relative",
+			"--scroll-area-corner-height": `${size.height}px`,
+			"--scroll-area-corner-width": `${size.width}px`
+		}, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), scrollAreaStateAttributesMapping));
+	function setCornerSize(next) {
+		setCornerSizeSignal((previous) => sameSize(previous, next) ? previous : next);
+	}
+	function setThumbSize(next) {
+		setThumbSizeSignal((previous) => sameSize(previous, next) ? previous : next);
+	}
+	function setHiddenState(next) {
+		setHiddenStateSignal((previous) => sameHiddenState(previous, next) ? previous : next);
+	}
+	function setOverflowEdges(next) {
+		setOverflowEdgesSignal((previous) => sameOverflowEdges(previous, next) ? previous : next);
+	}
+	function startScrolling(vertical) {
+		const existingTimer = vertical ? scrollYTimer : scrollXTimer;
+		if (existingTimer !== void 0) clearTimeout(existingTimer);
+		(vertical ? setScrollingY : setScrollingX)(true);
+		const timer = setTimeout(() => {
+			(vertical ? setScrollingY : setScrollingX)(false);
+		}, 500);
+		if (vertical) scrollYTimer = timer;
+		else scrollXTimer = timer;
+	}
+	function handleScroll(nextPosition) {
+		const offsetX = nextPosition.x - scrollPosition.x;
+		const offsetY = nextPosition.y - scrollPosition.y;
+		scrollPosition = nextPosition;
+		if (offsetY !== 0) startScrolling(true);
+		if (offsetX !== 0) startScrolling(false);
+	}
+	function disableViewportSnap() {
+		const viewport = viewportElement();
+		if (viewport && savedSnapType === null) {
+			savedSnapType = viewport.style.scrollSnapType;
+			viewport.style.scrollSnapType = "none";
+		}
+	}
+	function handlePointerDown(event, orientation) {
+		if (event.button !== 0) return;
+		if (activePointerId !== null) {
+			if ((currentOrientation === "vertical" ? thumbYElement() : thumbXElement())?.hasPointerCapture?.(activePointerId)) return;
+		}
+		activePointerId = event.pointerId;
+		currentOrientation = orientation;
+		startY = event.clientY;
+		startX = event.clientX;
+		const viewport = viewportElement();
+		if (viewport) {
+			startScrollTop = viewport.scrollTop;
+			startScrollLeft = viewport.scrollLeft;
+			disableViewportSnap();
+		}
+		(orientation === "vertical" ? thumbYElement() : thumbXElement())?.setPointerCapture?.(event.pointerId);
+	}
+	function restoreViewportSnap() {
+		if (savedSnapType !== null) {
+			const viewport = viewportElement();
+			if (viewport) viewport.style.scrollSnapType = savedSnapType;
+			savedSnapType = null;
+		}
+	}
+	function handlePointerUp(event) {
+		if (event.pointerId !== activePointerId) return;
+		activePointerId = null;
+		(currentOrientation === "vertical" ? setScrollingY : setScrollingX)(false);
+		restoreViewportSnap();
+		const thumb = currentOrientation === "vertical" ? thumbYElement() : thumbXElement();
+		if (thumb?.hasPointerCapture?.(event.pointerId)) thumb.releasePointerCapture(event.pointerId);
+	}
+	function handlePointerMove(event) {
+		if (event.pointerId !== activePointerId) return;
+		if ((event.buttons & 1) === 0) {
+			handlePointerUp(event);
+			return;
+		}
+		const viewport = viewportElement();
+		const vertical = currentOrientation === "vertical";
+		const thumb = vertical ? thumbYElement() : thumbXElement();
+		const scrollbar = vertical ? scrollbarYElement() : scrollbarXElement();
+		if (!viewport || !thumb || !scrollbar) return;
+		const axis = vertical ? "y" : "x";
+		const scrollbarOffset = getOffset(scrollbar, "padding", axis);
+		const thumbOffset = getOffset(thumb, "margin", axis);
+		const thumbLength = vertical ? thumb.offsetHeight : thumb.offsetWidth;
+		const maxThumbOffset = (vertical ? scrollbar.offsetHeight : scrollbar.offsetWidth) - thumbLength - scrollbarOffset - thumbOffset;
+		const delta = vertical ? event.clientY - startY : event.clientX - startX;
+		const scrollRatio = maxThumbOffset <= 0 ? 0 : delta / maxThumbOffset;
+		const scrollableLength = vertical ? viewport.scrollHeight : viewport.scrollWidth;
+		const viewportLength = vertical ? viewport.clientHeight : viewport.clientWidth;
+		const nextScroll = (vertical ? startScrollTop : startScrollLeft) + scrollRatio * (scrollableLength - viewportLength);
+		if (vertical) viewport.scrollTop = nextScroll;
+		else viewport.scrollLeft = nextScroll;
+		event.preventDefault();
+		startScrolling(vertical);
+	}
+	function handleTouchModalityChange(event) {
+		setTouchModality(event.pointerType === "touch");
+	}
+	function handlePointerEnterOrMove(event) {
+		handleTouchModalityChange(event);
+		if (event.pointerType !== "touch") setHovering(contains(rootElement, event.target));
+	}
+	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => handlePointerEnterOrMove);
+	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerEnterOrMove);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handleTouchModalityChange);
+	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => () => setHovering(false));
+	const context = {
+		cornerElement,
+		cornerSize,
+		disableViewportSnap,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handleScroll,
+		hasMeasuredScrollbar,
+		hiddenState,
+		hovering,
+		overflowEdges,
+		overflowEdgeThreshold,
+		rootId,
+		scrollbarXElement,
+		scrollbarYElement,
+		scrollingX,
+		scrollingY,
+		setCornerElement,
+		setCornerSize,
+		setHasMeasuredScrollbar,
+		setHiddenState,
+		setHovering,
+		setOverflowEdges,
+		setScrollbarXElement,
+		setScrollbarYElement,
+		setThumbSize,
+		setThumbXElement,
+		setThumbYElement,
+		setViewportElement,
+		state,
+		thumbSize,
+		thumbXElement,
+		thumbYElement,
+		touchModality,
+		viewportElement
+	};
+	onCleanup(() => {
+		if (scrollXTimer !== void 0) clearTimeout(scrollXTimer);
+		if (scrollYTimer !== void 0) clearTimeout(scrollYTimer);
+		restoreViewportSnap();
+		if (activePointerId !== null) {
+			const thumb = currentOrientation === "vertical" ? thumbYElement() : thumbXElement();
+			if (thumb?.hasPointerCapture?.(activePointerId)) thumb.releasePointerCapture(activePointerId);
+		}
+	});
+	return ScrollAreaRootContext({
+		value: context,
+		get children() {
+			return [memo(() => {
+				var _v$, _v$2;
+				return escape(memo(() => {
+					return !csp.disableStyleElements();
+				})() && (_v$ = ssrHydrationKey(), _v$2 = () => {
+					return ssrAttribute("nonce", escape(csp.nonce(), true));
+				}, ssr(_tmpl$, _v$, _v$2)));
+			}), Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => {
+					rootElement = element;
+				}), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "presentation",
+				onPointerEnter,
+				onPointerMove,
+				onPointerDown,
+				onPointerLeave
+			}, stateAttributes, others, { get children() {
+				return internalProps.children;
+			} }))];
+		}
+	});
+}
+function normalizeOverflowEdgeThreshold(threshold) {
+	const values = typeof threshold === "number" ? {
+		xStart: threshold,
+		xEnd: threshold,
+		yStart: threshold,
+		yEnd: threshold
+	} : threshold;
+	return {
+		xStart: Math.max(0, values?.xStart || 0),
+		xEnd: Math.max(0, values?.xEnd || 0),
+		yStart: Math.max(0, values?.yStart || 0),
+		yEnd: Math.max(0, values?.yEnd || 0)
+	};
+}
+function sameSize(a, b) {
+	return a.width === b.width && a.height === b.height;
+}
+function sameHiddenState(a, b) {
+	return a.x === b.x && a.y === b.y && a.corner === b.corner;
+}
+function sameOverflowEdges(a, b) {
+	return a.xStart === b.xStart && a.xEnd === b.xEnd && a.yStart === b.yStart && a.yEnd === b.yEnd;
+}
+//#endregion
+//#region src/scroll-area/utils/scrollEdges.ts
+var EDGE_TOLERANCE = 1;
+function normalizeScrollOffset(offset, maxOffset) {
+	if (maxOffset <= 0) return 0;
+	const clamped = Math.max(0, Math.min(offset, maxOffset));
+	const startDistance = clamped;
+	const endDistance = maxOffset - clamped;
+	const withinStartTolerance = startDistance <= EDGE_TOLERANCE;
+	const withinEndTolerance = endDistance <= EDGE_TOLERANCE;
+	if (withinStartTolerance && withinEndTolerance) return startDistance <= endDistance ? 0 : maxOffset;
+	if (withinStartTolerance) return 0;
+	if (withinEndTolerance) return maxOffset;
+	return clamped;
+}
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewportContext.ts
+var MISSING_CONTEXT$1 = Symbol("ScrollAreaViewportContext");
+var ScrollAreaViewportContext = createContext(MISSING_CONTEXT$1);
+function useScrollAreaViewportContext() {
+	const context = useContext(ScrollAreaViewportContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: ScrollAreaViewportContext missing. ScrollAreaViewport parts must be placed within <ScrollArea.Viewport>.");
+	return context;
+}
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewport.tsx
+var OVERFLOW_EDGE_VARS = [
+	"--scroll-area-overflow-x-start",
+	"--scroll-area-overflow-x-end",
+	"--scroll-area-overflow-y-start",
+	"--scroll-area-overflow-y-end"
+];
+var overflowVariablesRegistered = false;
+/** The native scrollable container of the scroll area. */
+function ScrollAreaViewport(props) {
+	const root = useScrollAreaRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const others = omit(props, "as", "children", "class", "onKeyDown", "onPointerEnter", "onPointerMove", "onScroll", "onWheel", "ref", "style");
+	const state = createMemo(() => root.state());
+	const classValue = createMemo(() => ["base-ui-disable-scrollbar", resolveClass(props.class, state())]);
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, state());
+		if (typeof external === "string") return `overflow:scroll;${external}`;
+		return mergeStyles({ overflow: "scroll" }, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), scrollAreaStateAttributesMapping));
+	const lastMeasuredMetrics = [
+		NaN,
+		NaN,
+		NaN,
+		NaN
+	];
+	let programmaticScroll = true;
+	let scrollEndTimer;
+	let animationTimer;
+	let observedViewport;
+	let observerInitialized = false;
+	let ownElement;
+	function computeThumbPosition() {
+		const viewport = root.viewportElement();
+		if (!viewport) return;
+		const scrollbarY = root.scrollbarYElement();
+		const scrollbarX = root.scrollbarXElement();
+		const thumbY = root.thumbYElement();
+		const thumbX = root.thumbXElement();
+		const corner = root.cornerElement();
+		const contentHeight = viewport.scrollHeight;
+		const contentWidth = viewport.scrollWidth;
+		const viewportHeight = viewport.clientHeight;
+		const viewportWidth = viewport.clientWidth;
+		const scrollTop = viewport.scrollTop;
+		const scrollLeft = viewport.scrollLeft;
+		const firstMeasurement = Number.isNaN(lastMeasuredMetrics[0]);
+		lastMeasuredMetrics[0] = viewportHeight;
+		lastMeasuredMetrics[1] = contentHeight;
+		lastMeasuredMetrics[2] = viewportWidth;
+		lastMeasuredMetrics[3] = contentWidth;
+		if (firstMeasurement) root.setHasMeasuredScrollbar(true);
+		if (contentHeight === 0 || contentWidth === 0) return;
+		const nextHiddenState = getHiddenState(viewport);
+		const ratioX = viewportWidth / contentWidth;
+		const ratioY = viewportHeight / contentHeight;
+		const maxScrollLeft = Math.max(0, contentWidth - viewportWidth);
+		const maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+		const scrollLeftFromStart = nextHiddenState.x ? 0 : normalizeScrollOffset(direction() === "rtl" ? -scrollLeft : scrollLeft, maxScrollLeft);
+		const scrollLeftFromEnd = nextHiddenState.x ? 0 : maxScrollLeft - scrollLeftFromStart;
+		const scrollTopFromStart = nextHiddenState.y ? 0 : normalizeScrollOffset(scrollTop, maxScrollTop);
+		const scrollTopFromEnd = nextHiddenState.y ? 0 : maxScrollTop - scrollTopFromStart;
+		const nextWidth = nextHiddenState.x ? 0 : viewportWidth;
+		const nextHeight = nextHiddenState.y ? 0 : viewportHeight;
+		let nextCornerWidth = 0;
+		let nextCornerHeight = 0;
+		if (!nextHiddenState.x && !nextHiddenState.y) {
+			nextCornerWidth = scrollbarY?.offsetWidth || 0;
+			nextCornerHeight = scrollbarX?.offsetHeight || 0;
+		}
+		const currentCornerSize = root.cornerSize();
+		const cornerNotYetSized = currentCornerSize.width === 0 && currentCornerSize.height === 0;
+		const scrollbarXOffset = getOffset(scrollbarX, "padding", "x");
+		const scrollbarYOffset = getOffset(scrollbarY, "padding", "y");
+		const thumbXOffset = getOffset(thumbX, "margin", "x");
+		const thumbYOffset = getOffset(thumbY, "margin", "y");
+		const idealWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+		const idealHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+		const maxWidth = scrollbarX ? Math.min(scrollbarX.offsetWidth - (cornerNotYetSized ? nextCornerWidth : 0), idealWidth) : idealWidth;
+		const maxHeight = scrollbarY ? Math.min(scrollbarY.offsetHeight - (cornerNotYetSized ? nextCornerHeight : 0), idealHeight) : idealHeight;
+		const nextThumbWidth = Math.max(16, maxWidth * ratioX);
+		const nextThumbHeight = Math.max(16, maxHeight * ratioY);
+		root.setThumbSize({
+			width: nextThumbWidth,
+			height: nextThumbHeight
+		});
+		if (scrollbarY && thumbY) {
+			const offset = applyOverscrollThumb(thumbY, "--scroll-area-thumb-height", scrollTop, maxScrollTop, contentHeight, nextThumbHeight, scrollbarY.offsetHeight - nextThumbHeight - scrollbarYOffset - thumbYOffset);
+			thumbY.style.transform = `translate3d(0,${offset}px,0)`;
+		}
+		if (scrollbarX && thumbX) {
+			const maxThumbOffset = scrollbarX.offsetWidth - nextThumbWidth - scrollbarXOffset - thumbXOffset;
+			const offset = applyOverscrollThumb(thumbX, "--scroll-area-thumb-width", direction() === "rtl" ? -scrollLeft : scrollLeft, maxScrollLeft, contentWidth, nextThumbWidth, maxThumbOffset);
+			thumbX.style.transform = `translate3d(${direction() === "rtl" ? -offset : offset}px,0,0)`;
+		}
+		const metrics = [
+			scrollLeftFromStart,
+			scrollLeftFromEnd,
+			scrollTopFromStart,
+			scrollTopFromEnd
+		];
+		OVERFLOW_EDGE_VARS.forEach((variable, index) => {
+			viewport.style.setProperty(variable, `${metrics[index]}px`);
+		});
+		if (corner) root.setCornerSize({
+			width: nextCornerWidth,
+			height: nextCornerHeight
+		});
+		root.setHiddenState(nextHiddenState);
+		const threshold = root.overflowEdgeThreshold();
+		root.setOverflowEdges({
+			xStart: !nextHiddenState.x && scrollLeftFromStart > threshold.xStart,
+			xEnd: !nextHiddenState.x && scrollLeftFromEnd > threshold.xEnd,
+			yStart: !nextHiddenState.y && scrollTopFromStart > threshold.yStart,
+			yEnd: !nextHiddenState.y && scrollTopFromEnd > threshold.yEnd
+		});
+	}
+	const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : makeResizeObserver((entries) => {
+		if (!observedViewport || !entries.some((entry) => entry.target === observedViewport)) return;
+		if (!observerInitialized) {
+			observerInitialized = true;
+			if (lastMeasuredMetrics[0] === observedViewport.clientHeight && lastMeasuredMetrics[1] === observedViewport.scrollHeight && lastMeasuredMetrics[2] === observedViewport.clientWidth && lastMeasuredMetrics[3] === observedViewport.scrollWidth) return;
+		}
+		computeThumbPosition();
+	});
+	createEffect(() => ({
+		hidden: root.hiddenState(),
+		direction: direction(),
+		threshold: root.overflowEdgeThreshold(),
+		viewport: root.viewportElement(),
+		scrollbarX: root.scrollbarXElement(),
+		scrollbarY: root.scrollbarYElement(),
+		thumbX: root.thumbXElement(),
+		thumbY: root.thumbYElement()
+	}), () => {
+		queueMicrotask(computeThumbPosition);
+	});
+	createEffect(root.viewportElement, (viewport) => {
+		if (!viewport || !resizeObserver) return;
+		observedViewport = viewport;
+		observerInitialized = false;
+		resizeObserver.observe(viewport);
+		animationTimer = setTimeout(() => {
+			const getAnimations = viewport.getAnimations?.bind(viewport);
+			const animations = getAnimations?.({ subtree: true }) ?? [];
+			if (animations.length > 0) Promise.allSettled(animations.map((animation) => animation.finished)).then(computeThumbPosition).catch(() => {});
+		}, 0);
+		return () => {
+			resizeObserver.unobserve(viewport);
+			if (observedViewport === viewport) observedViewport = void 0;
+			if (animationTimer !== void 0) {
+				clearTimeout(animationTimer);
+				animationTimer = void 0;
+			}
+		};
+	});
+	function handleUserInteraction() {
+		programmaticScroll = false;
+	}
+	function handleScroll() {
+		const viewport = root.viewportElement();
+		if (!viewport) return;
+		computeThumbPosition();
+		if (root.touchModality() || !programmaticScroll) root.handleScroll({
+			x: viewport.scrollLeft,
+			y: viewport.scrollTop
+		});
+		if (scrollEndTimer !== void 0) clearTimeout(scrollEndTimer);
+		scrollEndTimer = setTimeout(() => {
+			programmaticScroll = true;
+		}, 100);
+	}
+	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => handleScroll);
+	const onWheel = composeEventHandlers(() => internalProps.onWheel, () => handleUserInteraction);
+	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handleUserInteraction);
+	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => handleUserInteraction);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleUserInteraction);
+	const context = { computeThumbPosition };
+	onSettled(() => {
+		removeCSSVariableInheritance();
+		if (root.viewportElement()?.matches(":hover")) root.setHovering(true);
+	});
+	onCleanup(() => {
+		if (scrollEndTimer !== void 0) clearTimeout(scrollEndTimer);
+		if (animationTimer !== void 0) clearTimeout(animationTimer);
+		if (root.viewportElement() === ownElement) root.setViewportElement(void 0);
+	});
+	return ScrollAreaViewportContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => {
+					ownElement = element;
+					root.setViewportElement(element);
+				}), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "presentation",
+				get ["data-id"]() {
+					return `${root.rootId}-viewport`;
+				},
+				get tabindex() {
+					return root.hiddenState().x && root.hiddenState().y ? -1 : 0;
+				},
+				onScroll,
+				onWheel,
+				onPointerMove,
+				onPointerEnter,
+				onKeyDown
+			}, stateAttributes, others, { get children() {
+				return internalProps.children;
+			} }));
+		}
+	});
+}
+function getHiddenState(viewport) {
+	const y = viewport.clientHeight >= viewport.scrollHeight;
+	const x = viewport.clientWidth >= viewport.scrollWidth;
+	return {
+		x,
+		y,
+		corner: x || y
+	};
+}
+function applyOverscrollThumb(thumb, sizeVariable, scrollFromStart, maxScroll, contentSize, thumbSize, maxThumbOffset) {
+	const clamped = Math.max(0, Math.min(scrollFromStart, maxScroll));
+	const overscroll = scrollFromStart - clamped;
+	const nextSize = Math.max(16, thumbSize * contentSize / (contentSize + Math.abs(overscroll)));
+	thumb.style.setProperty(sizeVariable, overscroll ? `${nextSize}px` : "");
+	return (maxScroll ? clamped / maxScroll * maxThumbOffset : 0) + (overscroll > 0 ? thumbSize - nextSize : 0);
+}
+function removeCSSVariableInheritance() {
+	if (overflowVariablesRegistered || isWebKit()) return;
+	if (typeof CSS !== "undefined" && "registerProperty" in CSS) for (const name of OVERFLOW_EDGE_VARS) try {
+		CSS.registerProperty({
+			name,
+			syntax: "<length>",
+			inherits: false,
+			initialValue: "0px"
+		});
+	} catch {}
+	overflowVariablesRegistered = true;
+}
+function isWebKit() {
+	return typeof CSS !== "undefined" && Boolean(CSS.supports?.("-webkit-backdrop-filter:none"));
+}
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts
+var MISSING_CONTEXT = Symbol("ScrollAreaScrollbarContext");
+var ScrollAreaScrollbarContext = createContext(MISSING_CONTEXT);
+function useScrollAreaScrollbarContext() {
+	const context = useContext(ScrollAreaScrollbarContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.");
+	return context;
+}
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
+/** A vertical or horizontal custom scrollbar track. */
+function ScrollAreaScrollbar(props) {
+	const root = useScrollAreaRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "children", "class", "keepMounted", "onPointerCancel", "onPointerDown", "onPointerUp", "orientation", "ref", "style");
+	const orientation = createMemo(() => internalProps.orientation ?? "vertical");
+	const vertical = createMemo(() => orientation() === "vertical");
+	const isHidden = createMemo(() => vertical() ? root.hiddenState().y : root.hiddenState().x);
+	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || !isHidden());
+	const hideUntilMeasured = createMemo(() => !root.hasMeasuredScrollbar() && !(internalProps.keepMounted ?? false));
+	const state = createMemo(() => ({
+		...root.state(),
+		hovering: root.hovering(),
+		scrolling: vertical() ? root.scrollingY() : root.scrollingX(),
+		orientation: orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const size = root.thumbSize();
+		const external = resolveStyle(props.style, state());
+		const orientationStyle = vertical() ? `top:0;bottom:var(--scroll-area-corner-height);inset-inline-end:0;--scroll-area-thumb-height:${size.height}px;` : `inset-inline-start:0;inset-inline-end:var(--scroll-area-corner-width);bottom:0;--scroll-area-thumb-width:${size.width}px;`;
+		if (typeof external === "string") return `position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;visibility:${hideUntilMeasured() ? "hidden" : "visible"};${orientationStyle}${external}`;
+		return mergeStyles({
+			position: "absolute",
+			"touch-action": "none",
+			"-webkit-user-select": "none",
+			"user-select": "none",
+			visibility: hideUntilMeasured() ? "hidden" : void 0,
+			...vertical() ? {
+				top: 0,
+				bottom: "var(--scroll-area-corner-height)",
+				"inset-inline-end": 0,
+				"--scroll-area-thumb-height": `${size.height}px`
+			} : {
+				"inset-inline-start": 0,
+				"inset-inline-end": "var(--scroll-area-corner-width)",
+				bottom: 0,
+				"--scroll-area-thumb-width": `${size.width}px`
+			}
+		}, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), scrollAreaStateAttributesMapping));
+	createEffect(() => ({
+		element: element(),
+		render: shouldRender(),
+		vertical: vertical()
+	}), (current) => {
+		if (!current.element || !current.render) return;
+		const setter = current.vertical ? root.setScrollbarYElement : root.setScrollbarXElement;
+		const accessor = current.vertical ? root.scrollbarYElement : root.scrollbarXElement;
+		setter(current.element);
+		return () => {
+			if (untrack(accessor) === current.element) setter(void 0);
+		};
+	});
+	createEffect(() => ({
+		direction: direction(),
+		render: shouldRender(),
+		scrollbar: element(),
+		vertical: vertical(),
+		viewport: root.viewportElement()
+	}), (current) => {
+		if (!current.render || !current.scrollbar || !current.viewport) return;
+		const viewport = current.viewport;
+		const scrollbar = current.scrollbar;
+		const attach = () => makeEventListener(scrollbar, "wheel", (event) => {
+			if (event.ctrlKey) return;
+			const horizontal = !current.vertical;
+			const delta = horizontal ? event.deltaX : event.deltaY;
+			if (delta === 0) return;
+			const maxScroll = horizontal ? viewport.scrollWidth - viewport.clientWidth : viewport.scrollHeight - viewport.clientHeight;
+			const min = horizontal && current.direction === "rtl" ? -maxScroll : 0;
+			const max = horizontal && current.direction === "rtl" ? 0 : maxScroll;
+			const value = horizontal ? viewport.scrollLeft : viewport.scrollTop;
+			if (value <= min && delta < 0 || value >= max && delta > 0) return;
+			event.preventDefault();
+			const next = Math.min(max, Math.max(min, value + delta));
+			if (horizontal) viewport.scrollLeft = next;
+			else viewport.scrollTop = next;
+			root.handleScroll({
+				x: viewport.scrollLeft,
+				y: viewport.scrollTop
+			});
+		}, { passive: false });
+		return createRoot((dispose) => {
+			const clear = attach();
+			return () => {
+				clear();
+				dispose();
+			};
+		});
+	});
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		const thumb = vertical() ? root.thumbYElement() : root.thumbXElement();
+		if (thumb && contains(thumb, getEventElement(event))) return;
+		const viewport = root.viewportElement();
+		const scrollbar = element();
+		if (!viewport || !thumb || !scrollbar) return;
+		const axis = vertical() ? "y" : "x";
+		const thumbOffset = getOffset(thumb, "margin", axis);
+		const scrollbarOffset = getOffset(scrollbar, "padding", axis);
+		const thumbLength = vertical() ? thumb.offsetHeight : thumb.offsetWidth;
+		const rect = scrollbar.getBoundingClientRect();
+		const clickPosition = vertical() ? event.clientY - rect.top - thumbLength / 2 - scrollbarOffset + thumbOffset / 2 : event.clientX - rect.left - thumbLength / 2 - scrollbarOffset + thumbOffset / 2;
+		const scrollableLength = vertical() ? viewport.scrollHeight : viewport.scrollWidth;
+		const viewportLength = vertical() ? viewport.clientHeight : viewport.clientWidth;
+		const maxThumbOffset = (vertical() ? scrollbar.offsetHeight : scrollbar.offsetWidth) - thumbLength - scrollbarOffset - thumbOffset;
+		if (maxThumbOffset <= 0) return;
+		const ratio = clickPosition / maxThumbOffset;
+		const maxScrollDistance = scrollableLength - viewportLength;
+		root.disableViewportSnap();
+		if (vertical()) viewport.scrollTop = ratio * maxScrollDistance;
+		else if (direction() === "rtl") viewport.scrollLeft = -(1 - ratio) * maxScrollDistance;
+		else viewport.scrollLeft = ratio * maxScrollDistance;
+		root.handleScroll({
+			x: viewport.scrollLeft,
+			y: viewport.scrollTop
+		});
+		root.handlePointerDown(event, orientation());
+	}
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
+	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return ScrollAreaScrollbarContext({
+				value: orientation,
+				get children() {
+					return Dynamic(mergeProps({
+						get component() {
+							return props.as ?? "div";
+						},
+						ref: [((current) => setElement(current)), internalProps.ref],
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						},
+						get ["data-id"]() {
+							return `${root.rootId}-scrollbar`;
+						},
+						onPointerDown,
+						onPointerUp,
+						onPointerCancel
+					}, stateAttributes, others, { get children() {
+						return internalProps.children;
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/scroll-area/content/ScrollAreaContent.tsx
+/** Contains the scroll area's content and observes dynamic size changes. */
+function ScrollAreaContent(props) {
+	const viewport = useScrollAreaViewportContext();
+	const root = useScrollAreaRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "children", "class", "ref", "style");
+	const state = createMemo(() => root.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, state());
+		if (typeof external === "string") return `min-width:fit-content;${external}`;
+		return mergeStyles({ "min-width": "fit-content" }, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), scrollAreaStateAttributesMapping));
+	const computeOnInitialResize = untrack(root.hasMeasuredScrollbar);
+	let observedElement;
+	let initialized = false;
+	const [contentElement, setContentElement] = createSignal();
+	const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : makeResizeObserver((entries) => {
+		if (!observedElement || !entries.some((entry) => entry.target === observedElement)) return;
+		if (!initialized) {
+			initialized = true;
+			if (!computeOnInitialResize) return;
+		}
+		viewport.computeThumbPosition();
+	});
+	createEffect(contentElement, (element) => {
+		if (!element || !resizeObserver) return;
+		observedElement = element;
+		initialized = false;
+		resizeObserver.observe(element);
+		return () => {
+			resizeObserver.unobserve(element);
+			if (observedElement === element) observedElement = void 0;
+		};
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => setContentElement(element)), internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		role: "presentation"
+	}, stateAttributes, others, { get children() {
+		return internalProps.children;
+	} }));
+}
+//#endregion
+//#region src/scroll-area/thumb/ScrollAreaThumb.tsx
+/** The draggable indicator for the current scroll position. */
+function ScrollAreaThumb(props) {
+	const root = useScrollAreaRootContext();
+	const orientation = useScrollAreaScrollbarContext();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "children", "class", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style");
+	const vertical = createMemo(() => orientation() === "vertical");
+	const state = createMemo(() => ({
+		scrolling: vertical() ? root.scrollingY() : root.scrollingX(),
+		orientation: orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, state());
+		const sizeStyle = vertical() ? "height:var(--scroll-area-thumb-height);" : "width:var(--scroll-area-thumb-width);";
+		if (typeof external === "string") return `visibility:${root.hasMeasuredScrollbar() ? "visible" : "hidden"};${sizeStyle}${external}`;
+		return mergeStyles({
+			visibility: root.hasMeasuredScrollbar() ? void 0 : "hidden",
+			...vertical() ? { height: "var(--scroll-area-thumb-height)" } : { width: "var(--scroll-area-thumb-width)" }
+		}, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	createEffect(() => ({
+		element: element(),
+		vertical: vertical()
+	}), (current) => {
+		if (!current.element) return;
+		const setter = current.vertical ? root.setThumbYElement : root.setThumbXElement;
+		const accessor = current.vertical ? root.thumbYElement : root.thumbXElement;
+		setter(current.element);
+		return () => {
+			if (untrack(accessor) === current.element) setter(void 0);
+		};
+	});
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => root.handlePointerDown(event, orientation()));
+	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => root.handlePointerMove);
+	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
+	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((current) => setElement(current)), internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel
+	}, stateAttributes, others, { get children() {
+		return internalProps.children;
+	} }));
+}
+//#endregion
+//#region src/scroll-area/corner/ScrollAreaCorner.tsx
+/** Fills the intersection between horizontal and vertical scrollbars. */
+function ScrollAreaCorner(props) {
+	const root = useScrollAreaRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	const state = {};
+	const shouldRender = createMemo(() => !root.hiddenState().corner);
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => {
+		const size = root.cornerSize();
+		const external = resolveStyle(props.style, state);
+		if (typeof external === "string") return `position:absolute;bottom:0;inset-inline-end:0;width:${size.width}px;height:${size.height}px;${external}`;
+		return mergeStyles({
+			position: "absolute",
+			bottom: 0,
+			"inset-inline-end": 0,
+			width: `${size.width}px`,
+			height: `${size.height}px`
+		}, external === false ? void 0 : external);
+	});
+	createEffect(() => ({
+		element: element(),
+		render: shouldRender()
+	}), (current) => {
+		if (!current.element || !current.render) {
+			if (!current.render) root.setCornerSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		root.setCornerElement(current.element);
+		return () => {
+			if (untrack(root.cornerElement) === current.element) root.setCornerElement(void 0);
+		};
+	});
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((current) => setElement(current)), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, others, { get children() {
+				return internalProps.children;
+			} }));
+		}
+	});
+}
+//#endregion
+//#region src/scroll-area/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => ScrollAreaContent,
+	Corner: () => ScrollAreaCorner,
+	Root: () => ScrollAreaRoot,
+	Scrollbar: () => ScrollAreaScrollbar,
+	Thumb: () => ScrollAreaThumb,
+	Viewport: () => ScrollAreaViewport
+});
+//#endregion
+export { index_parts_exports as ScrollArea };