solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,685 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { n as useToolbarRootContext, t as ToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
+import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
+import { n as useToolbarGroupContext, t as ToolbarGroupContext } from "../ToolbarGroupContext-CzdHxijX.js";
+import { t as ToolbarItemOwnerContext } from "../ToolbarItemOwnerContext-L5dsZ_vS.js";
+import { Dynamic, delegateEvents, dynamic, memo, mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, omit, onCleanup, onSettled, untrack } from "solid-js";
+//#region src/toolbar/root/ToolbarRoot.tsx
+/** A container for grouping a set of controls into one keyboard navigation scope. */
+function ToolbarRoot(props) {
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [rootElement, setRootElement] = createSignal();
+	const [activeToken, setActiveToken] = createSignal();
+	const [itemVersion, setItemVersion] = createSignal(0);
+	const items = /* @__PURE__ */ new Map();
+	let nextOrder = 0;
+	let itemChangeQueued = false;
+	const others = omit(allProps, "as", "class", "disabled", "loopFocus", "onFocus", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		orientation: orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	function notifyItemChange() {
+		if (itemChangeQueued) return;
+		itemChangeQueued = true;
+		queueMicrotask(() => {
+			itemChangeQueued = false;
+			setItemVersion((version) => version + 1);
+		});
+	}
+	function registerItem(item) {
+		item.order = nextOrder;
+		nextOrder += 1;
+		items.set(item.token, item);
+		notifyItemChange();
+		return () => {
+			items.delete(item.token);
+			notifyItemChange();
+		};
+	}
+	function getOrderedItems() {
+		const ordered = Array.from(items.values()).sort(compareRegistrations);
+		const seenElements = /* @__PURE__ */ new Set();
+		return ordered.filter((item) => {
+			const element = item.element();
+			if (!element || seenElements.has(element)) return false;
+			seenElements.add(element);
+			return true;
+		});
+	}
+	function getNavigableItems() {
+		return getOrderedItems().filter(isItemNavigable);
+	}
+	function isTabStop(item) {
+		itemVersion();
+		const navigableItems = getNavigableItems();
+		const activeItem = navigableItems.find((current) => current.token === activeToken());
+		return isItemNavigable(item) && (activeItem ?? navigableItems[0])?.token === item.token;
+	}
+	function setActiveItem(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 handleFocus(event) {
+		const item = findEventItem(event);
+		if (item) setActiveItem(item);
+		const target = event.composedPath()[0];
+		if (isNativeTextInput(target)) queueMicrotask(() => target.setSelectionRange(0, target.value.length));
+	}
+	function handleKeyDown(event) {
+		if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
+		const horizontalForward = direction() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const horizontalBackward = direction() === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const forward = orientation() === "vertical" ? "ArrowDown" : horizontalForward;
+		const backward = orientation() === "vertical" ? "ArrowUp" : horizontalBackward;
+		if (event.key !== forward && event.key !== backward) return;
+		const target = event.composedPath()[0];
+		if (isNativeTextInput(target) && !isElementDisabled(target)) {
+			const selectionStart = target.selectionStart;
+			const selectionEnd = target.selectionEnd;
+			if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd || event.key !== backward && selectionStart < target.value.length || event.key !== forward && selectionStart > 0) return;
+		}
+		itemVersion();
+		const navigableItems = getNavigableItems();
+		if (navigableItems.length === 0) return;
+		const eventItem = findEventItem(event);
+		const currentIndex = navigableItems.findIndex((item) => item.token === (eventItem?.token ?? activeToken()));
+		const delta = event.key === forward ? 1 : -1;
+		let nextIndex = currentIndex === -1 ? delta > 0 ? 0 : navigableItems.length - 1 : currentIndex + delta;
+		if (nextIndex < 0 || nextIndex >= navigableItems.length) {
+			if (!(internalProps.loopFocus ?? true)) return;
+			nextIndex = (nextIndex + navigableItems.length) % navigableItems.length;
+		}
+		const nextItem = navigableItems[nextIndex];
+		if (!nextItem || nextItem.token === eventItem?.token) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setActiveItem(nextItem);
+		scrollItemIntoView(rootElement(), nextItem.element(), direction(), orientation());
+		queueMicrotask(() => nextItem.element()?.focus());
+	}
+	const onFocusIn = composeEventHandlers(() => internalProps.onFocusIn, () => handleFocus);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	function onRootKeyDown(event) {
+		Reflect.deleteProperty(event, "baseUIHandlerPrevented");
+		Reflect.apply(onKeyDown, event.currentTarget, [event]);
+	}
+	const context = {
+		disabled,
+		orientation,
+		isTabStop,
+		notifyItemChange,
+		registerItem,
+		setActiveItem
+	};
+	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();
+	});
+	return ToolbarRootContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return withoutComponentBinding(props.as ?? "div");
+				},
+				ref: [((element) => setRootElement(element)), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "toolbar",
+				get ["aria-orientation"]() {
+					return orientation();
+				},
+				get onFocus() {
+					return internalProps.onFocus;
+				},
+				onFocusIn,
+				onKeyDown: onRootKeyDown
+			}, 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() && !item.focusableWhenDisabled()) return false;
+	if (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();
+}
+function isNativeTextInput(target) {
+	if (!target || typeof target !== "object" || !("tagName" in target)) return false;
+	const input = target;
+	return input.tagName === "TEXTAREA" || input.tagName === "INPUT" && input.selectionStart != null;
+}
+function isElementDisabled(element) {
+	return element.matches(":disabled") || element.getAttribute("aria-disabled") === "true";
+}
+function scrollItemIntoView(root, item, direction, orientation) {
+	if (!root || !item || typeof root.scrollTo !== "function") return;
+	let left = root.scrollLeft;
+	let top = root.scrollTop;
+	const rootStyles = getScrollStyles(root);
+	const itemStyles = getScrollStyles(item);
+	if (orientation === "horizontal" && root.clientWidth < root.scrollWidth) {
+		const itemOffset = getOffset(root, item, "left");
+		if (itemOffset - itemStyles.scrollMarginLeft < root.scrollLeft + rootStyles.scrollPaddingLeft) left = itemOffset - itemStyles.scrollMarginLeft - rootStyles.scrollPaddingLeft;
+		else if (itemOffset + item.offsetWidth + itemStyles.scrollMarginRight > root.scrollLeft + root.clientWidth - rootStyles.scrollPaddingRight) left = itemOffset + item.offsetWidth + itemStyles.scrollMarginRight - root.clientWidth + rootStyles.scrollPaddingRight;
+	}
+	if (orientation === "vertical" && root.scrollHeight > root.clientHeight) {
+		const itemOffset = getOffset(root, item, "top");
+		if (itemOffset - itemStyles.scrollMarginTop < root.scrollTop + rootStyles.scrollPaddingTop) top = itemOffset - itemStyles.scrollMarginTop - rootStyles.scrollPaddingTop;
+		else if (itemOffset + item.offsetHeight + itemStyles.scrollMarginBottom > root.scrollTop + root.clientHeight - rootStyles.scrollPaddingBottom) top = itemOffset + item.offsetHeight + itemStyles.scrollMarginBottom - root.clientHeight + rootStyles.scrollPaddingBottom;
+	}
+	root.scrollTo({
+		behavior: "auto",
+		left,
+		top
+	});
+}
+function getOffset(ancestor, initialElement, side) {
+	const property = side === "left" ? "offsetLeft" : "offsetTop";
+	let element = initialElement;
+	let result = 0;
+	while (element.offsetParent) {
+		result += element[property];
+		if (element.offsetParent === ancestor) break;
+		element = element.offsetParent;
+	}
+	return result;
+}
+function getScrollStyles(element) {
+	const styles = element.ownerDocument.defaultView?.getComputedStyle(element);
+	return {
+		scrollMarginTop: Number.parseFloat(styles?.scrollMarginTop ?? "") || 0,
+		scrollMarginRight: Number.parseFloat(styles?.scrollMarginRight ?? "") || 0,
+		scrollMarginBottom: Number.parseFloat(styles?.scrollMarginBottom ?? "") || 0,
+		scrollMarginLeft: Number.parseFloat(styles?.scrollMarginLeft ?? "") || 0,
+		scrollPaddingTop: Number.parseFloat(styles?.scrollPaddingTop ?? "") || 0,
+		scrollPaddingRight: Number.parseFloat(styles?.scrollPaddingRight ?? "") || 0,
+		scrollPaddingBottom: Number.parseFloat(styles?.scrollPaddingBottom ?? "") || 0,
+		scrollPaddingLeft: Number.parseFloat(styles?.scrollPaddingLeft ?? "") || 0
+	};
+}
+//#endregion
+//#region src/toolbar/group/ToolbarGroup.tsx
+/** Groups related controls without creating a nested keyboard navigation scope. */
+function ToolbarGroup(props) {
+	const root = useToolbarRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "disabled", "ref", "style");
+	const disabled = createMemo(() => root.disabled() || (internalProps.disabled ?? false));
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		orientation: root.orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	return ToolbarGroupContext({
+		value: { disabled },
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return withoutComponentBinding(props.as ?? "div");
+				},
+				ref: [internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "group"
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/internals/installOwnedEventHandlers.ts
+function installOwnedEventHandlers(element, handlers) {
+	const handledEvents = /* @__PURE__ */ new WeakSet();
+	const blockedEvents = /* @__PURE__ */ new WeakSet();
+	const nativeHandlers = [];
+	const restoreDelegatedHandlers = [];
+	let active = true;
+	for (const [name, handler] of handlers) {
+		const nativeHandler = (event) => {
+			handledEvents.add(event);
+			Reflect.apply(handler, element, [event]);
+			if (event.baseUIHandlerPrevented) blockedEvents.add(event);
+		};
+		element.addEventListener(name, nativeHandler);
+		nativeHandlers.push([name, nativeHandler]);
+	}
+	queueMicrotask(() => {
+		if (!active) return;
+		for (const [name, handler] of handlers) {
+			const handlerKey = `$$${name}`;
+			const dataKey = `${handlerKey}Data`;
+			const delegatedElement = element;
+			let childHandler = delegatedElement[handlerKey];
+			let childData = delegatedElement[dataKey];
+			const bridgedHandler = (event) => {
+				if (!handledEvents.has(event)) {
+					handledEvents.add(event);
+					Reflect.apply(handler, element, [event]);
+					if (event.baseUIHandlerPrevented) blockedEvents.add(event);
+				}
+				if (blockedEvents.has(event) || typeof childHandler !== "function") return;
+				if (childData === void 0) Reflect.apply(childHandler, element, [event]);
+				else Reflect.apply(childHandler, element, [childData, event]);
+			};
+			Object.defineProperty(delegatedElement, handlerKey, {
+				configurable: true,
+				enumerable: true,
+				get: () => bridgedHandler,
+				set: (value) => {
+					childHandler = value;
+				}
+			});
+			Object.defineProperty(delegatedElement, dataKey, {
+				configurable: true,
+				enumerable: true,
+				get: () => void 0,
+				set: (value) => {
+					childData = value;
+				}
+			});
+			restoreDelegatedHandlers.push(() => {
+				Reflect.deleteProperty(delegatedElement, handlerKey);
+				Reflect.deleteProperty(delegatedElement, dataKey);
+				delegatedElement[handlerKey] = childHandler;
+				delegatedElement[dataKey] = childData;
+			});
+		}
+		delegateEvents(handlers.map(([name]) => name));
+	});
+	return () => {
+		active = false;
+		for (const [name, handler] of nativeHandlers) element.removeEventListener(name, handler);
+		for (const restore of restoreDelegatedHandlers) restore();
+	};
+}
+//#endregion
+//#region src/toolbar/createToolbarItem.ts
+function createToolbarItem(metadata) {
+	const root = useToolbarRootContext();
+	const [element, setElement] = createSignal();
+	const registration = {
+		token: Symbol("ToolbarItem"),
+		order: 0,
+		element,
+		disabled: metadata.disabled,
+		focusableWhenDisabled: metadata.focusableWhenDisabled
+	};
+	const unregister = root.registerItem(registration);
+	createEffect(() => ({
+		disabled: metadata.disabled(),
+		element: element(),
+		focusableWhenDisabled: metadata.focusableWhenDisabled()
+	}), () => root.notifyItemChange());
+	onCleanup(unregister);
+	return {
+		element,
+		registration,
+		root,
+		setElement,
+		tabIndex: () => root.isTabStop(registration) ? 0 : -1
+	};
+}
+//#endregion
+//#region src/toolbar/button/ToolbarButton.tsx
+/** A toolbar item with native or accessible non-native button semantics. */
+function ToolbarButton(props) {
+	const root = useToolbarRootContext();
+	const group = useToolbarGroupContext();
+	const Component = dynamic(() => withoutComponentBinding(props.as ?? "button"));
+	const internalProps = props;
+	const allProps = props;
+	const [childDisabled, setChildDisabled] = createSignal(false);
+	const ownDisabled = createMemo(() => root.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
+	const disabled = createMemo(() => ownDisabled() || childDisabled());
+	const focusableWhenDisabled = createMemo(() => childDisabled() && !ownDisabled() ? false : internalProps.focusableWhenDisabled ?? true);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const item = createToolbarItem({
+		disabled,
+		focusableWhenDisabled
+	});
+	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		focusable: focusableWhenDisabled(),
+		orientation: root.orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	let removeOwnedListeners;
+	const disabledAttribute = createMemo(() => nativeButton() && disabled() && !focusableWhenDisabled());
+	const ariaDisabled = createMemo(() => {
+		if (nativeButton() && focusableWhenDisabled()) return disabled() ? "true" : "false";
+		return !nativeButton() && disabled() ? "true" : void 0;
+	});
+	function handleFocus() {
+		item.root.setActiveItem(item.registration);
+	}
+	function handleKeyDown(event) {
+		if (event.target !== event.currentTarget) return;
+		const isSpace = event.key === " ";
+		const isEnter = event.key === "Enter";
+		const isButton = event.currentTarget.tagName === "BUTTON";
+		const isLink = event.currentTarget.tagName === "A" && Boolean(event.currentTarget.href);
+		const role = event.currentTarget.getAttribute("role");
+		const textNavigationRole = role?.startsWith("menuitem") || role === "option" || role === "gridcell";
+		if (isSpace) {
+			if (event.defaultPrevented && textNavigationRole) return;
+			event.preventDefault();
+			if (!nativeButton() || isButton || typeof props.as === "function") {
+				event.preventBaseUIHandler();
+				dispatchClickWithModifiers(event.currentTarget, event);
+			}
+			return;
+		}
+		if (!nativeButton() && !isLink && isEnter && !event.defaultPrevented) {
+			event.preventDefault();
+			event.preventBaseUIHandler();
+			dispatchClickWithModifiers(event.currentTarget, event);
+		}
+	}
+	function handleKeyUp(event) {
+		if (event.target === event.currentTarget && event.key === " " && (!nativeButton() || event.currentTarget.tagName === "BUTTON" || typeof props.as === "function")) {
+			event.preventDefault();
+			event.preventBaseUIHandler();
+		}
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledKeyDefault : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onKeyDown), () => untrack(() => disabled() ? void 0 : handleKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onKeyUp), () => untrack(() => disabled() ? void 0 : handleKeyUp));
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onMouseDown));
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	onSettled(() => {
+		item.element();
+	});
+	function setElement(element) {
+		removeOwnedListeners?.();
+		item.setElement(element);
+		removeOwnedListeners = installOwnedEventHandlers(element, [
+			["click", onClick],
+			["focus", onFocus],
+			["keydown", onKeyDown],
+			["keyup", onKeyUp],
+			["mousedown", onMouseDown],
+			["pointerdown", onPointerDown]
+		]);
+		setRef(internalProps.ref, element);
+	}
+	createEffect(() => ({
+		disabled: disabled(),
+		element: item.element(),
+		focusableWhenDisabled: focusableWhenDisabled()
+	}), (current) => {
+		if (current.disabled && current.focusableWhenDisabled && current.element) current.element.removeAttribute("disabled");
+	});
+	onCleanup(() => removeOwnedListeners?.());
+	return ToolbarItemOwnerContext({
+		value: {
+			disabled,
+			focusableWhenDisabled,
+			setChildDisabled
+		},
+		get children() {
+			return Component(mergeProps({
+				ref: (element) => {
+					setElement(element);
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				get type() {
+					return nativeButton() ? "button" : void 0;
+				}
+			}, () => {
+				return !nativeButton() ? { role: "button" } : {};
+			}, {
+				get tabIndex() {
+					return item.tabIndex();
+				},
+				get disabled() {
+					return memo(() => {
+						return typeof props.as === "function";
+					})() ? disabled() : disabledAttribute();
+				},
+				get ["aria-disabled"]() {
+					return ariaDisabled();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventDisabledKeyDefault(event) {
+	if (event.key !== "Tab") {
+		event.preventDefault();
+		event.preventBaseUIHandler();
+	}
+}
+function dispatchClickWithModifiers(target, sourceEvent) {
+	const ownerWindow = target.ownerDocument.defaultView;
+	if (!ownerWindow) return;
+	target.dispatchEvent(new ownerWindow.MouseEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		detail: 0,
+		shiftKey: sourceEvent.shiftKey,
+		ctrlKey: sourceEvent.ctrlKey,
+		altKey: sourceEvent.altKey,
+		metaKey: sourceEvent.metaKey
+	}));
+}
+//#endregion
+//#region src/toolbar/link/ToolbarLink.tsx
+var FALSE = () => false;
+var TRUE = () => true;
+/** A native link that occupies one toolbar roving-focus slot. */
+function ToolbarLink(props) {
+	const root = useToolbarRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const item = createToolbarItem({
+		disabled: FALSE,
+		focusableWhenDisabled: TRUE
+	});
+	const others = omit(allProps, "as", "class", "onFocus", "ref", "style");
+	const state = createMemo(() => ({ orientation: root.orientation() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => item.root.setActiveItem(item.registration));
+	return Dynamic(mergeProps({
+		get component() {
+			return withoutComponentBinding(props.as ?? "a");
+		},
+		ref: (element) => {
+			item.setElement(element);
+			setRef(internalProps.ref, element);
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get tabIndex() {
+			return item.tabIndex();
+		},
+		onFocus
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/toolbar/input/ToolbarInput.tsx
+/** A native input that participates in toolbar roving focus. */
+function ToolbarInput(props) {
+	const root = useToolbarRootContext();
+	const group = useToolbarGroupContext();
+	const Component = dynamic(() => withoutComponentBinding(props.as ?? "input"));
+	const internalProps = props;
+	const allProps = props;
+	const disabled = createMemo(() => root.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
+	const focusableWhenDisabled = createMemo(() => internalProps.focusableWhenDisabled ?? true);
+	const item = createToolbarItem({
+		disabled,
+		focusableWhenDisabled
+	});
+	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style");
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		focusable: focusableWhenDisabled(),
+		orientation: root.orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	let removeOwnedListeners;
+	function handleFocus() {
+		item.root.setActiveItem(item.registration);
+	}
+	const onClick = composeEventHandlers(() => internalProps.onClick, () => untrack(() => disabled() ? preventDefault : void 0));
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventNonTabDefault : void 0), () => internalProps.onKeyDown);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => untrack(() => disabled() ? preventDefault : void 0));
+	function setElement(element) {
+		removeOwnedListeners?.();
+		item.setElement(element);
+		removeOwnedListeners = installOwnedEventHandlers(element, [
+			["click", onClick],
+			["focus", onFocus],
+			["keydown", onKeyDown],
+			["pointerdown", onPointerDown]
+		]);
+		setRef(internalProps.ref, element);
+	}
+	onCleanup(() => removeOwnedListeners?.());
+	return Component(mergeProps({
+		ref: (element) => {
+			setElement(element);
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get tabIndex() {
+			return item.tabIndex();
+		},
+		get ["aria-disabled"]() {
+			return disabled() ? "true" : void 0;
+		}
+	}, stateAttributes, others));
+}
+function preventDefault(event) {
+	event.preventDefault();
+}
+function preventNonTabDefault(event) {
+	if (event.key !== "Tab") event.preventDefault();
+}
+//#endregion
+//#region src/toolbar/separator/ToolbarSeparator.tsx
+/** A separator that defaults to the opposite orientation of its toolbar. */
+function ToolbarSeparator(props) {
+	const root = useToolbarRootContext();
+	const others = omit(props, "as", "class", "orientation", "style");
+	const orientation = createMemo(() => props.orientation ?? (root.orientation() === "vertical" ? "horizontal" : "vertical"));
+	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 withoutComponentBinding(props.as ?? "div");
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		role: "separator",
+		get ["aria-orientation"]() {
+			return orientation();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/toolbar/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Button: () => ToolbarButton,
+	Group: () => ToolbarGroup,
+	Input: () => ToolbarInput,
+	Link: () => ToolbarLink,
+	Root: () => ToolbarRoot,
+	Separator: () => ToolbarSeparator
+});
+//#endregion
+export { index_parts_exports as Toolbar };