ropav 0.3.1 → 0.5.0

package/dist/components/toggle-button-group/toggle-button-group-root.js

@@ -61,6 +61,7 @@ var toggle_button_group_root_vue_vue_type_script_setup_true_vapor_true_lang_defa
 		* `role="radio"` + `aria-checked` instead of `aria-pressed`.
 		*/
 		const role = computed(() => state.selectionMode.value === "single" ? "radiogroup" : toolbar.role.value);
+		const ariaOrientation = computed(() => role.value === "group" ? void 0 : resolvedOrientation.value);
 		provideToggleButtonGroupContext({
 			size: computed(() => props.size),
 			slots,
@@ -69,12 +70,11 @@ var toggle_button_group_root_vue_vue_type_script_setup_true_vapor_true_lang_defa
 		const n1 = t0();
 		renderEffect(() => {
 			const _resolvedIsDisabled = resolvedIsDisabled.value;
-			const _resolvedOrientation = resolvedOrientation.value;
 			setAttr(n1, "aria-disabled", _resolvedIsDisabled || void 0);
-			setAttr(n1, "aria-orientation", _resolvedOrientation);
+			setAttr(n1, "aria-orientation", ariaOrientation.value);
 			setClass(n1, slots.value.base({ class: props.class }));
 			setAttr(n1, "data-disabled", unref(dataAttr)(_resolvedIsDisabled));
-			setAttr(n1, "data-orientation", _resolvedOrientation);
+			setAttr(n1, "data-orientation", resolvedOrientation.value);
 			setProp(n1, "role", role.value);
 		});
 		setInsertionState(n1);

package/dist/components/toolbar/index.d.ts

@@ -9,7 +9,7 @@ export declare const Toolbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
     props: import('vue').PublicProps & {
         class?: string;
         isAttached?: boolean;
-        orientation?: import("../../index.js").ToolbarOrientation;
+        orientation?: import("./index.js").ToolbarOrientation;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -32,7 +32,7 @@ export declare const Toolbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
         props: import('vue').PublicProps & {
             class?: string;
             isAttached?: boolean;
-            orientation?: import("../../index.js").ToolbarOrientation;
+            orientation?: import("./index.js").ToolbarOrientation;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
@@ -50,5 +50,6 @@ export { ToolbarRoot };
 export type { ToolbarRootProps, ToolbarRootProps as ToolbarProps } from "./toolbar.types.js";
 export { useToolbarContext } from "./toolbar.context.js";
 export type { ToolbarContext } from "./toolbar.context.js";
+export type { ToolbarOrientation } from "../../composables/use-toolbar.js";
 export { toolbarVariants } from "@ropav/styles";
 export type { ToolbarVariants } from "@ropav/styles";

package/dist/components/toolbar/toolbar-root.js

@@ -27,12 +27,12 @@ var toolbar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 		});
 		provideToolbarContext({ orientation });
 		provideSeparatorContext({ orientation: computed(() => props.orientation === "horizontal" ? "vertical" : "horizontal") });
+		const ariaOrientation = computed(() => toolbar.role.value === "group" ? void 0 : props.orientation);
 		const n1 = t0();
 		renderEffect(() => {
-			const _props_orientation = props.orientation;
-			setAttr(n1, "aria-orientation", _props_orientation);
+			setAttr(n1, "aria-orientation", ariaOrientation.value);
 			setClass(n1, styles.value);
-			setAttr(n1, "data-orientation", _props_orientation);
+			setAttr(n1, "data-orientation", props.orientation);
 			setProp(n1, "role", unref(toolbar).role.value);
 		});
 		setInsertionState(n1);

package/dist/components/tooltip/index.js

@@ -1,8 +1,8 @@
-import tooltip_arrow_default from "./tooltip-arrow.js";
 import { useTooltipContext } from "./tooltip.context.js";
 import tooltip_content_default from "./tooltip-content.js";
 import tooltip_root_default from "./tooltip-root.js";
 import tooltip_trigger_default from "./tooltip-trigger.js";
+import tooltip_arrow_default from "./tooltip-arrow.js";
 import { tooltipVariants } from "@ropav/styles";
 //#region src/components/tooltip/index.ts
 var Tooltip = Object.assign(tooltip_root_default, {

package/dist/components/tooltip/tooltip-root.js

@@ -1,6 +1,6 @@
 import { provideFocusResponder } from "../../composables/focus-responder.js";
-import { useCssVariable } from "../../composables/use-css-variable.js";
 import { provideTooltipContext } from "./tooltip.context.js";
+import { useCssVariable } from "../../composables/use-css-variable.js";
 import { useTooltipTrigger } from "../../composables/use-tooltip-trigger.js";
 import { useTooltipTriggerState } from "../../composables/use-tooltip-trigger-state.js";
 import { parseCssTime } from "../../utils/css.js";

package/dist/components/tooltip/tooltip-trigger.js

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composeFocusResponder, useFocusResponder } from "../../composables/focus-responder.js";
+import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
 import { useTooltipContext } from "./tooltip.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/tooltip/tooltip-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
 var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -13,9 +14,15 @@ var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { slots } = useTooltipContext();
 		const responder = useFocusResponder();
 		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const host = shallowRef(null);
+		const hasFocusableContent = shallowRef(false);
 		const setElement = (element) => {
-			responder?.registerElement(element ?? null);
+			host.value = element ?? null;
+			responder?.registerElement(host.value);
 		};
+		watch(host, (element) => {
+			hasFocusableContent.value = Boolean(element?.querySelector(FOCUSABLE_SELECTOR));
+		}, { flush: "post" });
 		const states = useInteractionStates();
 		const focus = composeFocusResponder(responder, {
 			onBlur: states.onBlur,
@@ -23,6 +30,7 @@ var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			onPointerenter: states.onPointerenter,
 			onPointerleave: () => states.onPointerleave()
 		});
+		const wrapperAttrs = computed(() => hasFocusableContent.value ? void 0 : responder?.attrs.value);
 		const n1 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
@@ -32,9 +40,9 @@ var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 				"data-focus-visible": _dataAttr(_states.isFocusVisible.value),
 				"data-hovered": _dataAttr(_states.isHovered.value),
 				"data-slot": "tooltip-trigger",
-				role: "button",
-				tabindex: "0"
-			}, unref(responder)?.attrs.value]);
+				role: hasFocusableContent.value ? void 0 : "button",
+				tabindex: hasFocusableContent.value ? void 0 : 0
+			}, wrapperAttrs.value]);
 		});
 		setInsertionState(n1);
 		createSlot();

