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

package/dist/lib/server/collapsible/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/collapsible/root/CollapsibleRootContext.ts
 var MISSING_CONTEXT = Symbol("CollapsibleRootContext");
@@ -43,7 +44,7 @@ function CollapsibleRoot(props) {
 	const [uncontrolledOpen, setUncontrolledOpen] = createSignal(untrack(() => rootProps.defaultOpen ?? false));
 	const [registeredPanelId, setPanelIdState] = createSignal();
 	const defaultPanelId = `base-ui-${createUniqueId()}`;
-	const others = omit(allProps, "as", "class", "defaultOpen", "disabled", "onOpenChange", "open", "style");
+	const others = omit(allProps, "render", "class", "defaultOpen", "disabled", "onOpenChange", "open", "style");
 	const open = createMemo(() => controlled ? rootProps.open ?? false : uncontrolledOpen());
 	const disabled = createMemo(() => rootProps.disabled ?? false);
 	const transition = createCollapsibleTransitionStatus(() => open());
@@ -68,24 +69,23 @@ function CollapsibleRoot(props) {
 		flush();
 		return true;
 	}
+	const context = {
+		defaultPanelId,
+		disabled,
+		mounted: transition.mounted,
+		open,
+		panelId,
+		requestOpenChange,
+		setMounted: transition.setMounted,
+		setPanelIdState,
+		state,
+		transitionStatus: transition.transitionStatus
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return CollapsibleRootContext({
-		value: {
-			defaultPanelId,
-			disabled,
-			mounted: transition.mounted,
-			open,
-			panelId,
-			requestOpenChange,
-			setMounted: transition.setMounted,
-			setPanelIdState,
-			state,
-			transitionStatus: transition.transitionStatus
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -102,26 +102,23 @@ function CollapsibleRoot(props) {
 function CollapsibleTrigger(props) {
 	const context = useCollapsibleRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(props, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const disabled = createMemo(() => props.disabled ?? context.disabled());
 	const nativeButton = createMemo(() => props.nativeButton ?? true);
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), collapsibleTriggerStateAttributesMapping));
-	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 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 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)));
 	const ariaDisabled = createMemo(() => nativeButton() ? disabled() ? "true" : "false" : disabled() ? "true" : void 0);
 	const ariaExpanded = createMemo(() => context.open() ? "true" : "false");
-	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 ["class"]() {
 			return classValue();
@@ -216,7 +213,7 @@ function CollapsiblePanel(props) {
 	const id = createMemo(() => registeredId() ?? context.defaultPanelId);
 	const hiddenUntilFound = createMemo(() => internalProps.hiddenUntilFound ?? false);
 	const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
-	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,
@@ -252,31 +249,27 @@ function CollapsiblePanel(props) {
 		if (current.hiddenUntilFound && current.keepMounted === false && false);
 	});
 	onCleanup(() => setPanelElement(void 0));
-	const commonProps = () => ({
-		ref: [internalProps.ref, ((element) => setPanelElement(element))],
-		id: id(),
-		class: classValue(),
-		style: styleValue(),
-		hidden: hiddenValue(),
-		...stateAttributes(),
-		...others
-	});
+	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 fallback() {
-					return ssrElement("div", commonProps(), void 0, true);
+				get style() {
+					return styleValue();
 				},
-				children: (component) => Dynamic(mergeProps({ get component() {
-					return component();
-				} }, commonProps))
-			});
+				get hidden() {
+					return hiddenValue();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }

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

@@ -1,27 +1,26 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { E as pointer, S as listNavigation, b as keyboard, n as chipRemovePress, 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 { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { A as getFilter, C as getIndexAfterChipRemoval, D as ComboboxTrigger, E as useRequiredComboboxChipsContext, M as resolveMultipleLabels, N as resolveSelectedLabel, O as AriaCombobox, P as stringifyAsLabel, S as getChipNavigationKeys, T as ComboboxChipsContext, _ as ComboboxClear, a as ComboboxItem, b as handleInputPress, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, j as hasNullItemLabel, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, o as useComboboxItemContext, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, w as ComboboxChipRegistry, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DvuctLt3.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { A as getFilter, C as getIndexAfterChipRemoval, D as ComboboxTrigger, E as useRequiredComboboxChipsContext, F as stringifyAsLabel, M as hasNullItemLabel, N as resolveMultipleLabels, O as AriaCombobox, P as resolveSelectedLabel, S as getChipNavigationKeys, T as ComboboxChipsContext, _ as ComboboxClear, a as ComboboxItem, b as handleInputPress, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, j as flattenItems, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, o as useComboboxItemContext, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, w as ComboboxChipRegistry, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-BmhL0nf1.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { a as stopButtonInteraction, 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 isSolidAccessor, o as findItemIndex } from "../mergeStyleValue-Db8bRCM4.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { a as findItemIndex, i as defaultItemEquality, r as compareItemEquality, t as isSolidAccessor } from "../isSolidAccessor-CZpzAH5l.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, flush, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/combobox/root/ComboboxRoot.tsx
-/**
-* Groups all parts of the combobox.
-* Doesn't render its own HTML element.
-*/
-function ComboboxRoot(props) {
-	const others = omit(props, "multiple", "value", "defaultValue", "onValueChange", "autoComplete");
+function ComboboxRoot(rawProps) {
+	const props = rawProps;
+	const others = omit(props, "multiple", "value", "defaultValue", "onValueChange", "autoComplete", "items");
+	const collection = createMemo(() => props.items && !Array.isArray(props.items) ? props.items : void 0);
 	return AriaCombobox(mergeProps({
 		get selectionMode() {
 			return props.multiple ? "multiple" : "single";
@@ -37,6 +36,14 @@ function ComboboxRoot(props) {
 		},
 		get formAutoComplete() {
 			return props.autoComplete;
+		},
+		get items() {
+			return memo(() => {
+				return !!collection();
+			})() ? collection().data : props.items;
+		},
+		get itemCollection() {
+			return collection();
 		}
 	}, others));
 }
@@ -58,7 +65,7 @@ function ComboboxLabel(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
-	const others = omit(allProps, "as", "class", "id", "onClick", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "onClick", "onPointerDown", "ref", "style");
 	function focusControl(event) {
 		const target = event.composedPath()[0];
 		if (target instanceof Element && target.closest("button,input,select,textarea,a[href]")) return;
@@ -68,8 +75,8 @@ function ComboboxLabel(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(id, (currentId) => {
 		context.store.setLabelId(currentId);
 		const unregister = labelable.registerLabelId(currentId);
@@ -78,10 +85,7 @@ function ComboboxLabel(props) {
 			if (untrack(() => context.store.labelId()) === currentId) context.store.setLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -108,8 +112,9 @@ function ComboboxValue(props) {
 		const child = props.children;
 		if (typeof child === "function") return isSolidAccessor(child) ? untrack(() => child()) : child(context.selectedValue());
 		if (child != null) return child;
-		if (!context.hasSelectedValue() && props.placeholder != null && !hasNullItemLabel(context.items())) return props.placeholder;
+		if (!context.hasSelectedValue() && props.placeholder != null && (context.hasItemCollection() || !hasNullItemLabel(context.items()))) return props.placeholder;
 		const current = context.selectedValue();
+		if (context.hasItemCollection() && current == null) return "";
 		if (context.multiple() && Array.isArray(current)) return resolveMultipleLabels(current, context.items(), context.itemToStringLabel());
 		return resolveSelectedLabel(current, context.items(), context.itemToStringLabel());
 	});
@@ -130,7 +135,7 @@ function ComboboxItemIndicator(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), transitionStatusMapping));
-	const others = omit(allProps, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "keepMounted", "ref", "style");
 	let element;
 	createEffect(() => ({
 		selected: item.selected(),
@@ -144,15 +149,13 @@ function ComboboxItemIndicator(props) {
 		}, controller.signal);
 		return () => controller.abort();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((value) => element = value), internalProps.ref],
 				"aria-hidden": "true",
 				get ["class"]() {
@@ -179,8 +182,8 @@ function ComboboxChips(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "onMouseDown", "ref", "style");
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => handleInputPress(event, context, context.disabled(), context.readOnly()));
+	const others = omit(allProps, "render", "class", "onMouseDown", "ref", "style");
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), (event) => handleInputPress(event, context, context.disabled()));
 	createEffect(() => context.store.open(), (open) => {
 		if (open) setHighlightedChipIndex(void 0);
 	});
@@ -188,6 +191,7 @@ function ComboboxChips(props) {
 	onCleanup(() => {
 		if (context.store.chipsContainerElement === container) context.store.chipsContainerElement = null;
 	});
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return ComboboxChipsContext({
 		value: {
 			highlightedChipIndex,
@@ -195,10 +199,7 @@ function ComboboxChips(props) {
 			chips
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					container = element;
 					context.store.chipsContainerElement = element;
@@ -244,7 +245,7 @@ function ComboboxChip(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "onContextMenu", "onKeyDown", "onMouseDown", "ref", "style");
 	function resolveNextIndex(event) {
 		const current = index();
 		const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction());
@@ -292,14 +293,14 @@ function ComboboxChip(props) {
 		if (nextIndex === void 0) context.focusInput();
 		else chips.chips.elements()[nextIndex]?.focus();
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown));
+	const onContextMenu = composeEventHandlers(liveEventHandler(() => internalProps.onContextMenu));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ComboboxChipContext({
 		value: { index },
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					chips.chips.touch();
@@ -317,7 +318,9 @@ function ComboboxChip(props) {
 				get style() {
 					return styleValue();
 				},
-				onKeyDown
+				onKeyDown,
+				onMouseDown,
+				onContextMenu
 			}, stateAttributes, others));
 		}
 	});
@@ -336,7 +339,7 @@ function ComboboxChipRemove(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", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
 	/**
 	* Drops the highlight when the removed item is the highlighted one. An item filtered out of
 	* the visible list cannot be the active index, so a miss needs no clearing.
@@ -371,21 +374,18 @@ function ComboboxChipRemove(props) {
 		event.preventDefault();
 		if (!details.isPropagationAllowed) event.stopPropagation();
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onKeyDown = composeEventHandlers(() => 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(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onKeyDown = composeEventHandlers(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(() => internalProps.onMouseDown), (event) => event.preventDefault());
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
 		},
 		tabindex: -1,
 		get ["aria-disabled"]() {
-			return !nativeButton() && disabled() ? "true" : void 0;
+			return disabled() || context.readOnly() ? "true" : void 0;
 		},
 		get ["class"]() {
 			return classValue();
@@ -445,6 +445,34 @@ function useFilter(options = {}) {
 	};
 }
 //#endregion
+//#region src/combobox/items/createItems.ts
+function createComboboxItems(data, options) {
+	let index;
+	function find(value, compare) {
+		if (!index) {
+			index = /* @__PURE__ */ new Map();
+			for (const item of flattenItems(data)) {
+				if (item == null) continue;
+				const key = options.getValue(item);
+				if (!index.has(key)) index.set(key, item);
+			}
+		}
+		const exact = index.get(value);
+		if (exact !== void 0 || compare === defaultItemEquality) return exact;
+		for (const [key, item] of index) if (compareItemEquality(key, value, compare)) return item;
+	}
+	return {
+		data,
+		value: (item) => item == null ? item : options.getValue(item),
+		itemLabel: options.getLabel,
+		hasValue: (value, compare) => find(value, compare) !== void 0,
+		label(value, compare, fallback) {
+			const item = find(value, compare);
+			return item === void 0 ? stringifyAsLabel(value, fallback) : options.getLabel(item);
+		}
+	};
+}
+//#endregion
 //#region src/combobox/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => ComboboxArrow,
@@ -473,8 +501,9 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Status: () => ComboboxStatus,
 	Trigger: () => ComboboxTrigger,
 	Value: () => ComboboxValue,
+	createItems: () => createComboboxItems,
 	useFilter: () => useFilter,
 	useFilteredItems: () => useFilteredItems
 });
 //#endregion
-export { index_parts_exports as Combobox };
+export { index_parts_exports as Combobox, createComboboxItems };

package/dist/lib/server/{compositeNavigation-BRVT1C38.js → compositeNavigation-D5jKM4yk.js}

@@ -1,4 +1,4 @@
-import { o as isElementVisible } from "./dom-Crg_2R-j.js";
+import { s as isElementVisible } from "./dom-D8_aB1yy.js";
 //#region src/internals/overlay/compositeNavigation.ts
 function isListIndexDisabled(list, index, disabledIndices) {
 	if (typeof disabledIndices === "function" ? disabledIndices(index) : disabledIndices?.includes(index) ?? false) return true;
@@ -39,6 +39,37 @@ function getNavigatedIndex(options) {
 	} else if (orientation !== "vertical" && (key === "ArrowRight" || key === "ArrowLeft")) direction = key === "ArrowRight" !== rtl ? 1 : -1;
 	if (!direction) return currentIndex;
 	if (currentIndex === -1) return direction === 1 ? min : max;
+	if (orientation === "both" && (key === "ArrowDown" || key === "ArrowUp")) {
+		const rows = [];
+		let previousRow = null;
+		let hasRows = false;
+		list.forEach((element, index) => {
+			if (!element) return;
+			const row = element.closest("[role=\"row\"]");
+			hasRows ||= row !== null;
+			if (row !== previousRow || rows.length === 0) rows.push([]);
+			rows[rows.length - 1].push(index);
+			previousRow = row;
+		});
+		const rowIndex = rows.findIndex((row) => row.includes(currentIndex));
+		if (hasRows && rowIndex !== -1) {
+			const column = rows[rowIndex].indexOf(currentIndex);
+			let nextRow = rowIndex;
+			for (let remaining = rows.length; remaining > 0; remaining--) {
+				nextRow += direction;
+				if (nextRow < 0 || nextRow >= rows.length) {
+					if (!loop || list.some((element) => !element)) return currentIndex;
+					nextRow = nextRow < 0 ? rows.length - 1 : 0;
+				}
+				const row = rows[nextRow];
+				for (let col = Math.min(column, row.length - 1); col >= 0; col--) {
+					const candidate = row[col];
+					if (!isListIndexDisabled(list, candidate, disabledIndices)) return candidate;
+				}
+			}
+			return currentIndex;
+		}
+	}
 	const next = findNonDisabledListIndex(list, {
 		startingIndex: currentIndex,
 		decrement: direction === -1,

package/dist/lib/server/{constants-9H__9xbS.js → constants-ByqXubhO.js}

@@ -1,5 +1,5 @@
-import { c as isHTMLElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget } from "./dom-Crg_2R-j.js";
-import { r as hasScrollableAncestor, t as findScrollableTouchTarget } from "./scrollable-CjsSxbGr.js";
+import { h as ownerWindow, i as getEventTarget, l as isHTMLElement, m as ownerDocument, n as contains } from "./dom-D8_aB1yy.js";
+import { r as hasScrollableAncestor, t as findScrollableTouchTarget } from "./scrollable-C9Pgq8T5.js";
 import { createSignal } from "solid-js";
 //#region src/internals/clamp.ts
 function clamp(value, min, max) {
@@ -279,9 +279,14 @@ function createSwipeDismiss(options) {
 		return isHTMLElement(target) ? target : null;
 	}
 	function findGestureScrollableTouchTarget(target, root) {
-		if (hasHorizontal() && !hasVertical()) return findScrollableTouchTarget(target, root, "horizontal");
-		if (hasVertical() && !hasHorizontal()) return findScrollableTouchTarget(target, root, "vertical");
-		return findScrollableTouchTarget(target, root, "vertical") ?? findScrollableTouchTarget(target, root, "horizontal");
+		const find = (axis) => {
+			const scrollTarget = findScrollableTouchTarget(target, root, axis);
+			const doc = ownerDocument(scrollTarget);
+			return scrollTarget === doc.body || scrollTarget === doc.documentElement ? null : scrollTarget;
+		};
+		if (hasHorizontal() && !hasVertical()) return find("horizontal");
+		if (hasVertical() && !hasHorizontal()) return find("vertical");
+		return find("vertical") ?? find("horizontal");
 	}
 	function startSwipeAtPosition(event, position, startOptions) {
 		swipeFromScrollable = false;

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

@@ -1,14 +1,15 @@
 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, t as cancelOpen } 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 { n as contains, r as getEventTarget } from "../dom-Crg_2R-j.js";
-import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { C as useMenuRootContext, E as useContextMenuRootContext, S as MenuRootContext, T as ContextMenuRootContext, a as MenuRadioGroup, b as mergeMenuStyles, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, v as MenuPortal, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-DA4gsv6z.js";
-import { t as Separator } from "../Separator-vhhYxWGr.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { i as getEventTarget, n as contains } from "../dom-D8_aB1yy.js";
+import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { C as useMenuRootContext, E as useContextMenuRootContext, S as MenuRootContext, T as ContextMenuRootContext, a as MenuRadioGroup, b as mergeMenuStyles, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, v as MenuPortal, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-BMQKlOvU.js";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, onCleanup } from "solid-js";
 //#region src/context-menu/root/ContextMenuRoot.tsx
 /** Groups all parts of a context menu without rendering an element. */
@@ -96,7 +97,7 @@ function ContextMenuTrigger(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeMenuStyles({ "-webkit-touch-callout": "none" }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "onContextMenu", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style");
+	const others = omit(allProps, "render", "class", "onContextMenu", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style");
 	let touchPosition = null;
 	let longPressTimer;
 	let allowMouseUpTimer;
@@ -175,11 +176,11 @@ function ContextMenuTrigger(props) {
 		const touch = event.touches[0];
 		if (Math.abs(touch.clientX - touchPosition.x) > 10 || Math.abs(touch.clientY - touchPosition.y) > 10) cancelLongPress();
 	}
-	const onContextMenu = composeEventHandlers(() => internalProps.onContextMenu, () => handleContextMenu);
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => handleTouchStart);
-	const onTouchMove = composeEventHandlers(() => internalProps.onTouchMove, () => handleTouchMove);
-	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => cancelLongPress);
-	const onTouchCancel = composeEventHandlers(() => internalProps.onTouchCancel, () => cancelLongPress);
+	const onContextMenu = composeEventHandlers(liveEventHandler(() => internalProps.onContextMenu), handleContextMenu);
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), handleTouchStart);
+	const onTouchMove = composeEventHandlers(liveEventHandler(() => internalProps.onTouchMove), handleTouchMove);
+	const onTouchEnd = composeEventHandlers(liveEventHandler(() => internalProps.onTouchEnd), cancelLongPress);
+	const onTouchCancel = composeEventHandlers(liveEventHandler(() => internalProps.onTouchCancel), cancelLongPress);
 	createEffect(() => ({
 		trigger: element(),
 		disabled: disabled(),
@@ -199,10 +200,7 @@ function ContextMenuTrigger(props) {
 		clearTimeout(allowMouseUpTimer);
 		mouseUpController?.abort();
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get ["class"]() {
 			return classValue();

package/dist/lib/server/{createAnchorPositioning-C-cVOPwz.js → createAnchorPositioning-DrQYe7RS.js}

@@ -1,4 +1,4 @@
-import { m as ownerWindow, p as ownerDocument } from "./dom-Crg_2R-j.js";
+import { h as ownerWindow, m as ownerDocument } from "./dom-D8_aB1yy.js";
 import { createEffect, createMemo, createSignal } from "solid-js";
 import { autoUpdate, computePosition, detectOverflow, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
 //#region src/internals/overlay/createFloatingPosition.ts
@@ -286,7 +286,7 @@ function createAnchorPositioning(options) {
 			}),
 			baseArrow(() => ({
 				element: currentArrowElement ?? ownerDocument(currentFloatingElement).createElement("div"),
-				padding: arrowPadding,
+				padding: currentArrowElement ? arrowPadding : 0,
 				offsetParent: "floating"
 			})),
 			{
@@ -294,18 +294,22 @@ function createAnchorPositioning(options) {
 				fn(state) {
 					const renderedSide = getSide(state.placement);
 					const arrow = currentArrowElement;
+					const renderedAlign = getAlignment(state.placement);
+					const vertical = renderedSide === "top" || renderedSide === "bottom";
 					const arrowX = state.middlewareData.arrow?.x ?? 0;
 					const arrowY = state.middlewareData.arrow?.y ?? 0;
 					const transformX = arrowX + (arrow?.clientWidth ?? 0) / 2;
 					const transformY = arrowY + (arrow?.clientHeight ?? 0) / 2;
+					let crossOrigin = `${vertical ? transformX : transformY}px`;
+					if (!arrow && renderedAlign && Math.abs(vertical ? state.middlewareData.shift?.x ?? 0 : state.middlewareData.shift?.y ?? 0) <= 1) crossOrigin = renderedAlign === "start" === (vertical && state.platform.isRTL?.(state.elements.floating) === true) ? "100%" : "0%";
 					const sideOffsetValue = typeof sideOffset === "function" ? sideOffset(offsetData(state, requestedSide(), rtl())) : sideOffset;
 					const adjacent = {
-						top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-						bottom: `${transformX}px ${-sideOffsetValue}px`,
-						left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-						right: `${-sideOffsetValue}px ${transformY}px`
+						top: `${crossOrigin} calc(100% + ${sideOffsetValue}px)`,
+						bottom: `${crossOrigin} ${-sideOffsetValue}px`,
+						left: `calc(100% + ${sideOffsetValue}px) ${crossOrigin}`,
+						right: `${-sideOffsetValue}px ${crossOrigin}`
 					}[renderedSide];
-					const overlap = `${transformX}px ${state.rects.reference.y + state.rects.reference.height / 2 - state.y}px`;
+					const overlap = `${crossOrigin} ${state.rects.reference.y + state.rects.reference.height / 2 - state.y}px`;
 					const overlaps = Math.abs(state.middlewareData.shift?.y ?? 0) > sideOffsetValue;
 					state.elements.floating.style.setProperty("--transform-origin", crossAxis && ["top", "bottom"].includes(renderedSide) && overlaps ? overlap : adjacent);
 					return {};
@@ -330,6 +334,7 @@ function createAnchorPositioning(options) {
 		middleware,
 		transform: () => !options.adaptiveOriginMiddleware?.(),
 		autoUpdate: () => ({
+			ancestorScroll: !(options.disableAnchorTracking?.() ?? false),
 			elementResize: !(options.disableAnchorTracking?.() ?? false) && typeof ResizeObserver !== "undefined",
 			layoutShift: !(options.disableAnchorTracking?.() ?? false) && typeof IntersectionObserver !== "undefined"
 		})

package/dist/lib/server/{createAnchoredPopupScrollLock-DFuUrykR.js → createAnchoredPopupScrollLock-q6gnOSmv.js}

@@ -1,5 +1,5 @@
-import { p as ownerDocument } from "./dom-Crg_2R-j.js";
-import { n as createScrollLock } from "./InternalBackdrop-C_iDPVR-.js";
+import { m as ownerDocument } from "./dom-D8_aB1yy.js";
+import { n as createScrollLock } from "./InternalBackdrop-D_2zAWnl.js";
 //#region src/internals/overlay/createAnchoredPopupScrollLock.ts
 function shouldLockAnchoredPopup(options) {
 	if (!options.enabled) return false;

package/dist/lib/server/{createClickInteraction-BYsMgvup.js → createClickInteraction-D7oc1Vco.js}

@@ -1,6 +1,6 @@
 import "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { f as isTypeableElement } from "./dom-Crg_2R-j.js";
+import { p as isTypeableElement } from "./dom-D8_aB1yy.js";
 import { onCleanup } from "solid-js";
 //#region src/internals/overlay/createClickInteraction.ts
 function clickLike(event) {