solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/lib/server/drawer/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { a as closeWatcher, k as swipe } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
@@ -6,15 +7,15 @@ import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.
 import { TransitionStatusDataAttributes } from "../internals/stateAttributesMapping.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { a as isElement, c as isHTMLElement, l as isInteractiveElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget, t as activeElement } from "../dom-Crg_2R-j.js";
-import { n as createTriggerRegistration } from "../PopupStore-DEs3FAEe.js";
-import { r as popupTransitionStateMapping, t as CommonPopupDataAttributes } from "../popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
-import { a as DialogTitle, c as DialogDescription, d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, s as useDialogPortalContext, t as DialogHandle } from "../DialogHandle-ATZlm9RC.js";
+import { n as createTriggerRegistration } from "../PopupStore-kHjFPiQ5.js";
+import { r as popupTransitionStateMapping, t as CommonPopupDataAttributes } from "../popupStateMapping-B2KsiiLb.js";
+import { t as FocusManager } from "../FocusManager-1LfoCsya.js";
+import { a as DialogTitle, c as DialogDescription, d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, s as useDialogPortalContext, t as DialogHandle } from "../DialogHandle-nJSSy_jM.js";
 import { n as getComposedParentNode, t as findScrollableTouchTarget } from "../scrollable-CjsSxbGr.js";
 import { t as isAndroid } from "../platform-DYukKUir.js";