package/dist/components/virtualizer/index.d.ts

@@ -1,5 +1,7 @@
+export type { ScrollBoxInfo, ScrollToOffset } from "../../composables/use-virtualizer-scroll.js";
 export { provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext, } from "./virtualizer.context.js";
-export type { VirtualizerConfigContext, VirtualizerStateContext } from "./virtualizer.context.js";
+export type { VirtualizerConfigContext, VirtualizerScrollState, VirtualizerStateContext, } from "./virtualizer.context.js";
 export { default as VirtualizerItem } from "./virtualizer-item.js";
 export { default as VirtualizerRoot } from "./virtualizer-root.js";
+export { default as VirtualizerScrollbar } from "./virtualizer-scrollbar.js";
 export type { VirtualizerItemProps, VirtualizerLayoutProp, VirtualizerRootProps, } from "./virtualizer.types.js";

package/dist/components/virtualizer/index.js

@@ -1,4 +1,5 @@
 import { provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext } from "./virtualizer.context.js";
 import virtualizer_item_default from "./virtualizer-item.js";
 import virtualizer_root_default from "./virtualizer-root.js";
-export { virtualizer_item_default as VirtualizerItem, virtualizer_root_default as VirtualizerRoot, provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext };
+import virtualizer_scrollbar_default from "./virtualizer-scrollbar.js";
+export { virtualizer_item_default as VirtualizerItem, virtualizer_root_default as VirtualizerRoot, virtualizer_scrollbar_default as VirtualizerScrollbar, provideVirtualizerStateContext, useVirtualizerConfigContext, useVirtualizerStateContext };

