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

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 { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.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 FieldRootContext, r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.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-CDMMyvuj.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,11 +391,12 @@ 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);
-	const callExternalMouseDown = composeEventHandlers(() => internalProps.onMouseDown);
-	const callExternalPointerDown = composeEventHandlers(() => internalProps.onPointerDown);
+	const callExternalClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick));
+	const callExternalMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown));
+	const callExternalPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown));
 	function isInteractiveTarget(target) {
 		return target instanceof Element && Boolean(target.closest("button,input,select,textarea"));
 	}
@@ -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();

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

@@ -1,8 +1,9 @@
 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 { n as useFieldsetRootContext, t as FieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit } from "solid-js";
 //#region src/fieldset/root/FieldsetRoot.tsx
 /**
@@ -12,23 +13,22 @@ import { createEffect, createMemo, createSignal, createUniqueId, omit } from "so
 function FieldsetRoot(props) {
 	const parentContext = useFieldsetRootContext(true);
 	const [legendId, setLegendId] = createSignal();
-	const others = omit(props, "as", "class", "disabled", "style");
+	const others = omit(props, "render", "class", "disabled", "style");
 	const disabled = createMemo(() => parentContext?.disabled() || (props.disabled ?? false));
 	const state = createMemo(() => ({ disabled: disabled() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const context = {
+		legendId,
+		setLegendId,
+		disabled
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("fieldset", props, void 0, true));
 	return FieldsetRootContext({
-		value: {
-			legendId,
-			setLegendId,
-			disabled
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "fieldset";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -54,7 +54,7 @@ function FieldsetRoot(props) {
 function FieldsetLegend(props) {
 	const context = useFieldsetRootContext();
 	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(() => ({ disabled: context.disabled() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
@@ -66,10 +66,7 @@ function FieldsetLegend(props) {
 			context.setLegendId((registeredId) => registeredId === currentId ? void 0 : registeredId);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get id() {
 			return id();
 		},

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

@@ -1,10 +1,11 @@
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as FormContext } from "../FormContext-pvESt85v.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as FormContext } from "../FormContext-CYwo_ZnB.js";
 import { t as hasFormError } from "../form-types-P7-SCWyr.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
 //#region src/form/Form.tsx
 var EMPTY_ERRORS = Object.freeze({});
@@ -14,14 +15,16 @@ function Form(props) {
 	let formElement = null;
 	let submitted = false;
 	let submitAttempted = false;
+	let submitCount = 0;
 	const fields = /* @__PURE__ */ new Map();
 	const formProps = props;
 	let previousExternalErrors = untrack(() => formProps.errors);
 	const internalProps = props;
-	const others = omit(props, "actionsRef", "as", "class", "errors", "onFormSubmit", "onSubmit", "ref", "style", "validationMode");
+	const others = omit(props, "actionsRef", "render", "class", "errors", "onFormSubmit", "onSubmit", "ref", "style", "validationMode");
 	const [errors, setErrors] = createSignal(untrack(() => formProps.errors) ?? EMPTY_ERRORS);
 	const validationMode = createMemo(() => formProps.validationMode ?? "onSubmit");
 	const classValue = createMemo(() => resolveClass(props.class, EMPTY_STATE));
