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

package/dist/lib/client/useRender-CxZ8PI-g.js

@@ -0,0 +1,12 @@
+import { merge as e, untrack as t } from "solid-js";
+//#region src/use-render/useRender.ts
+function n(n, r, i) {
+	return (a) => {
+		let o = t(() => n.render);
+		if (!o) return t(() => i(a));
+		let s = e(r);
+		return t(() => o(a, s));
+	};
+}
+//#endregion
+export { n as t };

package/dist/lib/server/{DialogHandle-ATZlm9RC.js → DialogHandle-BGIISmG7.js}

@@ -1,18 +1,19 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
 import { N as triggerPress, d as imperativeAction, i as closePress } from "./internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "./internals/composeEventHandlers.js";
-import { a as isElement, n as contains, r as getEventTarget } from "./dom-Crg_2R-j.js";
-import { n as createScrollLock, t as InternalBackdrop } from "./InternalBackdrop-C_iDPVR-.js";
+import { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
+import { i as getEventTarget, n as contains, o as isElement } from "./dom-D8_aB1yy.js";
+import { n as createScrollLock, t as InternalBackdrop } from "./InternalBackdrop-D_2zAWnl.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "./FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-DEs3FAEe.js";
-import { a as triggerOpenStateMapping, o as PopupPortal } from "./popupStateMapping-nKoUwoke.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "./PopupHandle-DthPgNjy.js";
-import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "./buttonSemantics-BSwDxJhh.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-evylvVnN.js";
+import { a as triggerOpenStateMapping, o as PopupPortal } from "./popupStateMapping-VHqr6M4H.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "./PopupHandle-QNj4mED2.js";
 import { t as setRef } from "./setRef-Bt70sW7c.js";
-import { Dynamic, escape, memo, mergeProps } from "@solidjs/web";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "./buttonSemantics-BSwDxJhh.js";
+import { escape, memo, mergeProps, ssrElement } from "@solidjs/web";
 import { $REFRESH, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/dialog/store/DialogStore.ts
 var DialogStore = class extends PopupStore {
@@ -309,22 +310,20 @@ function DialogClose(props) {
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const state = createMemo(() => ({ disabled: disabled() }));
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	function handleClick(event) {
 		if (context.store.open()) context.store.setOpen(false, createChangeEventDetails(closePress, event));
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
@@ -366,17 +365,15 @@ function DialogDescription(props) {
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("p", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "ref", "style");
 	createEffect(() => id(), (current) => {
 		context.setDescriptionId(current);
 		return () => context.setDescriptionId((existing) => existing === current ? void 0 : existing);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "p";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -410,7 +407,7 @@ function DialogPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "keepMounted", "ref", "style");
 	const portalContext = { keepMounted };
 	function DialogInternalBackdrop() {
 		let element = null;
@@ -436,8 +433,8 @@ function DialogPortal(props) {
 				value: portalContext,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -480,17 +477,15 @@ function DialogTitle(props) {
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("h2", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "ref", "style");
 	createEffect(() => id(), (current) => {
 		context.setTitleId(current);
 		return () => context.setTitleId((existing) => existing === current ? void 0 : existing);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "h2";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -526,10 +521,11 @@ function DialogTrigger(props) {
 		disabled: disabled(),
 		open: open()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "payload", "ref", "style");
 	let pointerType = "";
 	let clickPointerType = "";
 	createTriggerRegistration(store, id, element, () => ({ payload: internalProps.payload }));
@@ -555,15 +551,12 @@ function DialogTrigger(props) {
 		const currentTarget = event.currentTarget;
 		if (popup && currentTarget && popup.ownerDocument !== currentTarget.ownerDocument && typeof rootHandler === "function") rootHandler(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => prepareClick, () => internalProps.onClick, () => handleClick);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), prepareClick, liveEventHandler(() => internalProps.onClick), handleClick);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	return Render(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -618,13 +611,14 @@ function DialogViewport(props) {
 	const portal = useDialogPortalContext();
 	const context = useDialogRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = createMemo(() => ({
 		open: context.store.open(),
 		transitionStatus: context.store.track().transitionStatus,
 		nested: context.nested,
 		nestedDialogOpen: context.nestedOpenDialogCount() > 0
 	}));
+	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" }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), dialogStateAttributesMapping));
@@ -638,10 +632,7 @@ function DialogViewport(props) {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					viewportElement = element;
 					context.setViewportElement(element);

package/dist/lib/server/{DialogPopup-BebI-w5P.js → DialogPopup-C2ZDGf42.js}

@@ -1,20 +1,22 @@
+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 { composeEventHandlers } from "./internals/composeEventHandlers.js";
-import { t as FocusManager } from "./FocusManager-BrbZVWME.js";
-import { d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, s as useDialogPortalContext, u as dialogStateAttributesMapping } from "./DialogHandle-ATZlm9RC.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
+import { t as FocusManager } from "./FocusManager-D-xgblGs.js";
+import { d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, s as useDialogPortalContext, u as dialogStateAttributesMapping } from "./DialogHandle-BGIISmG7.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createEffect, createMemo, omit, onCleanup } from "solid-js";
 //#region src/dialog/backdrop/DialogBackdrop.tsx
 /** An overlay displayed beneath the dialog popup. */
 function DialogBackdrop(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.store.track().transitionStatus
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({
 		"user-select": "none",
@@ -27,10 +29,7 @@ function DialogBackdrop(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);
@@ -71,19 +70,20 @@ function DialogPopup(props) {
 	useDialogPortalContext();
 	const context = useDialogRootContext();
 	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 state = createMemo(() => ({
 		open: context.store.open(),
 		transitionStatus: context.store.track().transitionStatus,
 		nested: context.nested,
 		nestedDialogOpen: context.nestedOpenDialogCount() > 0
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({ "--nested-dialogs": context.nestedOpenDialogCount() }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), dialogStateAttributesMapping));
 	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
 	const initialFocus = createMemo(() => internalProps.initialFocus ?? ((interactionType) => interactionType === "touch" ? context.store.state.popupElement : true));
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
 	let popupElement = null;
@@ -93,10 +93,7 @@ function DialogPopup(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);

package/dist/lib/server/{FieldControl-Y_kI7ARp.js → FieldControl-CDMMyvuj.js}

@@ -1,13 +1,15 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
 import { w as none } from "./internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "./internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
 import { fieldStateAttributesMapping } from "./internals/field-constants.js";
-import { n as useFieldRootContext } from "./FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "./FormContext-pvESt85v.js";
-import { r as useLabelableContext } from "./LabelableContext-DZP3rgAY.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { r as useFieldRootContext } from "./FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "./FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "./LabelableContext-BTeF0IWb.js";
+import { t as createLabelableId } from "./createLabelableId-WMUKtY6s.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/field/control/FieldControl.tsx
 /** The native field control. Renders an `<input>` by default. */
@@ -19,11 +21,16 @@ function FieldControl(props) {
 	const allProps = props;
 	const source = Symbol("FieldControl");
 	let initialized = false;
-	const controlId = untrack(labelable.controlId);
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const serializedValue = () => internalProps.value == null ? void 0 : String(internalProps.value);
+	let previousValue = untrack(serializedValue);
+	let enterTimeout;
+	let disposed = false;
+	const controlId = labelable.defaultControlId;
 	const fallbackId = typeof controlId === "string" ? controlId : `base-ui-${createUniqueId()}`;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "autofocus", "class", "defaultValue", "disabled", "id", "name", "onBlur", "onFocus", "onInput", "onKeyDown", "onValueChange", "ref", "style", "value");
-	const id = createMemo(() => internalProps.id ?? fallbackId);
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "autofocus", "class", "defaultValue", "disabled", "id", "name", "onBlur", "onFocus", "onInput", "onKeyDown", "onValueChange", "ref", "style", "value");
+	const id = createLabelableId(() => internalProps.id, fallbackId);
 	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
 	const name = createMemo(() => field.name() ?? internalProps.name);
 	const state = createMemo(() => ({
@@ -31,10 +38,11 @@ function FieldControl(props) {
 		disabled: disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	const currentValue = () => {
-		if (internalProps.value !== void 0) return internalProps.value;
+		if (internalProps.value !== void 0) return serializedValue();
 		const currentElement = element();
 		return isNativeFieldControl(currentElement) ? currentElement.value : internalProps.defaultValue;
 	};
@@ -49,10 +57,10 @@ function FieldControl(props) {
 		getValue: getFormValue,
 		getControl: () => element() ?? null
 	};
-	const callExternalInput = composeEventHandlers(() => internalProps.onInput);
-	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
-	const callExternalBlur = composeEventHandlers(() => internalProps.onBlur);
-	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
+	const callExternalInput = composeEventHandlers(liveEventHandler(() => internalProps.onInput));
+	const callExternalFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus));
+	const callExternalBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur));
+	const callExternalKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown));
 	function setControlElement(value) {
 		setElement(value);
 		if (initialized || !isNativeFieldControl(value)) return;
@@ -68,10 +76,18 @@ function FieldControl(props) {
 		callExternalInput.call(event.currentTarget, event);
 		if (event.baseUIHandlerPrevented) return;
 		const value = readElementValue(event.currentTarget);
-		internalProps.onValueChange?.(value, createChangeEventDetails(none, event));
+		const details = createChangeEventDetails(none, event);
+		internalProps.onValueChange?.(value, details);
+		if (controlled) {
+			const input = event.currentTarget;
+			queueMicrotask(() => {
+				if (!disposed && isNativeFieldControl(input)) input.value = serializedValue() ?? "";
+			});
+			return;
+		}
 		field.setDirty(value !== (field.validityData().initialValue ?? ""));
 		field.setFilled(value !== "");
-		if (!event.defaultPrevented) {
+		if (!event.defaultPrevented && !details.isCanceled) {
 			form.clearError(name());
 			field.validation.change(value);
 		}
@@ -86,14 +102,29 @@ function FieldControl(props) {
 		if (event.baseUIHandlerPrevented) return;
 		field.setTouched(true);
 		field.setFocused(false);
-		if (field.validationMode() === "onBlur") field.validation.commit(readElementValue(event.currentTarget));
+		if (field.validationMode() === "onBlur") {
+			const value = readElementValue(event.currentTarget);
+			field.validation.commit(value);
+			if (controlled) queueMicrotask(() => {
+				if (disposed) return;
+				const next = serializedValue();
+				if (next !== void 0 && next !== value && next !== (field.validityData().initialValue ?? "")) field.validation.commit(next);
+			});
+		}
 	}
 	function handleKeyDown(event) {
 		callExternalKeyDown.call(event.currentTarget, event);
 		if (event.baseUIHandlerPrevented) return;
 		if (event.currentTarget.tagName === "INPUT" && event.key === "Enter") {
 			field.setTouched(true);
-			field.validation.commit(readElementValue(event.currentTarget));
+			const input = event.currentTarget;
+			if (input.form && input.form === form.formElement() && !event.defaultPrevented) {
+				const count = form.submitCount();
+				clearTimeout(enterTimeout);
+				enterTimeout = setTimeout(() => {
+					if (form.submitCount() === count) field.validation.commit(input.value);
+				}, 0);
+			} else field.validation.commit(input.value);
 		}
 	}
 	createEffect(() => ({
@@ -105,28 +136,33 @@ function FieldControl(props) {
 		registration.id = current.id;
 		registration.name = current.name;
 		field.registerFieldControl(source, current.disabled || !current.element ? void 0 : registration);
-		labelable.registerControlId(source, current.element ? current.id : void 0);
 	});
 	createEffect(() => element(), (currentElement) => {
 		if (!isNativeFieldControl(currentElement)) return;
 		return field.validation.registerInput(source, currentElement, () => untrack(() => element() ?? null));
 	});
-	createEffect(() => internalProps.value, (value) => {
-		if (value !== void 0) field.setFilled(value !== "");
-	});
+	createEffect(serializedValue, (value) => untrack(() => {
+		if (value !== void 0) {
+			field.setFilled(value !== "");
+			if (value !== previousValue) {
+				previousValue = value;
+				form.clearError(name());
+				field.setDirty(value !== (field.validityData().initialValue ?? ""));
+				field.validation.change(value);
+			}
+		}
+	}));
 	onSettled(() => {
 		const currentElement = element();
 		if (isNativeFieldControl(currentElement)) field.setFilled(currentElement.value !== "");
 		if (internalProps.autofocus && currentElement?.ownerDocument.activeElement === currentElement) field.setFocused(true);
 	});
 	onCleanup(() => {
+		disposed = true;
+		clearTimeout(enterTimeout);
 		field.registerFieldControl(source, void 0);
-		labelable.registerControlId(source, void 0);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
+	return Render(mergeProps({
 		ref: [setControlElement, internalProps.ref],
 		get id() {
 			return id();

package/dist/lib/server/{FieldRootContext-IC-LWzVp.js → FieldRootContext-Bfpna6gA.js}

@@ -2,7 +2,7 @@ import { DEFAULT_FIELD_STATE, DEFAULT_VALIDITY_DATA } from "./internals/field-co
 import { createContext, useContext } from "solid-js";
 //#region src/internals/field-root-context/FieldRootContext.ts
 var MISSING_CONTEXT = Symbol("FieldRootContext");
-var DEFAULT_CONTEXT = {
+var DEFAULT_FIELD_ROOT_CONTEXT = {
 	state: () => DEFAULT_FIELD_STATE,
 	validityData: () => DEFAULT_VALIDITY_DATA,
 	name: () => void 0,
@@ -27,8 +27,8 @@ var FieldRootContext = createContext(MISSING_CONTEXT);
 function useFieldRootContext(optional = false) {
 	const context = useContext(FieldRootContext);
 	if (context !== MISSING_CONTEXT) return context;
-	if (optional) return DEFAULT_CONTEXT;
+	if (optional) return DEFAULT_FIELD_ROOT_CONTEXT;
 	throw new Error("Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.");
 }
 //#endregion
-export { useFieldRootContext as n, FieldRootContext as t };
+export { FieldRootContext as n, useFieldRootContext as r, DEFAULT_FIELD_ROOT_CONTEXT as t };

package/dist/lib/server/{FocusManager-BrbZVWME.js → FocusManager-D-xgblGs.js}

@@ -1,8 +1,8 @@
 import { u as focusOut } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { c as isHTMLElement, d as isTypeableCombobox, f as isTypeableElement, i as getFloatingFocusElement, n as contains, o as isElementVisible, p as ownerDocument, r as getEventTarget, t as activeElement, u as isShadowRoot } from "./dom-Crg_2R-j.js";
+import { a as getFloatingFocusElement, d as isShadowRoot, f as isTypeableCombobox, i as getEventTarget, l as isHTMLElement, m as ownerDocument, n as contains, p as isTypeableElement, r as containsWithPortals, s as isElementVisible, t as activeElement } from "./dom-D8_aB1yy.js";
 import { a as getNodeAncestors, o as getNodeChildren } from "./FloatingTree-z1JPD1dR.js";
-import { c as focusable, g as FocusGuard, h as tabbable, l as getNextTabbable, m as isTabbable, p as isOutsideFocusEvent, s as usePopupPortalContext, u as getPreviousTabbable } from "./popupStateMapping-nKoUwoke.js";
+import { c as focusable, g as FocusGuard, h as tabbable, l as getNextTabbable, m as isTabbable, p as isOutsideFocusEvent, s as usePopupPortalContext, u as getPreviousTabbable } from "./popupStateMapping-VHqr6M4H.js";
 import { applyRef, escape, memo } from "@solidjs/web";
 import { Show, createEffect, createMemo, untrack } from "solid-js";
 //#region src/internals/overlay/markOthers.ts
@@ -277,7 +277,7 @@ function FocusManager(props) {
 					resolveElement(props.nextFocusableElement)
 				].includes(relatedTarget));
 				const triggers = props.context.context.triggerElements;
-				const movedOutside = !(contains(state.reference, relatedTarget) || contains(state.floating, relatedTarget) || contains(relatedTarget, state.floating) || contains(portal?.portalNode(), relatedTarget) || insideElements().some((element) => element === relatedTarget || contains(element, relatedTarget)) || triggers.hasMatchingElement((trigger) => contains(trigger, relatedTarget)) || relatedIsGuard || state.tree && (getNodeChildren(state.tree.nodes, nodeId()).some((node) => contains(node.context?.state.floatingElement, relatedTarget) || contains(node.context?.state.domReferenceElement, relatedTarget)) || getNodeAncestors(state.tree.nodes, nodeId()).some((node) => node.context?.state.floatingElement === relatedTarget || node.context?.state.domReferenceElement === relatedTarget)));
+				const movedOutside = !(containsWithPortals(state.reference, relatedTarget) || containsWithPortals(state.floating, relatedTarget) || contains(relatedTarget, state.floating) || contains(portal?.portalNode(), relatedTarget) || insideElements().some((element) => element === relatedTarget || contains(element, relatedTarget)) || triggers.hasMatchingElement((trigger) => contains(trigger, relatedTarget)) || relatedIsGuard || state.tree && (getNodeChildren(state.tree.nodes, nodeId()).some((node) => containsWithPortals(node.context?.state.floatingElement, relatedTarget) || containsWithPortals(node.context?.state.domReferenceElement, relatedTarget)) || getNodeAncestors(state.tree.nodes, nodeId()).some((node) => node.context?.state.floatingElement === relatedTarget || node.context?.state.domReferenceElement === relatedTarget)));
 				if (event.currentTarget === state.reference && state.focusElement) handleTabIndex(state.focusElement);
 				if (state.restoreFocus && event.currentTarget !== state.reference && !isElementVisible(target) && activeElement(documentNode) === documentNode.body && state.focusElement) {
 					state.focusElement.focus();
@@ -295,6 +295,11 @@ function FocusManager(props) {
 				}
 			});
 		};
+		const handlePortalFocusOut = (event) => {
+			const target = getEventTarget(event);
+			if (!contains(state.floating, target) && !contains(state.reference, target) && (containsWithPortals(state.floating, target) || containsWithPortals(state.reference, target))) handleFocusOut(event);
+		};
+		documentNode.addEventListener("focusout", handlePortalFocusOut);
 		if (state.reference) {
 			state.reference.addEventListener("focusout", handleFocusOut);
 			state.reference.addEventListener("pointerdown", handlePointerDown);
@@ -302,6 +307,7 @@ function FocusManager(props) {
 		state.floating?.addEventListener("focusin", handleFocusIn);
 		state.floating?.addEventListener("focusout", handleFocusOut);
 		return () => {
+			documentNode.removeEventListener("focusout", handlePortalFocusOut);
 			if (state.reference) {
 				state.reference.removeEventListener("focusout", handleFocusOut);
 				state.reference.removeEventListener("pointerdown", handlePointerDown);
@@ -497,7 +503,6 @@ function FocusManager(props) {
 							preventReturnFocus = false;
 							if (isOutsideFocusEvent(event, portal.portalNode())) getNextTabbable(domReference())?.focus();
 							else (resolveElement(props.previousFocusableElement) ?? portal.beforeOutside())?.focus();
-							if (closeOnFocusOut()) props.context.setOpen(false, createChangeEventDetails(focusOut, event));
 						}
 					}
 				});
@@ -523,7 +528,6 @@ function FocusManager(props) {
 							if (closeOnFocusOut()) preventReturnFocus = true;
 							if (isOutsideFocusEvent(event, portal.portalNode())) getPreviousTabbable(domReference())?.focus();
 							else (resolveElement(props.nextFocusableElement) ?? portal.afterOutside())?.focus();
-							if (closeOnFocusOut()) props.context.setOpen(false, createChangeEventDetails(focusOut, event));
 						}
 					}
 				});

package/dist/lib/server/{FormContext-pvESt85v.js → FormContext-CYwo_ZnB.js}

@@ -5,6 +5,7 @@ var FormContext = createContext({
 	errors: () => EMPTY_ERRORS,
 	validationMode: () => "onSubmit",
 	submitAttempted: () => false,
+	submitCount: () => 0,
 	formElement: () => null,
 	clearError: () => void 0,
 	registerField: () => () => void 0,

package/dist/lib/server/{InternalBackdrop-C_iDPVR-.js → InternalBackdrop-D_2zAWnl.js}

@@ -1,4 +1,4 @@
-import { m as ownerWindow, p as ownerDocument } from "./dom-Crg_2R-j.js";
+import { h as ownerWindow, m as ownerDocument } from "./dom-D8_aB1yy.js";
 import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createSignal, omit } from "solid-js";
 //#region src/internals/overlay/scrollLock.ts

package/dist/lib/server/{LabelableContext-DZP3rgAY.js → LabelableContext-BTeF0IWb.js}

@@ -21,14 +21,11 @@ function createLabelableContext(options = {}) {
 	const controlRegistrations = /* @__PURE__ */ new Map();
 	const messageRegistrations = /* @__PURE__ */ new Map();
 	function registerControlId(source, id) {
-		if (id === void 0) {
-			controlRegistrations.delete(source);
-			return;
-		}
-		controlRegistrations.set(source, id);
+		if (id === void 0) controlRegistrations.delete(source);
+		else controlRegistrations.set(source, id);
 		setControlId((current) => {
 			for (const registeredId of controlRegistrations.values()) if (registeredId === current) return current;
-			return controlRegistrations.values().next().value ?? generatedControlId;
+			return controlRegistrations.size ? controlRegistrations.values().next().value : generatedControlId;
 		});
 	}
 	function registerLabelId(id) {
@@ -46,6 +43,7 @@ function createLabelableContext(options = {}) {
 		return Array.from(new Set(ids)).join(" ") || void 0;
 	}
 	return {
+		defaultControlId: generatedControlId,
 		controlId,
 		labelId,
 		messageIds,