package/dist/components/virtualizer/use-virtualizer-item.d.ts

@@ -0,0 +1,23 @@
+import type { LayoutInfo } from "../../utils/virtualizer-layout-info.js";
+import type { ComputedRef, ShallowRef } from "vue";
+import { layoutInfoToStyle } from "../../utils/virtualizer-layout-info.js";
+export interface UseVirtualizerItemOptions {
+    /** The wrapper element, once it is in the DOM. */
+    element: ShallowRef<HTMLElement | null>;
+    layoutInfo: () => LayoutInfo | null | undefined;
+    parentLayoutInfo?: () => LayoutInfo | null | undefined;
+}
+export interface UseVirtualizerItemReturn {
+    /** Where the wrapper sits and how big it is, as the layout worked it out. */
+    style: ComputedRef<ReturnType<typeof layoutInfoToStyle> | undefined>;
+}
+/**
+ * What a wrapper around one windowed element does: carry the geometry the layout gave it, and
+ * measure what the layout could only estimate.
+ *
+ * A wrapper still carrying an estimate has no height of its own, so what it reports is what its
+ * content came to. React Aria writes the estimate on, clears it to read `scrollHeight`, and writes
+ * it back — a forced reflow per element, and one that fights the size containment the wrapper
+ * also carries.
+ */
+export declare const useVirtualizerItem: (options: UseVirtualizerItemOptions) => UseVirtualizerItemReturn;

package/dist/components/virtualizer/use-virtualizer-item.js

