solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,423 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { N as triggerPress, j as triggerFocus, 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 { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
+import { n as createTriggerRegistration } from "../PopupStore-DEs3FAEe.js";
+import { r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
+import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-nKoUwoke.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.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 { C as useMenuRootContext, _ as menuViewportStateMapping, a as MenuRadioGroup, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, g as useMenuPositionerContext, 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, u as dispatchClickWithModifiers, v as MenuPortal, w as MenuStore, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-DA4gsv6z.js";
+import { n as useMenubarContext } from "../MenubarContext-C-62rMnO.js";
+import { t as Separator } from "../Separator-vhhYxWGr.js";
+import { Dynamic, memo, mergeProps } from "@solidjs/web";
+import { Show, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
+//#region src/menu/trigger/MenuTrigger.tsx
+/** A button that opens the menu. */
+function MenuTrigger(props) {
+	const root = useMenuRootContext(true);
+	const menubar = useMenubarContext(true);
+	const internalProps = props;
+	if (!root && !untrack(() => internalProps.handle)) throw new Error("Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.");
+	const allProps = props;
+	const generatedId = menubar ? untrack(() => menubar.createTriggerId()) : `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const openOnHover = createMemo(() => internalProps.openOnHover ?? Boolean(menubar?.hasSubmenuOpen()));
+	const delay = createMemo(() => internalProps.delay ?? 100);
+	const closeDelay = createMemo(() => internalProps.closeDelay ?? 0);
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const handleStore = createPopupHandleStore(() => internalProps.handle);
+	const store = createMemo(() => handleStore() ?? root?.store);
+	const liveStore = createMemo(() => {
+		const current = store();
+		return current instanceof MenuStore ? current : void 0;
+	});
+	const getLiveStore = () => {
+		const current = internalProps.handle?.store;
+		return current instanceof MenuStore ? current : liveStore();
+	};
+	const disabled = createMemo(() => Boolean(internalProps.disabled || liveStore()?.disabled() || menubar?.disabled()));
+	const open = createMemo(() => {
+		const current = store();
+		return Boolean(current?.open() && current.activeTriggerId() === id());
+	});
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		open: open()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onPointerDown", "openOnHover", "payload", "ref", "style");
+	let pointerType = "";
+	let releaseTimer;
+	let patientTimer;
+	let patientClick = false;
+	let mouseDownHandled = false;
+	let keyboardClickEvent;
+	let suppressNativeKeyboardClick = false;
+	let keyboardConsumerOnly = false;
+	let removeMouseUp;
+	const menubarItem = menubar ? {
+		token: Symbol("MenubarTrigger"),
+		order: 0,
+		element,
+		disabled
+	} : void 0;
+	if (menubarItem) {
+		const unregisterMenubarItem = menubar.registerTrigger(menubarItem);
+		createEffect(() => ({
+			disabled: disabled(),
+			element: element()
+		}), () => menubar.notifyItemChange());
+		onCleanup(unregisterMenubarItem);
+	}
+	createTriggerRegistration(store, id, element, () => ({
+		payload: internalProps.payload,
+		closeDelay: closeDelay()
+	}));
+	createEffect(() => ({
+		store: liveStore(),
+		id: id(),
+		menubar
+	}), (current) => {
+		if (!current.store) return;
+		const unregister = untrack(() => current.store.registerMenubarTrigger(current.id, current.menubar));
+		untrack(() => current.store.forwardMenubarTrigger(current.id, current.menubar));
+		return unregister;
+	});
+	createEffect(() => ({
+		open: open(),
+		reason: liveStore()?.openChangeReason()
+	}), (current) => {
+		clearTimeout(patientTimer);
+		patientClick = current.open && current.reason === "trigger-hover";
+		if (patientClick) patientTimer = setTimeout(() => {
+			patientClick = false;
+		}, 500);
+	});
+	function installReleaseListener(current, trigger) {
+		clearTimeout(releaseTimer);
+		current.allowMouseUpTrigger = false;
+		releaseTimer = setTimeout(() => {
+			current.allowMouseUpTrigger = true;
+		}, 200);
+		removeMouseUp?.();
+		const documentNode = trigger.ownerDocument;
+		const onMouseUp = (event) => {
+			clearTimeout(releaseTimer);
+			current.allowMouseUpTrigger = false;
+			const target = event.target;
+			const positioner = current.track().positionerElement;
+			if (trigger.contains(target) || positioner?.contains(target) || target?.closest(`[data-rootownerid="${current.rootNodeId()}"]`)) return;
+			const rect = trigger.getBoundingClientRect();
+			if (!(event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom)) current.closeTree(event, cancelOpen);
+		};
+		documentNode.addEventListener("mouseup", onMouseUp, { once: true });
+		removeMouseUp = () => documentNode.removeEventListener("mouseup", onMouseUp);
+	}
+	function prepareTrigger(current, trigger) {
+		current.context.triggerElements.add(id(), trigger);
+		current.forwardTriggerData(id(), trigger, {
+			payload: internalProps.payload,
+			closeDelay: closeDelay()
+		});
+		current.forwardMenubarTrigger(id(), menubar);
+		current.activateMenubarTrigger(id());
+	}
+	function handleMouseDown(event) {
+		const current = getLiveStore();
+		const trigger = element();
+		if (!current || !trigger || event.button !== 0) return;
+		mouseDownHandled = true;
+		const wasOpen = open();
+		prepareTrigger(current, trigger);
+		if (menubar && wasOpen) {
+			mouseDownHandled = false;
+			return;
+		}
+		if (!wasOpen) installReleaseListener(current, trigger);
+		current.setOpenMethod(pointerType || "mouse");
+		if (wasOpen && patientClick) {
+			current.setOpen(true, createChangeEventDetails(triggerPress, event, trigger));
+			return;
+		}
+		current.setOpen(!wasOpen, createChangeEventDetails(triggerPress, event, trigger));
+	}
+	function handleClick(event) {
+		if (suppressNativeKeyboardClick && event !== keyboardClickEvent && event.detail === 0) {
+			suppressNativeKeyboardClick = false;
+			return;
+		}
+		if (keyboardConsumerOnly) return;
+		if (event.detail !== 0 && mouseDownHandled) {
+			mouseDownHandled = false;
+			return;
+		}
+		mouseDownHandled = false;
+		const current = getLiveStore();
+		const trigger = element();
+		if (!current || !trigger) return;
+		prepareTrigger(current, trigger);
+		current.setOpenMethod("keyboard");
+		current.setPendingFocus("first");
+		current.setOpen(!open(), createChangeEventDetails(triggerPress, event, trigger));
+	}
+	function handleKeyboardPress(event) {
+		if (!nativeButton() || event.key !== "Enter" || event.target !== event.currentTarget) return;
+		event.preventDefault();
+		event.preventBaseUIHandler();
+		suppressNativeKeyboardClick = true;
+		keyboardConsumerOnly = true;
+		dispatchClickWithModifiers(event.currentTarget, event, 0, (clickEvent) => {
+			keyboardClickEvent = clickEvent;
+		});
+		keyboardConsumerOnly = false;
+		if (!keyboardClickEvent.baseUIHandlerPrevented) handleClick(keyboardClickEvent);
+		setTimeout(() => {
+			suppressNativeKeyboardClick = false;
+			keyboardClickEvent = void 0;
+		});
+	}
+	function handleDismissKeyDown(event) {
+		const current = getLiveStore();
+		if (!current) return;
+		const handler = current.state[current.activeTriggerId() === id() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown;
+		if (typeof handler === "function") handler(event);
+	}
+	function handleRootKeyDown(event) {
+		getLiveStore()?.handleTriggerKeyDown(event, event.currentTarget);
+		if (event.defaultPrevented && event.key.startsWith("Arrow")) event.preventBaseUIHandler();
+	}
+	function handleFocus(event) {
+		if (menubarItem) menubar.setActiveTrigger(menubarItem);
+		const current = getLiveStore();
+		const trigger = element();
+		if (!menubar || !current || !trigger || disabled() || open() || !menubar.hasSubmenuOpen()) return;
+		prepareTrigger(current, trigger);
+		current.setOpenMethod("keyboard");
+		current.setPendingFocus("first");
+		current.setOpen(true, createChangeEventDetails(triggerFocus, event, trigger));
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onBlur = composeEventHandlers(() => internalProps.onBlur);
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
+	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => () => liveStore()?.setAllowMouseEnter(true));
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => (event) => {
+		pointerType = event.pointerType || "";
+	});
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleDismissKeyDown, () => handleRootKeyDown, () => handleKeyboardPress, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	function TriggerInteractions(props) {
+		const interactionStore = untrack(() => props.store);
+		createHoverInteraction({
+			context: interactionStore.context.floatingRoot,
+			reference: element,
+			floating: () => interactionStore.track().positionerElement,
+			tree: () => interactionStore.tree(),
+			enabled: () => !disabled() && openOnHover() && interactionStore.hoverEnabled(),
+			floatingEnabled: () => !menubar && !disabled() && openOnHover() && interactionStore.hoverEnabled(),
+			delay: () => ({ close: closeDelay() }),
+			restMs: () => menubar ? 0 : delay(),
+			restOnly: () => !menubar,
+			handleClose: () => safePolygon({ blockPointerEvents: !menubar }),
+			mouseOnly: () => true,
+			shouldOpen: () => !menubar || menubar.hasSubmenuOpen() && !open()
+		});
+		return null;
+	}
+	const trigger = Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return menubar ? "menuitem" : nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return menubarItem ? menubar.isTabStop(menubarItem) ? 0 : -1 : !nativeButton() && disabled() ? -1 : 0;
+		},
+		get disabled() {
+			return (memo(() => {
+				return !!nativeButton();
+			})() ? disabled() : nativeButton()) || void 0;
+		},
+		get ["aria-disabled"]() {
+			return !nativeButton() && disabled() ? "true" : void 0;
+		},
+		"aria-haspopup": "menu",
+		get ["aria-expanded"]() {
+			return open() ? "true" : "false";
+		},
+		get ["aria-controls"]() {
+			return store()?.triggerPopupId(id());
+		},
+		"data-base-ui-click-trigger": "",
+		get ["data-trigger-disabled"]() {
+			return disabled() ? "" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onBlur,
+		onFocus,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onMouseMove,
+		onPointerDown
+	}, stateAttributes, others));
+	onCleanup(() => {
+		clearTimeout(releaseTimer);
+		clearTimeout(patientTimer);
+		removeMouseUp?.();
+	});
+	if (menubar) return [Show({
+		keyed: true,
+		get when() {
+			return liveStore();
+		},
+		children: (current) => TriggerInteractions({ store: current })
+	}), trigger];
+	return [Show({
+		keyed: true,
+		get when() {
+			return liveStore();
+		},
+		children: (current) => TriggerInteractions({ store: current })
+	}), Show({
+		keyed: true,
+		get when() {
+			return liveStore();
+		},
+		fallback: trigger,
+		children: (current) => TriggerFocusGuards({
+			get context() {
+				return current.context.floatingRoot;
+			},
+			get enabled() {
+				return current.isMountedByTrigger(id());
+			},
+			trigger: element,
+			positioner: () => current.track().positionerElement,
+			beforeContentGuard: () => current.beforeContentGuard(),
+			afterGuardRef: (value) => current.setAfterTriggerGuard(value),
+			children: trigger
+		})
+	})];
+}
+//#endregion
+//#region src/menu/viewport/MenuViewport.tsx
+/** Displays content transitions when the active menu trigger changes. */
+function MenuViewport(props) {
+	const context = useMenuRootContext();
+	const positioner = useMenuPositionerContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [viewportState, setViewportState] = createSignal({
+		activationDirection: void 0,
+		transitioning: false
+	}, { ownedWrite: true });
+	const state = createMemo(() => ({
+		...viewportState(),
+		instant: context.store.instantType()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuViewportStateMapping));
+	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return PopupViewport({
+			get store() {
+				return context.store;
+			},
+			get side() {
+				return positioner.renderedSide();
+			},
+			get direction() {
+				return direction();
+			},
+			onStateChange: setViewportState,
+			get children() {
+				return props.children;
+			}
+		});
+	} }));
+}
+//#endregion
+//#region src/menu/store/MenuHandle.ts
+/** Imperatively controls a Menu and connects detached triggers to its Root. */
+var MenuHandle = class extends BasePopupHandle {
+	constructor() {
+		super("Menu", true, new DetachedPopupStore());
+	}
+	open(triggerId) {
+		this.openByTrigger(triggerId);
+	}
+	close() {
+		this.closePopup();
+	}
+	get isOpen() {
+		return this.attachedStore?.open() ?? false;
+	}
+};
+function createMenuHandle() {
+	return new MenuHandle();
+}
+//#endregion
+//#region src/menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => MenuArrow,
+	Backdrop: () => MenuBackdrop,
+	CheckboxItem: () => MenuCheckboxItem,
+	CheckboxItemIndicator: () => MenuCheckboxItemIndicator,
+	Group: () => MenuGroup,
+	GroupLabel: () => MenuGroupLabel,
+	Handle: () => MenuHandle,
+	Item: () => MenuItem,
+	LinkItem: () => MenuLinkItem,
+	Popup: () => MenuPopup,
+	Portal: () => MenuPortal,
+	Positioner: () => MenuPositioner,
+	RadioGroup: () => MenuRadioGroup,
+	RadioItem: () => MenuRadioItem,
+	RadioItemIndicator: () => MenuRadioItemIndicator,
+	Root: () => MenuRoot,
+	Separator: () => Separator,
+	SubmenuRoot: () => MenuSubmenuRoot,
+	SubmenuTrigger: () => MenuSubmenuTrigger,
+	Trigger: () => MenuTrigger,
+	Viewport: () => MenuViewport,
+	createHandle: () => createMenuHandle
+});
+//#endregion
+export { index_parts_exports as Menu };

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

@@ -0,0 +1,242 @@
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { r as getNavigatedIndex } from "../compositeNavigation-BRVT1C38.js";
+import { i as createFloatingNode, r as FloatingTreeStore } from "../FloatingTree-z1JPD1dR.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { t as MenubarContext } from "../MenubarContext-C-62rMnO.js";
+import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
+import { Dynamic, mergeProps, ssrElement } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
+//#region src/menubar/Menubar.tsx
+var menubarStateMapping = { hasSubmenuOpen: (value) => value ? { "data-has-submenu-open": "" } : null };
+/** A menu bar providing commands and options for an application. */
+function Menubar(props) {
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const modal = createMemo(() => internalProps.modal ?? true);
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const [rootElement, setRootElement] = createSignal(null, { ownedWrite: true });
+	const [hasSubmenuOpen, setHasSubmenuOpen] = createSignal(false, { ownedWrite: true });
+	const [activeToken, setActiveToken] = createSignal();
+	const [itemVersion, setItemVersion] = createSignal(0);
+	const tree = new FloatingTreeStore();
+	const nodeId = createUniqueId();
+	createFloatingNode({
+		tree,
+		id: nodeId
+	});
+	const items = /* @__PURE__ */ new Map();
+	const allowMouseUpTrigger = { value: false };
+	let nextOrder = 0;
+	let nextTriggerId = 0;
+	let hydrationTriggerCount = 0;
+	let hydrationCountClearQueued = false;
+	let itemChangeQueued = false;
+	const state = createMemo(() => ({
+		orientation: orientation(),
+		modal: modal(),
+		hasSubmenuOpen: hasSubmenuOpen()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menubarStateMapping));
+	const others = omit(allProps, "as", "class", "disabled", "id", "loopFocus", "modal", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	function notifyItemChange() {
+		if (itemChangeQueued) return;
+		itemChangeQueued = true;
+		queueMicrotask(() => {
+			itemChangeQueued = false;
+			setItemVersion((version) => version + 1);
+		});
+	}
+	function registerTrigger(item) {
+		item.order = nextOrder;
+		nextOrder += 1;
+		items.set(item.token, item);
+		notifyItemChange();
+		return () => {
+			items.delete(item.token);
+			notifyItemChange();
+		};
+	}
+	function getOrderedItems() {
+		return Array.from(items.values()).sort(compareRegistrations);
+	}
+	function getNavigableItems() {
+		return getOrderedItems().filter(isItemNavigable);
+	}
+	function isTabStop(item) {
+		itemVersion();
+		const ordered = getOrderedItems();
+		const noElements = ordered.every((current) => !current.element());
+		const navigable = noElements ? ordered.filter((current) => !current.disabled()) : getNavigableItems();
+		const active = navigable.find((current) => current.token === activeToken());
+		return (noElements || isItemNavigable(item)) && (active ?? navigable[0])?.token === item.token;
+	}
+	function setActiveTrigger(item) {
+		if (isItemNavigable(item)) setActiveToken(item.token);
+	}
+	function findEventItem(event) {
+		const path = event.composedPath();
+		const target = path[0];
+		return getOrderedItems().find((item) => {
+			const element = item.element();
+			return element && (path.includes(element) || target instanceof Node && element.contains(target));
+		});
+	}
+	function relayKeyboardEvent(event) {
+		if (event.defaultPrevented || event.cancelBubble || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
+		const navigable = getNavigableItems();
+		if (navigable.length === 0) return;
+		const currentToken = findEventItem(event)?.token ?? activeToken();
+		const currentIndex = navigable.findIndex((item) => item.token === currentToken);
+		const nextIndex = getNavigatedIndex({
+			list: navigable.map((item) => item.element()),
+			currentIndex,
+			key: event.key,
+			orientation: orientation(),
+			rtl: direction() === "rtl",
+			loop: internalProps.loopFocus ?? true
+		});
+		if (nextIndex === currentIndex || nextIndex < 0) return;
+		const next = navigable[nextIndex];
+		if (!next) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setActiveTrigger(next);
+		next.element()?.focus({ preventScroll: true });
+	}
+	const onFocusIn = composeEventHandlers(() => internalProps.onFocusIn, () => (event) => {
+		const item = findEventItem(event);
+		if (item) setActiveTrigger(item);
+	});
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => relayKeyboardEvent);
+	const context = {
+		modal,
+		disabled,
+		orientation,
+		hasSubmenuOpen,
+		rootElement,
+		rootId: id,
+		tree,
+		nodeId,
+		allowMouseUpTrigger,
+		createTriggerId() {
+			nextTriggerId += 1;
+			if (nextTriggerId === 1 && typeof document !== "undefined") {
+				hydrationTriggerCount = (rootElement() ?? document.getElementById(id()))?.querySelectorAll("[role=\"menuitem\"][aria-haspopup=\"menu\"]").length ?? 0;
+				if (hydrationTriggerCount > 0 && !hydrationCountClearQueued) {
+					hydrationCountClearQueued = true;
+					queueMicrotask(() => {
+						hydrationTriggerCount = 0;
+					});
+				}
+			}
+			const index = hydrationTriggerCount > 0 ? (nextTriggerId - 1) % hydrationTriggerCount + 1 : nextTriggerId;
+			return `${id()}-trigger-${index}`;
+		},
+		isTabStop,
+		notifyItemChange,
+		registerTrigger,
+		setActiveTrigger,
+		relayKeyboardEvent
+	};
+	createEffect(rootElement, (element) => {
+		const Observer = element?.ownerDocument.defaultView?.MutationObserver;
+		if (!element || !Observer) return;
+		const observer = new Observer(notifyItemChange);
+		observer.observe(element, {
+			attributes: true,
+			childList: true,
+			subtree: true,
+			attributeFilter: [
+				"class",
+				"disabled",
+				"hidden",
+				"style"
+			]
+		});
+		return () => observer.disconnect();
+	});
+	const unsubscribe = tree.events.on("menuopenchange", (details) => {
+		if (!details.nodeId || details.parentNodeId !== nodeId) return;
+		if (details.open) setHasSubmenuOpen(true);
+		else if (details.reason !== "sibling-open" && details.reason !== "list-navigation") setHasSubmenuOpen(false);
+	});
+	onCleanup(unsubscribe);
+	const component = untrack(() => props.as);
+	if (!component) return MenubarContext({
+		value: context,
+		get children() {
+			return ssrElement("div", () => {
+				return mergeProps({
+					get id() {
+						return id();
+					},
+					role: "menubar",
+					get ["aria-orientation"]() {
+						return orientation();
+					},
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					}
+				}, stateAttributes, others);
+			}, void 0, true);
+		}
+	});
+	return MenubarContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return withoutComponentBinding(component);
+				},
+				ref: [((element) => setRootElement(element)), internalProps.ref],
+				get id() {
+					return id();
+				},
+				role: "menubar",
+				get ["aria-orientation"]() {
+					return orientation();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				onFocusIn,
+				onKeyDown
+			}, stateAttributes, others));
+		}
+	});
+}
+function compareRegistrations(first, second) {
+	const firstElement = first.element();
+	const secondElement = second.element();
+	if (firstElement && secondElement && firstElement !== secondElement) {
+		const position = firstElement.compareDocumentPosition(secondElement);
+		if ((position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0) {
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+		}
+	}
+	return first.order - second.order;
+}
+function isItemNavigable(item) {
+	const element = item.element();
+	if (!element?.isConnected || item.disabled() || element.matches(":disabled")) return false;
+	const styles = element.ownerDocument.defaultView?.getComputedStyle(element);
+	if (!styles || styles.display === "none" || styles.display === "contents" || styles.visibility === "hidden" || styles.visibility === "collapse") return false;
+	return typeof element.checkVisibility !== "function" || element.checkVisibility();
+}
+//#endregion
+export { Menubar };