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

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

@@ -1,17 +1,18 @@
 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 runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
 import { a as isElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget, t as activeElement } from "../dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
-import { _ as ReactiveStore, g as FocusGuard, n as popupStateMapping, o as PopupPortal } from "../popupStateMapping-nKoUwoke.js";
-import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.js";
+import { _ as ReactiveStore, g as FocusGuard, n as popupStateMapping, o as PopupPortal } from "../popupStateMapping-B2KsiiLb.js";
 import { t as setRef } from "../setRef-Bt70sW7c.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 { a as getElementTransform, i as getDisplacement, n as LEGACY_SWIPE_IGNORE_SELECTOR, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-9H__9xbS.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { a as getElementTransform, i as getDisplacement, n as LEGACY_SWIPE_IGNORE_SELECTOR, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-D7ciIzsV.js";
+import { escape, memo, mergeProps, ssr, ssrElement, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { For, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/toast/utils/focusVisible.ts
 /**
@@ -165,7 +166,9 @@ var ToastStore = class extends ReactiveStore {
 		return id;
 	};
 	updateToast = (id, updates) => {
-		this.updateToastInternal(id, updates, false, true);
+		const prevToast = selectors.toast(this.state, id);
+		if (!prevToast || prevToast.transitionStatus === "ending") return;
+		this.updateToastInternal(id, typeof updates === "function" ? updates(prevToast) : updates, false, true);
 	};
 	updateToastInternal = (id, updates, resetTimer = false, markUpdated = false) => {
 		const { timeout, toasts } = this.state;
@@ -389,7 +392,7 @@ function ToastProvider(props) {
 		return toastManager[" subscribe"](({ action, options }) => {
 			const id = options.id;
 			if (action === "promise" && options.promise) store.promiseToast(options.promise, options);
-			else if (action === "update" && id) store.updateToast(id, options);
+			else if (action === "update" && id) store.updateToast(id, options.updates);
 			else if (action === "close") store.closeToast(id);
 			else store.addToast(options);
 		});
@@ -563,7 +566,7 @@ function ToastViewport(props) {
 	const styleValue = createMemo(() => mergeToastStyles({ "--toast-frontmost-height": frontmostHeight() ? `${frontmostHeight()}px` : void 0 }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
 	const showFocusGuard = createMemo(() => !isEmpty() && Boolean(prevFocusElement()));
-	const others = omit(allProps, "as", "children", "class", "onBlur", "onClick", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onPointerCancel", "onPointerDown", "onPointerUp", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "onBlur", "onClick", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onPointerCancel", "onPointerDown", "onPointerUp", "ref", "style");
 	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
 	const onClick = composeEventHandlers(() => internalProps.onClick, () => handleFocus);
 	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
@@ -574,6 +577,7 @@ function ToastViewport(props) {
 	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
 	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => handlePointerEnd);
 	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => handlePointerEnd);
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return [
 		Show({
 			get when() {
@@ -583,10 +587,7 @@ function ToastViewport(props) {
 				return FocusGuard({ onFocus: handleFocusGuard });
 			}
 		}),
-		Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "div";
-			},
+		Render(mergeProps({
 			ref: [store.setViewport, internalProps.ref],
 			tabIndex: -1,
 			role: "region",
@@ -998,26 +999,25 @@ function ToastRoot(props) {
 		"--toast-height": toast().height ? `${toast().height}px` : void 0
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), toastRootStateAttributesMapping));
-	const others = omit(allProps, "as", "class", "onKeyDown", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style", "swipeDirection", "toast");
+	const others = omit(allProps, "render", "class", "onKeyDown", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style", "swipeDirection", "toast");
 	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
 	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => untrack(() => swipeEnabled() ? handlePointerDown : void 0));
 	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => untrack(() => swipeEnabled() ? handlePointerMove : void 0));
 	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => untrack(() => swipeEnabled() ? handleSwipeEnd : void 0));
 	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => untrack(() => swipeEnabled() ? handleSwipeEnd : void 0));
+	const context = {
+		toast,
+		setTitleId,
+		setDescriptionId,
+		visibleIndex,
+		expanded,
+		recalculateHeight
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToastRootContext({
-		value: {
-			toast,
-			setTitleId,
-			setDescriptionId,
-			visibleIndex,
-			expanded,
-			recalculateHeight
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get role() {
 					return isHighPriority() ? "alertdialog" : "dialog";
@@ -1082,11 +1082,8 @@ function ToastContent(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", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => setContentElement(element)), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -1148,16 +1145,14 @@ function ToastDescription(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", "children", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "id", "ref", "style");
+	const Render = useRender(props, () => state(), (props) => ssrElement("p", props, void 0, true));
 	return Show({
 		get when() {
 			return part.shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "p";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get id() {
 					return part.id();
@@ -1185,16 +1180,14 @@ function ToastTitle(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", "children", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "id", "ref", "style");
+	const Render = useRender(props, () => state(), (props) => ssrElement("h2", props, void 0, true));
 	return Show({
 		get when() {
 			return part.shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "h2";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get id() {
 					return part.id();
@@ -1226,7 +1219,7 @@ function ToastClose(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", "disabled", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	function handleClick() {
 		store.closeToast(context.toast().id);
 	}
@@ -1237,10 +1230,7 @@ function ToastClose(props) {
 	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";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
@@ -1296,7 +1286,7 @@ function ToastAction(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", "children", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const managerProps = createMemo(() => {
 		const value = actionProps();
 		if (!value) return;
@@ -1307,15 +1297,13 @@ function ToastAction(props) {
 	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => actionProps()?.onMouseDown);
 	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => actionProps()?.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
 	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => actionProps()?.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "button";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get type() {
 					return nativeButton() ? "button" : void 0;
@@ -1363,10 +1351,10 @@ function ToastPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "ref", "style");
 	return PopupPortal(mergeProps({
-		get as() {
-			return props.as;
+		get render() {
+			return props.render;
 		},
 		lite: true,
 		get container() {
@@ -1441,14 +1429,12 @@ function ToastPositioner(props) {
 		...toast().transitionStatus === "starting" ? { transition: "none" } : void 0
 	}, 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", "toast");
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style", "toast");
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToastPositionerContext({
 		value: positioning,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => setElement(value)), internalProps.ref],
 				role: "presentation",
 				get ["class"]() {
@@ -1476,15 +1462,12 @@ function ToastArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeToastStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let arrowElement = null;
 	onCleanup(() => {
 		if (arrowElement) 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) => {
 			arrowElement = element;
 			positioner.setArrowElement(element);
@@ -1563,8 +1546,8 @@ function createToastManager() {
 			emit({
 				action: "update",
 				options: {
-					...updates,
-					id
+					id,
+					updates
 				}
 			});
 		},

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

@@ -1,3 +1,4 @@
+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";
@@ -5,7 +6,7 @@ import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { n as useToolbarItemOwnerContext } from "../ToolbarItemOwnerContext-L5dsZ_vS.js";
 import { n as useToggleGroupContext } from "../ToggleGroupContext-COor8gYc.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/toggle/Toggle.tsx
 /** A two-state button that can be on or off. */
@@ -20,7 +21,7 @@ function Toggle(props) {
 	const [uncontrolledPressed, setUncontrolledPressed] = createSignal(() => Boolean(untrack(() => internalProps.defaultPressed)));
 	let uncontrolledPressedSnapshot = untrack(uncontrolledPressed);
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "class", "defaultPressed", "disabled", "form", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPressedChange", "pressed", "ref", "style", "type", "value");
+	const others = omit(allProps, "render", "class", "defaultPressed", "disabled", "form", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPressedChange", "pressed", "ref", "style", "type", "value");
 	const value = createMemo(() => internalProps.value || generatedValue);
 	const disabled = createMemo(() => (group?.disabled() ?? false) || (internalProps.disabled ?? false));
 	const pressed = createMemo(() => group ? group.value().indexOf(value()) > -1 : controlled ? Boolean(internalProps.pressed) : uncontrolledPressed());
@@ -99,10 +100,7 @@ function Toggle(props) {
 		toolbarItemOwner?.setChildDisabled(false);
 		unregister?.();
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((current) => setElement(current)), internalProps.ref],
 		get ["class"]() {
 			return classValue();

package/dist/lib/server/toggle-group/index.js

@@ -1,3 +1,4 @@
+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";
@@ -5,8 +6,8 @@ import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
 import { n as useToolbarGroupContext } from "../ToolbarGroupContext-CzdHxijX.js";
 import { t as ToggleGroupContext } from "../ToggleGroupContext-COor8gYc.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
-import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, omit, onSettled, untrack } from "solid-js";
 //#region src/toggle-group/ToggleGroup.tsx
 var EMPTY_VALUE = [];
 /** Provides shared state and roving focus to a series of toggle buttons. */
@@ -24,7 +25,7 @@ function ToggleGroup(props) {
 	const [itemVersion, setItemVersion] = createSignal(0);
 	const items = /* @__PURE__ */ new Map();
 	let activeTokenSnapshot;
-	const others = omit(allProps, "as", "class", "defaultValue", "disabled", "loopFocus", "multiple", "onKeyDown", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "defaultValue", "disabled", "loopFocus", "multiple", "onKeyDown", "onValueChange", "orientation", "ref", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
 	const disabled = createMemo(() => (toolbar?.disabled() ?? false) || (toolbarGroup?.disabled() ?? false) || (internalProps.disabled ?? false));
 	const multiple = createMemo(() => internalProps.multiple ?? false);
@@ -168,13 +169,14 @@ function ToggleGroup(props) {
 		});
 		return () => observer.disconnect();
 	});
+	onSettled(() => {
+		setItemVersion((version) => version + 1);
+	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToggleGroupContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();

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

@@ -1,14 +1,14 @@
 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 { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useToolbarRootContext, t as ToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
-import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
 import { n as useToolbarGroupContext, t as ToolbarGroupContext } from "../ToolbarGroupContext-CzdHxijX.js";
 import { t as ToolbarItemOwnerContext } from "../ToolbarItemOwnerContext-L5dsZ_vS.js";
-import { Dynamic, delegateEvents, dynamic, memo, mergeProps } from "@solidjs/web";
+import { delegateEvents, mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/toolbar/root/ToolbarRoot.tsx
 /** A container for grouping a set of controls into one keyboard navigation scope. */
@@ -22,7 +22,7 @@ function ToolbarRoot(props) {
 	const items = /* @__PURE__ */ new Map();
 	let nextOrder = 0;
 	let itemChangeQueued = false;
-	const others = omit(allProps, "as", "class", "disabled", "loopFocus", "onFocus", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "loopFocus", "onFocus", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
 	const state = createMemo(() => ({
@@ -149,13 +149,11 @@ function ToolbarRoot(props) {
 		});
 		return () => observer.disconnect();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToolbarRootContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(props.as ?? "div");
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -256,7 +254,7 @@ function getScrollStyles(element) {
 function ToolbarGroup(props) {
 	const root = useToolbarRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "disabled", "ref", "style");
+	const others = omit(props, "render", "class", "disabled", "ref", "style");
 	const disabled = createMemo(() => root.disabled() || (internalProps.disabled ?? false));
 	const state = createMemo(() => ({
 		disabled: disabled(),
@@ -265,13 +263,12 @@ function ToolbarGroup(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const context = { disabled };
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToolbarGroupContext({
-		value: { disabled },
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(props.as ?? "div");
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -291,7 +288,6 @@ function installOwnedEventHandlers(element, handlers) {
 	const blockedEvents = /* @__PURE__ */ new WeakSet();
 	const nativeHandlers = [];
 	const restoreDelegatedHandlers = [];
-	let active = true;
 	for (const [name, handler] of handlers) {
 		const nativeHandler = (event) => {
 			handledEvents.add(event);
@@ -301,51 +297,47 @@ function installOwnedEventHandlers(element, handlers) {
 		element.addEventListener(name, nativeHandler);
 		nativeHandlers.push([name, nativeHandler]);
 	}
-	queueMicrotask(() => {
-		if (!active) return;
-		for (const [name, handler] of handlers) {
-			const handlerKey = `$$${name}`;
-			const dataKey = `${handlerKey}Data`;
-			const delegatedElement = element;
-			let childHandler = delegatedElement[handlerKey];
-			let childData = delegatedElement[dataKey];
-			const bridgedHandler = (event) => {
-				if (!handledEvents.has(event)) {
-					handledEvents.add(event);
-					Reflect.apply(handler, element, [event]);
-					if (event.baseUIHandlerPrevented) blockedEvents.add(event);
-				}
-				if (blockedEvents.has(event) || typeof childHandler !== "function") return;
-				if (childData === void 0) Reflect.apply(childHandler, element, [event]);
-				else Reflect.apply(childHandler, element, [childData, event]);
-			};
-			Object.defineProperty(delegatedElement, handlerKey, {
-				configurable: true,
-				enumerable: true,
-				get: () => bridgedHandler,
-				set: (value) => {
-					childHandler = value;
-				}
-			});
-			Object.defineProperty(delegatedElement, dataKey, {
-				configurable: true,
-				enumerable: true,
-				get: () => void 0,
-				set: (value) => {
-					childData = value;
-				}
-			});
-			restoreDelegatedHandlers.push(() => {
-				Reflect.deleteProperty(delegatedElement, handlerKey);
-				Reflect.deleteProperty(delegatedElement, dataKey);
-				delegatedElement[handlerKey] = childHandler;
-				delegatedElement[dataKey] = childData;
-			});
-		}
-		delegateEvents(handlers.map(([name]) => name));
-	});
+	for (const [name, handler] of handlers) {
+		const handlerKey = `$$${name}`;
+		const dataKey = `${handlerKey}Data`;
+		const delegatedElement = element;
+		let childHandler = delegatedElement[handlerKey];
+		let childData = delegatedElement[dataKey];
+		const bridgedHandler = (event) => {
+			if (!handledEvents.has(event)) {
+				handledEvents.add(event);
+				Reflect.apply(handler, element, [event]);
+				if (event.baseUIHandlerPrevented) blockedEvents.add(event);
+			}
+			if (blockedEvents.has(event) || typeof childHandler !== "function") return;
+			if (childData === void 0) Reflect.apply(childHandler, element, [event]);
+			else Reflect.apply(childHandler, element, [childData, event]);
+		};
+		Object.defineProperty(delegatedElement, handlerKey, {
+			configurable: true,
+			enumerable: true,
+			get: () => bridgedHandler,
+			set: (value) => {
+				childHandler = value;
+			}
+		});
+		Object.defineProperty(delegatedElement, dataKey, {
+			configurable: true,
+			enumerable: true,
+			get: () => void 0,
+			set: (value) => {
+				childData = value;
+			}
+		});
+		restoreDelegatedHandlers.push(() => {
+			Reflect.deleteProperty(delegatedElement, handlerKey);
+			Reflect.deleteProperty(delegatedElement, dataKey);
+			delegatedElement[handlerKey] = childHandler;
+			delegatedElement[dataKey] = childData;
+		});
+	}
+	delegateEvents(handlers.map(([name]) => name));
 	return () => {
-		active = false;
 		for (const [name, handler] of nativeHandlers) element.removeEventListener(name, handler);
 		for (const restore of restoreDelegatedHandlers) restore();
 	};
@@ -383,7 +375,6 @@ function createToolbarItem(metadata) {
 function ToolbarButton(props) {
 	const root = useToolbarRootContext();
 	const group = useToolbarGroupContext();
-	const Component = dynamic(() => withoutComponentBinding(props.as ?? "button"));
 	const internalProps = props;
 	const allProps = props;
 	const [childDisabled, setChildDisabled] = createSignal(false);
@@ -395,7 +386,7 @@ function ToolbarButton(props) {
 		disabled,
 		focusableWhenDisabled
 	});
-	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const state = createMemo(() => ({
 		disabled: disabled(),
 		focusable: focusableWhenDisabled(),
@@ -424,7 +415,7 @@ function ToolbarButton(props) {
 		if (isSpace) {
 			if (event.defaultPrevented && textNavigationRole) return;
 			event.preventDefault();
-			if (!nativeButton() || isButton || typeof props.as === "function") {
+			if (!nativeButton() || isButton) {
 				event.preventBaseUIHandler();
 				dispatchClickWithModifiers(event.currentTarget, event);
 			}
@@ -437,7 +428,7 @@ function ToolbarButton(props) {
 		}
 	}
 	function handleKeyUp(event) {
-		if (event.target === event.currentTarget && event.key === " " && (!nativeButton() || event.currentTarget.tagName === "BUTTON" || typeof props.as === "function")) {
+		if (event.target === event.currentTarget && event.key === " " && (!nativeButton() || event.currentTarget.tagName === "BUTTON")) {
 			event.preventDefault();
 			event.preventBaseUIHandler();
 		}
@@ -472,6 +463,7 @@ function ToolbarButton(props) {
 		if (current.disabled && current.focusableWhenDisabled && current.element) current.element.removeAttribute("disabled");
 	});
 	onCleanup(() => removeOwnedListeners?.());
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	return ToolbarItemOwnerContext({
 		value: {
 			disabled,
@@ -479,7 +471,7 @@ function ToolbarButton(props) {
 			setChildDisabled
 		},
 		get children() {
-			return Component(mergeProps({
+			return Render(mergeProps({
 				ref: (element) => {
 					setElement(element);
 				},
@@ -499,9 +491,7 @@ function ToolbarButton(props) {
 					return item.tabIndex();
 				},
 				get disabled() {
-					return memo(() => {
-						return typeof props.as === "function";
-					})() ? disabled() : disabledAttribute();
+					return disabledAttribute();
 				},
 				get ["aria-disabled"]() {
 					return ariaDisabled();
@@ -550,16 +540,13 @@ function ToolbarLink(props) {
 		disabled: FALSE,
 		focusableWhenDisabled: TRUE
 	});
-	const others = omit(allProps, "as", "class", "onFocus", "ref", "style");
+	const others = omit(allProps, "render", "class", "onFocus", "ref", "style");
 	const state = createMemo(() => ({ orientation: root.orientation() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
 	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => item.root.setActiveItem(item.registration));
-	return Dynamic(mergeProps({
-		get component() {
-			return withoutComponentBinding(props.as ?? "a");
-		},
+	return useRender(props, () => state(), (props) => ssrElement("a", props, void 0, true))(mergeProps({
 		ref: (element) => {
 			item.setElement(element);
 			setRef(internalProps.ref, element);
@@ -582,7 +569,6 @@ function ToolbarLink(props) {
 function ToolbarInput(props) {
 	const root = useToolbarRootContext();
 	const group = useToolbarGroupContext();
-	const Component = dynamic(() => withoutComponentBinding(props.as ?? "input"));
 	const internalProps = props;
 	const allProps = props;
 	const disabled = createMemo(() => root.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
@@ -591,7 +577,7 @@ function ToolbarInput(props) {
 		disabled,
 		focusableWhenDisabled
 	});
-	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "focusableWhenDisabled", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style");
 	const state = createMemo(() => ({
 		disabled: disabled(),
 		focusable: focusableWhenDisabled(),
@@ -620,7 +606,7 @@ function ToolbarInput(props) {
 		setRef(internalProps.ref, element);
 	}
 	onCleanup(() => removeOwnedListeners?.());
-	return Component(mergeProps({
+	return useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true))(mergeProps({
 		ref: (element) => {
 			setElement(element);
 		},
@@ -649,16 +635,13 @@ function preventNonTabDefault(event) {
 /** A separator that defaults to the opposite orientation of its toolbar. */
 function ToolbarSeparator(props) {
 	const root = useToolbarRootContext();
-	const others = omit(props, "as", "class", "orientation", "style");
+	const others = omit(props, "render", "class", "orientation", "style");
 	const orientation = createMemo(() => props.orientation ?? (root.orientation() === "vertical" ? "horizontal" : "vertical"));
 	const state = createMemo(() => ({ orientation: orientation() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	return Dynamic(mergeProps({
-		get component() {
-			return withoutComponentBinding(props.as ?? "div");
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},