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

package/dist/lib/server/preview-card/index.js

@@ -4,16 +4,16 @@ import { getStateAttributesProps } from "../internals/getStateAttributesProps.js
 import { d as imperativeAction } 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 { a as isElement } from "../dom-Crg_2R-j.js";
-import { t as PopupViewport } from "../PopupViewport-DftN5VUp.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { o as isElement } from "../dom-D8_aB1yy.js";
+import { t as PopupViewport } from "../PopupViewport-BDttjORN.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, r as FloatingRootStore, t as PopupStore } from "../PopupStore-kHjFPiQ5.js";
-import { t as createFocusInteraction } from "../createFocusInteraction-DMyKsniI.js";
-import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-C1GNJbKR.js";
-import { a as triggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-B2KsiiLb.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-Ct6wywmP.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, r as FloatingRootStore, t as PopupStore } from "../PopupStore-evylvVnN.js";
+import { t as createFocusInteraction } from "../createFocusInteraction-DFKr4G7a.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-B8QtiIZ3.js";
+import { a as triggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-QNj4mED2.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { escape, memo, mergeProps, ssrElement } from "@solidjs/web";
@@ -355,12 +355,12 @@ function PreviewCardTrigger(props) {
 		const handler = current?.state[current.activeTriggerId() === id() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown;
 		if (typeof handler === "function") handler(event);
 	}
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => handlePointerLeave);
-	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => updateInlineRect);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => updateInlineRect);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onPointerLeave = composeEventHandlers(liveEventHandler(() => internalProps.onPointerLeave), handlePointerLeave);
+	const onMouseEnter = composeEventHandlers(liveEventHandler(() => internalProps.onMouseEnter), updateInlineRect);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), updateInlineRect);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	return [Show({
 		keyed: true,
 		get when() {
@@ -605,7 +605,7 @@ function PreviewCardPopup(props) {
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupTransitionStateMapping));
 	const others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
 	});

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

@@ -3,11 +3,11 @@ 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 { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
 import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
 import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { n as useFieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
 import { n as useRadioGroupContext } from "../RadioGroupContext-D5xmTkDz.js";
@@ -107,10 +107,10 @@ function RadioRoot(props) {
 		input: inputElement,
 		value: () => internalProps.value
 	};
-	const callExternalClick = composeEventHandlers(() => internalProps.onClick);
-	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
-	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
-	const callExternalKeyUp = composeEventHandlers(() => internalProps.onKeyUp);
+	const callExternalClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick));
+	const callExternalFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus));
+	const callExternalKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown));
+	const callExternalKeyUp = composeEventHandlers(liveEventHandler(() => internalProps.onKeyUp));
 	function handleClick(event) {
 		callExternalClick.call(event.currentTarget, event);
 		if (event.baseUIHandlerPrevented || event.defaultPrevented || disabled() || readOnly()) return;

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

@@ -1,10 +1,10 @@
 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 { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
 import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
 import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { n as useFieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
@@ -118,9 +118,9 @@ function RadioGroup(props) {
 		getValue: getFormValue,
 		getControl: () => field.validation.getInputControl() ?? rootElement() ?? null
 	};
-	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
-	const callExternalBlur = composeEventHandlers(() => internalProps.onBlur);
-	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
+	const callExternalFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus));
+	const callExternalBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur));
+	const callExternalKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown));
 	function handleFocus(event) {
 		callExternalFocus.call(event.currentTarget, event);
 		if (event.baseUIHandlerPrevented) return;

package/dist/lib/server/{safePolygon-C1GNJbKR.js → safePolygon-B8QtiIZ3.js}

@@ -1,6 +1,6 @@
 import { M as triggerHover } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { a as isElement, c as isHTMLElement, n as contains, p as ownerDocument, r as getEventTarget } from "./dom-Crg_2R-j.js";
+import { i as getEventTarget, l as isHTMLElement, m as ownerDocument, n as contains, o as isElement } from "./dom-D8_aB1yy.js";
 import { o as getNodeChildren } from "./FloatingTree-z1JPD1dR.js";
 import { createEffect, createSignal, onCleanup } from "solid-js";
 //#region src/internals/overlay/createHoverInteraction.ts

package/dist/lib/server/scroll-area/index.js

@@ -2,7 +2,7 @@ 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 { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
@@ -245,10 +245,10 @@ function ScrollAreaRoot(props) {
 		handleTouchModalityChange(event);
 		if (event.pointerType !== "touch") setHovering(contains(rootElement, event.target));
 	}
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => handlePointerEnterOrMove);
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerEnterOrMove);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handleTouchModalityChange);
-	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => () => setHovering(false));
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), handlePointerEnterOrMove);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), handlePointerEnterOrMove);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handleTouchModalityChange);
+	const onPointerLeave = composeEventHandlers(liveEventHandler(() => internalProps.onPointerLeave), () => setHovering(false));
 	const context = {
 		cornerElement,
 		cornerSize,
@@ -549,11 +549,11 @@ function ScrollAreaViewport(props) {
 			programmaticScroll = true;
 		}, 100);
 	}