@@ -0,0 +1,45 @@
+import { useVirtualizerStateContext } from "./virtualizer.context.js";
+import { Size } from "../../utils/virtualizer-geometry.js";
+import { layoutInfoToStyle } from "../../utils/virtualizer-layout-info.js";
+import { computed, watch } from "vue";
+//#region src/components/virtualizer/use-virtualizer-item.ts
+/**
+* What a wrapper around one windowed element does: carry the geometry the layout gave it, and
+* measure what the layout could only estimate.
+*
+* A wrapper still carrying an estimate has no height of its own, so what it reports is what its
+* content came to. React Aria writes the estimate on, clears it to read `scrollHeight`, and writes
+* it back — a forced reflow per element, and one that fights the size containment the wrapper
+* also carries.
+*/
+var useVirtualizerItem = (options) => {
+	const virtualizer = useVirtualizerStateContext();
+	const measure = () => {
+		const current = options.element.value;
+		const layoutInfo = options.layoutInfo();
+		if (!current || !layoutInfo) return;
+		const bounds = current.getBoundingClientRect();
+		virtualizer?.updateItemSize(layoutInfo.key, new Size(bounds.width, bounds.height));
+	};
+	watch(() => [options.element.value, options.layoutInfo()], ([current, layoutInfo]) => {
+		if (current && layoutInfo?.estimatedSize) measure();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => [options.element.value, virtualizer?.shouldObserveItemSize.value], ([current, shouldObserve], _previous, onCleanup) => {
+		if (!current || !shouldObserve || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measure());
+		for (const child of current.children) observer.observe(child);
+		onCleanup(() => observer.disconnect());
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return { style: computed(() => {
+		const layoutInfo = options.layoutInfo();
+		return layoutInfo ? layoutInfoToStyle(layoutInfo, options.parentLayoutInfo?.()) : void 0;
+	}) };
+};
+//#endregion
+export { useVirtualizerItem };

package/dist/components/virtualizer/virtualizer-item.js

@@ -1,7 +1,5 @@
-import { useVirtualizerStateContext } from "./virtualizer.context.js";
-import { Size } from "../../utils/virtualizer-geometry.js";
-import { layoutInfoToStyle } from "../../utils/virtualizer-layout-info.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
+import { useVirtualizerItem } from "./use-virtualizer-item.js";
+import { createSlot, defineVaporComponent, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, unref } from "vue";
 //#region src/components/virtualizer/virtualizer-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div role=presentation>", 1);
 var virtualizer_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -12,46 +10,14 @@ var virtualizer_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 	},
 	setup(__props) {
 		const props = __props;
-		const virtualizer = useVirtualizerStateContext();
 		const element = shallowRef(null);
-		const style = computed(() => props.layoutInfo ? layoutInfoToStyle(props.layoutInfo, props.parentLayoutInfo) : void 0);
-		/**
-		* Measure what the layout could only estimate.
-		*
-		* The inline height is cleared first: it is the estimate, and measuring through it would just
-		* read the guess back. `scrollHeight` rather than `getBoundingClientRect` because that is what
-		* React Aria reads, and a row whose content overflows should report the content.
-		*/
-		const measure = () => {
-			const current = element.value;
-			if (!current) return;
-			const height = current.style.height;
-			current.style.height = "";
-			const measured = new Size(current.scrollWidth, current.scrollHeight);
-			current.style.height = height;
-			if (props.layoutInfo) virtualizer?.updateItemSize(props.layoutInfo.key, measured);
-		};
-		watch(() => [element.value, props.layoutInfo], ([current, layoutInfo]) => {
-			if (current && layoutInfo?.estimatedSize) measure();
-		}, {
-			flush: "post",
-			immediate: true
-		});
-		/**
-		* Watching the children rather than the wrapper: the wrapper's height is set by the layout, so it
-		* never changes on its own, while what is inside it does.
-		*/
-		watch(() => [element.value, virtualizer?.shouldObserveItemSize.value], ([current, shouldObserve], _previous, onCleanup) => {
-			if (!current || !shouldObserve || typeof ResizeObserver === "undefined") return;
-			const observer = new ResizeObserver(() => measure());
-			for (const child of current.children) observer.observe(child);
-			onCleanup(() => observer.disconnect());
-		}, {
-			flush: "post",
-			immediate: true
+		const { style } = useVirtualizerItem({
+			element,
+			layoutInfo: () => props.layoutInfo,
+			parentLayoutInfo: () => props.parentLayoutInfo
 		});
 		const n1 = t0();
-		renderEffect(() => setStyle(n1, style.value));
+		renderEffect(() => setStyle(n1, unref(style)));
 		setInsertionState(n1);
 		createSlot();
 		setStaticTemplateRef(n1, element, null, "element");

package/dist/components/virtualizer/virtualizer-scrollbar-track.d.ts

@@ -0,0 +1,20 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        orientation: "horizontal" | "vertical";
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/virtualizer/virtualizer-scrollbar-track.js

@@ -0,0 +1,141 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useVirtualizerStateContext } from "./virtualizer.context.js";
+import { useMove } from "../../composables/use-move.js";
+import { child, computed, createIf, defineVaporComponent, on, renderEffect, setAttr, setClass, setStyle, template, unref } from "vue";
+import { virtualizerVariants } from "@ropav/styles";
+//#region src/components/virtualizer/virtualizer-scrollbar-track.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=virtualizer-scrollbar-track><div data-slot=virtualizer-scrollbar-thumb>", 1);
+/**
+* One axis of the scrollbar a windowed collection draws for itself: a track, and the thumb in it.
+*
+* The thumb is moved by the main thread. Every pointer move sets the scroll offset and the rows for
+* it in one task, so no frame is ever drawn with rows that were built for another offset — which is
+* what a native thumb, moved by the compositor, cannot promise. See `VirtualizerScrollbar`.
+*/
+var THICKNESS = 10;
+/** The shortest the thumb gets: a long collection would otherwise leave nothing to grab. */
+var MIN_THUMB_LENGTH = 32;
+/**
+* How much of the viewport a press on the track moves by. Less than the whole of it, so what was
+* at the edge is still on screen afterwards to hold the eye — the fraction browsers page by.
+*/
+var PAGE_FRACTION = .875;
+var virtualizer_scrollbar_track_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "virtualizer-scrollbar-track",
+	props: { orientation: {} },
+	setup(__props) {
+		const props = __props;
+		/** How thick the track is, across its axis. */
+		const state = useVirtualizerStateContext();
+		if (!state) throw new Error("`VirtualizerScrollbarTrack` was rendered outside of a windowed collection.");
+		const { scroll } = state;
+		const styles = virtualizerVariants();
+		const isVertical = props.orientation === "vertical";
+		/** A size measured along this track's axis. */
+		const along = (size) => isVertical ? size.height : size.width;
+		/** A size measured across it, which is the other track's axis. */
+		const across = (size) => isVertical ? size.width : size.height;
+		const viewport = computed(() => along(scroll.size.value));
+		/** How far the box can scroll along this axis. */
+		const range = computed(() => Math.max(0, along(scroll.scrollSize.value) - viewport.value));
+		/** Whether the box scrolls along this axis at all, rather than clipping it. */
+		const scrolls = computed(() => isVertical ? scroll.box.value.scrollsY : scroll.box.value.scrollsX);
+		/** Whether the other axis has a track too, which is when the two leave each other a corner. */
+		const hasCorner = computed(() => (isVertical ? scroll.box.value.scrollsX : scroll.box.value.scrollsY) && across(scroll.scrollSize.value) > across(scroll.size.value));
+		const trackLength = computed(() => Math.max(0, viewport.value - (hasCorner.value ? THICKNESS : 0)));
+		/** The thumb is to the track what the viewport is to the content, down to a graspable floor. */
+		const thumbLength = computed(() => {
+			const total = along(scroll.scrollSize.value);
+			if (total <= 0) return trackLength.value;
+			return Math.min(trackLength.value, Math.max(MIN_THUMB_LENGTH, trackLength.value * viewport.value / total));
+		});
+		/** How far the thumb can travel. */
+		const travel = computed(() => Math.max(0, trackLength.value - thumbLength.value));
+		/** The scroll offset along this axis, signed. */
+		const offset = computed(() => isVertical ? scroll.offset.value.y : scroll.offset.value.x);
+		/** Where the thumb sits, measured from the start of the track. */
+		const thumbOffset = computed(() => range.value > 0 ? Math.min(Math.abs(offset.value), range.value) / range.value * travel.value : 0);
+		const isVisible = computed(() => scrolls.value && range.value > 0);
+		const scrollTo = (value) => {
+			scroll.scrollTo(isVertical ? { top: value } : { left: value });
+		};
+		const states = useInteractionStates();
+		/** The offset the press started from, and how far the pointer has travelled along the track since. */
+		let startOffset = 0;
+		let dragged = 0;
+		/** Content pixels per thumb pixel, fixed at the press so the mapping cannot drift mid-drag. */
+		let ratio = 0;
+		const { handlers: moveHandlers } = useMove({
+			onMove: ({ deltaX, deltaY }) => {
+				dragged += isVertical ? deltaY : deltaX;
+				scrollTo(startOffset + dragged * ratio);
+			},
+			onMoveEnd: () => {
+				dragged = 0;
+			}
+		});
+		const onThumbPointerdown = (event) => {
+			if (event.button !== 0) return;
+			startOffset = offset.value;
+			dragged = 0;
+			ratio = travel.value > 0 ? range.value / travel.value : 0;
+			states.onPointerdown(event);
+			moveHandlers.onPointerdown(event);
+		};
+		/** A press beside the thumb pages towards it. The thumb itself stops its press from reaching here. */
+		const onTrackPointerdown = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const track = event.currentTarget;
+			const bounds = track.getBoundingClientRect();
+			const isReversed = !isVertical && getComputedStyle(track).direction === "rtl";
+			let pressed;
+			if (isVertical) pressed = event.clientY - bounds.top;
+			else if (isReversed) pressed = bounds.right - event.clientX;
+			else pressed = event.clientX - bounds.left;
+			const page = Math.round(viewport.value * PAGE_FRACTION) * (pressed > thumbOffset.value ? 1 : -1);
+			scrollTo(offset.value + (isReversed ? -page : page));
+		};
+		const trackStyle = computed(() => isVertical ? {
+			height: `${trackLength.value}px`,
+			width: `${THICKNESS}px`
+		} : {
+			height: `${THICKNESS}px`,
+			top: `${across(scroll.size.value) - THICKNESS}px`,
+			width: `${trackLength.value}px`
+		});
+		const thumbStyle = computed(() => isVertical ? {
+			height: `${thumbLength.value}px`,
+			top: `${thumbOffset.value}px`
+		} : {
+			"inset-inline-start": `${thumbOffset.value}px`,
+			width: `${thumbLength.value}px`
+		});
+		return createIf(() => isVisible.value, () => {
+			const n3 = t0();
+			const n2 = child(n3);
+			on(n2, "pointerdown", onThumbPointerdown);
+			on(n2, "pointerenter", (e) => unref(states).onPointerenter(e));
+			on(n2, "pointerleave", (e) => unref(states).onPointerleave(e));
+			on(n3, "pointerdown", onTrackPointerdown);
+			renderEffect(() => {
+				const _styles = unref(styles);
+				const _orientation = __props.orientation;
+				const _dataAttr = unref(dataAttr);
+				const _states = unref(states);
+				setClass(n3, _styles.scrollbarTrack());
+				setAttr(n3, "data-orientation", _orientation);
+				setStyle(n3, trackStyle.value);
+				setClass(n2, _styles.scrollbarThumb());
+				setAttr(n2, "data-hovered", _dataAttr(_states.isHovered.value));
+				setAttr(n2, "data-orientation", _orientation);
+				setAttr(n2, "data-pressed", _dataAttr(_states.isPressed.value));
+				setStyle(n2, thumbStyle.value);
+			});
+			return n3;
+		});
+	}
+});
+//#endregion
+export { virtualizer_scrollbar_track_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/virtualizer/virtualizer-scrollbar.d.ts

@@ -0,0 +1,18 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/virtualizer/virtualizer-scrollbar.js

@@ -0,0 +1,55 @@
+import { useVirtualizerStateContext } from "./virtualizer.context.js";
+import virtualizer_scrollbar_track_default from "./virtualizer-scrollbar-track.js";
+import { computed, createComponent, defineVaporComponent, renderEffect, setClass, setInsertionState, setStyle, template, unref } from "vue";
+import { virtualizerVariants } from "@ropav/styles";
+//#region src/components/virtualizer/virtualizer-scrollbar.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div aria-hidden=true data-slot=virtualizer-scrollbar>", 1);
+/**
+* The scrollbar a windowed collection draws for itself, in place of the native one it hides.
+*
+* A native thumb is moved by the compositor, which draws every frame at the new offset with
+* whatever rows the main thread last committed — and across a long collection those rows are
+* always somewhere else, so the window is empty for as long as the main thread takes to catch up.
+* This thumb is moved by the main thread: a pointer move sets the offset and the rows for it in
+* one task, so no frame is ever drawn with rows that were built for another offset. Wheel,
+* trackpad and keyboard scrolling stay native, and the thumb follows them.
+*
+* A pointer affordance and nothing more, like the native one: the box stays the focusable
+* scroller and the keyboard reaches every offset through it. Hidden from assistive technology for
+* the same reason a native scrollbar is not exposed.
+*
+* Rendered by the collection as the first child of its content wrapper — inside the wrapper rather
+* than beside it, because a stuck box cannot leave its containing block, and only the wrapper is
+* tall enough to stay stuck to for the whole of the scroll. A stuck box is held inside the scroll
+* container's content box, so on a padded container it sits at the content's corner, not the
+* container's; the difference is the padding, and it is given back with a translation, which
+* sticky positioning leaves alone. A track along the edge then runs the full length of the box.
+*/
+var virtualizer_scrollbar_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "virtualizer-scrollbar",
+	setup(__props) {
+		const state = useVirtualizerStateContext();
+		if (!state) throw new Error("`VirtualizerScrollbar` was rendered outside of a windowed collection.");
+		const { scroll } = state;
+		const styles = virtualizerVariants();
+		const style = computed(() => {
+			const { direction, paddingInlineStart, paddingTop } = scroll.box.value;
+			return {
+				translate: `${direction === "rtl" ? paddingInlineStart : -paddingInlineStart}px ${-paddingTop}px`,
+				width: `${scroll.size.value.width}px`
+			};
+		});
+		const n2 = t0();
+		renderEffect(() => {
+			setClass(n2, unref(styles).scrollbar());
+			setStyle(n2, style.value);
+		});
+		setInsertionState(n2);
+		createComponent(virtualizer_scrollbar_track_default, { orientation: "vertical" });
+		setInsertionState(n2, 1);
+		createComponent(virtualizer_scrollbar_track_default, { orientation: "horizontal" });
+		return n2;
+	}
+});
+//#endregion
+export { virtualizer_scrollbar_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/virtualizer/virtualizer.context.d.ts

@@ -1,5 +1,6 @@
+import type { ScrollBoxInfo, ScrollToOffset } from "../../composables/use-virtualizer-scroll.js";
 import type { ItemDropTarget } from "../../utils/dnd-types.js";
-import type { Size } from "../../utils/virtualizer-geometry.js";
+import type { Point, Size } from "../../utils/virtualizer-geometry.js";
 import type { Layout } from "../../utils/virtualizer-layout.js";
 import type { LayoutInfo, VirtualizerKey } from "../../utils/virtualizer-layout-info.js";
 import type { ComputedRef, ShallowRef } from "vue";
@@ -19,8 +20,23 @@ export interface VirtualizerConfigContext {
  * for one would make `Virtualizer` mandatory for every listbox in the library.
  */
 export declare const useVirtualizerConfigContext: () => VirtualizerConfigContext | null, provideVirtualizerConfigContext: (value: VirtualizerConfigContext | null) => VirtualizerConfigContext | null;
+/** The scroll box as the scrollbar a windowed collection draws for itself reads it. */
+export interface VirtualizerScrollState {
+    /** How far the box is scrolled. The inline axis runs negative in a right-to-left box. */
+    offset: ComputedRef<Point>;
+    /** The box's own size, which is what it shows of the content at once. */
+    size: ComputedRef<Size>;
+    /** The box's scrollable overflow — everything it could show. */
+    scrollSize: ComputedRef<Size>;
+    /** The box's padding, and which of its axes scroll at all. */
+    box: ComputedRef<ScrollBoxInfo>;
+    /** Scrolls the box from the main thread, so the rows and the offset are committed together. */
+    scrollTo: (offset: ScrollToOffset) => void;
+}
 /** What a virtualized collection hands its own parts, so they can describe themselves. */
 export interface VirtualizerStateContext {
+    /** The scroll box, for the scrollbar the collection draws in place of the native one. */
+    scroll: VirtualizerScrollState;
     /** How many items the collection holds, which is not how many are rendered. */
     itemCount: ComputedRef<number>;
     /** An item's position among all of them, zero-based. */

package/dist/composables/drag-manager.js

@@ -109,11 +109,6 @@ var endDragging = () => {
 };
 /** Whether a keyboard or screen reader drag is in flight. */
 var isVirtualDragging = () => dragSession != null;
-/** Whether an element is inside a registered drop target. */
-var isValidDropTarget = (element) => {
-	for (const target of dropTargets.keys()) if (contains(target, element)) return true;
-	return false;
-};
 /**
 * The session in flight, as a ref that updates when one starts or ends.
 *
@@ -432,12 +427,5 @@ var DragSession = class {
 		}, dropItem?.target ?? null);
 	}
 };
-/**
-* The session in flight, read once.
-*
-* The imperative sibling of `useDragSession`, for callers that are not inside an effect scope —
-* an event handler deciding whether a keystroke belongs to a drag, or a test ending one.
-*/
-var getDragSession = () => dragSession;
 //#endregion
-export { DragSession, beginDragging, getDragSession, isValidDropTarget, isVirtualDragging, registerDropItem, registerDropTarget, useDragSession };
+export { DragSession, beginDragging, isVirtualDragging, registerDropItem, registerDropTarget, useDragSession };