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

package/dist/lib/server/{PopupHandle-DthPgNjy.js → PopupHandle-QNj4mED2.js}

@@ -1,8 +1,8 @@
 import { d as imperativeAction } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { i as PopupTriggerMap } from "./PopupStore-DEs3FAEe.js";
+import { i as PopupTriggerMap } from "./PopupStore-evylvVnN.js";
 import { isServer } from "@solidjs/web";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal, sharedConfig } from "solid-js";
 //#region src/internals/overlay/PopupHandle.ts
 var DetachedPopupStore = class {
 	context = { triggerElements: new PopupTriggerMap() };
@@ -100,12 +100,21 @@ var BasePopupHandle = class {
 	}
 };
 function createPopupHandleStore(handle) {
-	const [revision, setRevision] = createSignal(0, { equals: false });
-	createEffect(() => handle(), (current) => current?.subscribeStore(() => setRevision((value) => value + 1)));
+	const [revision, setRevision] = createSignal(0, {
+		equals: false,
+		ownedWrite: true
+	});
+	let hydrationSnapshot = !isServer && sharedConfig.hydrating;
+	createEffect(() => handle(), (current) => {
+		const unsubscribe = current?.subscribeStore(() => setRevision((value) => value + 1));
+		hydrationSnapshot = false;
+		setRevision((value) => value + 1);
+		return unsubscribe;
+	});
 	return () => {
 		revision();
 		const current = handle();
-		return current ? isServer ? current.serverStore : current.store : void 0;
+		return current ? isServer || hydrationSnapshot ? current.serverStore : current.store : void 0;
 	};
 }
 function attachPopupHandle(handle, store) {

package/dist/lib/server/{PopupStore-DEs3FAEe.js → PopupStore-evylvVnN.js}

@@ -1,12 +1,15 @@
 import { N as triggerPress, T as outsidePress, l as escapeKey, w as none } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
-import { a as isElement, c as isHTMLElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget, s as isEventTargetWithin, u as isShadowRoot } from "./dom-Crg_2R-j.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
+import { c as isEventTargetWithin$1, d as isShadowRoot, h as ownerWindow, i as getEventTarget, l as isHTMLElement, m as ownerDocument, n as contains, o as isElement, r as containsWithPortals } from "./dom-D8_aB1yy.js";
 import { l as createEventEmitter, o as getNodeChildren } from "./FloatingTree-z1JPD1dR.js";
-import { t as createTransitionStatus } from "./createTransitionStatus-BTlrerSS.js";
-import { _ as ReactiveStore } from "./popupStateMapping-nKoUwoke.js";
-import { createEffect, untrack } from "solid-js";
+import { t as createTransitionStatus } from "./createTransitionStatus-184v7j3-.js";
+import { _ as ReactiveStore } from "./popupStateMapping-VHqr6M4H.js";
+import { createEffect, onCleanup, untrack } from "solid-js";
 //#region src/internals/overlay/createDismiss.ts
+function isEventTargetWithin(event, node) {
+	return isEventTargetWithin$1(event, node) || containsWithPortals(node, getEventTarget(event));
+}
 function normalizeBubbles(value) {
 	return {
 		escapeKey: typeof value === "boolean" ? value : value?.escapeKey ?? false,
@@ -27,10 +30,14 @@ function createDismiss(options) {
 	let pressStartedInside = false;
 	let pressStartPrevented = false;
 	let suppressNextOutsideClick = false;
+	let sawPressWhileOpen = false;
 	let suppressionTimer;
 	let touchTimer;
 	let touchState = null;
 	const handledEscapeEvents = /* @__PURE__ */ new WeakSet();
+	onCleanup(options.context.context.events.on("openchange", (details) => {
+		if (!details.open) sawPressWhileOpen = false;
+	}));
 	const enabled = () => options.enabled?.() ?? true;
 	const open = () => options.context.track().open;
 	const bubbles = () => normalizeBubbles(options.bubbles?.());
@@ -76,7 +83,10 @@ function createDismiss(options) {
 		escapeBubbles: bubbles().escapeKey,
 		outsideBubbles: bubbles().outsidePress
 	}), (state) => {
-		if (!state.open || !state.enabled) return;
+		if (!state.open || !state.enabled) {
+			if (!state.open) sawPressWhileOpen = false;
+			return;
+		}
 		options.context.context.data.__escapeKeyBubbles = state.escapeBubbles;
 		options.context.context.data.__outsidePressBubbles = state.outsideBubbles;
 		const documentNode = ownerDocument(state.floating);
@@ -118,10 +128,14 @@ function createDismiss(options) {
 			if (isElement(target) && (triggers.hasElement(target) || triggers.hasMatchingElement((trigger) => contains(trigger, target)))) return;
 			if (!("touches" in event) && isScrollbarPress(event, target)) return;
 			if (eventInsideTree(event)) return;
-			if (pressMode() === "intentional" && suppressNextOutsideClick) {
-				clearTimeout(suppressionTimer);
-				suppressNextOutsideClick = false;
-				return;
+			if (pressMode() === "intentional") {
+				const click = event;
+				if (!(click.detail === 0 || click.pointerType === "" && click.isTrusted || /android/i.test(ownerWindow(state.floating).navigator.userAgent) && Boolean(click.pointerType) && click.buttons === 1) && !sawPressWhileOpen) return;
+				if (suppressNextOutsideClick) {
+					clearTimeout(suppressionTimer);
+					suppressNextOutsideClick = false;
+					return;
+				}
 			}
 			if (!guardAllows(event) || hasBlockingChild("__outsidePressBubbles")) return;
 			const targetElement = isElement(target) ? target : null;
@@ -139,7 +153,10 @@ function createDismiss(options) {
 			getEventTarget(event)?.addEventListener(event.type, () => listener(event), { once: true });
 		};
 		const onPressCapture = (event) => {
-			if (event.type === "pointerdown") pointerType = event.pointerType;
+			if (event.type === "pointerdown") {
+				if (event.button === 0) sawPressWhileOpen = true;
+				pointerType = event.pointerType;
+			}
 			if (event.type === "mousedown" && touchState && !touchState.dismissOnMouseDown) return;
 			if (event.type !== "click" && eventInsideTree(event) && event.button === 0) {
 				pressStartedInside = true;
@@ -155,6 +172,7 @@ function createDismiss(options) {
 			});
 		};
 		const onPressEndCapture = (event) => {
+			if (event.type === "pointercancel") sawPressWhileOpen = false;
 			if (!pressStartedInside) return;
 			const prevented = pressStartPrevented;
 			resetPressStart();
@@ -221,9 +239,18 @@ function createDismiss(options) {
 			documentNode.addEventListener("pointercancel", onPressEndCapture, true);
 			documentNode.addEventListener("mousedown", onPressCapture, true);
 			documentNode.addEventListener("mouseup", onPressEndCapture, true);
-			documentNode.addEventListener("touchstart", onTouchStart, true);
-			documentNode.addEventListener("touchmove", onTouchMove, true);
-			documentNode.addEventListener("touchend", onTouchEnd, true);
+			documentNode.addEventListener("touchstart", onTouchStart, {
+				capture: true,
+				passive: true
+			});
+			documentNode.addEventListener("touchmove", onTouchMove, {
+				capture: true,
+				passive: true
+			});
+			documentNode.addEventListener("touchend", onTouchEnd, {
+				capture: true,
+				passive: true
+			});
 		}
 		return () => {
 			documentNode.removeEventListener("keydown", onKeyDown);
@@ -254,7 +281,7 @@ function createDismiss(options) {
 //#endregion
 //#region src/internals/overlay/createPopupPresence.ts
 function createPopupPresence(store, element, options = {}) {
-	const transition = createTransitionStatus(() => store.open());
+	const transition = createTransitionStatus(() => store.open(), options.animateInitialOpen);
 	store.update({
 		mounted: untrack(transition.mounted),
 		transitionStatus: untrack(transition.transitionStatus)

package/dist/lib/server/{PopupViewport-3r_KTFwX.js → PopupViewport-BDttjORN.js}

@@ -1,7 +1,7 @@
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
-import { m as ownerWindow, p as ownerDocument } from "./dom-Crg_2R-j.js";
-import { n as createPopupAutoResize, t as calculateActivationDirection } from "./createPopupAutoResize-DO50jjNX.js";
-import { escape, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyleProperty } from "@solidjs/web";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
+import { h as ownerWindow, m as ownerDocument } from "./dom-D8_aB1yy.js";
+import { n as createPopupAutoResize, t as calculateActivationDirection } from "./createPopupAutoResize-Cg0-lLf4.js";
+import { escape, scope, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyleProperty } from "@solidjs/web";
 import { Show, createEffect, createSignal, onCleanup, untrack } from "solid-js";
 //#region src/internals/overlay/adaptiveOrigin.ts
 var adaptiveOrigin = {
@@ -55,17 +55,17 @@ var _tmpl$ = [
 ];
 var _tmpl$2 = [
 	"<div",
-	" data-current",
-	">",
+	" data-current>",
 	"</div>"
 ];
 var _tmpl$3 = [
 	"<div",
-	" data-current>",
+	" data-current",
+	">",
 	"</div>"
 ];
 function PopupViewport(props) {
-	var _v$, _g$, _v$4, _v$5, _v$6;
+	var _v$, _g$;
 	const signalOptions = { ownedWrite: true };
 	const [currentContainer, setCurrentContainer] = createSignal(null, signalOptions);
 	const [previousContainer, setPreviousContainer] = createSignal(null, signalOptions);
@@ -131,16 +131,21 @@ function PopupViewport(props) {
 		setShowStartingStyle(true);
 		cancelAnimationFrame(cleanupFrame);
 		cleanupFrame = requestAnimationFrame(() => {
-			setShowStartingStyle(false);
-			const controller = new AbortController();
-			cleanupController = controller;
-			runOnceAnimationsFinish(state.current, () => {
-				setPreviousContent(null);
-				setPreviousDimensions(null);
-				captured = null;
-			}, controller.signal, { waitForStartingStyleRemoved: true });
+			cleanupFrame = requestAnimationFrame(() => {
+				setShowStartingStyle(false);
+				const controller = new AbortController();
+				cleanupController = controller;
+				runOnceAnimationsFinish(state.current, () => {
+					setPreviousContent(null);
+					setPreviousDimensions(null);
+					captured = null;
+				}, controller.signal, { waitForStartingStyleRemoved: true });
+			});
 		});
-		return () => cleanupController?.abort();
+		return () => {
+			cancelAnimationFrame(cleanupFrame);
+			cleanupController?.abort();
+		};
 	});
 	createEffect(() => ({
 		container: currentContainer(),
@@ -188,31 +193,36 @@ function PopupViewport(props) {
 			return previousContent();
 		},
 		get fallback() {
-			var _v$7 = ssrHydrationKey(), _v$8 = escape(Show({
+			return Show({
 				keyed: true,
 				get when() {
 					return `${props.store.activeTriggerId() ?? "current"}-${contentKey()}`;
 				},
-				get children() {
-					return props.children;
+				children: (_key) => {
+					var _v$4, _v$5;
+					return _v$4 = ssrHydrationKey(), _v$5 = scope(() => {
+						return escape(props.children);
+					}), ssr(_tmpl$2, _v$4, _v$5);
 				}
-			}));
-			return ssr(_tmpl$3, _v$7, _v$8);
+			});
 		},
 		get children() {
 			return [(_v$ = ssrHydrationKey(), _g$ = ssrGroup(() => {
 				return [ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";--popup-width:", previousDimensions() ? `${escape(previousDimensions().width, true)}px` : escape(void 0, true)) + ssrStyleProperty(";--popup-height:", previousDimensions() ? `${escape(previousDimensions().height, true)}px` : escape(void 0, true)), ssrAttribute("data-ending-style", showStartingStyle() ? escape(void 0, true) : "")];
-			}, 2), ssr(_tmpl$, _v$, _g$, _g$)), (_v$4 = ssrHydrationKey(), _v$5 = () => {
-				return ssrAttribute("data-starting-style", showStartingStyle() ? "" : escape(void 0, true));
-			}, _v$6 = escape(Show({
+			}, 2), ssr(_tmpl$, _v$, _g$, _g$)), Show({
 				keyed: true,
 				get when() {
 					return `${props.store.activeTriggerId() ?? "current"}-${contentKey()}`;
 				},
-				get children() {
-					return props.children;
+				children: (_key) => {
+					var _v$6, _v$7, _v$8;
+					return _v$6 = ssrHydrationKey(), _v$7 = () => {
+						return ssrAttribute("data-starting-style", showStartingStyle() ? "" : escape(void 0, true));
+					}, _v$8 = scope(() => {
+						return escape(props.children);
+					}), ssr(_tmpl$3, _v$6, _v$7, _v$8);
 				}
-			})), ssr(_tmpl$2, _v$4, _v$5, _v$6))];
+			})];
 		}
 	});
 }

package/dist/lib/server/{Separator-vhhYxWGr.js → Separator-DTvtnxzP.js}

@@ -1,20 +1,18 @@
+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 { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createMemo, omit } from "solid-js";
 //#region src/separator/Separator.tsx
 /** A separator element accessible to screen readers. */
 function Separator(props) {
-	const others = omit(props, "as", "class", "orientation", "style");
+	const others = omit(props, "render", "class", "orientation", "style");
 	const orientation = createMemo(() => props.orientation ?? "horizontal");
 	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 props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},

package/dist/lib/server/TriggerFocusGuards-B9GNbLrL.js

@@ -0,0 +1,61 @@
+import { u as focusOut } from "./internals/reasons.js";
+import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
+import { n as contains } from "./dom-D8_aB1yy.js";
+import { d as getTabbableAfterElement, f as getTabbableBeforeElement, g as FocusGuard, p as isOutsideFocusEvent } from "./popupStateMapping-VHqr6M4H.js";
+import { t as setRef } from "./setRef-Bt70sW7c.js";
+import { escape, memo } from "@solidjs/web";
+import { createEffect, flush } from "solid-js";
+//#region src/internals/overlay/TriggerFocusGuards.tsx
+function TriggerFocusGuards(props) {
+	let beforeGuard = null;
+	let afterGuard = null;
+	const close = (event) => {
+		props.context.setOpen(false, createChangeEventDetails(focusOut, event, event.currentTarget));
+		flush();
+	};
+	createEffect(() => props.enabled, (enabled) => {
+		if (!enabled) return;
+		if (beforeGuard && props.beforeGuardRef) setRef(props.beforeGuardRef, beforeGuard);
+		if (afterGuard && props.afterGuardRef) setRef(props.afterGuardRef, afterGuard);
+	});
+	return [
+		FocusGuard({
+			get hidden() {
+				return !props.enabled;
+			},
+			"data-type": "trigger-before",
+			ref: (element) => beforeGuard = element,
+			onFocus: (event) => {
+				close(event);
+				getTabbableBeforeElement(beforeGuard)?.focus();
+			}
+		}),
+		memo(() => {
+			return escape(props.children);
+		}),
+		FocusGuard({
+			get hidden() {
+				return !props.enabled;
+			},
+			"data-type": "trigger-after",
+			ref: (element) => afterGuard = element,
+			onFocus: (event) => {
+				const positioner = props.positioner();
+				if (positioner && isOutsideFocusEvent(event, positioner)) {
+					props.beforeContentGuard?.()?.focus();
+					return;
+				}
+				close(event);
+				let next = getTabbableAfterElement(afterGuard ?? props.trigger());
+				while (next && contains(positioner, next)) {
+					const previous = next;
+					next = getTabbableAfterElement(next);
+					if (next === previous) break;
+				}
+				next?.focus();
+			}
+		})
+	];
+}
+//#endregion
+export { TriggerFocusGuards as t };

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

@@ -1,12 +1,13 @@
 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 triggerPress, w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { n as createCollapsibleTransitionStatus, t as createCollapsiblePanel } from "../createCollapsiblePanel-DTyVJz0G.js";
+import { n as createCollapsibleTransitionStatus, t as createCollapsiblePanel } from "../createCollapsiblePanel-B45kTe6v.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { Dynamic, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/accordion/root/AccordionRootContext.ts
 var MISSING_CONTEXT$1 = Symbol("AccordionRootContext");
@@ -34,7 +35,7 @@ function AccordionRoot(props) {
 	let nextItemOrder = 0;
 	let disposed = false;
 	let itemChangeQueued = false;
-	const others = omit(allProps, "as", "class", "defaultValue", "disabled", "hiddenUntilFound", "keepMounted", "loopFocus", "multiple", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "defaultValue", "disabled", "hiddenUntilFound", "keepMounted", "loopFocus", "multiple", "onValueChange", "orientation", "ref", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const hiddenUntilFound = createMemo(() => internalProps.hiddenUntilFound ?? false);
@@ -122,13 +123,11 @@ function AccordionRoot(props) {
 	onCleanup(() => {
 		disposed = true;
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return AccordionRootContext({
 		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();
@@ -215,7 +214,7 @@ function AccordionItem(props) {
 		const registered = registeredTriggerId();
 		return registered === null ? void 0 : registered ?? defaultTriggerId;
 	});
-	const others = omit(allProps, "as", "class", "disabled", "onOpenChange", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "disabled", "onOpenChange", "ref", "style", "value");
 	const state = createMemo(() => ({
 		...root.state(),
 		hidden: !open() && !transition.mounted(),
@@ -255,13 +254,11 @@ function AccordionItem(props) {
 		unregister();
 		setElement(void 0);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return AccordionItemContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((current) => setElement(current)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -279,15 +276,12 @@ function AccordionItem(props) {
 function AccordionHeader(props) {
 	const context = useAccordionItemContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), accordionStateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "h3";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("h3", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -318,30 +312,27 @@ function AccordionTrigger(props) {
 	const id = createMemo(() => registeredId() ?? context.defaultTriggerId);
 	const disabled = createMemo(() => (internalProps.disabled ?? false) || context.disabled());
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
-	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "ref", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerStateAttributesMapping));
 	const ariaDisabled = createMemo(() => nativeButton() ? disabled() ? "true" : "false" : disabled() ? "true" : void 0);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => (event) => {
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onClick), (event) => {
 		context.requestOpenChange(!context.open(), event, triggerPress);
 	});
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledKeyDown : 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(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledKeyDown : 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)));
 	createEffect(() => registeredId(), (currentId) => {
 		context.setTriggerIdState((existingId) => currentId ?? (existingId === null ? void 0 : existingId));
 		return () => {
 			context.setTriggerIdState((existingId) => existingId === currentId ? null : existingId);
 		};
 	});
-	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 id() {
 			return id();
@@ -444,7 +435,7 @@ function AccordionPanel(props) {
 	const keepMounted = createMemo(() => internalProps.keepMounted ?? root.keepMounted());
 	const registeredId = createMemo(() => internalProps.id || void 0);
 	const id = createMemo(() => internalProps.id ?? item.defaultPanelId);
-	const others = omit(allProps, "as", "class", "hiddenUntilFound", "id", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "hiddenUntilFound", "id", "keepMounted", "ref", "style");
 	const controller = createCollapsiblePanel({
 		element: panelElement,
 		hiddenUntilFound,
@@ -480,60 +471,31 @@ function AccordionPanel(props) {
 		if (current.hiddenUntilFound && current.keepMounted === false && false);
 	});
 	onCleanup(() => setPanelElement(void 0));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return controller.shouldRender();
 		},
 		get children() {
-			return Show({
-				get when() {
-					return props.as;
+			return Render(mergeProps({
+				ref: [internalProps.ref, ((element) => setPanelElement(element))],
+				get id() {
+					return id();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
 				},
-				get fallback() {
-					return ssrElement("div", () => {
-						return mergeProps({
-							get id() {
-								return id();
-							},
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							},
-							get hidden() {
-								return hiddenValue();
-							},
-							role: "region",
-							get ["aria-labelledby"]() {
-								return item.triggerId();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
+				get hidden() {
+					return hiddenValue();
 				},
-				children: (component) => Dynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					ref: [internalProps.ref, ((element) => setPanelElement(element))],
-					get id() {
-						return id();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					},
-					get hidden() {
-						return hiddenValue();
-					},
-					role: "region",
-					get ["aria-labelledby"]() {
-						return item.triggerId();
-					}
-				}, stateAttributes, others))
-			});
+				role: "region",
+				get ["aria-labelledby"]() {
+					return item.triggerId();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }

package/dist/lib/server/alert-dialog/index.js

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
-import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, t as DialogHandle } from "../DialogHandle-ATZlm9RC.js";
-import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-BebI-w5P.js";
+import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, t as DialogHandle } from "../DialogHandle-BGIISmG7.js";
+import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-C2ZDGf42.js";
 //#region src/alert-dialog/root/AlertDialogRoot.tsx
 /** Groups all parts of the alert dialog without rendering an element. */
 function AlertDialogRoot(props) {

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

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
 import "../internals/reasons.js";
-import { A as getFilter, D as ComboboxTrigger, O as AriaCombobox, P as stringifyAsLabel, _ as ComboboxClear, a as ComboboxItem, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DvuctLt3.js";
-import { n as isSolidAccessor } from "../mergeStyleValue-Db8bRCM4.js";
-import { mergeProps } from "@solidjs/web";
+import { A as getFilter, D as ComboboxTrigger, F as stringifyAsLabel, O as AriaCombobox, _ as ComboboxClear, a as ComboboxItem, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-BmhL0nf1.js";
+import { t as isSolidAccessor } from "../isSolidAccessor-CZpzAH5l.js";
+import { memo, mergeProps } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
 //#region src/autocomplete/root/AutocompleteRoot.tsx
 function AutocompleteRoot(props) {
@@ -12,7 +12,7 @@ function AutocompleteRoot(props) {
 	let lastControlledValue = untrack(() => props.value);
 	let supersedesNextHighlight = false;
 	const mode = createMemo(() => props.mode ?? "list");
-	const enableInline = createMemo(() => mode() === "inline" || mode() === "both");
+	const enableInline = createMemo(() => !props.readOnly && (mode() === "inline" || mode() === "both"));
 	const staticItems = createMemo(() => mode() === "inline" || mode() === "none");
 	const typedValue = createMemo(() => controlled ? props.value ?? "" : uncontrolledValue());
 	const inputValue = createMemo(() => {
@@ -29,10 +29,11 @@ function AutocompleteRoot(props) {
 		return (item, _query, itemToString) => match(item, typedQuery(), itemToString);
 	});
 	function handleInputValueChange(next, details) {
+		props.onValueChange?.(next, details);
+		if (details.isCanceled) return;
 		supersedesNextHighlight = false;
 		setInlineValue("");
 		if (!controlled) setUncontrolledValue(next);
-		props.onValueChange?.(next, details);
 	}
 	function handleItemHighlighted(highlightedValue, details) {
 		props.onItemHighlighted?.(highlightedValue, details);
@@ -51,6 +52,11 @@ function AutocompleteRoot(props) {
 		get autoComplete() {
 			return mode();
 		},
+		get filterQuery() {
+			return memo(() => {
+				return mode() === "both";
+			})() ? typedQuery() : void 0;
+		},
 		get filter() {
 			return filter();
 		},
@@ -69,6 +75,9 @@ function AutocompleteRoot(props) {
 		onInputValueChange: handleInputValueChange,
 		onItemHighlighted: handleItemHighlighted
 	}, others));
+	createEffect(enableInline, (enabled) => {
+		if (!enabled) setInlineValue("");
+	});
 	createEffect(() => props.value, (next) => {
 		if (!controlled || next === lastControlledValue) return;
 		lastControlledValue = next;