-	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => handleScroll);
-	const onWheel = composeEventHandlers(() => internalProps.onWheel, () => handleUserInteraction);
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handleUserInteraction);
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => handleUserInteraction);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleUserInteraction);
+	const onScroll = composeEventHandlers(liveEventHandler(() => internalProps.onScroll), handleScroll);
+	const onWheel = composeEventHandlers(liveEventHandler(() => internalProps.onWheel), handleUserInteraction);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), handleUserInteraction);
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), handleUserInteraction);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleUserInteraction);
 	const context = { computeThumbPosition };
 	onSettled(() => {
 		removeCSSVariableInheritance();
@@ -763,10 +763,10 @@ function ScrollAreaScrollbar(props) {
 		});
 		root.handlePointerDown(event, orientation());
 	}
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
-	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), (event) => event.preventDefault());
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), liveEventHandler(() => root.handlePointerUp));
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => internalProps.onPointerCancel), liveEventHandler(() => root.handlePointerUp));
 	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
@@ -889,10 +889,10 @@ function ScrollAreaThumb(props) {
 			if (untrack(accessor) === current.element) setter(void 0);
 		};
 	});
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => root.handlePointerDown(event, orientation()));
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => root.handlePointerMove);
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
-	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), (event) => root.handlePointerDown(event, orientation()));
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), liveEventHandler(() => root.handlePointerMove));
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), liveEventHandler(() => root.handlePointerUp));
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => internalProps.onPointerCancel), liveEventHandler(() => root.handlePointerUp));
 	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((current) => setElement(current)), internalProps.ref],
 		get ["class"]() {

package/dist/lib/server/{scrollable-CjsSxbGr.js → scrollable-C9Pgq8T5.js}

@@ -1,4 +1,4 @@
-import { c as isHTMLElement, m as ownerWindow, u as isShadowRoot } from "./dom-Crg_2R-j.js";
+import { d as isShadowRoot, h as ownerWindow, l as isHTMLElement } from "./dom-D8_aB1yy.js";
 //#region src/internals/scrollable.ts
 function nodeName(node) {
 	return (node?.nodeName ?? "#document").toLowerCase();

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

@@ -5,27 +5,28 @@ import { F as windowResize, S as listNavigation, t as cancelOpen, w as none, y a
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
-import { m as ownerWindow, n as contains, p as ownerDocument } from "../dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.js";
-import { t as InternalBackdrop } from "../InternalBackdrop-C_iDPVR-.js";
-import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-DFuUrykR.js";
-import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { h as ownerWindow, m as ownerDocument, n as contains } from "../dom-D8_aB1yy.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.js";
+import { t as InternalBackdrop } from "../InternalBackdrop-D_2zAWnl.js";
+import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-q6gnOSmv.js";
+import { t as createClickInteraction } from "../createClickInteraction-D7oc1Vco.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "../PopupStore-kHjFPiQ5.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "../PopupStore-evylvVnN.js";
 import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
-import { a as triggerOpenStateMapping, 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 { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "../FocusManager-D-xgblGs.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-CvoGfft9.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-B9GNbLrL.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 { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
 import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
-import { a as defaultItemEquality, c as removeItem, i as compareItemEquality, n as isSolidAccessor, o as findItemIndex, r as areItemArraysEqual, s as findSelectionIndex, t as mergeStyleValue } from "../mergeStyleValue-BwJ10_X2.js";
+import { a as findItemIndex, i as defaultItemEquality, n as areItemArraysEqual, o as findSelectionIndex, r as compareItemEquality, s as removeItem, t as isSolidAccessor } from "../isSolidAccessor-CZpzAH5l.js";
 import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
 import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, untrack, useContext } from "solid-js";
@@ -931,8 +932,8 @@ function SelectLabel(props) {
 	function preventPointerFocus(event) {
 		event.preventDefault();
 	}
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusTrigger);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), focusTrigger);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), preventPointerFocus);
 	createEffect(id, (currentId) => {
 		context.store.setLabelId(currentId);
 		const unregister = labelable.registerLabelId(currentId);
@@ -1054,13 +1055,13 @@ function SelectTrigger(props) {
 		pointerType = "keyboard";
 		context.handleKeyDown(event);
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	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 onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		id: id(),
 		element: element()
@@ -1580,14 +1581,14 @@ function SelectPopup(props) {
 		reachedMaxHeight = roundedHeight >= maximumHeight - 1;
 		setArrowVisibility(scroller);
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => context.handleTypeaheadBlur);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => context.handleTypeaheadBlur));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") Reflect.apply(handler, event.currentTarget, [event]);
-	}, () => (event) => {
+	}, (event) => {
 		if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
-	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => (event) => {
+	const onScroll = composeEventHandlers(liveEventHandler(() => internalProps.onScroll), (event) => {
 		if (!context.store.listElement()) handleScroll(event.currentTarget);
 	});
 	createEffect(() => id(), (currentId) => context.store.setPopupId(currentId));
@@ -1899,7 +1900,7 @@ function SelectList(props) {
 		"scrollbar-width": context.store.hasScrollArrows() && context.store.openMethod() !== "touch" ? "none" : void 0
 	}, resolveStyle(props.style, state)));
 	const others = omit(allProps, "render", "class", "id", "onScroll", "ref", "style");
