ropav 0.4.0 → 0.5.0

package/dist/components/index.d.ts

@@ -61,13 +61,17 @@ export * from "./progress-circle/index.js";
 export * from "./radio/index.js";
 export * from "./radio-group/index.js";
 export * from "./range-calendar/index.js";
+export * from "./router-provider/index.js";
 export * from "./scroll-shadow/index.js";
 export * from "./search-field/index.js";
+export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./separator/index.js";
+export * from "./sidebar/index.js";
 export * from "./skeleton/index.js";
 export * from "./slider/index.js";
 export * from "./spinner/index.js";
+export * from "./splitter/index.js";
 export * from "./surface/index.js";
 export * from "./switch/index.js";
 export * from "./switch-group/index.js";

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

@@ -8,6 +8,7 @@ export declare const Input: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
         class?: string;
         value?: string;
         variant?: import("@ropav/styles").InputVariants["variant"];
+        size?: import("@ropav/styles").InputVariants["size"];
         fullWidth?: boolean;
         placeholder?: string;
         onChange?: ((value: string) => any) | undefined;
@@ -31,6 +32,7 @@ export declare const Input: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
             class?: string;
             value?: string;
             variant?: import("@ropav/styles").InputVariants["variant"];
+            size?: import("@ropav/styles").InputVariants["size"];
             fullWidth?: boolean;
             placeholder?: string;
             onChange?: ((value: string) => any) | undefined;

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

