ropav 0.4.0 → 0.6.0

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. */

package/dist/components/overlay/overlay-arrow.js

@@ -1,21 +1,73 @@
 import { useOverlayArrowContext } from "./overlay.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStyle, setTemplateRefBinding, template } from "vue";
+import { child, computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStyle, setTemplateRefBinding, shallowRef, template, watch } from "vue";
 //#region src/components/overlay/overlay-arrow.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div>", 1);
+var t0 = template("<div><!><svg aria-hidden=true focusable=false height=0 style=\"position: absolute\" width=0><filter id=ropav-overlay-edge color-interpolation-filters=sRGB height=200% width=200% x=-50% y=-50%><feFlood result=line style=\"flood-color: var(--overlay-edge-line, transparent)\"></feFlood><feComposite in=line in2=SourceAlpha operator=out result=outside></feComposite><feGaussianBlur in=outside result=soft stdDeviation=0.5></feGaussianBlur><feComposite in=soft in2=SourceAlpha operator=in result=glow></feComposite><feMerge><feMergeNode in=SourceGraphic></feMergeNode><feMergeNode in=glow>", 1);
+var SKIRT = 2;
+/** Half the mouth's width: the shape's mouth spans the middle 10 of its 12 unit box. */
+var HALF_MOUTH = 5;
+/**
+* How much deeper than the skirt the arrow sits, where the overlay's edge is curved.
+*
+* The mouth is straight, and it normally lies exactly on the overlay's edge, whose flat run its
+* ends meet tangentially. Near a corner the edge has curved away from that line — entirely, when
+* a large radius has clamped a short overlay toward a pill — and the mouth's ends would hang past
+* the curve as two bare horns. The recession under each end follows from the radius the overlay
+* actually renders, and the whole arrow is pulled in that far, plus a little for antialiasing.
+*/
 var overlay_arrow_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "overlay-arrow",
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
 		const arrow = useOverlayArrowContext();
+		const element = shallowRef(null);
 		const setElement = (next) => {
-			arrow?.registerElement(next ?? null);
+			element.value = next ?? null;
+			arrow?.registerElement(element.value);
 		};
 		const placement = computed(() => arrow?.placement.value ?? null);
