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

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 { 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 { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { h as ownerWindow, i as getEventTarget, m as ownerDocument, n as contains, o as isElement, t as activeElement } from "../dom-D8_aB1yy.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.js";
+import { _ as ReactiveStore, g as FocusGuard, n as popupStateMapping, o as PopupPortal } from "../popupStateMapping-VHqr6M4H.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-ByqXubhO.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,17 +566,18 @@ 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 onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => handleFocus);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => handleMouseEnter);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => handleMouseEnter);
-	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => handleMouseLeave);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => handlePointerEnd);
-	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => handlePointerEnd);
+	const others = omit(allProps, "render", "children", "class", "onBlur", "onClick", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onPointerCancel", "onPointerDown", "onPointerUp", "ref", "style");
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), handleFocus);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onMouseEnter = composeEventHandlers(liveEventHandler(() => internalProps.onMouseEnter), handleMouseEnter);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), handleMouseEnter);
+	const onMouseLeave = composeEventHandlers(liveEventHandler(() => internalProps.onMouseLeave), handleMouseLeave);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), handlePointerEnd);
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => 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 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 others = omit(allProps, "render", "class", "onKeyDown", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style", "swipeDirection", "toast");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), liveEventHandler(() => untrack(() => swipeEnabled() ? handlePointerDown : void 0)));
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), liveEventHandler(() => untrack(() => swipeEnabled() ? handlePointerMove : void 0)));
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), liveEventHandler(() => untrack(() => swipeEnabled() ? handleSwipeEnd : void 0)));
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => internalProps.onPointerCancel), liveEventHandler(() => 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,21 +1219,18 @@ 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);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => setHasFocus(true));
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => () => setHasFocus(false));
-	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 onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), () => setHasFocus(true));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), () => setHasFocus(false));
+	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 useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
@@ -1296,26 +1286,24 @@ 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;
 		return omit(value, "children", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown");
 	});
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => actionProps()?.onClick);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => actionProps()?.onPointerDown);
-	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 onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), liveEventHandler(() => actionProps()?.onClick));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), liveEventHandler(() => actionProps()?.onPointerDown));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), liveEventHandler(() => actionProps()?.onMouseDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => actionProps()?.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => actionProps()?.onKeyUp), liveEventHandler(() => 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,11 +1,12 @@
+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 { 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());
@@ -82,12 +83,12 @@ function Toggle(props) {
 	function handleGroupKeyUp(event) {
 		handleCompositeKeyUp(event, nativeButton());
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? group ? preventFocusableDisabledKeyDown : stopInteraction : void 0), () => internalProps.onKeyDown, () => untrack(() => group ? handleGroupKeyDown : nativeButton() ? void 0 : handleNonNativeKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => group ? handleGroupKeyUp : nativeButton() ? void 0 : handleNonNativeKeyUp));
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? group ? preventFocusableDisabledKeyDown : stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => group ? handleGroupKeyDown : nativeButton() ? void 0 : handleNonNativeKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => group ? handleGroupKeyUp : nativeButton() ? void 0 : handleNonNativeKeyUp)));
 	createEffect(() => ({
 		initialized: group?.isValueInitialized() ?? false,
 		missingValue: group !== void 0 && internalProps.value === void 0
@@ -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,12 +1,13 @@
+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 { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 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);
@@ -146,7 +147,7 @@ function ToggleGroup(props) {
 		setActiveItem(nextItem);
 		queueMicrotask(() => nextItem.element()?.focus());
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => toolbar ? void 0 : handleKeyDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => toolbar ? void 0 : handleKeyDown));
 	const context = {
 		disabled,
 		isPressed,
@@ -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();