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

package/dist/lib/server/navigation-menu/index.js

@@ -1,25 +1,26 @@
 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 { x as linkPress } from "../internals/reasons.js";
+import { S as listNavigation, x as linkPress } 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 { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
 import { n as contains } from "../dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.js";
 import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.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, o as createDismiss, t as PopupStore } from "../PopupStore-DEs3FAEe.js";
-import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
-import { n as createPopupAutoResize } from "../createPopupAutoResize-DO50jjNX.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
-import { a as triggerOpenStateMapping, d as getTabbableAfterElement, g as FocusGuard, h as tabbable, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.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, o as createDismiss, t as PopupStore } from "../PopupStore-kHjFPiQ5.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-C1GNJbKR.js";
+import { n as createPopupAutoResize } from "../createPopupAutoResize-ImBjwdj_.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
+import { a as triggerOpenStateMapping, d as getTabbableAfterElement, g as FocusGuard, h as tabbable, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-B2KsiiLb.js";
+import { t as FocusManager } from "../FocusManager-1LfoCsya.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-CvoGfft9.js";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
-import { Dynamic, Portal, escape, memo, mergeProps, scope, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
+import { Portal, escape, memo, mergeProps, scope, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/navigation-menu/store/NavigationMenuStore.ts
 var NavigationMenuStore = class extends PopupStore {
@@ -261,7 +262,7 @@ function NavigationMenuRoot(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "actionsRef", "as", "class", "closeDelay", "defaultValue", "delay", "onOpenChangeComplete", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "actionsRef", "render", "class", "closeDelay", "defaultValue", "delay", "onOpenChangeComplete", "onValueChange", "orientation", "ref", "style", "value");
 	store.context.floatingRoot.context.data.insideElements = () => [backdropElement()];
 	const dismiss = createDismiss({
 		context: store.context.floatingRoot,
@@ -303,6 +304,7 @@ function NavigationMenuRoot(props) {
 		store.clearInteractionProps();
 		delete store.context.floatingRoot.context.data.insideElements;
 	});
+	const Render = useRender(props, () => state(), (props) => nested ? ssrElement("div", props, void 0, true) : ssrElement("nav", props, void 0, true));
 	return NavigationMenuRootContext({
 		value: context,
 		get children() {
@@ -314,10 +316,7 @@ function NavigationMenuRoot(props) {
 							return node.id ?? null;
 						},
 						get children() {
-							return Dynamic(mergeProps({
-								get component() {
-									return props.as ?? (nested ? "div" : "nav");
-								},
+							return Render(mergeProps({
 								ref: [((element) => setRootElement(element)), internalProps.ref],
 								get ["class"]() {
 									return classValue();
@@ -439,7 +438,7 @@ function NavigationMenuList(props) {
 	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", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
 	const composite = createNavigationMenuComposite({
 		orientation: root.store.orientation,
 		direction
@@ -447,11 +446,9 @@ function NavigationMenuList(props) {
 	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
 		if (!root.nested) composite.handleKeyDown(event);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("ul", props, void 0, true));
 	function ListElement() {
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "ul";
-			},
+		return Render(mergeProps({
 			ref: [internalProps.ref],
 			get ["class"]() {
 				return classValue();
@@ -490,14 +487,13 @@ function NavigationMenuItem(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "ref", "style", "value");
+	const context = { value };
+	const Render = useRender(props, () => state, (props) => ssrElement("li", props, void 0, true));
 	return NavigationMenuItemContext({
-		value: { value },
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "li";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -525,11 +521,14 @@ function NavigationMenuTrigger(props) {
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const [element, setElement] = createSignal(null, { ownedWrite: true });
 	const open = createMemo(() => root.store.open() && Object.is(root.store.value(), item.value()));
-	const state = createMemo(() => ({ open: open() }));
+	const state = createMemo(() => ({
+		open: open(),
+		disabled: disabled()
+	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const registration = {
 		token: Symbol("NavigationMenuTrigger"),
 		order: 0,
@@ -544,7 +543,6 @@ function NavigationMenuTrigger(props) {
 	let pointerType = "";
 	let patientClick = true;
 	let patientTimer;
-	let focusFrame = 0;
 	createEffect(() => ({
 		element: element(),
 		id: id(),
@@ -625,22 +623,7 @@ function NavigationMenuTrigger(props) {
 			event.preventDefault();
 			event.stopPropagation();
 			root.store.setOpenMethod("keyboard");
-			if (root.store.setValue(item.value(), createChangeEventDetails("list-navigation", event, element() ?? void 0))) {
-				let attempts = 0;
-				const focusContent = () => {
-					const target = root.store.viewportTarget();
-					const first = target ? tabbable(target).find((candidate) => !candidate.hasAttribute("data-base-ui-focus-guard")) : void 0;
-					if (first) {
-						first.focus({ preventScroll: true });
-						return;
-					}
-					attempts += 1;
-					if (attempts < 4) focusFrame = requestAnimationFrame(focusContent);
-				};
-				queueMicrotask(() => {
-					focusFrame = requestAnimationFrame(focusContent);
-				});
-			}
+			root.store.setValue(item.value(), createChangeEventDetails(listNavigation, event, element() ?? void 0));
 		}
 	}
 	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
@@ -649,10 +632,7 @@ function NavigationMenuTrigger(props) {
 	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
 	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));
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const trigger = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -701,7 +681,6 @@ function NavigationMenuTrigger(props) {
 	}, stateAttributes, others));
 	onCleanup(() => {
 		clearTimeout(patientTimer);
-		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(focusFrame);
 		unregisterComposite?.();
 		unregisterTrigger?.();
 		unregisterValueTrigger?.();
@@ -738,25 +717,8 @@ function NavigationMenuIcon(props) {
 	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", "ref", "style");
-	const component = untrack(() => props.as);
-	if (!component) return ssrElement("span", () => {
-		return mergeProps({
-			"aria-hidden": "true",
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, () => {
-		return () => {
-			return escape(props.children ?? "▼");
-		};
-	}, true);
-	return Dynamic(mergeProps({
-		component,
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		"aria-hidden": "true",
 		get ["class"]() {
@@ -814,7 +776,7 @@ function NavigationMenuContent(props) {
 		left: 0
 	} : {}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), contentStateMapping));
-	const others = omit(allProps, "as", "class", "keepMounted", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "keepMounted", "onKeyDown", "ref", "style");
 	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => composite.handleKeyDown(event));
 	createEffect(() => ({
 		open: open(),
@@ -859,10 +821,7 @@ function NavigationMenuContent(props) {
 		return NavigationMenuCompositeContext({
 			value: composite,
 			get children() {
-				return Dynamic(mergeProps({
-					get component() {
-						return props.as ?? "div";
-					},
+				return Render(mergeProps({
 					ref: [((value) => setElement(value)), internalProps.ref],
 					get hidden() {
 						return (memo(() => {
@@ -885,6 +844,7 @@ function NavigationMenuContent(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return memo(() => {
@@ -936,32 +896,14 @@ function NavigationMenuLink(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "active", "as", "class", "closeOnClick", "onClick", "onFocus", "ref", "style");
+	const others = omit(allProps, "active", "render", "class", "closeOnClick", "onClick", "onFocus", "ref", "style");
 	createEffect(element, () => composite?.notifyItemChange());
 	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => composite?.setActiveItem(registration));
 	const onClick = composeEventHandlers(() => internalProps.onClick, () => (event) => {
 		if (internalProps.closeOnClick) root.store.setValue(null, createChangeEventDetails(linkPress, event));
 	});
 	onCleanup(() => unregister?.());
-	const component = untrack(() => props.as);
-	if (!component) return ssrElement("a", () => {
-		return mergeProps({
-			get ["aria-current"]() {
-				return state().active ? "page" : void 0;
-			},
-			get tabIndex() {
-				return composite ? composite.isTabStop(registration) ? 0 : -1 : void 0;
-			},
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true);
-	return Dynamic(mergeProps({
-		component,
+	return useRender(props, () => state(), (props) => ssrElement("a", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get ["aria-current"]() {
 			return state().active ? "page" : void 0;
@@ -1000,7 +942,7 @@ function NavigationMenuPortal(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 context = { keepMounted };
 	return Show({
 		get when() {
@@ -1011,8 +953,8 @@ function NavigationMenuPortal(props) {
 				value: context,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -1049,15 +991,12 @@ function NavigationMenuBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let backdrop = null;
 	onCleanup(() => {
 		if (root.backdropElement() === backdrop) root.setBackdropElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			backdrop = element;
 			root.setBackdropElement(element);
@@ -1131,7 +1070,7 @@ function NavigationMenuPositioner(props) {
 		"pointer-events": root.store.open() ? void 0 : "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
 	let resizeTimer;
 	createPopupAutoResize({
 		popup: () => root.store.track().popupElement,
@@ -1166,13 +1105,11 @@ function NavigationMenuPositioner(props) {
 		delete root.store.context.floatingRoot.context.data.placement;
 		if (root.store.state.positionerElement === untrack(element)) root.store.setPositionerElement(null);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return NavigationMenuPositionerContext({
 		value: positioning,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					root.store.setPositionerElement(value);
@@ -1227,7 +1164,7 @@ function NavigationMenuPopup(props) {
 	});
 	const styleValue = createMemo(() => mergeNavigationMenuStyles(originStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "id", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "onKeyDown", "ref", "style");
 	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
 		const handler = root.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
@@ -1241,6 +1178,7 @@ function NavigationMenuPopup(props) {
 		const reason = root.store.openChangeReason();
 		return reason !== "trigger-hover" && reason !== "outside-press" && reason !== "focus-out";
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("nav", props, void 0, true));
 	return FocusManager({
 		get context() {
 			return root.store.context.floatingRoot;
@@ -1268,10 +1206,7 @@ function NavigationMenuPopup(props) {
 			return root.setBeforeContentGuard;
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "nav";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					popupElement = element;
 					root.store.setPopupElement(element);
@@ -1309,7 +1244,7 @@ function NavigationMenuViewport(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
 	let viewport = null;
 	let target = null;
 	let afterGuard = null;
@@ -1326,10 +1261,7 @@ function NavigationMenuViewport(props) {
 		if (root.store.viewportTarget() === target) root.store.setViewportTarget(null);
 		if (!positioned && root.beforeContentGuard()) root.setBeforeContentGuard(null);
 	});
-	const element = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const element = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [setViewport, internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -1393,15 +1325,12 @@ function NavigationMenuArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeNavigationMenuStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let arrow = null;
 	onCleanup(() => {
 		if (arrow) positioner.setArrowElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			arrow = element;
 			positioner.setArrowElement(element);

package/dist/lib/server/number-field/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 { D as scrub, P as wheel, _ as inputPaste, b as keyboard, f as incrementPress, g as inputClear, h as inputChange, m as inputBlur, o as decrementPress } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
@@ -6,10 +7,10 @@ import { createChangeEventDetails, createGenericEventDetails } from "../internal
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { fieldValidityMapping } 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 { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, Portal, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { Portal, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/number-field/utils/parse.ts
 var HAN_NUMERALS = "零〇一二三四五六七八九";
@@ -299,7 +300,7 @@ function NumberFieldRoot(props) {
 	let allowInputSync = true;
 	let lastChangedValue = null;
 	let hasPendingCommit = false;
-	const others = omit(allProps, "allowOutOfRange", "allowWheelScrub", "as", "class", "defaultValue", "disabled", "form", "format", "id", "inputRef", "largeStep", "locale", "max", "min", "name", "onChange", "onValueChange", "onValueCommitted", "readOnly", "ref", "required", "smallStep", "snapOnStep", "step", "style", "value");
+	const others = omit(allProps, "allowOutOfRange", "allowWheelScrub", "render", "class", "defaultValue", "disabled", "form", "format", "id", "inputRef", "largeStep", "locale", "max", "min", "name", "onChange", "onValueChange", "onValueCommitted", "readOnly", "ref", "required", "smallStep", "snapOnStep", "step", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? null : uncontrolledValue());
 	const id = createMemo(() => internalProps.id ?? fallbackId);
 	const min = createMemo(() => internalProps.min);
@@ -324,6 +325,7 @@ function NumberFieldRoot(props) {
 		scrubbing: isScrubbing()
 	}));
 	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(), stateAttributesMapping));
 	function setInputValue(nextValue) {
@@ -383,13 +385,22 @@ function NumberFieldRoot(props) {
 		hasPendingCommit = false;
 		internalProps.onValueCommitted?.(nextValue, details);
 	}
+	function focusInput() {
+		const input = inputElement();
+		if (!input) return;
+		input.setSelectionRange(input.value.length, input.value.length);
+		input.focus();
+	}
 	function handleWheel(event) {
 		const input = inputElement();
 		if (event.ctrlKey || !input || input.ownerDocument.activeElement !== input) return;
+		const horizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
+		const delta = event.shiftKey && horizontal ? event.deltaX : event.deltaY;
+		if (delta === 0 || !event.shiftKey && horizontal) return;
 		event.preventDefault();
 		allowInputSync = true;
 		if (incrementValue(getStepAmount(event), {
-			direction: event.deltaY > 0 ? -1 : 1,
+			direction: delta > 0 ? -1 : 1,
 			event,
 			reason: "wheel"
 		})) onValueCommitted(lastChangedValue, createGenericEventDetails(wheel, event));
@@ -434,6 +445,7 @@ function NumberFieldRoot(props) {
 			getStepAmount,
 			incrementValue,
 			inputElement,
+			focusInput,
 			setInputElement: (element) => setInputElementSignal(element),
 			allowInputSync: () => allowInputSync,
 			setAllowInputSync: (nextValue) => {
@@ -463,10 +475,7 @@ function NumberFieldRoot(props) {
 			onValueCommitted
 		},
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return [Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -497,15 +506,13 @@ function NumberFieldRoot(props) {
 /** Groups the input with the increment and decrement buttons. */
 function NumberFieldGroup(props) {
 	const context = useNumberFieldRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = context.state;
 	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(), stateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -662,6 +669,14 @@ function createPressAndHold(params) {
 		if (isTouchLikePointerType(pointerType)) return ignoreClick;
 		return event.detail !== 0;
 	}
+	createEffect(params.disabled, (disabled) => {
+		if (disabled) {
+			isPressed = false;
+			isTouchingButton = false;
+			pointerType = "";
+			stopAutoChange();
+		}
+	});
 	onCleanup(() => {
 		stopAutoChange();
 		unsubscribeFromGlobalPointerUp();
@@ -683,7 +698,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 	const allProps = props;
 	let firstTickCurrentValue = null;
 	let hasFirstTickCurrentValue = false;
-	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchEnd", "onTouchStart", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchEnd", "onTouchStart", "ref", "style");
 	const state = context.state;
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const disabled = createMemo(() => {
@@ -697,6 +712,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 		disabled: disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, buttonState()));
+	const Render = useRender(props, () => buttonState(), (props) => ssrElement("button", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, buttonState());
 		if (typeof external === "string") return `-webkit-user-select:none;user-select:none;${external}`;
@@ -757,7 +773,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 		firstTickCurrentValue = commitInputValue(event);
 		hasFirstTickCurrentValue = true;
 		context.setLastChangedValue(null);
-		if (!isTouchLikePointerType(event.pointerType)) context.inputElement()?.focus();
+		if (!isTouchLikePointerType(event.pointerType)) context.focusInput();
 		pressAndHold.pointerHandlers.onPointerDown(event);
 	}
 	const onClick = composeEventHandlers(() => untrack(buttonDisabled) ? preventInteraction : void 0, () => internalProps.onClick, () => handleClick);
@@ -773,10 +789,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => pressAndHold.pointerHandlers.onMouseLeave);
 	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => pressAndHold.pointerHandlers.onMouseUp);
 	onSettled(() => {});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return Render(mergeProps({
 		ref: [((value) => value), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -900,13 +913,13 @@ function NumberFieldInput(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	let hasTouchedInput = false;
 	let blockRevalidation = false;
 	let pendingCaret = null;
 	let previousValue = untrack(context.value);
-	const others = omit(allProps, "as", "aria-describedby", "aria-labelledby", "aria-roledescription", "class", "onBlur", "onFocus", "onInput", "onKeyDown", "onPaste", "ref", "style");
+	const others = omit(allProps, "render", "aria-describedby", "aria-labelledby", "aria-roledescription", "class", "onBlur", "onFocus", "onInput", "onKeyDown", "onPaste", "ref", "style");
 	const state = context.state;
 	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(), stateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId());
@@ -920,10 +933,6 @@ function NumberFieldInput(props) {
 	function handleFocus(event) {
 		if (event.defaultPrevented || state().disabled) return;
 		field.setFocused(true);
-		if (hasTouchedInput) return;
-		hasTouchedInput = true;
-		const length = event.currentTarget.value.length;
-		event.currentTarget.setSelectionRange(length, length);
 	}
 	function handleBlur(event) {
 		const currentState = state();
@@ -1106,10 +1115,7 @@ function NumberFieldInput(props) {
 		field.registerFieldControl(context.controlSource, void 0);
 		labelable.registerControlId(context.controlSource, void 0);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
+	return Render(mergeProps({
 		ref: [((input) => {
 			setElement(input);
 			context.setInputElement(input);
@@ -1155,7 +1161,7 @@ function NumberFieldInput(props) {
 			return ariaDescribedBy();
 		},
 		onFocus,
-		onBlur,
+		onBlur: (event) => untrack(() => onBlur(event)),
 		onInput,
 		onKeyDown,
 		onPaste
@@ -1217,8 +1223,9 @@ function NumberFieldScrubArea(props) {
 	const disabled = createMemo(() => root.state().disabled);
 	const readOnly = createMemo(() => root.state().readOnly);
 	const state = root.state;
-	const others = omit(allProps, "as", "class", "direction", "onPointerDown", "pixelSensitivity", "ref", "style", "teleportDistance");
+	const others = omit(allProps, "render", "class", "direction", "onPointerDown", "pixelSensitivity", "ref", "style", "teleportDistance");
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, state());
 		if (typeof external === "string") return `touch-action:none;-webkit-user-select:none;user-select:none;${external}`;
@@ -1365,7 +1372,7 @@ function NumberFieldScrubArea(props) {
 		setIsTouchInput(touchInput);
 		if (event.pointerType === "mouse") {
 			event.preventDefault();
-			root.inputElement()?.focus();
+			root.focusInput();
 		}
 		isPointerDown = true;
 		didMove = false;
@@ -1405,10 +1412,7 @@ function NumberFieldScrubArea(props) {
 			setScrubAreaCursorElement: setCursorElement
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((scrubArea) => setElement(scrubArea)), internalProps.ref],
 				role: "presentation",
 				get ["class"]() {
@@ -1438,11 +1442,12 @@ function NumberFieldScrubAreaCursor(props) {
 	const root = useNumberFieldRootContext();
 	const scrubArea = useNumberFieldScrubAreaContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = root.state;
 	const shouldRender = createMemo(() => scrubArea.isScrubbing() && !isWebKit() && !scrubArea.isTouchInput() && !scrubArea.isPointerLockDenied());
 	const ownerBody = () => scrubArea.scrubAreaElement()?.ownerDocument.body;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, state());
 		if (typeof external === "string") return `position:fixed;top:0;left:0;pointer-events:none;${external}`;
@@ -1465,10 +1470,7 @@ function NumberFieldScrubAreaCursor(props) {
 		children: (body) => Portal({
 			mount: body,
 			get children() {
-				return Dynamic(mergeProps({
-					get component() {
-						return props.as ?? "span";
-					},
+				return Render(mergeProps({
 					ref: [((cursor) => scrubArea.setScrubAreaCursorElement(cursor)), internalProps.ref],
 					role: "presentation",
 					get ["class"]() {