ropav 0.3.1 → 0.5.0

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,11 +15,13 @@ 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
-var t0 = template("<div role=presentation>");
-var t1 = template("<div aria-orientation=vertical data-layout=stack data-orientation=vertical data-slot=list-box role=listbox>", 1);
+var t0 = template("<div aria-disabled=true role=option>");
+var t1 = template("<div role=presentation>");
+var t2 = template("<div aria-orientation=vertical data-layout=stack data-orientation=vertical data-slot=list-box role=listbox>", 1);
 /** Stands in while a virtualized listbox has no data yet, so the layout has something to read. */
 var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "list-box-root",
@@ -36,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: [
@@ -58,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
 		}));
 		/**
@@ -162,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.
@@ -243,7 +249,10 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const rendersDropIndicators = computed(() => isVirtualized.value && dropState != null);
 		/** The gap after the last item, which no item's own "before" indicator covers. */
 		const lastItemKey = computed(() => collection.getLastKey());
-		provideSeparatorContext({ elementType: "div" });
+		provideSeparatorContext({
+			elementType: "div",
+			role: "presentation"
+		});
 		const typeahead = useTypeahead({
 			focusedKey: () => selection.focusedKey.value,
 			getKeyForSearch: keyboard.getKeyForSearch,
@@ -275,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
 		});
@@ -289,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 = t1();
+		/**
+		* 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 = t0();
-			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: () => ({
@@ -330,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",
@@ -338,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,8 +9,10 @@ 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;
         selectionMode?: import("../../index.js").SelectionMode;
         selectionBehavior?: import("../../index.js").SelectionBehavior;
         selectedKeys?: "all" | Iterable<import("../../index.js").CollectionKey>;
@@ -47,8 +49,10 @@ 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;
             selectionMode?: import("../../index.js").SelectionMode;
             selectionBehavior?: import("../../index.js").SelectionBehavior;
             selectedKeys?: "all" | Iterable<import("../../index.js").CollectionKey>;

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

@@ -3,14 +3,16 @@ import { useMenu } from "../../composables/use-menu.js";
 import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 import { menuVariants } from "@ropav/styles";
 //#region src/components/menu/menu-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div role=presentation>");
+var t0 = template("<div>");
 var t1 = template("<div>", 1);
 var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "menu-root",
 	props: {
 		class: {},
+		size: {},
 		id: {},
 		ariaLabelledby: {},
+		ariaLabel: {},
 		selectionMode: {},
 		selectionBehavior: {},
 		selectedKeys: {},
@@ -37,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,
@@ -46,6 +51,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			disabledKeys: () => props.disabledKeys,
 			disallowEmptySelection: () => props.disallowEmptySelection,
 			id: () => props.id,
+			label: () => props.ariaLabel,
 			labelledBy: () => props.ariaLabelledby,
 			onAction: (key) => emit("action", key),
 			onClose: () => emit("close"),
@@ -70,6 +76,7 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		setInsertionState(n5);
 		createIf(() => hasEmptySlot.value && unref(menu).isEmpty.value, () => {
 			const n3 = t0();
+			renderEffect(() => setDynamicProps(n3, [unref(menu).emptyAttributes.value]));
 			setInsertionState(n3);
 			createSlot("empty");
 			return n3;

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

@@ -1,12 +1,17 @@
 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. */
     ariaLabelledby?: string;
+    /** Names the menu when it has no trigger to point `ariaLabelledby` at. */
+    ariaLabel?: string;
     /** @default "none" */
     selectionMode?: SelectionMode;
     /** @default "toggle" */

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/pagination/index.d.ts

@@ -16,6 +16,7 @@ export declare const Pagination: ((__VLS_props: NonNullable<Awaited<typeof __VLS
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
+        ariaLabel?: string;
         class?: string;
         size?: import("@ropav/styles").PaginationVariants["size"];
     } & (typeof globalThis extends {
@@ -212,6 +213,7 @@ export declare const Pagination: ((__VLS_props: NonNullable<Awaited<typeof __VLS
         emit: {};
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
+            ariaLabel?: string;
             class?: string;
             size?: import("@ropav/styles").PaginationVariants["size"];
         } & (typeof globalThis extends {

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

@@ -1,11 +1,12 @@
 import { providePaginationContext } from "./pagination.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template } from "vue";
 import { paginationVariants } from "@ropav/styles";
 //#region src/components/pagination/pagination-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<nav aria-label=pagination data-slot=pagination role=navigation>", 1);
+var t0 = template("<nav data-slot=pagination role=navigation>", 1);
 var pagination_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "pagination-root",
 	props: {
+		ariaLabel: {},
 		class: {},
 		size: {}
 	},
@@ -14,7 +15,11 @@ var pagination_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const slots = computed(() => paginationVariants({ size: props.size }));
 		providePaginationContext({ slots });
 		const n1 = t0();
-		renderEffect(() => setClass(n1, slots.value.base({ class: props.class })));
+		renderEffect(() => {
+			const _props = props;
+			setAttr(n1, "aria-label", _props.ariaLabel ?? "pagination");
+			setClass(n1, slots.value.base({ class: _props.class }));
+		});
 		setInsertionState(n1);
 		createSlot();
 		return n1;

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

@@ -1,5 +1,13 @@
 import type { PaginationVariants } from "@ropav/styles";
 export interface PaginationRootProps {
+    /**
+     * Name for the navigation landmark.
+     *
+     * Overridable because the name is what tells two paginations apart: a list with one set of
+     * controls above it and another below reports the same landmark twice otherwise.
+     * @default "pagination"
+     */
+    ariaLabel?: string;
     class?: string;
     /** Pagination size. @default "md" */
     size?: PaginationVariants["size"];

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

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
 import { usePopoverContext } from "./popover.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/popover/popover-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
 var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -13,23 +14,29 @@ var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { slots } = usePopoverContext();
 		const responder = usePressResponder();
 		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 { isFocusVisible, onBlur, onFocus } = useInteractionStates();
 		const press = composePressResponder(responder);
+		const wrapperAttrs = computed(() => hasFocusableContent.value ? void 0 : responder?.attrs.value);
 		const n1 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
-			const _responder = unref(responder);
 			setDynamicProps(n1, [{
 				class: styles.value,
 				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-pressed": _dataAttr(_responder?.isPressed.value),
+				"data-pressed": _dataAttr(unref(responder)?.isPressed.value),
 				"data-slot": "popover-trigger",
-				role: "button",
-				tabindex: "0"
-			}, _responder?.attrs.value]);
+				role: hasFocusableContent.value ? void 0 : "button",
+				tabindex: hasFocusableContent.value ? void 0 : 0
+			}, wrapperAttrs.value]);
 		});
 		setInsertionState(n1);
 		createSlot();

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