-	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => (event) => context.handleScroll(event.currentTarget));
+	const onScroll = composeEventHandlers(liveEventHandler(() => internalProps.onScroll), (event) => context.handleScroll(event.currentTarget));
 	let listElement = null;
 	onCleanup(() => {
 		if (context.store.listElement() === listElement) context.store.setListElement(null);
@@ -2062,18 +2063,18 @@ function SelectItem(props) {
 		element()?.click();
 		allowMouseSelection = false;
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onKeyUp = composeEventHandlers(() => internalProps.onKeyUp, () => handleKeyUp);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => handleMouseUp);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => handleMouseMove);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => internalProps.onKeyUp), handleKeyUp);
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), handleMouseUp);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), handleMouseMove);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), (event) => {
 		pointerType = event.pointerType;
 	});
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerMove);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), handlePointerMove);
 	createEffect(() => ({
 		index: index(),
 		selectedByFocus: selectedByFocus(),
@@ -2331,8 +2332,8 @@ function SelectScrollArrow(props) {
 		if (items.length > 0) scroller.scrollTop = getTargetScrollTop(items, isUp(), offset, scroller.clientHeight, element?.offsetHeight ?? 0, maximum);
 		timer = setTimeout(scrollNext, 40);
 	}
-	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => stop);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => start);
+	const onMouseLeave = composeEventHandlers(liveEventHandler(() => internalProps.onMouseLeave), stop);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), start);
 	root.scrollArrowsMounted.count += 1;
 	root.store.setHasScrollArrows(true);
 	createEffect(() => ({

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

@@ -4,14 +4,14 @@ import { getStateAttributesProps } from "../internals/getStateAttributesProps.js
 import { A as trackPress, b as keyboard, c as drag, h as inputChange, w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
 import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
 import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
-import { mergeStyles } from "../internals/mergeStyles.js";
 import { escape, isServer, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
 //#region src/slider/stateAttributesMapping.ts
@@ -422,8 +422,8 @@ function SliderLabel(props) {
 	function preventPointerFocus(event) {
 		event.preventDefault();
 	}
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusControl);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), focusControl);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), preventPointerFocus);
 	createEffect(context.rootLabelId, (id) => {
 		context.setLocalLabelId(id);
 		const unregister = labelable.registerLabelId(id);
@@ -800,8 +800,8 @@ function SliderControl(props) {
 		}
 		listeningDocument = null;
 	}
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => handleTouchStart);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), handleTouchStart);
 	createEffect(element, (control) => {
 		context.setControlElement(control);
 		if (!control) return;
@@ -890,7 +890,7 @@ function SliderTrack(props) {
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
-	const styleValue = createMemo(() => mergeStyles({ position: "relative" }, resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => mergeStyleValue({ position: "relative" }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	return Render(mergeProps({
 		ref: [internalProps.ref],
@@ -1035,7 +1035,7 @@ function SliderThumb(props) {
 			} : {}
 		};
 	});
-	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => mergeStyleValue(internalStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	const indexAttribute = createMemo(() => ({ [SliderThumbDataAttributes.index]: String(index()) }));
 	const formattedValue = createMemo(() => formatNumber(thumbValue(), context.locale(), context.format()));
@@ -1147,10 +1147,10 @@ function SliderThumb(props) {
 		context.interaction.pressedThumbIndex = index();
 		context.interaction.pressedThumbCenterOffset = (vertical() ? event.clientY : event.clientX) - getMidpoint(event.currentTarget, vertical());
 	}
-	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onFocus, () => handleFocus);
-	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onBlur, () => handleBlur);
-	composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	composeEventHandlers(liveEventHandler(() => restoringFocusVisible ? void 0 : internalProps.onFocus), handleFocus);
+	composeEventHandlers(liveEventHandler(() => restoringFocusVisible ? void 0 : internalProps.onBlur), handleBlur);
+	composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		control: context.controlElement(),
 		inset: context.inset(),
@@ -1282,7 +1282,7 @@ function SliderIndicator(props) {
 		style[vertical ? "height" : "width"] = range ? sizeValue : startValue;
 		return style;
 	});
-	const styleValue = createMemo(() => mergeStyles(indicatorStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => mergeStyleValue(indicatorStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	onSettled(() => {
 		setHydrating(false);

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

@@ -2,9 +2,9 @@ import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
 import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
 import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
 import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { t as createLabelableId } from "../createLabelableId-WMUKtY6s.js";
@@ -101,13 +101,13 @@ function SwitchRoot(props) {
 		value: checked,
 		getControl: () => rootElement() ?? null
 	};
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => handleRootClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleRootFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleRootBlur);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyUp));
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleRootClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleRootFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleRootBlur);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
 	function handleRootClick(event) {
 		if (readOnly() || disabled()) return;
 		event.preventDefault();

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

@@ -5,12 +5,12 @@ import { C as missing, p as initial, s as disabled, w as none } from "../interna
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
 import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
-import { mergeStyles } from "../internals/mergeStyles.js";
 import { escape, isServer, memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
 //#region src/tabs/root/TabsRootContext.ts
@@ -396,7 +396,7 @@ function TabsList(props) {
 		scrollTabIntoView(targetElement, root.orientation());
 		queueMicrotask(() => target.element()?.focus());
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	const context = {
 		activateOnFocus,
 		highlightedTab,
@@ -639,10 +639,10 @@ function TabsTab(props) {
 		event.preventDefault();
 		activate(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		disabled: disabled(),
 		element: element(),
@@ -794,7 +794,11 @@ function TabsIndicator(props) {
 			[TabsIndicatorCssVars.activeTabHeight]: `${current.size.height}px`
 		};
 	});
-	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => {
+		const internal = internalStyle();
+		const external = resolveStyle(props.style, state());
+		return internal ? mergeStyleValue(internal, external) : external;
+	});
 	const hidden = createMemo(() => {
 		const current = geometry();
 		return !current || current.size.width <= 0 || current.size.height <= 0;