+	const Render = useRender(props, () => EMPTY_STATE, (props) => ssrElement("form", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, EMPTY_STATE));
 	function registerField(field) {
 		fields.set(field.token, field);
@@ -52,11 +55,13 @@ function Form(props) {
 		return true;
 	}
 	function clearError(name) {
-		const currentErrors = untrack(errors);
-		if (!name || !Object.hasOwn(currentErrors, name)) return;
-		const nextErrors = { ...currentErrors };
-		delete nextErrors[name];
-		setErrors(nextErrors);
+		if (!name) return;
+		setErrors((currentErrors) => {
+			if (!Object.hasOwn(currentErrors, name)) return currentErrors;
+			const nextErrors = { ...currentErrors };
+			delete nextErrors[name];
+			return nextErrors;
+		});
 	}
 	const actions = { validate(fieldName) {
 		if (fieldName) {
@@ -68,9 +73,10 @@ function Form(props) {
 		}
 		for (const field of fields.values()) field.validate();
 	} };
-	const callExternalSubmit = composeEventHandlers(() => internalProps.onSubmit);
+	const callExternalSubmit = composeEventHandlers(liveEventHandler(() => internalProps.onSubmit));
 	function handleSubmit(event) {
 		submitAttempted = true;
+		submitCount += 1;
 		for (const field of fields.values()) field.validate();
 		if (focusFirstInvalid()) {
 			event.preventDefault();
@@ -88,6 +94,7 @@ function Form(props) {
 		errors,
 		validationMode,
 		submitAttempted: () => submitAttempted,
+		submitCount: () => submitCount,
 		formElement: () => formElement,
 		clearError,
 		registerField,
@@ -109,10 +116,7 @@ function Form(props) {
 	return FormContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "form";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					formElement = element.tagName === "FORM" ? element : null;
 				}), internalProps.ref],

package/dist/lib/server/index.js

@@ -1,3 +1,4 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { Accordion as index_parts_exports } from "./accordion/index.js";
 import { AlertDialog as index_parts_exports$1 } from "./alert-dialog/index.js";
 import { n as useDirection } from "./DirectionContext-YORWLF08.js";
@@ -7,8 +8,8 @@ import { Button } from "./button/index.js";
 import { Checkbox as index_parts_exports$4 } from "./checkbox/index.js";
 import { CheckboxGroup } from "./checkbox-group/index.js";
 import { Collapsible as index_parts_exports$5 } from "./collapsible/index.js";
-import { Combobox as index_parts_exports$6 } from "./combobox/index.js";
-import { t as Separator } from "./Separator-vhhYxWGr.js";
+import { Combobox as index_parts_exports$6, createComboboxItems } from "./combobox/index.js";
+import { t as Separator } from "./Separator-DTvtnxzP.js";
 import { ContextMenu as index_parts_exports$7 } from "./context-menu/index.js";
 import { CSPProvider } from "./csp-provider/index.js";
 import { DirectionProvider } from "./direction-provider/index.js";
@@ -40,4 +41,5 @@ import { Toolbar as index_parts_exports$27 } from "./toolbar/index.js";
 import { Tooltip as index_parts_exports$28 } from "./tooltip/index.js";
 import { Toggle } from "./toggle/index.js";
 import { ToggleGroup } from "./toggle-group/index.js";
-export { index_parts_exports as Accordion, index_parts_exports$1 as AlertDialog, index_parts_exports$2 as Autocomplete, index_parts_exports$3 as Avatar, Button, CSPProvider, index_parts_exports$4 as Checkbox, CheckboxGroup, index_parts_exports$5 as Collapsible, index_parts_exports$6 as Combobox, index_parts_exports$7 as ContextMenu, index_parts_exports$8 as Dialog, DirectionProvider, index_parts_exports$9 as Drawer, index_parts_exports$10 as Field, index_parts_exports$11 as Fieldset, Form, Input, index_parts_exports$12 as Menu, Menubar, index_parts_exports$13 as Meter, index_parts_exports$14 as NavigationMenu, index_parts_exports$15 as NumberField, index_parts_exports$16 as OTPField, index_parts_exports$17 as Popover, index_parts_exports$18 as PreviewCard, index_parts_exports$19 as Progress, index_parts_exports$20 as Radio, RadioGroup, index_parts_exports$21 as ScrollArea, index_parts_exports$22 as Select, Separator, index_parts_exports$23 as Slider, index_parts_exports$24 as Switch, index_parts_exports$25 as Tabs, index_parts_exports$26 as Toast, Toggle, ToggleGroup, index_parts_exports$27 as Toolbar, index_parts_exports$28 as Tooltip, createToastManager, useDirection, useToastManager };
+import "./use-render/index.js";
+export { index_parts_exports as Accordion, index_parts_exports$1 as AlertDialog, index_parts_exports$2 as Autocomplete, index_parts_exports$3 as Avatar, Button, CSPProvider, index_parts_exports$4 as Checkbox, CheckboxGroup, index_parts_exports$5 as Collapsible, index_parts_exports$6 as Combobox, index_parts_exports$7 as ContextMenu, index_parts_exports$8 as Dialog, DirectionProvider, index_parts_exports$9 as Drawer, index_parts_exports$10 as Field, index_parts_exports$11 as Fieldset, Form, Input, index_parts_exports$12 as Menu, Menubar, index_parts_exports$13 as Meter, index_parts_exports$14 as NavigationMenu, index_parts_exports$15 as NumberField, index_parts_exports$16 as OTPField, index_parts_exports$17 as Popover, index_parts_exports$18 as PreviewCard, index_parts_exports$19 as Progress, index_parts_exports$20 as Radio, RadioGroup, index_parts_exports$21 as ScrollArea, index_parts_exports$22 as Select, Separator, index_parts_exports$23 as Slider, index_parts_exports$24 as Switch, index_parts_exports$25 as Tabs, index_parts_exports$26 as Toast, Toggle, ToggleGroup, index_parts_exports$27 as Toolbar, index_parts_exports$28 as Tooltip, createComboboxItems, createToastManager, useDirection, useRender, useToastManager };

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

@@ -1,4 +1,4 @@
-import { t as FieldControl } from "../FieldControl-Y_kI7ARp.js";
+import { t as FieldControl } from "../FieldControl-CDMMyvuj.js";
 //#region src/input/Input.tsx
 /**
 * A native input element that automatically integrates with Field.

package/dist/lib/server/internals/composeEventHandlers.js

@@ -1,23 +1,29 @@
 //#region src/internals/composeEventHandlers.ts
 /**
-* Composes native event handlers in argument order. Calling
+* Composes handlers in argument order, enhancing the native event before dispatch. Calling
 * `event.preventBaseUIHandler()` prevents the remaining handlers from running.
+* Use `liveEventHandler` for replaceable callback props instead of snapshotting them.
 */
-function composeEventHandlers(...getHandlers) {
+function composeEventHandlers(...handlers) {
 	return function composedEventHandler(event) {
 		const baseEvent = makeEventPreventable(event);
-		for (const getHandler of getHandlers) {
-			callHandler(getHandler(), this, baseEvent);
+		for (let handler of handlers) {
+			if (handler && typeof handler === "object" && "getHandler" in handler) {
+				const getHandler = handler.getHandler;
+				handler = getHandler();
+			}
+			callHandler(handler, this, baseEvent);
 			if (baseEvent.baseUIHandlerPrevented) break;
 		}
 	};
 }
+/** Resolves a replaceable handler at dispatch time; pass the adapter to `composeEventHandlers`. */
+function liveEventHandler(getHandler) {
+	return { getHandler };
+}
 function callHandler(handler, receiver, event) {
 	if (typeof handler === "function") Reflect.apply(handler, receiver, [event]);
-	else if (isBoundHandler(handler)) Reflect.apply(handler[0], receiver, [handler[1], event]);
-}
-function isBoundHandler(handler) {
-	return Array.isArray(handler) && handler.length === 2 && typeof handler[0] === "function";
+	else if (Array.isArray(handler) && handler.length === 2 && typeof handler[0] === "function") Reflect.apply(handler[0], receiver, [handler[1], event]);
 }
 function makeEventPreventable(event) {
 	const baseEvent = event;
@@ -57,4 +63,4 @@ function setHandlerPrevented(event) {
 	});
 }
 //#endregion
-export { composeEventHandlers, makeEventPreventable };
+export { composeEventHandlers, liveEventHandler, makeEventPreventable };

package/dist/lib/server/internals/field-root-context/index.js

@@ -1,2 +1,2 @@
-import { n as useFieldRootContext, t as FieldRootContext } from "../../FieldRootContext-IC-LWzVp.js";
+import { n as FieldRootContext, r as useFieldRootContext } from "../../FieldRootContext-Bfpna6gA.js";
 export { FieldRootContext, useFieldRootContext };

package/dist/lib/server/internals/form-context/index.js

@@ -1,2 +1,2 @@
-import { n as useFormContext, t as FormContext } from "../../FormContext-pvESt85v.js";
+import { n as useFormContext, t as FormContext } from "../../FormContext-CYwo_ZnB.js";
 export { FormContext, useFormContext };

package/dist/lib/server/internals/labelable-provider/index.js

@@ -1,4 +1,4 @@
-import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../../LabelableContext-DZP3rgAY.js";
+import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../../LabelableContext-BTeF0IWb.js";
 import { untrack } from "solid-js";
 //#region src/internals/labelable-provider/LabelableProvider.tsx
 /** Provides the internal accessible label and description graph. */