+		/** The straight run the shape carries above its mouth, buried inside the overlay. */
+		const burial = shallowRef(0);
+		const measureBurial = () => {
+			const own = element.value;
+			const side = placement.value;
+			const isHorizontal = side === "top" || side === "bottom";
+			const centre = Number.parseFloat(arrow?.style.value[isHorizontal ? "left" : "top"] ?? "");
+			const overlay = own?.offsetParent;
+			if (!own || !side || !Number.isFinite(centre) || !(overlay instanceof HTMLElement)) return 0;
+			const width = overlay.offsetWidth;
+			const height = overlay.offsetHeight;
+			const edge = isHorizontal ? width : height;
+			const declared = getComputedStyle(overlay).borderTopLeftRadius;
+			const radius = Math.min(declared.includes("%") ? Math.min(width, height) : Number.parseFloat(declared) || 0, width / 2, height / 2);
+			if (radius <= 0) return 0;
+			const recessionAt = (position) => {
+				const intoCorner = Math.max(radius - position, position - (edge - radius), 0);
+				if (intoCorner <= 0) return 0;
+				const reach = Math.min(intoCorner, radius);
+				return radius - Math.sqrt(radius * radius - reach * reach);
+			};
+			const deepest = Math.max(recessionAt(centre - HALF_MOUTH), recessionAt(centre + HALF_MOUTH));
+			return deepest > 0 ? Math.min(deepest + .5, 4) : 0;
+		};
+		watch([
+			element,
+			placement,
+			() => arrow?.style.value
+		], () => {
+			burial.value = measureBurial();
+		}, {
+			flush: "post",
+			immediate: true
+		});
 		/**
 		* Pinned to the edge the overlay is placed against, and centred on the offset the positioner
 		* worked out.
 		*
+		* Pulled back into the overlay by the skirt, so the shape overlaps the body it grows out of
+		* rather than touching it: shapes that merely touch each antialias the shared row at fractional
+		* device pixel ratios, and the page bleeds through the seam.
+		*
 		* The offset names the arrow's centre, so it is pulled back by half its own size on the cross
 		* axis — done with a transform rather than arithmetic because only the stylesheet knows how big
 		* the arrow is.
@@ -25,20 +77,21 @@ var overlay_arrow_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			return {
 				position: "absolute",
 				transform: side === "top" || side === "bottom" ? "translateX(-50%)" : "translateY(-50%)",
-				...side ? { [side]: "100%" } : {},
+				...side ? { [side]: `calc(100% - ${SKIRT + burial.value}px)` } : {},
 				...arrow?.style.value ?? {}
 			};
 		});
-		const n1 = t0();
+		const n2 = t0();
+		const n1 = child(n2);
 		renderEffect(() => {
-			setClass(n1, props.class);
-			setAttr(n1, "data-placement", placement.value ?? void 0);
-			setStyle(n1, style.value);
+			setClass(n2, props.class);
+			setAttr(n2, "data-placement", placement.value ?? void 0);
+			setStyle(n2, style.value);
 		});
-		setInsertionState(n1);
+		setInsertionState(n2, n1);
 		createSlot();
-		setTemplateRefBinding(n1, () => setElement);
-		return n1;
+		setTemplateRefBinding(n2, () => setElement);
+		return n2;
 	}
 });
 //#endregion

package/dist/components/progress-bar/index.d.ts

@@ -13,6 +13,8 @@ export declare const ProgressBar: ((__VLS_props: NonNullable<Awaited<typeof __VL
         class?: string;
         color?: import("@ropav/styles").ProgressBarVariants["color"];
         size?: import("@ropav/styles").ProgressBarVariants["size"];
+        isStriped?: boolean;
+        isAnimated?: boolean;
         value?: number;
         minValue?: number;
         maxValue?: number;
@@ -85,6 +87,8 @@ export declare const ProgressBar: ((__VLS_props: NonNullable<Awaited<typeof __VL
             class?: string;
             color?: import("@ropav/styles").ProgressBarVariants["color"];
             size?: import("@ropav/styles").ProgressBarVariants["size"];
+            isStriped?: boolean;
+            isAnimated?: boolean;
             value?: number;
             minValue?: number;
             maxValue?: number;

package/dist/components/progress-bar/progress-bar-root.js

@@ -12,6 +12,8 @@ var progress_bar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		class: {},
 		color: {},
 		size: {},
+		isStriped: { type: Boolean },
+		isAnimated: { type: Boolean },
 		value: {},
 		minValue: {},
 		maxValue: {},
@@ -43,6 +45,8 @@ var progress_bar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		});
 		const slots = computed(() => progressBarVariants({
 			color: props.color,
+			isAnimated: props.isAnimated,
+			isStriped: props.isStriped,
 			size: props.size
 		}));
 		provideProgressBarContext({

package/dist/components/progress-bar/progress-bar.types.d.ts

@@ -4,6 +4,13 @@ export interface ProgressBarRootProps {
     class?: string;
     color?: ProgressBarVariants["color"];
     size?: ProgressBarVariants["size"];
+    /** Whether a diagonal band is laid over the fill. */
+    isStriped?: boolean;
+    /**
+     * Whether the band travels. Turns the band on by itself, so `isStriped` is only needed for a
+     * still one. Under reduced motion it settles into that still band rather than disappearing.
+     */
+    isAnimated?: boolean;
     /** Current progress. @default 0 */
     value?: number;
     /** @default 0 */

package/dist/components/radio/radio-content.js

@@ -21,7 +21,7 @@ var radio_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const setInputEl = (element) => {
 			inputEl.value = element instanceof HTMLInputElement ? element : null;
 		};
-		useFormReset(inputEl, state.defaultSelectedValue, state.setSelectedValue);
+		useFormReset(inputEl, state.defaultSelectedValue, state.setSelectedValue, form);
 		watch([inputEl, isSelected], ([input, selected]) => setFormChecked(input, selected), {
 			flush: "post",
 			immediate: true