-import { a as getElementTransform, i as getDisplacement, o as getElementAtPoint, r as createSwipeDismiss, s as clamp, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-9H__9xbS.js";
-import { Dynamic, mergeProps, ssrElement } from "@solidjs/web";
-import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, untrack, useContext } from "solid-js";
+import { a as getElementTransform, i as getDisplacement, o as getElementAtPoint, r as createSwipeDismiss, s as clamp, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-D7ciIzsV.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/drawer/popup/DrawerPopupCssVars.ts
 var DrawerPopupCssVars = /* @__PURE__ */ function(DrawerPopupCssVars) {
 	/**
@@ -70,11 +71,12 @@ var DrawerBackdropCssVars = /* @__PURE__ */ function(DrawerBackdropCssVars) {
 function DrawerBackdrop(props) {
 	const context = useDialogRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "forceRender", "ref", "style");
+	const others = omit(props, "render", "class", "forceRender", "ref", "style");
 	const state = createMemo(() => ({
 		open: context.store.open(),
 		transitionStatus: context.presence.transitionStatus()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({
 		"pointer-events": context.store.open() ? void 0 : "none",
@@ -90,10 +92,7 @@ function DrawerBackdrop(props) {
 		onCleanup(() => {
 			if (context.backdropElement() === backdropElement) context.setBackdropElement(null);
 		});
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "div";
-			},
+		return Render(mergeProps({
 			ref: [((element) => {
 				backdropElement = element;
 				context.setBackdropElement(element);
@@ -131,16 +130,12 @@ var DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";
 function DrawerContent(props) {
 	useDialogRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
-		ref: [internalProps.ref]
-	}, { [DRAWER_CONTENT_ATTRIBUTE]: "" }, {
+	return Render(mergeProps({ ref: [internalProps.ref] }, { [DRAWER_CONTENT_ATTRIBUTE]: "" }, {
 		get ["class"]() {
 			return classValue();
 		},
@@ -199,23 +194,12 @@ var drawerIndentStateAttributesMapping = { active: (value) => value ? ACTIVE : I
 function DrawerIndentBackground(props) {
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = () => ({ active: provider?.active() ?? false });
 	const classValue = () => resolveClass(props.class, state());
 	const styleValue = () => resolveStyle(props.style, state());
 	const stateAttributes = () => getStateAttributesProps(state(), drawerIndentStateAttributesMapping);
-	const component = untrack(() => props.as);
-	return component === void 0 ? ssrElement("div", () => {
-		return mergeProps({
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true) : Dynamic(mergeProps({
-		component,
+	return useRender(props, state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -234,7 +218,7 @@ function DrawerIndentBackground(props) {
 function DrawerIndent(props) {
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = () => ({ active: provider?.active() ?? false });
 	const classValue = () => resolveClass(props.class, state());
 	const styleValue = () => mergeDialogStyles({ [DrawerBackdropCssVars.swipeProgress]: "0" }, resolveStyle(props.style, state()));
@@ -243,18 +227,7 @@ function DrawerIndent(props) {
 	const indentRef = [((element) => {
 		indentElement = element;
 	}), internalProps.ref];
-	const component = untrack(() => props.as);
-	const element = component === void 0 ? ssrElement("div", () => {
-		return mergeProps({
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true) : Dynamic(mergeProps({
-		component,
+	const element = useRender(props, state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: indentRef,
 		get ["class"]() {
 			return classValue();
@@ -511,7 +484,7 @@ function DrawerPopup(props) {
 	const swipe = useDrawerViewportContext();
 	const snap = createDrawerSnapPoints();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
+	const others = omit(props, "render", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
 	const nestedDrawerOpen = createMemo(() => context.nestedOpenDrawerCount() > 0);
 	const swiping = createMemo(() => swipe?.swiping() ?? false);
 	let popupElement = null;
@@ -586,6 +559,7 @@ function DrawerPopup(props) {
 		swipeDirection: drawer.swipeDirection(),
 		swiping: swiping()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping$1));
 	const snapPointOffsetValue = createMemo(() => {
@@ -639,10 +613,7 @@ function DrawerPopup(props) {
 	onCleanup(() => {
 		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
 	});
-	const popup = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const popup = Render(mergeProps({
 		ref: [((element) => {
 			popupElement = element;
 			context.store.setPopupElement(element);
@@ -935,7 +906,7 @@ function DrawerSwipeArea(props) {
 	const drawer = useDrawerRootContext();
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "disabled", "id", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style", "swipeDirection");
+	const others = omit(props, "render", "class", "disabled", "id", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style", "swipeDirection");
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const disabled = createMemo(() => internalProps.disabled ?? false);
@@ -956,7 +927,17 @@ function DrawerSwipeArea(props) {
 	const resolvedSwipeDirection = createMemo(() => internalProps.swipeDirection ?? oppositeSwipeDirection[drawer.swipeDirection()]);
 	const dismissDirection = createMemo(() => oppositeSwipeDirection[resolvedSwipeDirection()]);
 	const enabled = createMemo(() => !disabled() && (!store.open() || swipeActive()));
-	createTriggerRegistration(() => store, id, swipeAreaElement);
+	const [registrationReady, setRegistrationReady] = createSignal(false, { ownedWrite: true });
+	onSettled(() => {
+		let disposed = false;
+		queueMicrotask(() => {
+			if (!disposed) setRegistrationReady(true);
+		});
+		return () => {
+			disposed = true;
+		};
+	});
+	createTriggerRegistration(() => store, id, () => registrationReady() ? swipeAreaElement() : null);
 	function resetDragDelta() {
 		dragDelta.x = 0;
 		dragDelta.y = 0;
@@ -1152,6 +1133,7 @@ function DrawerSwipeArea(props) {
 		swipeDirection: resolvedSwipeDirection(),
 		disabled: disabled()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({
 		"pointer-events": enabled() ? void 0 : "none",
@@ -1179,10 +1161,7 @@ function DrawerSwipeArea(props) {
 	const onTouchMove = composeEventHandlers(() => internalProps.onTouchMove, () => (event) => swipe$2.touchHandlers.onTouchMove(event));
 	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => (event) => swipe$2.touchHandlers.onTouchEnd(event));
 	const onTouchCancel = composeEventHandlers(() => internalProps.onTouchCancel, () => (event) => swipe$2.touchHandlers.onTouchCancel(event));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((element) => setSwipeAreaElement(element)), internalProps.ref],
 		get id() {
 			return id();
@@ -1366,7 +1345,7 @@ function DrawerViewport(props) {
 			return true;
 		},
 		onProgress(progress, details) {
-			updateNestedSwipeActive(details);
+			if (swipingNow) updateNestedSwipeActive(details);
 			const points = drawer.snapPoints();
 			const hasSnapPoints = Boolean(points && points.length > 0);
 			if (swipingNow && swipeDirection() === "down" && hasSnapPoints && details) {
@@ -1382,13 +1361,17 @@ function DrawerViewport(props) {
 			if (range && popupHeight > 0) {
 				const baseOffset = snap.activeSnapPointOffset() ?? range.minOffset;
 				const offsetToProgress = (nextOffset) => clamp((nextOffset - range.minOffset) / range.range, 0, 1);
-				if (details && Number.isFinite(details.deltaY)) resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
+				if (swipingNow && details && Number.isFinite(details.deltaY)) resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
 				else {
 					const progressFromSnapPoint = snapPointProgress();
 					if (progressFromSnapPoint !== null) resolvedProgress = progressFromSnapPoint;
 				}
 			}
-			applySwipeProgress(resolvedProgress, true, true);
+			if (!swipingNow) {
+				drawer.notifyParentSwipeProgressChange?.(0);
+				finishNestedSwipe();
+			}
+			applySwipeProgress(resolvedProgress, true, swipingNow);
 		},
 		onRelease({ event, deltaX, deltaY, direction, velocityX, velocityY, releaseVelocityX, releaseVelocityY }) {
 			const popupElement = store.state.popupElement;
@@ -1453,9 +1436,21 @@ function DrawerViewport(props) {
 			const velocityOffset = Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -4, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
 			const targetOffset = drawer.snapToSequentialPoints() ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
 			const snapPointEventDetails = createChangeEventDetails(swipe, event);
-			const closeFromSnapPoints = () => {
-				pendingSwipeCloseSnapPoint = snap.activeSnapPoint();
+			const settleInPlace = () => {
+				applySwipeProgress(0, true, true);
+				clearSwipeRelease();
+				return false;
+			};
+			const settleOnSnapPoint = (point) => {
+				drawer.setActiveSnapPoint(point.value, snapPointEventDetails);
+				return settleInPlace();
+			};
+			const closeFromSnapPoints = (fallback) => {
+				if (!direction) return settleOnSnapPoint(fallback);
+				const previousSnapPoint = snap.activeSnapPoint();
 				drawer.setActiveSnapPoint(null, snapPointEventDetails);
+				if (snapPointEventDetails.isCanceled) return settleInPlace();
+				pendingSwipeCloseSnapPoint = previousSnapPoint;
 				startSwipeRelease(currentSwipeDirection);
 				return true;
 			};
@@ -1475,19 +1470,16 @@ function DrawerViewport(props) {
 							targetSnapPoint = adjacentPoint;
 							effectiveTargetOffset = adjacentPoint.offset;
 						}
-					} else if (dragDirection > 0) return closeFromSnapPoints();
+					} else if (dragDirection > 0) return closeFromSnapPoints(targetSnapPoint);
 				}
-				if (Math.abs(effectiveTargetOffset - popupHeight) < Math.abs(effectiveTargetOffset - targetSnapPoint.offset)) return closeFromSnapPoints();
-				drawer.setActiveSnapPoint(targetSnapPoint.value, snapPointEventDetails);
-				clearSwipeRelease();
-				return false;
+				if (Math.abs(effectiveTargetOffset - popupHeight) < Math.abs(effectiveTargetOffset - targetSnapPoint.offset)) return closeFromSnapPoints(targetSnapPoint);
+				return settleOnSnapPoint(targetSnapPoint);
 			}
-			if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) return closeFromSnapPoints();
 			const closestSnapPoint = resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map((point) => point.offset), targetOffset)];
-			if (Math.abs(targetOffset - popupHeight) < Math.abs(targetOffset - closestSnapPoint.offset)) return closeFromSnapPoints();
-			drawer.setActiveSnapPoint(closestSnapPoint.value, snapPointEventDetails);
-			clearSwipeRelease();
-			return false;
+			const closeDistance = Math.abs(targetOffset - popupHeight);
+			if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) return closeFromSnapPoints(closestSnapPoint);
+			if (closeDistance < Math.abs(targetOffset - closestSnapPoint.offset)) return closeFromSnapPoints(closestSnapPoint);
+			return settleOnSnapPoint(closestSnapPoint);
 		},
 		onDismiss(event) {
 			provider?.visualStateStore.set({

package/dist/lib/server/field/index.js

@@ -1,19 +1,20 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { DEFAULT_VALIDITY_DATA, DEFAULT_VALIDITY_STATE, VALIDITY_KEYS, copyNativeValidity, fieldStateAttributesMapping } from "../internals/field-constants.js";
 import { n as useFieldRootContext, t as FieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { n as useFieldItemContext, t as FieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
 import { n as useFieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
 import { t as hasFormError } from "../form-types-P7-SCWyr.js";
-import { t as FieldControl } from "../FieldControl-Y_kI7ARp.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey } from "@solidjs/web";
+import { t as FieldControl } from "../FieldControl-BDeNR3ug.js";
+import { escape, memo, mergeProps, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
 import { For, Show, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/field/root/createFieldValidation.ts
 function createFieldValidation(options) {
@@ -21,7 +22,10 @@ function createFieldValidation(options) {
 	let activeInputSource = null;
 	let validationCommitId = 0;
 	let timeout;
+	let pendingInput = null;
+	let customValidity;
 	function clearTimer() {
+		pendingInput = null;
 		if (timeout !== void 0) {
 			clearTimeout(timeout);
 			timeout = void 0;
@@ -38,93 +42,103 @@ function createFieldValidation(options) {
 		}
 		return fallback;
 	}
-	function clearCustomValidity(element) {
-		for (const inputs of registeredInputs.values()) for (const input of inputs.keys()) input.setCustomValidity("");
-		element?.setCustomValidity("");
-	}
-	function publishAllValid(value, element) {
-		clearCustomValidity(element);
-		options.publish({
-			value,
-			state: {
-				...DEFAULT_VALIDITY_STATE,
-				valid: true
-			},
-			error: "",
-			errors: [],
-			initialValue: options.getValidityData().initialValue
-		});
+	function clearCustomValidity() {
+		const record = customValidity;
+		customValidity = void 0;
+		if (record && (!record[0].willValidate || record[0].validationMessage === record[1])) record[0].setCustomValidity(record[2]);
 	}
 	function commit(value, revalidate = false) {
 		validationCommitId += 1;
 		const currentCommitId = validationCommitId;
 		clearTimer();
-		const element = findRepresentativeInput();
+		let element = findRepresentativeInput();
+		const nativeErrors = () => element?.validationMessage ? [element.validationMessage] : [];
+		const refreshState = () => {
+			element = findRepresentativeInput();
+			return element?.willValidate ? getNativeState(element, options.isMarkedDirty()) : {
+				...DEFAULT_VALIDITY_STATE,
+				valid: true
+			};
+		};
+		const publish = (state, messages) => {
+			const errors = state.valid === false ? messages : [];
+			options.publish({
+				value,
+				state,
+				errors,
+				error: errors[0] ?? "",
+				initialValue: options.getValidityData().initialValue
+			});
+		};
 		if (revalidate) {
 			if (options.state().valid !== false || !element) return;
 			const nativeValidity = element.validity;
 			if (!nativeValidity.valueMissing) {
-				publishAllValid(value, element);
+				clearCustomValidity();
+				element = findRepresentativeInput();
+				const foreign = element?.validity.customError ? nativeErrors() : [];
+				publish({
+					...DEFAULT_VALIDITY_STATE,
+					valid: foreign.length === 0,
+					customError: foreign.length > 0
+				}, foreign);
 				return;
 			}
 			for (const key of VALIDITY_KEYS) if (key !== "valueMissing" && key !== "customError" && nativeValidity[key]) return;
 		}
-		const nextState = element ? getNativeState(element, options.isMarkedDirty()) : {
-			...DEFAULT_VALIDITY_STATE,
-			valid: true
-		};
+		clearCustomValidity();
+		const nextState = refreshState();
 		const validatesOnChange = options.shouldValidateOnChange();
 		if (element?.validationMessage && !validatesOnChange) {
-			options.publish({
-				value,
-				state: nextState,
-				error: element.validationMessage,
-				errors: [element.validationMessage],
-				initialValue: options.getValidityData().initialValue
-			});
+			publish(nextState, nativeErrors());
 			return;
 		}
-		const result = options.validate()?.(value, options.form.getFormValues()) ?? null;
+		const finish = (result, state = nextState) => {
+			const errors = result ? [].concat(result).filter(Boolean) : [];
+			if (errors.length > 0) {
+				state.valid = false;
+				state.customError = true;
+				if (element?.willValidate) {
+					const displaced = element.validity.customError ? element.validationMessage : "";
+					const message = errors.join("\n").replace(/\r\n?/g, "\n");
+					element.setCustomValidity(message);
+					customValidity = [
+						element,
+						message,
+						displaced
+					];
+				}
+			}
+			publish(state, errors.length > 0 ? errors : nativeErrors());
+		};
+		const result = options.validate()?.(value, options.form.getFormValues());
 		if (isPromise(result)) {
+			pendingInput = element;
+			if (nextState.valid === false) publish(nextState, nativeErrors());
+			else if (options.validationMode() === "onSubmit" || !options.getValidityData().state.customError) publish({
+				...nextState,
+				valid: null
+			}, []);
 			result.then((resolved) => {
-				if (currentCommitId === validationCommitId) publishCustomResult(value, element, nextState, resolved, validatesOnChange);
+				if (currentCommitId === validationCommitId) {
+					pendingInput = null;
+					finish(resolved, refreshState());
+				}
+			}, () => {
+				if (currentCommitId === validationCommitId) pendingInput = null;
 			});
 			return;
 		}
-		publishCustomResult(value, element, nextState, result, validatesOnChange);
-	}
-	function publishCustomResult(value, element, nativeState, result, validatesOnChange) {
-		const state = { ...nativeState };
-		let errors = [];
-		let error = "";
-		if (result !== null) {
-			errors = Array.isArray(result) ? result : [result];
-			error = errors[0] ?? "";
-			state.valid = false;
-			state.customError = true;
-			element?.setCustomValidity(errors.join("\n"));
-		} else if (validatesOnChange) {
-			clearCustomValidity(element);
-			state.customError = false;
-			if (element?.validationMessage) {
-				error = element.validationMessage;
-				errors = [error];
-			} else if (!element || element.validity.valid) state.valid = true;
-		}
-		options.publish({
-			value,
-			state,
-			error,
-			errors,
-			initialValue: options.getValidityData().initialValue
-		});
+		finish(result);
 	}
-	function change(value) {
+	function change(value, cancelPending = false) {
 		clearTimer();
+		validationCommitId += 1;
+		if (cancelPending) return;
 		const validatesOnChange = options.shouldValidateOnChange();
 		const delay = options.validationDebounceTime();
 		if (validatesOnChange && value !== "" && delay > 0) {
-			validationCommitId += 1;
+			pendingInput = findRepresentativeInput();
 			timeout = setTimeout(() => {
 				timeout = void 0;
 				commit(value);
@@ -139,9 +153,12 @@ function createFieldValidation(options) {
 			inputs = /* @__PURE__ */ new Map();
 			registeredInputs.set(source, inputs);
 		}
-		inputs.set(element, { getControl });
+		const registration = { getControl };
+		inputs.set(element, registration);
 		return () => {
 			const currentInputs = registeredInputs.get(source);
+			if (currentInputs?.get(element) !== registration) return;
+			if (source === activeInputSource && element === pendingInput) change(void 0, true);
 			currentInputs?.delete(element);
 			if (currentInputs?.size === 0) registeredInputs.delete(source);
 		};
@@ -152,9 +169,13 @@ function createFieldValidation(options) {
 		return input ? registration?.getControl() ?? input : null;
 	}
 	function setActiveInputSource(source) {
+		if (activeInputSource && activeInputSource !== source) change(void 0, true);
 		activeInputSource = source;
 	}
-	onCleanup(clearTimer);
+	onCleanup(() => {
+		change(void 0, true);
+		clearCustomValidity();
+	});
 	return {
 		commit,
 		change,
@@ -193,7 +214,7 @@ function FieldRoot(props) {
 	const fieldset = useFieldsetRootContext(true);
 	const parentLabelable = useLabelableContext();
 	const labelable = createLabelableContext({ parent: parentLabelable });
-	const others = omit(props, "actionsRef", "as", "class", "dirty", "disabled", "invalid", "name", "style", "touched", "validate", "validationDebounceTime", "validationMode");
+	const others = omit(props, "actionsRef", "render", "class", "dirty", "disabled", "invalid", "name", "style", "touched", "validate", "validationDebounceTime", "validationMode");
 	const [touchedState, setTouchedState] = createSignal(false);
 	const [dirtyState, setDirtyState] = createSignal(false);
 	const [filled, setFilled] = createSignal(false);
@@ -229,6 +250,7 @@ function FieldRoot(props) {
 		focused: focused()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	function publishValidity(data) {
@@ -262,6 +284,7 @@ function FieldRoot(props) {
 		validate: () => props.validate,
 		validationDebounceTime: () => props.validationDebounceTime ?? 0,
 		state,
+		validationMode,
 		isMarkedDirty: () => markedDirty,
 		shouldValidateOnChange: () => validationMode() === "onChange" || validationMode() === "onSubmit" && form.submitAttempted()
 	});
@@ -336,10 +359,7 @@ function FieldRoot(props) {
 			return FieldRootContext({
 				value: context,
 				get children() {
-					return Dynamic(mergeProps({
-						get component() {
-							return props.as ?? "div";
-						},
+					return Render(mergeProps({
 						get ["class"]() {
 							return classValue();
 						},
@@ -363,7 +383,7 @@ function FieldLabel(props) {
 	const allProps = props;
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "class", "id", "nativeLabel", "onClick", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "nativeLabel", "onClick", "onMouseDown", "onPointerDown", "ref", "style");
 	const id = createMemo(() => internalProps.id ?? generatedId);
 	const nativeLabel = createMemo(() => internalProps.nativeLabel ?? true);
 	const state = createMemo(() => ({
@@ -371,6 +391,7 @@ function FieldLabel(props) {
 		disabled: field.disabled() || item.disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("label", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	const callExternalClick = composeEventHandlers(() => internalProps.onClick);
@@ -405,10 +426,7 @@ function FieldLabel(props) {
 	onSettled(() => {
 		element();
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "label";
-		},
+	return Render(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -438,21 +456,19 @@ function FieldDescription(props) {
 	const labelable = useLabelableContext();
 	const source = Symbol("FieldDescription");
 	const generatedId = `base-ui-${createUniqueId()}`;
-	const others = omit(props, "as", "class", "id", "style");
+	const others = omit(props, "render", "class", "id", "style");
 	const id = createMemo(() => props.id ?? generatedId);
 	const state = createMemo(() => ({
 		...field.state(),
 		disabled: field.disabled() || item.disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("p", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	createEffect(id, (currentId) => labelable.registerMessageId(source, currentId));
 	onCleanup(() => labelable.registerMessageId(source, void 0));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "p";
-		},
+	return Render(mergeProps({
 		get id() {
 			return id();
 		},
@@ -471,13 +487,14 @@ function FieldItem(props) {
 	const field = useFieldRootContext();
 	const parentLabelable = useLabelableContext();
 	const labelable = createLabelableContext({ parent: parentLabelable });
-	const others = omit(props, "as", "class", "disabled", "style");
+	const others = omit(props, "render", "class", "disabled", "style");
 	const disabled = createMemo(() => field.disabled() || (props.disabled ?? false));
 	const state = createMemo(() => ({
 		...field.state(),
 		disabled: disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	const context = { disabled };
@@ -487,10 +504,7 @@ function FieldItem(props) {
 			return FieldItemContext({
 				value: context,
 				get children() {
-					return Dynamic(mergeProps({
-						get component() {
-							return props.as ?? "div";
-						},
+					return Render(mergeProps({
 						get ["class"]() {
 							return classValue();
 						},
@@ -530,7 +544,7 @@ function FieldError(props) {
 	const allProps = props;
 	const source = Symbol("FieldError");
 	const generatedId = `base-ui-${createUniqueId()}`;
-	const others = omit(allProps, "as", "children", "class", "id", "match", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "id", "match", "ref", "style");
 	const id = createMemo(() => internalProps.id ?? generatedId);
 	const formError = createMemo(() => {
 		const name = field.name();
@@ -575,6 +589,7 @@ function FieldError(props) {
 		...field.state(),
 		transitionStatus: transition.transitionStatus()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => transition.mounted() ? resolveClass(props.class, state()) : void 0);
 	const styleValue = createMemo(() => transition.mounted() ? resolveStyle(props.style, state()) : void 0);
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
@@ -608,10 +623,7 @@ function FieldError(props) {
 			return transition.mounted();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref, ((element) => errorElement = element)],
 				get id() {
 					return id();