ropav 0.12.0 → 0.12.2

package/dist/composables/use-combo-box.js

@@ -176,7 +176,8 @@ var useComboBox = (options, state) => {
 		},
 		onPressStart: (event) => {
 			if (event.pointerType === "touch") return;
-			state.toggle(event.pointerType === "keyboard" || event.pointerType === "virtual" ? "first" : null, "manual");
+			const strategy = event.pointerType === "keyboard" || event.pointerType === "virtual" ? "first" : null;
+			state.toggle(strategy, "manual");
 			focusInput();
 		},
 		preventFocusOnPress: true

package/dist/composables/use-date-field-state.js

@@ -170,6 +170,7 @@ var useDateFieldState = (options) => {
 	const validation = useFormValidationState({
 		builtinValidation,
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired,
 		name: () => toValue(options.name),
 		validate: () => options.validate,
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-date-picker-state.d.ts

@@ -24,6 +24,8 @@ export interface UseDatePickerStateOptions {
     hideTimeZone?: MaybeRefOrGetter<boolean | undefined>;
     shouldForceLeadingZeros?: MaybeRefOrGetter<boolean | undefined>;
     isInvalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the field has to hold a value. Enforced by the validation state under `"aria"`. */
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
     validate?: (value: DateValue | null) => string | string[] | true | null | undefined;
     validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
     name?: MaybeRefOrGetter<string | undefined>;

package/dist/composables/use-date-picker-state.js

@@ -54,6 +54,7 @@ var useDatePickerState = (options) => {
 	const validation = useFormValidationState({
 		builtinValidation: computed(() => getDateValidationResult(value.value, toValue(options.minValue), toValue(options.maxValue), options.isDateUnavailable, formatOpts.value)),
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => toValue(options.name),
 		validate: () => options.validate,
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-date-range-picker-state.d.ts

@@ -35,6 +35,8 @@ export interface UseDateRangePickerStateOptions {
     hideTimeZone?: MaybeRefOrGetter<boolean | undefined>;
     shouldForceLeadingZeros?: MaybeRefOrGetter<boolean | undefined>;
     isInvalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the field has to hold a value. Enforced by the validation state under `"aria"`. */
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
     validate?: (value: DateRange | null) => string | string[] | true | null | undefined;
     validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
     /** Name the start of the range is submitted under. */

package/dist/composables/use-date-range-picker-state.js

@@ -78,7 +78,9 @@ var useDateRangePickerState = (options) => {
 	}));
 	const validation = useFormValidationState({
 		builtinValidation: computed(() => getRangeValidationResult(value.value, toValue(options.minValue), toValue(options.maxValue), options.isDateUnavailable, formatOpts.value)),
+		isEmpty: (range) => !range?.start || !range.end,
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => [toValue(options.startName), toValue(options.endName)].filter(Boolean),
 		validate: () => options.validate,
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-description.js

@@ -33,6 +33,7 @@ var useDescription = (description) => {
 			id.value = void 0;
 			return;
 		}
+		if (typeof document === "undefined") return;
 		let node = nodes.get(text);
 		if (!node) {
 			const element = document.createElement("div");

package/dist/composables/use-disclosure-panel.js

@@ -34,7 +34,8 @@ var useDisclosurePanel = (options) => {
 		panel.style.setProperty("--disclosure-panel-height", height);
 	};
 	const applyPanelState = (panel, expanded) => {
-		if (wasExpanded === null || !(typeof panel.getAnimations === "function")) {
+		const canAnimate = typeof panel.getAnimations === "function";
+		if (wasExpanded === null || !canAnimate) {
 			if (expanded) {
 				panel.removeAttribute("hidden");
 				setSize(panel, "auto", "auto");

package/dist/composables/use-drag.js

@@ -160,12 +160,15 @@ var useDrag = (options) => {
 	};
 	const onDragend = (event) => {
 		event.stopPropagation();
-		if (options.onDragEnd) options.onDragEnd({
-			dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect ?? event.dataTransfer?.dropEffect ?? "none"] ?? "cancel",
-			type: "dragend",
-			x: event.clientX,
-			y: event.clientY
-		});
+		if (options.onDragEnd) {
+			const dropEffect = event.dataTransfer?.dropEffect ?? "none";
+			options.onDragEnd({
+				dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect ?? dropEffect] ?? "cancel",
+				type: "dragend",
+				x: event.clientX,
+				y: event.clientY
+			});
+		}
 		draggingElement.value = null;
 		releaseDropGuard?.();
 		releaseDropGuard = null;

package/dist/composables/use-drop.js

@@ -14,7 +14,8 @@ var DROP_ACTIVATE_TIMEOUT = 800;
 * Ported from React Aria's `getAllowedOperations`.
 */
 var getAllowedOperations = (event) => {
-	let allowed = DROP_OPERATION_ALLOWED[event.dataTransfer?.effectAllowed ?? "uninitialized"] ?? DROP_OPERATION.all;
+	const effectAllowed = event.dataTransfer?.effectAllowed ?? "uninitialized";
+	let allowed = DROP_OPERATION_ALLOWED[effectAllowed] ?? DROP_OPERATION.all;
 	if (globalAllowedDropOperations) allowed &= globalAllowedDropOperations;
 	let allowedModifiers = DROP_OPERATION.none;
 	if (isMac()) {

package/dist/composables/use-droppable-collection.js

@@ -100,7 +100,8 @@ var useDroppableCollection = (options, state, element) => {
 			if (inserted.length > 0) {
 				selectionManager.setSelectedKeys(inserted);
 				if (selectionManager.focusedKey.value === focusedKey) {
-					selectionManager.setFocusedKey(inserted[0]);
+					const first = inserted[0];
+					selectionManager.setFocusedKey(first);
 					if (selectionManager.selectionMode.value === "none") setInteractionModality("keyboard");
 				}
 			}

package/dist/composables/use-form-validation-state.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, MaybeRefOrGetter } from "vue";
+import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
 /**
  * Snapshot of an element's `ValidityState`.
  *
@@ -39,6 +39,8 @@ export type ValidationFunction<T> = (value: T) => string | string[] | true | nul
 export declare const VALID_VALIDITY_STATE: ValidationDetails;
 /** Failure that came from a prop, a `validate` function or the server rather than the browser. */
 export declare const CUSTOM_VALIDITY_STATE: ValidationDetails;
+/** A required field with nothing in it. What the browser reports under `"native"`. */
+export declare const MISSING_VALIDITY_STATE: ValidationDetails;
 export declare const DEFAULT_VALIDATION_RESULT: ValidationResult;
 /**
  * One verdict out of several, for a control whose value has more than one part.
@@ -51,6 +53,23 @@ export declare const mergeValidation: (...results: ValidationResult[]) => Valida
 export type ValidatableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 /** Freeze an element's live validity into a result the state layer can hold. */
 export declare const getNativeValidation: (element: ValidatableElement) => ValidationResult;
+/**
+ * The kinds of control a required field can be. Each is a different sentence: a list asks to be
+ * chosen from, a checkbox to be ticked.
+ */
+export type RequiredControl = "checkbox" | "radio" | "select" | "text";
+/**
+ * What the browser would say about an empty control of this kind.
+ *
+ * Read off a detached probe rather than translated here. The platform already holds the sentence,
+ * in the *browser's* locale — which is the locale a validation message belongs in, since it sits
+ * beside the browser's own — and it is the one the same field would report under `"native"`.
+ *
+ * Empty on a server, where the field cannot have been revealed yet and so has nothing to say.
+ */
+export declare const missingValueMessage: (kind: RequiredControl) => string;
+/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
+export declare const isValueMissing: (value: unknown) => boolean;
 /** Errors a server returned, keyed by the `name` each field submits under. */
 export type FormValidationErrors = Record<string, string | string[]>;
 export interface FormContext {
@@ -58,6 +77,14 @@ export interface FormContext {
     validationErrors: ComputedRef<FormValidationErrors>;
     /** Default for every field inside, unless the field names its own. */
     validationBehavior: ComputedRef<ValidationBehavior>;
+    /**
+     * Bumped by every submit attempt.
+     *
+     * Under `"native"` a field learns of a failed submit from the browser, which fires `invalid` at
+     * it. Under `"aria"` the browser is not involved, so this is the only thing that tells a field
+     * holding an unrevealed error that it is now being asked for.
+     */
+    submitCount?: Readonly<Ref<number>>;
 }
 /**
  * React splits this in two — `FormValidationContext` in react-stately for the errors,
@@ -83,6 +110,18 @@ export interface UseFormValidationStateOptions<T> {
     name?: MaybeRefOrGetter<string | string[] | undefined>;
     /** Validity a composite field worked out from its own parts. */
     builtinValidation?: MaybeRefOrGetter<ValidationResult | undefined>;
+    /**
+     * Whether the field has to hold a value.
+     *
+     * Enforced here only under `"aria"`. Under `"native"` the control carries the `required`
+     * attribute and the browser reaches the same verdict itself, so a second one here would only
+     * be a chance to disagree.
+     */
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
+    /** Which sentence a missing value is reported with. @default "text" */
+    requiredControl?: RequiredControl;
+    /** Whether the value counts as nothing. @default {@link isValueMissing} */
+    isEmpty?: (value: T | null | undefined) => boolean;
     /**
      * A validation state owned by something above, which this field reports through instead of
      * keeping one of its own.
@@ -118,15 +157,19 @@ export declare const isEqualValidation: (a: ValidationResult | null, b: Validati
  * Decide what a field's validation currently says, ported from React Aria's
  * `packages/react-stately/src/form/useFormValidationState.ts` (react-stately 3.49.0).
  *
- * Knows nothing about the DOM — `useFormValidation` is what connects this to a real input.
- * Four sources feed it, in a fixed order of precedence:
+ * Holds no element of its own — `useFormValidation` is what connects this to a real input.
+ * Five sources feed it, in a fixed order of precedence:
  *
  * ```
- * realtime        = controlled ?? server ?? client ?? builtin ?? valid
+ * realtime        = controlled ?? server ?? client ?? required ?? builtin ?? valid
  * display(native) = controlled ?? server ?? committed
- * display(aria)   = controlled ?? server ?? client ?? builtin ?? committed
+ * display(aria)   = controlled ?? server ?? client ?? required* ?? builtin ?? committed
  * ```
  *
+ * `required` is the missing-value rule, and it is there for `"aria"` alone: under `"native"` the
+ * control carries the attribute and the browser reaches the verdict itself. The `*` is the reveal
+ * — it waits for a commit or a submit, so a form does not arrive with every required field red.
+ *
  * `realtimeValidation` is what the field pushes onto the input through `setCustomValidity`,
  * so the browser blocks submission the moment the value stops being acceptable.
  * `displayValidation` is what the user reads, and under `"native"` it moves only on commit —

package/dist/composables/use-form-validation-state.js

@@ -20,6 +20,12 @@ var CUSTOM_VALIDITY_STATE = Object.freeze({
 	customError: true,
 	valid: false
 });
+/** A required field with nothing in it. What the browser reports under `"native"`. */
+var MISSING_VALIDITY_STATE = Object.freeze({
+	...VALID_VALIDITY_STATE,
+	valid: false,
+	valueMissing: true
+});
 var DEFAULT_VALIDATION_RESULT = Object.freeze({
 	isInvalid: false,
 	validationDetails: VALID_VALIDITY_STATE,
@@ -68,6 +74,41 @@ var getNativeValidation = (element) => {
 		validationErrors: element.validationMessage ? [element.validationMessage] : []
 	};
 };
+var missingValueMessages = /* @__PURE__ */ new Map();
+/**
+* What the browser would say about an empty control of this kind.
+*
+* Read off a detached probe rather than translated here. The platform already holds the sentence,
+* in the *browser's* locale — which is the locale a validation message belongs in, since it sits
+* beside the browser's own — and it is the one the same field would report under `"native"`.
+*
+* Empty on a server, where the field cannot have been revealed yet and so has nothing to say.
+*/
+var missingValueMessage = (kind) => {
+	const cached = missingValueMessages.get(kind);
+	if (cached !== void 0) return cached;
+	if (typeof document === "undefined") return "";
+	let probe;
+	if (kind === "select") probe = document.createElement("select");
+	else {
+		const input = document.createElement("input");
+		if (kind !== "text") {
+			input.type = kind;
+			input.name = "probe";
+		}
+		probe = input;
+	}
+	probe.required = true;
+	const message = probe.validationMessage;
+	missingValueMessages.set(kind, message);
+	return message;
+};
+/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
+var isValueMissing = (value) => {
+	if (value == null || value === "" || value === false) return true;
+	if (Array.isArray(value)) return value.length === 0;
+	return typeof value === "number" && Number.isNaN(value);
+};
 /**
 * React splits this in two — `FormValidationContext` in react-stately for the errors,
 * `FormContext` in react-aria-components for the behaviour — only because the two live in
@@ -109,15 +150,19 @@ var isEqualValidation = (a, b) => {
 * Decide what a field's validation currently says, ported from React Aria's
 * `packages/react-stately/src/form/useFormValidationState.ts` (react-stately 3.49.0).
 *
-* Knows nothing about the DOM — `useFormValidation` is what connects this to a real input.
-* Four sources feed it, in a fixed order of precedence:
+* Holds no element of its own — `useFormValidation` is what connects this to a real input.
+* Five sources feed it, in a fixed order of precedence:
 *
 * ```
-* realtime        = controlled ?? server ?? client ?? builtin ?? valid
+* realtime        = controlled ?? server ?? client ?? required ?? builtin ?? valid
 * display(native) = controlled ?? server ?? committed
-* display(aria)   = controlled ?? server ?? client ?? builtin ?? committed
+* display(aria)   = controlled ?? server ?? client ?? required* ?? builtin ?? committed
 * ```
 *
+* `required` is the missing-value rule, and it is there for `"aria"` alone: under `"native"` the
+* control carries the attribute and the browser reaches the verdict itself. The `*` is the reveal
+* — it waits for a commit or a submit, so a form does not arrive with every required field red.
+*
 * `realtimeValidation` is what the field pushes onto the input through `setCustomValidity`,
 * so the browser blocks submission the moment the value stops being acceptable.
 * `displayValidation` is what the user reads, and under `"native"` it moves only on commit —
@@ -157,6 +202,17 @@ var useFormValidationState = (options) => {
 		const result = toValue(options.builtinValidation);
 		return result && !result.validationDetails.valid ? result : null;
 	});
+	const requiredError = computed(() => {
+		if (validationBehavior.value !== "aria") return null;
+		if (!toValue(options.isRequired)) return null;
+		if (!(options.isEmpty ?? isValueMissing)(toValue(options.value))) return null;
+		const message = missingValueMessage(options.requiredControl ?? "text");
+		return {
+			isInvalid: true,
+			validationDetails: MISSING_VALIDITY_STATE,
+			validationErrors: message ? [message] : []
+		};
+	});
 	const serverErrors = computed(() => form?.validationErrors.value ?? {});
 	const serverErrorMessages = computed(() => {
 		const name = toValue(options.name);
@@ -172,11 +228,22 @@ var useFormValidationState = (options) => {
 	const nextNative = shallowRef(DEFAULT_VALIDATION_RESULT);
 	/** What a commit has already revealed. */
 	const committed = shallowRef(DEFAULT_VALIDATION_RESULT);
+	/**
+	* Whether the field has been asked to prove itself yet.
+	*
+	* A required field is empty from its first render, and `"aria"` shows a client error the moment
+	* it appears — so without this a form would arrive with every required field already red. It
+	* gates the missing-value verdict alone; a `validate` the caller wrote still reports as it types.
+	*/
+	const isRevealed = shallowRef(false);
+	watch(() => form?.submitCount?.value ?? 0, (count) => {
+		if (count > 0) isRevealed.value = true;
+	});
 	let isCommitQueued = false;
-	const realtimeValidation = computed(() => controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? DEFAULT_VALIDATION_RESULT);
+	const realtimeValidation = computed(() => controlledError.value ?? serverError.value ?? clientError.value ?? requiredError.value ?? builtinValidation.value ?? DEFAULT_VALIDATION_RESULT);
 	const displayValidation = computed(() => {
 		if (validationBehavior.value === "native") return controlledError.value ?? serverError.value ?? committed.value;
-		return controlledError.value ?? serverError.value ?? clientError.value ?? builtinValidation.value ?? committed.value;
+		return controlledError.value ?? serverError.value ?? clientError.value ?? (isRevealed.value ? requiredError.value : null) ?? builtinValidation.value ?? committed.value;
 	});
 	const setCommitted = (result) => {
 		if (!isEqualValidation(result, committed.value)) committed.value = result;
@@ -184,6 +251,7 @@ var useFormValidationState = (options) => {
 	return {
 		commitValidation: () => {
 			isServerErrorCleared.value = true;
+			isRevealed.value = true;
 			if (validationBehavior.value !== "native" || isCommitQueued) return;
 			isCommitQueued = true;
 			nextTick(() => {
@@ -196,6 +264,7 @@ var useFormValidationState = (options) => {
 		realtimeValidation,
 		resetValidation: () => {
 			setCommitted(DEFAULT_VALIDATION_RESULT);
+			isRevealed.value = false;
 			isCommitQueued = false;
 			isServerErrorCleared.value = true;
 		},
@@ -210,4 +279,4 @@ var useFormValidationState = (options) => {
 	};
 };
 //#endregion
-export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, mergeValidation, provideFormContext, useFormContext, useFormValidationState };
+export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, MISSING_VALIDITY_STATE, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, isValueMissing, mergeValidation, missingValueMessage, provideFormContext, useFormContext, useFormValidationState };

package/dist/composables/use-input-otp.js

@@ -182,7 +182,9 @@ var useInputOTP = (options) => {
 		let end = -1;
 		let direction = void 0;
 		if (_val.length !== 0 && _s !== null && _e !== null) {
-			if (_s === _e && !(_s === _val.length && _val.length < _ml)) {
+			const isSingleCaret = _s === _e;
+			const isInsertMode = _s === _val.length && _val.length < _ml;
+			if (isSingleCaret && !isInsertMode) {
 				const c = _s;
 				if (c === 0) {
 					start = 0;
@@ -196,7 +198,8 @@ var useInputOTP = (options) => {
 					let offset = 0;
 					if (_prev[0] !== null && _prev[1] !== null) {
 						direction = c < _prev[1] ? "backward" : "forward";
-						if (direction === "backward" && !(_prev[0] === _prev[1] && _prev[0] < _ml)) offset = -1;
+						const wasPreviouslyInserting = _prev[0] === _prev[1] && _prev[0] < _ml;
+						if (direction === "backward" && !wasPreviouslyInserting) offset = -1;
 					}
 					start = offset + c;
 					end = offset + c + 1;

package/dist/composables/use-move.js

@@ -79,7 +79,8 @@ var useMove = (options) => {
 	};
 	const onPointermove = (event) => {
 		if (event.pointerId !== pointerId) return;
-		move(event, event.pointerType || "mouse", event.pageX - (lastPosition?.pageX ?? 0), event.pageY - (lastPosition?.pageY ?? 0));
+		const pointerType = event.pointerType || "mouse";
+		move(event, pointerType, event.pageX - (lastPosition?.pageX ?? 0), event.pageY - (lastPosition?.pageY ?? 0));
 		lastPosition = {
 			pageX: event.pageX,
 			pageY: event.pageY

package/dist/composables/use-number-field-state.js

@@ -87,6 +87,7 @@ var useNumberFieldState = (options = {}) => {
 	inputValue.value = format(numberValueState.value);
 	const validation = useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => toValue(options.name),
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-radio-group-state.js

@@ -38,7 +38,9 @@ var useRadioGroupState = (options = {}) => {
 	const lastFocused = shallowRef(null);
 	const validation = useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired,
 		name: () => toValue(options.name),
+		requiredControl: "radio",
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),
 		value: () => selectedValue.value

package/dist/composables/use-select-state.d.ts

@@ -40,6 +40,8 @@ export interface UseSelectStateOptions<T> {
     /** @default "all" */
     disabledBehavior?: MaybeRefOrGetter<DisabledBehavior | undefined>;
     isInvalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the field has to hold a value. Enforced by the validation state under `"aria"`. */
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
     validate?: MaybeRefOrGetter<ValidationFunction<SelectedValue> | undefined>;
     validationBehavior?: MaybeRefOrGetter<ValidationBehavior | undefined>;
     name?: MaybeRefOrGetter<string | undefined>;

package/dist/composables/use-select-state.js

@@ -91,7 +91,9 @@ var useSelectState = (options) => {
 	};
 	const validation = useFormValidationState({
 		isInvalid: options.isInvalid,
+		isRequired: options.isRequired,
 		name: options.name,
+		requiredControl: "select",
 		validate: options.validate,
 		validationBehavior: options.validationBehavior,
 		value: () => {

package/dist/composables/use-single-select-list-state.js

@@ -56,6 +56,7 @@ var useSingleSelectListState = (options = {}) => {
 	* empty collection of the first render and keep that answer.
 	*/
 	const selectedKey = computed(() => {
+		collection.size.value;
 		const key = stored.state.value;
 		if (stored.isControlled.value) return key ?? null;
 		if (key != null && collection.getItem(key)) return key;

package/dist/composables/use-text-field.js

@@ -47,6 +47,7 @@ var useTextField = (options = {}) => {
 	const isRequired = computed(() => Boolean(toValue(options.isRequired)));
 	const validation = options.validationState ?? useFormValidationState({
 		isInvalid: () => toValue(options.isInvalid),
+		isRequired: () => toValue(options.isRequired),
 		name: () => toValue(options.name),
 		validate: () => toValue(options.validate),
 		validationBehavior: () => toValue(options.validationBehavior),

package/dist/composables/use-time-field-state.js

@@ -55,6 +55,7 @@ var useTimeFieldState = (options) => {
 		if (current == null) return null;
 		return "day" in current ? toTime(current) : current;
 	});
+	const validateTime = options.validate ? () => options.validate(value.value) : void 0;
 	return {
 		...useDateFieldState({
 			createCalendar: () => new GregorianCalendar(),
@@ -77,7 +78,7 @@ var useTimeFieldState = (options) => {
 			},
 			placeholderValue: () => placeholderDate.value ?? void 0,
 			shouldForceLeadingZeros: () => toValue(options.shouldForceLeadingZeros),
-			validate: options.validate ? () => options.validate(value.value) : void 0,
+			validate: validateTime,
 			validationBehavior: () => toValue(options.validationBehavior),
 			value: () => toDateTime(value.value)
 		}),

package/dist/composables/use-toolbar.js

@@ -1,4 +1,5 @@
 import { focusableIn } from "../utils/focus.js";
+import { willOpenKeyboard } from "../utils/platform.js";
 import { computed, onMounted, shallowRef, toValue } from "vue";
 //#region src/composables/use-toolbar.ts
 /**
@@ -45,10 +46,11 @@ var useToolbar = (options) => {
 		if (!isOutermost.value) return;
 		const element = toValue(options.element);
 		const target = event.target;
-		if (!element || !(target instanceof Node) || !element.contains(target)) return;
+		if (!element || !(target instanceof Element) || !element.contains(target)) return;
 		const isReversed = orientation.value === "horizontal" && getComputedStyle(element).direction === "rtl";
 		const forward = orientation.value === "horizontal" ? "ArrowRight" : "ArrowDown";
 		const backward = orientation.value === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		if ((event.key === forward || event.key === backward) && willOpenKeyboard(target)) return;
 		if (event.key === forward) moveFocus(isReversed ? -1 : 1);
 		else if (event.key === backward) moveFocus(isReversed ? 1 : -1);
 		else if (event.key === "Tab") {

package/dist/composables/use-virtualizer.js

@@ -49,6 +49,7 @@ var useVirtualizer = (options) => {
 	/** Set by `updateItemSize`, consumed by the next pass. */
 	let pendingItemSizeChange = false;
 	const pass = computed(() => {
+		revision.value;
 		const collection = options.collection();
 		const layout = options.layout();
 		const layoutOptions = options.layoutOptions?.();