ropav 0.3.1 → 0.5.0

package/dist/{composables → components/date-range-picker}/use-date-range-picker.d.ts

@@ -1,10 +1,10 @@
-import type { DayOfWeek } from "../utils/calendar.js";
-import type { FocusManager } from "../utils/focus.js";
-import type { PageBehavior } from "./use-calendar-state.js";
-import type { DateRangePickerState } from "./use-date-range-picker-state.js";
-import type { FieldIdsContext } from "./use-field-ids.js";
-import type { FormValidationState } from "./use-form-validation-state.js";
-import type { UsePressHandlers } from "./use-press.js";
+import type { PageBehavior } from "../../composables/use-calendar-state.js";
+import type { DateRangePickerState } from "../../composables/use-date-range-picker-state.js";
+import type { FieldIdsContext } from "../../composables/use-field-ids.js";
+import type { FormValidationState } from "../../composables/use-form-validation-state.js";
+import type { UsePressHandlers } from "../../composables/use-press.js";
+import type { DayOfWeek } from "../../utils/calendar.js";
+import type { FocusManager } from "../../utils/focus.js";
 import type { DateValue } from "@internationalized/date";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface UseDateRangePickerOptions {

package/dist/{composables → components/date-range-picker}/use-date-range-picker.js

@@ -1,14 +1,14 @@
-import { useId as useId$1 } from "./use-id.js";
-import { createFocusManager } from "../utils/focus.js";
-import { useFieldIds } from "./use-field-ids.js";
-import { DEFAULT_VALIDATION_RESULT, mergeValidation } from "./use-form-validation-state.js";
-import { useLocale } from "./use-locale.js";
-import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
-import { useDescription } from "./use-description.js";
-import { datepickerStrings } from "../i18n/datepicker.js";
-import { useDatePickerGroup } from "./use-date-picker-group.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { createFocusManager } from "../../utils/focus.js";
+import { useFieldIds } from "../../composables/use-field-ids.js";
+import { DEFAULT_VALIDATION_RESULT, mergeValidation } from "../../composables/use-form-validation-state.js";
+import { useLocale } from "../../composables/use-locale.js";
+import { useLocalizedStringFormatter } from "../../composables/use-localized-string-formatter.js";
+import { useDescription } from "../../composables/use-description.js";
+import { datepickerStrings } from "../../i18n/datepicker.js";
+import { useDatePickerGroup } from "../../composables/use-date-picker-group.js";
 import { computed, toValue } from "vue";
-//#region src/composables/use-date-range-picker.ts
+//#region src/components/date-range-picker/use-date-range-picker.ts
 /**
 * The behaviour and accessibility wiring for a date range picker.
 *

package/dist/components/drawer/drawer-dialog.js

@@ -1,7 +1,7 @@
 import { provideSurfaceContext } from "../surface/surface.context.js";
 import { provideFieldIdsContext, useFieldIds } from "../../composables/use-field-ids.js";
 import { useDrawerContext, useDrawerOverlayContext } from "./drawer.context.js";
-import { useDrawerDrag } from "../../composables/use-drawer-drag.js";
+import { useDrawerDrag } from "./use-drawer-drag.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/drawer/drawer-dialog.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<section data-slot=drawer-dialog role=dialog tabindex=-1>", 1);

package/dist/{composables → components/drawer}/use-drawer-drag.d.ts

@@ -1,4 +1,4 @@
-import type { DrawerPlacement } from "../components/drawer/drawer.types.js";
+import type { DrawerPlacement } from "./drawer.types.js";
 import type { MaybeRefOrGetter } from "vue";
 export interface UseDrawerDragOptions {
     /** The panel that moves. */

package/dist/{composables → components/drawer}/use-drawer-drag.js

@@ -1,5 +1,5 @@
 import { toValue, watch } from "vue";
-//#region src/composables/use-drawer-drag.ts
+//#region src/components/drawer/use-drawer-drag.ts
 /** How far the pointer has to travel before the panel starts following it, in pixels. */
 var DRAG_THRESHOLD = 8;
 /** How much of the panel has to be dragged away before letting go dismisses it. */

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

@@ -3,12 +3,13 @@ import { useMenu } from "../../composables/use-menu.js";
 import { useDropdownContext, useDropdownPopoverTarget } from "./dropdown.context.js";
 import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 //#region src/components/dropdown/dropdown-menu.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 dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "dropdown-menu",
 	props: {
 		class: {},
+		size: {},
 		selectionMode: {},
 		selectionBehavior: {},
 		selectedKeys: {},
@@ -69,6 +70,7 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		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/dropdown/dropdown-submenu-trigger.js

@@ -3,7 +3,7 @@ import { useSubmenuTriggerState } from "../../composables/use-overlay-trigger-st
 import { provideMenuItemPopupContext } from "../menu-item/menu-item.context.js";
 import { useMenuContext } from "../menu/menu.context.js";
 import { provideDropdownPopoverTarget, useDropdownContext } from "./dropdown.context.js";
-import { useSafelyMouseToSubmenu } from "../../composables/use-safely-mouse-to-submenu.js";
+import { useSafelyMouseToSubmenu } from "./use-safely-mouse-to-submenu.js";
 import { computed, createSlot, defineVaporComponent, onScopeDispose, shallowRef, watch } from "vue";
 var dropdown_submenu_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "dropdown-submenu-trigger",

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

@@ -36,7 +36,7 @@ export interface DropdownPopoverProps {
     isKeyboardDismissDisabled?: boolean;
 }
 /**
- * The menu inside a dropdown. Everything a standalone menu takes, minus the ids and the focus
- * strategy, which the trigger decides.
+ * The menu inside a dropdown. Everything a standalone menu takes, minus the naming, the ids and the
+ * focus strategy, all of which the trigger decides.
  */
-export type DropdownMenuProps = Omit<MenuRootProps, "ariaLabelledby" | "autoFocus" | "id">;
+export type DropdownMenuProps = Omit<MenuRootProps, "ariaLabel" | "ariaLabelledby" | "autoFocus" | "id">;

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

@@ -16,7 +16,7 @@ export declare const Dropdown: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
     emit: ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
-        trigger?: import("../../composables/use-menu-trigger.js").MenuTriggerType;
+        trigger?: import("./index.js").MenuTriggerType;
         isOpen?: boolean;
         defaultOpen?: boolean;
         isDisabled?: boolean;
@@ -91,6 +91,7 @@ export declare const Dropdown: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             class?: string;
+            size?: import("@ropav/styles").MenuVariants["size"];
             selectionMode?: import("../../index.js").SelectionMode;
             selectionBehavior?: import("../../index.js").SelectionBehavior;
             selectedKeys?: "all" | Iterable<import("../../index.js").CollectionKey>;
@@ -151,7 +152,7 @@ export declare const Dropdown: ((__VLS_props: NonNullable<Awaited<typeof __VLS_s
         emit: ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void);
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
-            trigger?: import("../../composables/use-menu-trigger.js").MenuTriggerType;
+            trigger?: import("./index.js").MenuTriggerType;
             isOpen?: boolean;
             defaultOpen?: boolean;
             isDisabled?: boolean;
@@ -269,5 +270,6 @@ export { DropdownMenu, DropdownPopover, DropdownRoot, DropdownSubmenuTrigger, Dr
 export type { DropdownMenuProps, DropdownPopoverProps, DropdownRootEmits, DropdownRootProps, DropdownRootProps as DropdownProps, DropdownTriggerProps, } from "./dropdown.types.js";
 export { useDropdownContext, useDropdownPopoverTarget } from "./dropdown.context.js";
 export type { DropdownContext, DropdownPopoverTarget } from "./dropdown.context.js";
+export type { MenuTriggerType } from "../../composables/use-menu-trigger.js";
 export { dropdownVariants } from "@ropav/styles";
 export type { DropdownVariants } from "@ropav/styles";

package/dist/{composables → components/dropdown}/use-safely-mouse-to-submenu.js

@@ -1,5 +1,5 @@
 import { onScopeDispose, toValue, watch } from "vue";
-//#region src/composables/use-safely-mouse-to-submenu.ts
+//#region src/components/dropdown/use-safely-mouse-to-submenu.ts
 /** How many consecutive moves away from the submenu it takes to give up on the journey. */
 var ALLOWED_INVALID_MOVEMENTS = 2;
 /** Pointer moves arrive far faster than the geometry changes. */

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

@@ -1,6 +1,6 @@
 import { defineVaporComponent, renderEffect, setClass, template } from "vue";
 //#region src/components/icons/icon-overlay-arrow.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<svg fill=none height=12 viewBox=\"0 0 12 12\" width=12 xmlns=http://www.w3.org/2000/svg><path d=\"M0 0C5.48483 8 6.5 8 12 0Z\">", 1, 1);
+var t0 = template("<svg fill=none height=12 viewBox=\"0 0 12 12\" width=12 xmlns=http://www.w3.org/2000/svg><path d=\"M1 0V2C3.2 2 4.3 8 6 8C7.7 8 8.8 2 11 2V0Z\">", 1, 1);
 var icon_overlay_arrow_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "icon-overlay-arrow",
 	props: { class: {} },

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export * from "./chip/index.js";
 export * from "./close-button/index.js";
 export * from "./color-area/index.js";
 export * from "./color-field/index.js";
+export * from "./color-input-group/index.js";
 export * from "./color-picker/index.js";
 export * from "./color-slider/index.js";
 export * from "./color-swatch/index.js";
@@ -60,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

@@ -2,40 +2,48 @@ import InputRoot from "./input-root.js";
 export declare const Input: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
         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;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 }) & {
     Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             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;
+            "onUpdate:value"?: ((value: string) => any) | undefined;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
         expose: (exposed: {}) => void;
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }>) => import('vue').VNode & {
         __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
     };

package/dist/components/input/input-root.d.ts

@@ -1,12 +1,15 @@
 import type { InputRootProps } from "./input.types.js";
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputRootProps> & (typeof globalThis extends {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputRootProps & {
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, template, unref } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 import { inputVariants } from "@ropav/styles";
 //#region src/components/input/input-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<input>", 1);
@@ -10,32 +11,72 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 	__name: "input-root",
 	props: {
 		class: {},
+		value: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
 		},
 		placeholder: {}
 	},
-	setup(__props) {
+	emits: ["change", "update:value"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const control = useTextFieldControlContext();
 		const textField = useTextFieldContext();
-		const setElement = (element) => {
-			control?.registerElement(element instanceof HTMLInputElement ? element : null);
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLInputElement ? next : null;
+			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(() => {
 			const merged = { ...control?.attrs.value };
 			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
+			if (props.value !== void 0) merged["value"] = props.value;
 			return merged;
 		});
 		const interaction = useInteractionStates({ isDisabled: () => control?.isDisabled.value });
+		const inputCount = shallowRef(0);
+		const onInput = (event) => {
+			control?.handlers.onInput(event);
+			const next = event.currentTarget.value;
+			emit("change", next);
+			emit("update:value", next);
+			if (props.value !== void 0) inputCount.value++;
+		};
+		/**
+		* Put the text back to what the caller holds, reset source included. A `value` set on the control
+		* makes the caller the owner of it, and a caller that keeps it unchanged means the typing is
+		* rejected — but the browser has already moved the text, and Vapor skips writing `value` when the
+		* bound value has not changed, so nothing would put it back.
+		*
+		* Post-flush, because the value only settles once the listener that heard the change has updated
+		* whatever holds it. `immediate`, and with the element in the dependencies, because the reset
+		* source has to be there before a reset rather than after the first keystroke — `inputCount` alone
+		* never fires on a control nobody has typed into. See {@link setFormValue}.
+		*/
+		watch([
+			element,
+			() => props.value,
+			inputCount
+		], ([el, pinned]) => {
+			if (pinned === void 0) return;
+			setFormValue(el, pinned);
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.value !== void 0, (owned) => control?.setValueOwned(owned), { immediate: true });
 		const onFocus = (event) => {
 			interaction.onFocus();
 			control?.handlers.onFocus(event);
@@ -48,7 +89,7 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const n0 = t0();
 		on(n0, "blur", onBlur);
 		on(n0, "focus", onFocus);
-		on(n0, "input", (e) => unref(control)?.handlers.onInput(e));
+		on(n0, "input", onInput);
 		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
 		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
 		on(n0, "pointerdown", (e) => unref(interaction).onPointerdown(e));

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

@@ -1,8 +1,19 @@
 import type { InputVariants } from "@ropav/styles";
 export interface InputRootProps {
     class?: string;
+    /**
+     * Text in the control. Set here it takes the control over from the surrounding field, so the
+     * caller owns the value even inside a `TextField` — exactly as a `value` prop does in React.
+     * Without a listener to go with it the text is pinned.
+     */
+    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.
 *