@@ -13,6 +13,7 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		class: {},
 		value: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -31,9 +32,11 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 			control?.registerElement(element.value);
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
+		const resolvedSize = computed(() => props.size ?? textField?.size.value);
 		const styles = computed(() => inputVariants({
 			class: props.class,
 			fullWidth: props.fullWidth,
+			size: resolvedSize.value,
 			variant: resolvedVariant.value
 		}));
 		const attrs = computed(() => {

package/dist/components/input/input.types.d.ts

@@ -9,6 +9,11 @@ export interface InputRootProps {
     value?: string;
     /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
     variant?: InputVariants["variant"];
+    /**
+     * How tall the control stands, matching a button of the same size. Taken from the surrounding
+     * field when unset. @default "md"
+     */
+    size?: InputVariants["size"];
     /** Whether the control stretches to fill its container. */
     fullWidth?: boolean;
     /**

package/dist/components/input-group/index.d.ts

@@ -13,6 +13,7 @@ export declare const InputGroup: ((__VLS_props: NonNullable<Awaited<typeof __VLS
     props: import('vue').PublicProps & {
         class?: string;
         variant?: import("@ropav/styles").InputGroupVariants["variant"];
+        size?: import("@ropav/styles").InputGroupVariants["size"];
         fullWidth?: boolean;
         isDisabled?: boolean;
         isInvalid?: boolean;
@@ -81,6 +82,7 @@ export declare const InputGroup: ((__VLS_props: NonNullable<Awaited<typeof __VLS
         props: import('vue').PublicProps & {
             class?: string;
             variant?: import("@ropav/styles").InputGroupVariants["variant"];
+            size?: import("@ropav/styles").InputGroupVariants["size"];
             fullWidth?: boolean;
             isDisabled?: boolean;
             isInvalid?: boolean;

package/dist/components/input-group/input-group-root.js

@@ -12,6 +12,7 @@ var input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 	props: {
 		class: {},
 		variant: { default: void 0 },
+		size: { default: void 0 },
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -38,10 +39,12 @@ var input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			element.value = next instanceof HTMLDivElement ? next : null;
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
+		const resolvedSize = computed(() => props.size ?? textField?.size.value);
 		const resolvedIsDisabled = computed(() => props.isDisabled ?? control?.isDisabled.value ?? false);
 		const resolvedIsInvalid = computed(() => props.isInvalid ?? control?.isInvalid.value ?? false);
 		const slots = computed(() => inputGroupVariants({
 			fullWidth: props.fullWidth,
+			size: resolvedSize.value,
 			variant: resolvedVariant.value
 		}));
 		provideInputGroupContext({ slots });

package/dist/components/input-group/input-group.types.d.ts

@@ -3,6 +3,11 @@ export interface InputGroupRootProps {
     class?: string;
     /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
     variant?: InputGroupVariants["variant"];
+    /**
+     * How tall the group stands, matching a button of the same size. Taken from the surrounding
+     * field when unset. @default "md"
+     */
+    size?: InputGroupVariants["size"];
     /** Whether the group stretches to fill its container. */
     fullWidth?: boolean;
     /**

package/dist/components/input-otp/index.d.ts

@@ -18,14 +18,14 @@ export declare const InputOTP: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
         defaultValue?: string;
         pattern?: RegExp | string;
         placeholder?: string;
-        textAlign?: import("../../index.js").InputOTPTextAlign;
+        textAlign?: import("./index.js").InputOTPTextAlign;
         inputMode?: string;
         autoComplete?: string;
         isDisabled?: boolean;
         isInvalid?: boolean;
         validationErrors?: string[];
         validationDetails?: import("../../index.js").ValidationDetails;
-        pushPasswordManagerStrategy?: import("../../index.js").PushPasswordManagerStrategy;
+        pushPasswordManagerStrategy?: import("./index.js").PushPasswordManagerStrategy;
         pasteTransformer?: (pasted: string) => string;
         name?: string;
         form?: string;
@@ -85,14 +85,14 @@ export declare const InputOTP: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
             defaultValue?: string;
             pattern?: RegExp | string;
             placeholder?: string;
-            textAlign?: import("../../index.js").InputOTPTextAlign;
+            textAlign?: import("./index.js").InputOTPTextAlign;
             inputMode?: string;
             autoComplete?: string;
             isDisabled?: boolean;
             isInvalid?: boolean;
             validationErrors?: string[];
             validationDetails?: import("../../index.js").ValidationDetails;
-            pushPasswordManagerStrategy?: import("../../index.js").PushPasswordManagerStrategy;
+            pushPasswordManagerStrategy?: import("./index.js").PushPasswordManagerStrategy;
             pasteTransformer?: (pasted: string) => string;
             name?: string;
             form?: string;
@@ -156,5 +156,7 @@ export type { InputOTPRootProps, InputOTPRootProps as InputOTPProps, InputOTPGro
 export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "../../composables/use-input-otp.js";
 export { provideInputOTPContext, useInputOTPContext } from "./input-otp.context.js";
 export type { InputOTPContext } from "./input-otp.context.js";
+export type { InputOTPTextAlign } from "../../composables/use-input-otp.js";
+export type { PushPasswordManagerStrategy } from "../../composables/use-password-manager-badge.js";
 export { inputOTPVariants } from "@ropav/styles";
 export type { InputOTPVariants } from "@ropav/styles";

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

@@ -18,6 +18,7 @@ export declare const Link: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
         hrefLang?: string;
         isDisabled?: boolean;
         ariaCurrent?: import("./link.types.js").LinkCurrent;
+        routerOptions?: unknown;
         ariaLabel?: string;
         ariaLabelledby?: string;
         ariaDescribedby?: string;
@@ -73,6 +74,7 @@ export declare const Link: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
             hrefLang?: string;
             isDisabled?: boolean;
             ariaCurrent?: import("./link.types.js").LinkCurrent;
+            routerOptions?: unknown;
             ariaLabel?: string;
             ariaLabelledby?: string;
             ariaDescribedby?: string;

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

@@ -2,7 +2,9 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { usePress } from "../../composables/use-press.js";
 import { provideLinkContext } from "./link.context.js";
+import { openLink } from "../../utils/open-link.js";
 import { useFieldsetContext } from "../fieldset/fieldset.context.js";
+import { useRouterContext } from "../router-provider/router-provider.context.js";
 import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
 import { linkVariants } from "@ropav/styles";
 //#region src/components/link/link-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -30,6 +32,7 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			type: [Boolean, String],
 			default: void 0
 		},
+		routerOptions: { default: void 0 },
 		ariaLabel: {},
 		ariaLabelledby: {},
 		ariaDescribedby: {}
@@ -39,6 +42,7 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		const props = __props;
 		const emit = __emit;
 		const fieldset = useFieldsetContext();
+		const router = useRouterContext();
 		const resolvedIsDisabled = computed(() => Boolean(props.isDisabled ?? fieldset?.isDisabled.value));
 		const slots = computed(() => linkVariants());
 		provideLinkContext({ slots });
@@ -51,7 +55,12 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		const isAnchor = computed(() => Boolean(props.href) && !resolvedIsDisabled.value);
 		const role = computed(() => isAnchor.value ? void 0 : "link");
 		const tabindex = computed(() => resolvedIsDisabled.value ? void 0 : 0);
-		const isCurrent = computed(() => Boolean(props.ariaCurrent));
+		const ariaCurrent = computed(() => {
+			if (props.ariaCurrent !== "auto") return props.ariaCurrent;
+			return props.href && router?.isCurrent(props.href) ? "page" : void 0;
+		});
+		const isCurrent = computed(() => Boolean(ariaCurrent.value));
+		const resolvedHref = computed(() => props.href === void 0 ? void 0 : router?.resolveHref(props.href) ?? props.href);
 		const onPointerenter = (event) => {
 			interaction.onPointerenter(event);
 			press.handlers.onPointerenter(event);
@@ -60,13 +69,21 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			interaction.onPointerleave();
 			press.handlers.onPointerleave(event);
 		};
+		const onClick = (event) => {
+			press.handlers.onClick(event);
+			openLink(event, {
+				href: props.href,
+				router,
+				routerOptions: props.routerOptions
+			});
+		};
 		return createIf(() => isAnchor.value, () => {
 			const n3 = t0();
 			renderEffect(() => {
 				const _props = props;
 				const _dataAttr = unref(dataAttr);
 				const _interaction = unref(interaction);
-				setAttr(n3, "aria-current", _props.ariaCurrent);
+				setAttr(n3, "aria-current", ariaCurrent.value);
 				setAttr(n3, "aria-describedby", _props.ariaDescribedby);
 				setAttr(n3, "aria-label", _props.ariaLabel);
 				setAttr(n3, "aria-labelledby", _props.ariaLabelledby);
@@ -77,7 +94,7 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 				setAttr(n3, "data-hovered", _dataAttr(_interaction.isHovered.value));
 				setAttr(n3, "data-pressed", _dataAttr(unref(press).isPressed.value));
 				setProp(n3, "download", _props.download);
-				setProp(n3, "href", _props.href);
+				setProp(n3, "href", resolvedHref.value);
 				setProp(n3, "hreflang", _props.hrefLang);
 				setProp(n3, "ping", _props.ping);
 				setProp(n3, "referrerpolicy", _props.referrerPolicy);
@@ -95,7 +112,7 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 				isPressed: () => unref(press).isPressed.value
 			});
 			on(n3, "blur", (e) => unref(interaction).onBlur(e));
-			on(n3, "click", (e) => unref(press).handlers.onClick(e));
+			on(n3, "click", onClick);
 			on(n3, "dragstart", (e) => unref(press).handlers.onDragstart(e));
 			on(n3, "focus", (e) => unref(interaction).onFocus(e));
 			on(n3, "keydown", (e) => unref(press).handlers.onKeydown(e));
@@ -112,7 +129,7 @@ var link_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 				const _resolvedIsDisabled = resolvedIsDisabled.value;
 				const _dataAttr = unref(dataAttr);
 				const _interaction = unref(interaction);
-				setAttr(n6, "aria-current", _props.ariaCurrent);
+				setAttr(n6, "aria-current", ariaCurrent.value);
 				setAttr(n6, "aria-describedby", _props.ariaDescribedby);
 				setAttr(n6, "aria-disabled", _resolvedIsDisabled || void 0);
 				setAttr(n6, "aria-label", _props.ariaLabel);

package/dist/components/link/link.types.d.ts

@@ -1,7 +1,13 @@
 /** What the browser accepts for `referrerpolicy` on an anchor. */
 export type LinkReferrerPolicy = "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
-/** What assistive technology accepts for `aria-current`. */
-export type LinkCurrent = boolean | "date" | "false" | "location" | "page" | "step" | "time" | "true";
+/**
+ * What assistive technology accepts for `aria-current`, plus `"auto"`.
+ *
+ * `"auto"` is not an ARIA token and never reaches the DOM. It asks the router supplied by
+ * `RouterProvider` whether this link's href addresses the route showing now, resolving to
+ * `"page"` when it does and to nothing at all when it does not — or when no router was supplied.
+ */
+export type LinkCurrent = boolean | "auto" | "date" | "false" | "location" | "page" | "step" | "time" | "true";
 export interface LinkRootProps {
     class?: string;
     /** Where the link goes. Without one the link renders as a span with a link role. */
@@ -17,8 +23,13 @@ export interface LinkRootProps {
      * there is no href for the browser to follow, matching React.
      */
     isDisabled?: boolean;
-    /** Marks the link as the one for the current page. */
+    /** Marks the link as the one for the current page. `"auto"` asks the router instead. */
     ariaCurrent?: LinkCurrent;
+    /**
+     * Passed through to the router's `navigate` alongside the href, for whatever options the
+     * application's router accepts. Ignored without a `RouterProvider` above.
+     */
+    routerOptions?: unknown;
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;

package/dist/{composables → components/list-box}/drag-collection.d.ts

@@ -1,5 +1,5 @@
-import type { DragCollection } from "../utils/dnd-types.js";
-import type { UseCollectionReturn } from "./use-collection.js";
+import type { UseCollectionReturn } from "../../composables/use-collection.js";
+import type { DragCollection } from "../../utils/dnd-types.js";
 /**
  * A `DragCollection` over an ordinary flat collection.
  *

package/dist/{composables → components/list-box}/drag-collection.js

@@ -1,4 +1,4 @@
-//#region src/composables/drag-collection.ts
+//#region src/components/list-box/drag-collection.ts
 /**
 * A `DragCollection` over an ordinary flat collection.
 *

package/dist/components/list-box/index.d.ts

@@ -22,6 +22,7 @@ export declare const ListBox: (<T>(__VLS_props: NonNullable<Awaited<typeof __VLS
         disabledBehavior?: import("../../index.js").DisabledBehavior;
         disallowEmptySelection?: boolean;
         variant?: import("@ropav/styles").ListBoxVariants["variant"];
+        size?: import("@ropav/styles").ListBoxVariants["size"];
         dragAndDropHooks?: import("../../index.js").DragAndDropHooks;
         onAction?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
         onSelectionChange?: ((keys: import("../../index.js").CollectionSelection) => any) | undefined;
@@ -148,6 +149,7 @@ export declare const ListBox: (<T>(__VLS_props: NonNullable<Awaited<typeof __VLS
             disabledBehavior?: import("../../index.js").DisabledBehavior;
             disallowEmptySelection?: boolean;
             variant?: import("@ropav/styles").ListBoxVariants["variant"];
+            size?: import("@ropav/styles").ListBoxVariants["size"];
             dragAndDropHooks?: import("../../index.js").DragAndDropHooks;
             onAction?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
             onSelectionChange?: ((keys: import("../../index.js").CollectionSelection) => any) | undefined;
@@ -192,5 +194,7 @@ export { ListBoxDropIndicator, ListBoxLoadMoreItem, ListBoxRoot };
 export type { ListBoxDropIndicatorProps, ListBoxLoadMoreItemProps, ListBoxRootProps, ListBoxRootProps as ListBoxProps, } from "./list-box.types.js";
 export { provideListBoxStateContext, useListBoxContext, useListBoxStateContext, } from "./list-box.context.js";
 export type { ListBoxContext, ListBoxStateContext } from "./list-box.context.js";
+export type { UseDraggableCollectionStateReturn } from "../../composables/use-draggable-collection-state.js";
+export type { UseDroppableCollectionStateReturn } from "../../composables/use-droppable-collection-state.js";
 export { listboxVariants } from "@ropav/styles";
 export type { ListBoxVariants } from "@ropav/styles";

package/dist/components/list-box/list-box-root.js

@@ -6,8 +6,8 @@ import { useSelectionManager } from "../../composables/use-selection-manager.js"
 import { provideListBoxContext, useListBoxStateContext } from "./list-box.context.js";
 import { provideVirtualizerStateContext, useVirtualizerConfigContext } from "../virtualizer/virtualizer.context.js";
 import virtualizer_item_default from "../virtualizer/virtualizer-item.js";
+import virtualizer_scrollbar_default from "../virtualizer/virtualizer-scrollbar.js";
 import list_box_drop_indicator_default from "./list-box-drop-indicator.js";
-import { toDragCollection } from "../../composables/drag-collection.js";
 import { useCollectionAutoFocus } from "../../composables/use-collection-auto-focus.js";
 import { useDndPersistedKeys } from "../../composables/use-dnd-persisted-keys.js";
 import { useListKeyboard } from "../../composables/use-list-keyboard.js";
@@ -15,6 +15,7 @@ import { useTypeahead } from "../../composables/use-typeahead.js";
 import { useVirtualizer } from "../../composables/use-virtualizer.js";
 import { useVirtualizerScroll } from "../../composables/use-virtualizer-scroll.js";
 import { provideSeparatorContext } from "../separator/separator.context.js";
+import { toDragCollection } from "./drag-collection.js";
 import { computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, extend, on, onScopeDispose, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, toValue, unref, useSlots } from "vue";
 import { listboxVariants } from "@ropav/styles";
 //#region src/components/list-box/list-box-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -37,6 +38,7 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		disabledBehavior: {},
 		disallowEmptySelection: { type: Boolean },
 		variant: {},
+		size: {},
 		dragAndDropHooks: {}
 	},
 	emits: [
@@ -59,6 +61,7 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const itemOf = (node) => node?.content;
 		const styles = computed(() => listboxVariants({
 			class: props.class,
+			size: props.size,
 			variant: props.variant
 		}));
 		/**
@@ -163,7 +166,9 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			onScrollEnd: virtualizer.endScrolling,
 			onScrollStart: virtualizer.startScrolling,
 			onSizeChange: virtualizer.setSize,
-			onVisibleRectChange: virtualizer.setVisibleRect
+			onVisibleRectChange: virtualizer.setVisibleRect,
+			scrollAdjustment: () => virtualizer.scrollAdjustment.value,
+			takeScrollAdjustment: virtualizer.takeScrollAdjustment
 		});
 		/**
 		* Paging asks the layout where the rows are, not the DOM.
@@ -279,11 +284,18 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			keyboard,
 			selection
 		});
-		if (virtualizer && virtualizerConfig) provideVirtualizerStateContext({
+		if (virtualizer && virtualizerConfig && scroll) provideVirtualizerStateContext({
 			getIndex: (key) => collection.getIndex(key),
 			getDropTargetLayoutInfo: virtualizerConfig.layout.value.getDropTargetLayoutInfo?.bind(virtualizerConfig.layout.value),
 			getLayoutInfo: virtualizer.getLayoutInfo,
 			itemCount: computed(() => source.value?.itemCount ?? 0),
+			scroll: {
+				box: scroll.scrollBox,
+				offset: scroll.scrollOffset,
+				scrollSize: scroll.scrollSize,
+				scrollTo: scroll.scrollTo,
+				size: virtualizer.size
+			},
 			shouldObserveItemSize: virtualizerConfig.shouldObserveItemSize,
 			updateItemSize: virtualizer.updateItemSize
 		});
@@ -293,33 +305,42 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		};
 		const isEmpty = computed(() => collection.size.value === 0);
 		const hasEmptySlot = computed(() => Boolean(callerSlots["empty"]));
-		const n19 = t2();
+		/**
+		* A windowed listbox hides the native scrollbar and draws its own in the content wrapper below: a
+		* native thumb is moved by the compositor, a frame ahead of the options, and across a long
+		* collection that frame shows an empty list. Wheel, trackpad and keyboard scrolling stay native.
+		*/
+		const rootStyle = computed(() => isVirtualized.value ? { scrollbarWidth: "none" } : void 0);
+		const n20 = t2();
 		renderEffect(() => {
 			const _selection = unref(selection);
 			const _dataAttr = unref(dataAttr);
-			setProp(n19, "id", listId.value);
-			setAttr(n19, "aria-label", ownerAriaLabel.value);
-			setAttr(n19, "aria-labelledby", labelledBy.value);
-			setAttr(n19, "aria-multiselectable", _selection.selectionMode.value === "multiple" ? true : void 0);
-			setClass(n19, styles.value);
-			setAttr(n19, "data-collection", unref(collectionId));
-			setAttr(n19, "data-drop-target", _dataAttr(isRootDropTarget.value));
-			setAttr(n19, "data-empty", _dataAttr(isEmpty.value));
-			setAttr(n19, "data-focus-visible", _dataAttr(_selection.isFocused.value));
-			setProp(n19, "tabindex", unref(keyboard).collectionTabIndex.value);
+			setProp(n20, "id", listId.value);
+			setAttr(n20, "aria-label", ownerAriaLabel.value);
+			setAttr(n20, "aria-labelledby", labelledBy.value);
+			setAttr(n20, "aria-multiselectable", _selection.selectionMode.value === "multiple" ? true : void 0);
+			setClass(n20, styles.value);
+			setAttr(n20, "data-collection", unref(collectionId));
+			setAttr(n20, "data-drop-target", _dataAttr(isRootDropTarget.value));
+			setAttr(n20, "data-empty", _dataAttr(isEmpty.value));
+			setAttr(n20, "data-focus-visible", _dataAttr(_selection.isFocused.value));
+			setStyle(n20, rootStyle.value);
+			setProp(n20, "tabindex", unref(keyboard).collectionTabIndex.value);
 		});
-		setInsertionState(n19);
+		setInsertionState(n20);
 		createIf(() => hasEmptySlot.value && isEmpty.value, () => {
 			const n3 = t0();
 			setInsertionState(n3);
 			createSlot("empty");
 			return n3;
 		});
-		setInsertionState(n19, 1);
+		setInsertionState(n20, 1);
 		createIf(() => isVirtualized.value, () => {
-			const n16 = t1();
-			renderEffect(() => setStyle(n16, unref(scroll)?.contentStyle.value));
-			setInsertionState(n16);
+			const n17 = t1();
+			renderEffect(() => setStyle(n17, unref(scroll)?.contentStyle.value));
+			setInsertionState(n17);
+			createComponent(unref(virtualizer_scrollbar_default));
+			setInsertionState(n17, 1);
 			createFor(() => unref(virtualizer)?.visibleViews.value, (_for_item0) => {
 				return [createIf(() => rendersDropIndicators.value, () => {
 					return createComponent(list_box_drop_indicator_default, { target: () => ({
@@ -334,7 +355,7 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 					}, null, 36);
 				}, { _: 8 }))];
 			}, (view) => view.key);
-			setInsertionState(n16, 1);
+			setInsertionState(n17, 2);
 			createIf(() => rendersDropIndicators.value && lastItemKey.value != null, () => {
 				return createComponent(list_box_drop_indicator_default, { target: () => ({
 					dropPosition: "after",
@@ -342,21 +363,21 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 					type: "item"
 				}) });
 			});
-			return n16;
+			return n17;
 		}, () => {
 			return createSlot();
 		}, 1029);
-		on(n19, "dragenter", ($event) => unref(droppable)?.handlers.onDragenter($event));
-		on(n19, "dragleave", ($event) => unref(droppable)?.handlers.onDragleave($event));
-		on(n19, "dragover", ($event) => unref(droppable)?.handlers.onDragover($event));
-		on(n19, "drop", ($event) => unref(droppable)?.handlers.onDrop($event));
-		on(n19, "focusin", (e) => unref(keyboard).onFocusin(e));
-		on(n19, "focusout", (e) => unref(keyboard).onFocusout(e));
-		on(n19, "keydown", onKeydown);
-		on(n19, "keydown", (e) => unref(typeahead).onKeydownCapture(e), { capture: true });
-		on(n19, "mousedown", onMousedown);
-		setStaticTemplateRef(n19, element, null, "element");
-		return n19;
+		on(n20, "dragenter", ($event) => unref(droppable)?.handlers.onDragenter($event));
+		on(n20, "dragleave", ($event) => unref(droppable)?.handlers.onDragleave($event));
+		on(n20, "dragover", ($event) => unref(droppable)?.handlers.onDragover($event));
+		on(n20, "drop", ($event) => unref(droppable)?.handlers.onDrop($event));
+		on(n20, "focusin", (e) => unref(keyboard).onFocusin(e));
+		on(n20, "focusout", (e) => unref(keyboard).onFocusout(e));
+		on(n20, "keydown", onKeydown);
+		on(n20, "keydown", (e) => unref(typeahead).onKeydownCapture(e), { capture: true });
+		on(n20, "mousedown", onMousedown);
+		setStaticTemplateRef(n20, element, null, "element");
+		return n20;
 	}
 });
 //#endregion

package/dist/components/list-box/list-box.types.d.ts

@@ -44,6 +44,8 @@ export interface ListBoxRootProps<T = unknown> {
     disallowEmptySelection?: boolean;
     /** Visual variant. */
     variant?: ListBoxVariants["variant"];
+    /** How tall a row stands, matching a field of the same size. @default "md" */
+    size?: ListBoxVariants["size"];
     /** Drag and drop behaviour, from `useDragAndDrop`. */
     dragAndDropHooks?: DragAndDropHooks;
 }

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

@@ -9,6 +9,7 @@ export declare const Menu: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
         class?: string;
+        size?: import("@ropav/styles").MenuVariants["size"];
         id?: string;
         ariaLabelledby?: string;
         ariaLabel?: string;
@@ -48,6 +49,7 @@ export declare const Menu: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             class?: string;
+            size?: import("@ropav/styles").MenuVariants["size"];
             id?: string;
             ariaLabelledby?: string;
             ariaLabel?: string;

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

@@ -9,6 +9,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 	__name: "menu-root",
 	props: {
 		class: {},
+		size: {},
 		id: {},
 		ariaLabelledby: {},
 		ariaLabel: {},
@@ -38,7 +39,10 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		const props = __props;
 		const emit = __emit;
 		const callerSlots = useSlots();
-		const styles = computed(() => menuVariants({ class: props.class }));
+		const styles = computed(() => menuVariants({
+			class: props.class,
+			size: props.size
+		}));
 		provideSeparatorContext({ elementType: "div" });
 		const menu = useMenu({
 			autoFocus: () => props.autoFocus,

package/dist/components/menu/menu.types.d.ts

@@ -1,8 +1,11 @@
 import type { CollectionKey } from "../../composables/use-collection.js";
 import type { FocusStrategy } from "../../composables/use-overlay-trigger-state.js";
 import type { CollectionSelection, DisabledBehavior, SelectionBehavior, SelectionMode } from "../../composables/use-selection-manager.js";
+import type { MenuVariants } from "@ropav/styles";
 export interface MenuRootProps {
     class?: string;
+    /** How tall a row stands, matching a field of the same size. @default "md" */
+    size?: MenuVariants["size"];
     /** Overrides the menu's id, which a trigger's `aria-controls` points at. */
     id?: string;
     /** The id of the element naming the menu, normally its trigger. */

package/dist/components/number-field/index.d.ts

@@ -13,6 +13,7 @@ export declare const NumberField: ((__VLS_props: NonNullable<Awaited<typeof __VL
     props: import('vue').PublicProps & {
         class?: string;
         variant?: import("@ropav/styles").NumberFieldVariants["variant"];
+        size?: import("@ropav/styles").NumberFieldVariants["size"];
         fullWidth?: boolean;
         value?: number | null;
         defaultValue?: number;
@@ -144,6 +145,7 @@ export declare const NumberField: ((__VLS_props: NonNullable<Awaited<typeof __VL
         props: import('vue').PublicProps & {
             class?: string;
             variant?: import("@ropav/styles").NumberFieldVariants["variant"];
+            size?: import("@ropav/styles").NumberFieldVariants["size"];
             fullWidth?: boolean;
             value?: number | null;
             defaultValue?: number;
@@ -189,5 +191,6 @@ export { NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButto
 export type { NumberFieldRootProps, NumberFieldRootProps as NumberFieldProps, NumberFieldRootSlotProps, NumberFieldGroupProps, NumberFieldGroupSlotProps, NumberFieldInputProps, NumberFieldStepperButtonProps, } from "./number-field.types.js";
 export { provideNumberFieldContext, useNumberFieldContext } from "./number-field.context.js";
 export type { NumberFieldContext } from "./number-field.context.js";
+export type { NumberFieldStepper, UseNumberFieldReturn } from "../../composables/use-number-field.js";
 export { numberFieldVariants } from "@ropav/styles";
 export type { NumberFieldVariants } from "@ropav/styles";

package/dist/components/number-field/number-field-root.js

@@ -13,6 +13,7 @@ var number_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: {
 		class: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -98,6 +99,7 @@ var number_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		});
 		const slots = computed(() => numberFieldVariants({
 			fullWidth: props.fullWidth,
+			size: props.size,
 			variant: props.variant
 		}));
 		provideFieldIdsContext(field.fieldIds);

package/dist/components/number-field/number-field.types.d.ts

@@ -5,6 +5,8 @@ export interface NumberFieldRootProps {
     class?: string;
     /** Visual variant. @default "primary" */
     variant?: NumberFieldVariants["variant"];
+    /** How tall the field stands, matching a button of the same size. @default "md" */
+    size?: NumberFieldVariants["size"];
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** The number in the field. Makes it controlled. `null` means no number at all. */