@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Tree.js

@@ -0,0 +1,1424 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { handleLinkClick, useLinkProps, useRouter } from "./RouterProvider.js";
+import { CollectionRendererContext, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
+import { r as useVirtualizerContext } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { GridListHeader, GridListHeaderContext, GridListHeaderInnerContext } from "./GridList.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createGridListSection, createHover, createTree, createTreeItem, createTreeSelectionCheckbox, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createTreeCollection, createTreeState } from "@proyecto-viviana/solid-stately";
+//#region src/Tree.tsx
+/**
+* Tree component for solidaria-components
+*
+* A pre-wired headless tree that combines state + aria hooks.
+* Based on react-aria-components/src/Tree.tsx
+*
+* Tree displays hierarchical data with expandable/collapsible nodes,
+* supporting keyboard navigation and selection.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<div role=row aria-level=1 style=display:contents><div role=gridcell style=display:contents>`), _tmpl$3 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$5 = /*#__PURE__*/ template(`<div>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<input>`), _tmpl$8 = /*#__PURE__*/ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$9 = /*#__PURE__*/ template(`<div role=row><div role=gridcell>`);
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const X_SWITCH_THRESHOLD = 10;
+const Y_SWITCH_THRESHOLD = 5;
+const EXPANSION_KEYS = {
+	expand: {
+		ltr: "ArrowRight",
+		rtl: "ArrowLeft"
+	},
+	collapse: {
+		ltr: "ArrowLeft",
+		rtl: "ArrowRight"
+	}
+};
+function resolveTreeDirection(element) {
+	if (element) {
+		const dir = element.closest("[dir]")?.getAttribute("dir");
+		if (dir === "rtl") return "rtl";
+		if (dir === "ltr") return "ltr";
+		if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+			const computedDirection = window.getComputedStyle(element).direction;
+			if (computedDirection === "rtl") return "rtl";
+			if (computedDirection === "ltr") return "ltr";
+		}
+	}
+	if (typeof document !== "undefined") return document.dir === "rtl" ? "rtl" : "ltr";
+	return "ltr";
+}
+function createTreeDropTargetDelegate(delegate, state, direction, baseKeyboardNav) {
+	const pointerTracking = {
+		lastY: 0,
+		lastX: 0,
+		yDirection: null,
+		xDirection: null,
+		boundaryContext: null
+	};
+	const getPotentialTargets = (originalTarget, isValidDropTarget) => {
+		if (originalTarget.dropPosition === "on") return [originalTarget];
+		const collection = state.collection;
+		const getNodeNextKey = (node) => {
+			if (!node) return null;
+			return node.nextKey ?? null;
+		};
+		const target = { ...originalTarget };
+		let currentItem = collection.getItem(target.key);
+		while (currentItem && currentItem.type !== "item") {
+			const nextKey = getNodeNextKey(currentItem);
+			if (nextKey == null) break;
+			target.key = nextKey;
+			currentItem = collection.getItem(nextKey);
+		}
+		const potentialTargets = [target];
+		if (currentItem && currentItem.hasChildNodes && state.expandedKeys.has(currentItem.key) && target.dropPosition === "after") {
+			let firstChildItemNode = null;
+			for (const child of collection.getChildren(currentItem.key)) if (child.type === "item") {
+				firstChildItemNode = child;
+				break;
+			}
+			if (firstChildItemNode) {
+				const beforeFirstChildTarget = {
+					type: "item",
+					key: firstChildItemNode.key,
+					dropPosition: "before"
+				};
+				if (isValidDropTarget(beforeFirstChildTarget)) return [beforeFirstChildTarget];
+				return [];
+			}
+		}
+		if (getNodeNextKey(currentItem) != null) return [originalTarget];
+		let parentKey = currentItem?.parentKey ?? null;
+		const ancestorTargets = [];
+		while (parentKey != null) {
+			const parentItem = collection.getItem(parentKey);
+			const nextKey = getNodeNextKey(parentItem);
+			const nextItem = nextKey != null ? collection.getItem(nextKey) : null;
+			if (!nextItem || nextItem.parentKey !== parentKey) {
+				const afterParentTarget = {
+					type: "item",
+					key: parentKey,
+					dropPosition: "after"
+				};
+				if (isValidDropTarget(afterParentTarget)) ancestorTargets.push(afterParentTarget);
+				if (nextItem) break;
+			}
+			parentKey = parentItem?.parentKey ?? null;
+		}
+		if (ancestorTargets.length > 0) potentialTargets.push(...ancestorTargets);
+		if (potentialTargets.length === 1) {
+			const nextKey = collection.getKeyAfter(target.key);
+			const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+			if (nextKey != null && nextNode && currentItem && nextNode.level != null && currentItem.level != null && nextNode.level > currentItem.level) {
+				const beforeTarget = {
+					type: "item",
+					key: nextKey,
+					dropPosition: "before"
+				};
+				if (isValidDropTarget(beforeTarget)) return [beforeTarget];
+			}
+		}
+		return potentialTargets.filter((candidate) => isValidDropTarget(candidate));
+	};
+	const selectTarget = (potentialTargets, originalTarget, x, y, currentYMovement, currentXMovement) => {
+		if (potentialTargets.length < 2) return potentialTargets[0];
+		const parentKey = state.collection.getItem(originalTarget.key)?.parentKey;
+		if (parentKey == null) return potentialTargets[0];
+		if (!pointerTracking.boundaryContext || pointerTracking.boundaryContext.parentKey !== parentKey) pointerTracking.boundaryContext = {
+			parentKey,
+			preferredTargetIndex: pointerTracking.yDirection === "up" ? potentialTargets.length - 1 : 0,
+			lastSwitchY: y,
+			lastSwitchX: x
+		};
+		const boundaryContext = pointerTracking.boundaryContext;
+		const distanceFromLastXSwitch = Math.abs(x - boundaryContext.lastSwitchX);
+		if (Math.abs(y - boundaryContext.lastSwitchY) > Y_SWITCH_THRESHOLD && currentYMovement) {
+			const currentIndex = boundaryContext.preferredTargetIndex ?? 0;
+			if (currentYMovement === "down" && currentIndex === 0) boundaryContext.preferredTargetIndex = potentialTargets.length - 1;
+			else if (currentYMovement === "up" && currentIndex === potentialTargets.length - 1) boundaryContext.preferredTargetIndex = 0;
+			pointerTracking.xDirection = null;
+		}
+		if (distanceFromLastXSwitch > X_SWITCH_THRESHOLD && currentXMovement) {
+			const currentTargetIndex = boundaryContext.preferredTargetIndex ?? 0;
+			if (currentXMovement === "left") {
+				if (direction === "ltr") {
+					if (currentTargetIndex < potentialTargets.length - 1) {
+						boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+						boundaryContext.lastSwitchX = x;
+					}
+				} else if (currentTargetIndex > 0) {
+					boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+					boundaryContext.lastSwitchX = x;
+				}
+			} else if (currentXMovement === "right") {
+				if (direction === "ltr") {
+					if (currentTargetIndex > 0) {
+						boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+						boundaryContext.lastSwitchX = x;
+					}
+				} else if (currentTargetIndex < potentialTargets.length - 1) {
+					boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+					boundaryContext.lastSwitchX = x;
+				}
+			}
+			pointerTracking.yDirection = null;
+		}
+		return potentialTargets[Math.max(0, Math.min(boundaryContext.preferredTargetIndex ?? 0, potentialTargets.length - 1))];
+	};
+	const getKeyboardNavigationTarget = (target, dir, isValidDropTarget) => {
+		const collection = state.collection;
+		if (target && target.type === "item") {
+			const node = collection.getItem(target.key);
+			if (!(node != null && node.rowIndex != null)) return baseKeyboardNav?.(target, dir, isValidDropTarget) ?? null;
+		}
+		const tryValid = (t) => isValidDropTarget(t) ? t : null;
+		const getNodeNextKey = (node) => {
+			if (!node) return null;
+			return node.nextKey ?? null;
+		};
+		const isExpanded = (key) => {
+			const node = collection.getItem(key);
+			if (!node || !node.hasChildNodes) return false;
+			return state.expandedKeys.has(key);
+		};
+		const getFirstChildItemKey = (key) => {
+			for (const child of collection.getChildren(key)) if (child.type === "item") return child.key;
+			return null;
+		};
+		const getLastChildItemKey = (key) => {
+			let lastKey = null;
+			for (const child of collection.getChildren(key)) if (child.type === "item") lastKey = child.key;
+			return lastKey;
+		};
+		const getDeepestLastChild = (key) => {
+			let current = key;
+			while (isExpanded(current)) {
+				const lastChild = getLastChildItemKey(current);
+				if (lastChild == null) break;
+				current = lastChild;
+			}
+			return current;
+		};
+		if (dir === "next") {
+			if (!target) return tryValid({ type: "root" });
+			if (target.type === "root") {
+				const firstKey = collection.getFirstKey();
+				if (firstKey != null) return tryValid({
+					type: "item",
+					key: firstKey,
+					dropPosition: "before"
+				});
+				return null;
+			}
+			if (target.type === "item") switch (target.dropPosition) {
+				case "before": return tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				}) ?? tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "after"
+				});
+				case "on": {
+					if (isExpanded(target.key)) {
+						const firstChild = getFirstChildItemKey(target.key);
+						if (firstChild != null) return tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "on"
+						});
+					}
+					const nextKey = collection.getKeyAfter(target.key);
+					const targetNode = collection.getItem(target.key);
+					const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+					if (targetNode && nextNode && nextNode.level != null && targetNode.level != null && nextNode.level >= targetNode.level) return tryValid({
+						type: "item",
+						key: nextNode.key,
+						dropPosition: "before"
+					}) ?? tryValid({
+						type: "item",
+						key: target.key,
+						dropPosition: "after"
+					});
+					return tryValid({
+						type: "item",
+						key: target.key,
+						dropPosition: "after"
+					});
+				}
+				case "after": {
+					if (isExpanded(target.key)) {
+						const firstChild = getFirstChildItemKey(target.key);
+						if (firstChild != null) return tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "on"
+						});
+					}
+					const targetNode = collection.getItem(target.key);
+					const nextSiblingKey = getNodeNextKey(targetNode);
+					if (nextSiblingKey != null) {
+						const nextSibling = collection.getItem(nextSiblingKey);
+						if (nextSibling?.type === "item") return tryValid({
+							type: "item",
+							key: nextSibling.key,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: nextSibling.key,
+							dropPosition: "on"
+						});
+					}
+					if (targetNode?.parentKey != null) {
+						const parentNode = collection.getItem(targetNode.parentKey);
+						const parentNextKey = getNodeNextKey(parentNode);
+						const parentNextNode = parentNextKey != null ? collection.getItem(parentNextKey) : null;
+						if (parentNextNode?.type === "item") return tryValid({
+							type: "item",
+							key: parentNextNode.key,
+							dropPosition: "before"
+						});
+						if (parentNode?.type === "item") return tryValid({
+							type: "item",
+							key: parentNode.key,
+							dropPosition: "after"
+						});
+					}
+					const nextKey = collection.getKeyAfter(target.key);
+					if (nextKey != null) return tryValid({
+						type: "item",
+						key: nextKey,
+						dropPosition: "before"
+					}) ?? tryValid({
+						type: "item",
+						key: nextKey,
+						dropPosition: "on"
+					});
+					return tryValid({ type: "root" });
+				}
+			}
+			return null;
+		}
+		if (!target || target.type === "root") {
+			const lastKey = collection.getLastKey();
+			if (lastKey != null) {
+				let rootKey = lastKey;
+				let node = collection.getItem(lastKey);
+				while (node?.parentKey != null) {
+					rootKey = node.parentKey;
+					node = collection.getItem(rootKey);
+				}
+				return tryValid({
+					type: "item",
+					key: rootKey,
+					dropPosition: "after"
+				});
+			}
+			return null;
+		}
+		if (target.type === "item") switch (target.dropPosition) {
+			case "after": {
+				const deepest = getDeepestLastChild(target.key);
+				if (deepest !== target.key) return tryValid({
+					type: "item",
+					key: deepest,
+					dropPosition: "after"
+				}) ?? tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				});
+				return tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				});
+			}
+			case "on": return tryValid({
+				type: "item",
+				key: target.key,
+				dropPosition: "before"
+			});
+			case "before": {
+				const prevKey = collection.getKeyBefore(target.key);
+				if (prevKey != null) return tryValid({
+					type: "item",
+					key: getDeepestLastChild(prevKey),
+					dropPosition: "after"
+				}) ?? tryValid({
+					type: "item",
+					key: prevKey,
+					dropPosition: "on"
+				});
+				return tryValid({ type: "root" });
+			}
+		}
+		return null;
+	};
+	return {
+		getDropTargetFromPoint(x, y, isValidDropTarget) {
+			const baseTarget = delegate.getDropTargetFromPoint(x, y, isValidDropTarget);
+			if (!baseTarget || baseTarget.type === "root") return baseTarget;
+			const deltaY = y - pointerTracking.lastY;
+			const deltaX = x - pointerTracking.lastX;
+			let currentYMovement = pointerTracking.yDirection;
+			let currentXMovement = pointerTracking.xDirection;
+			if (Math.abs(deltaY) > Y_SWITCH_THRESHOLD) {
+				currentYMovement = deltaY > 0 ? "down" : "up";
+				pointerTracking.yDirection = currentYMovement;
+				pointerTracking.lastY = y;
+			}
+			if (Math.abs(deltaX) > X_SWITCH_THRESHOLD) {
+				currentXMovement = deltaX > 0 ? "right" : "left";
+				pointerTracking.xDirection = currentXMovement;
+				pointerTracking.lastX = x;
+			}
+			let target = baseTarget;
+			if (target.dropPosition === "before") {
+				const keyBefore = state.collection.getKeyBefore(target.key);
+				if (keyBefore != null) {
+					const normalized = {
+						type: "item",
+						key: keyBefore,
+						dropPosition: "after"
+					};
+					if (isValidDropTarget(normalized)) target = normalized;
+				}
+			}
+			const potentialTargets = getPotentialTargets(target, isValidDropTarget);
+			if (potentialTargets.length === 0) return { type: "root" };
+			if (potentialTargets.length > 1) return selectTarget(potentialTargets, target, x, y, currentYMovement, currentXMovement);
+			pointerTracking.boundaryContext = null;
+			return potentialTargets[0];
+		},
+		getKeyboardNavigationTarget,
+		getKeyboardPageNavigationTarget: delegate.getKeyboardPageNavigationTarget?.bind(delegate)
+	};
+}
+const TreeContext = createContext(null);
+const TreeStateContext = createContext(null);
+const TreeItemContext = createContext(null);
+const TreeItemContentContext = createContext(null);
+function isTreeItemRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function treeItemDataFromNode(node) {
+	const value = node.value;
+	const item = isTreeItemRecord(value) ? value : {};
+	return {
+		...item,
+		key: node.key,
+		id: item.id ?? node.key,
+		value: value ?? void 0,
+		textValue: node.textValue,
+		isDisabled: node.isDisabled,
+		hasChildItems: node.hasChildNodes,
+		children: node.childNodes.length > 0 ? node.childNodes.map((child) => treeItemDataFromNode(child)) : void 0
+	};
+}
+/**
+* A tree displays hierarchical data with expandable/collapsible nodes,
+* supporting keyboard navigation and selection.
+*/
+function Tree(props) {
+	const [local, stateProps, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"renderEmptyState",
+		"hasMore",
+		"isLoading",
+		"loadingState",
+		"onLoadMore",
+		"renderLoadMoreItem",
+		"loadMoreClass",
+		"loadMoreStyle",
+		"dragAndDropHooks",
+		"ref"
+	], [
+		"items",
+		"disabledKeys",
+		"disabledBehavior",
+		"selectionMode",
+		"selectionBehavior",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"expandedKeys",
+		"defaultExpandedKeys",
+		"onExpandedChange"
+	]);
+	const [ref, setRef] = createSignal(null);
+	const flatItems = createMemo(() => flattenCollectionEntries(stateProps.items ?? []));
+	const hasSections = createMemo(() => (stateProps.items ?? []).some((entry) => isCollectionSection(entry)));
+	const state = createTreeState(() => ({
+		collectionFactory: (expandedKeys) => createTreeCollection(flatItems(), expandedKeys),
+		disabledKeys: stateProps.disabledKeys,
+		disabledBehavior: stateProps.disabledBehavior,
+		selectionMode: stateProps.selectionMode,
+		selectionBehavior: stateProps.selectionBehavior,
+		selectedKeys: stateProps.selectedKeys,
+		defaultSelectedKeys: stateProps.defaultSelectedKeys,
+		onSelectionChange: stateProps.onSelectionChange,
+		expandedKeys: stateProps.expandedKeys,
+		defaultExpandedKeys: stateProps.defaultExpandedKeys,
+		onExpandedChange: stateProps.onExpandedChange
+	}));
+	const [lastExpandedKeys, setLastExpandedKeys] = createSignal(/* @__PURE__ */ new Set());
+	const [lastItemsLength, setLastItemsLength] = createSignal(flatItems().length);
+	const [collectionVersion, setCollectionVersion] = createSignal(0);
+	createEffect(() => {
+		const expanded = state.expandedKeys;
+		const items = flatItems();
+		if (!areSetsEqual(lastExpandedKeys(), expanded) || lastItemsLength() !== items.length) {
+			setLastExpandedKeys(new Set(expanded));
+			setLastItemsLength(items.length);
+			setCollectionVersion((v) => v + 1);
+		}
+	});
+	const treeDirection = createMemo(() => ariaProps.direction ?? resolveTreeDirection(ref()));
+	const { treeProps } = createTree(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		isVirtualized: ariaProps.isVirtualized,
+		onAction: ariaProps.onAction,
+		isDisabled: ariaProps.isDisabled,
+		keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
+		direction: treeDirection()
+	}), () => state, ref);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: ariaProps.isDisabled ?? false,
+		isEmpty: flatItems().length === 0
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Tree"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanTreeProps = () => {
+		const { ref: _ref1, ...rest } = treeProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref2, ...rest } = focusProps;
+		return rest;
+	};
+	const isEmpty = () => flatItems().length === 0;
+	const visibleRows = createMemo(() => {
+		collectionVersion();
+		return state.collection.rows;
+	});
+	const virtualizer = useVirtualizerContext();
+	const parentCollectionRenderer = useCollectionRenderer();
+	const getDropTargetByIndex = (index, position) => {
+		const node = visibleRows()[index];
+		if (!node) return null;
+		return {
+			type: "item",
+			key: node.key,
+			dropPosition: position
+		};
+	};
+	const hasDroppableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
+	});
+	const hasDraggableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
+	});
+	const dragState = createMemo(() => {
+		if (!hasDraggableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: visibleRows().map((node) => node.value) });
+	});
+	const dropState = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
+	});
+	createEffect(() => {
+		const activeDropState = dropState();
+		if (!activeDropState) return;
+		const originalGetDropOperation = activeDropState.getDropOperation.bind(activeDropState);
+		activeDropState.getDropOperation = (target, types, allowedOperations) => {
+			const currentDraggingKeys = dragState()?.draggingKeys ?? /* @__PURE__ */ new Set();
+			if (target.type === "item" && currentDraggingKeys.size > 0) {
+				if (currentDraggingKeys.has(target.key) && target.dropPosition === "on") return "cancel";
+				let currentKey = target.key;
+				while (currentKey != null) {
+					const parentKey = state.collection.getItem(currentKey)?.parentKey;
+					if (parentKey != null && currentDraggingKeys.has(parentKey)) return "cancel";
+					currentKey = parentKey ?? null;
+				}
+			}
+			return originalGetDropOperation(target, types, allowedOperations);
+		};
+		onCleanup(() => {
+			activeDropState.getDropOperation = originalGetDropOperation;
+		});
+	});
+	createEffect(() => {
+		if (!hasDraggableDnd()) return;
+		const hooks = local.dragAndDropHooks;
+		const activeDragState = dragState();
+		if (!hooks?.useDraggableCollection || !activeDragState) return;
+		hooks.useDraggableCollection({}, activeDragState, () => ref());
+	});
+	const contextValue = createMemo(() => ({
+		state,
+		collection: state.collection,
+		isDisabled: ariaProps.isDisabled ?? false,
+		renderItem: props.children,
+		dragAndDropHooks: local.dragAndDropHooks,
+		dragState: dragState(),
+		dropState: dropState()
+	}));
+	const droppableCollection = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		const hooks = local.dragAndDropHooks;
+		const activeDropState = dropState();
+		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
+		const direction = resolveTreeDirection(ref());
+		const baseDropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+			layout: "stack",
+			orientation: "vertical",
+			direction
+		}) : void 0);
+		if (!baseDropTargetDelegate) return void 0;
+		const dropTargetDelegate = createTreeDropTargetDelegate(baseDropTargetDelegate, state, direction, virtualizer?.getBaseKeyboardNavigationTarget);
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection.getFirstKey(),
+				getLastKey: () => state.collection.getLastKey(),
+				getKeyBelow: (key) => state.collection.getKeyAfter(key),
+				getKeyAbove: (key) => state.collection.getKeyBefore(key),
+				getKeyPageBelow: (key) => state.collection.getKeyAfter(key),
+				getKeyPageAbove: (key) => state.collection.getKeyBefore(key)
+			},
+			get collection() {
+				return state.collection;
+			},
+			get selectedKeys() {
+				return state.selectedKeys;
+			},
+			setSelectedKeys: (keys) => {
+				if (state.selectionMode === "none") return;
+				state.clearSelection();
+				for (const key of keys) state.toggleSelection(key);
+			},
+			setFocusedKey: (key) => state.setFocusedKey(key),
+			onDropActivate: (event) => {
+				if (event.target.type !== "item") return;
+				const key = event.target.key;
+				const item = state.collection.getItem(key);
+				const isExpanded = state.isExpanded(key);
+				if (item?.hasChildNodes && (!isExpanded || hooks.isVirtualDragging?.())) state.toggleKey(key);
+			},
+			onKeyDown: (event) => {
+				const target = activeDropState.target;
+				if (!target || target.type !== "item" || target.dropPosition !== "on") return;
+				if (!state.collection.getItem(target.key)?.hasChildNodes) return;
+				const currentDirection = ariaProps.direction ?? resolveTreeDirection(ref());
+				const expandKey = EXPANSION_KEYS.expand[currentDirection];
+				const collapseKey = EXPANSION_KEYS.collapse[currentDirection];
+				if (event.key === expandKey && !state.isExpanded(target.key)) state.toggleKey(target.key);
+				else if (event.key === collapseKey && state.isExpanded(target.key)) state.toggleKey(target.key);
+			}
+		}, activeDropState, () => ref());
+	});
+	const isRootDropTarget = createMemo(() => {
+		return Boolean(dropState()?.target?.type === "root");
+	});
+	const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
+	const dndDropIndicator = (index, position) => {
+		const target = getDropTargetByIndex(index, position);
+		if (!target || target.type !== "item") return void 0;
+		return dndRenderDropIndicator()?.(target);
+	};
+	const persistedKeys = useDndPersistedKeys({ focusedKey: () => state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection);
+	const virtualRange = createMemo(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
+		const rows = visibleRows();
+		const baseRange = virtualizer.getVisibleRange(rows.length);
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rows.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		const dropTarget = dropState()?.target;
+		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection);
+		const focusedKey = state.focusedKey;
+		const focusedIndex = focusedKey != null ? rows.findIndex((node) => node.key === focusedKey) : -1;
+		const forceIncludeIndexes = [
+			dropTarget?.type === "item" ? rows.findIndex((node) => node.key === dropTarget.key) : -1,
+			normalizedDropKey != null ? rows.findIndex((node) => node.key === normalizedDropKey) : -1,
+			dropTarget?.type === "item" ? -1 : focusedIndex
+		].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, rows.length, virtualizer, 80, {
+			forceIncludeIndexes,
+			forceIncludeMaxSpan: 320
+		});
+	});
+	const virtualizedVisibleRows = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return visibleRows();
+		return visibleRows().slice(range.start, range.end);
+	});
+	createEffect(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
+		virtualizer.setDropTargetItemCountResolver(() => visibleRows().length);
+		virtualizer.setDropTargetIndexResolver((key) => {
+			const index = visibleRows().findIndex((node) => node.key === key);
+			return index >= 0 ? index : null;
+		});
+		virtualizer.setDropTargetResolver((target) => {
+			const node = visibleRows()[target.index];
+			if (!node) return target;
+			return {
+				...target,
+				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0,
+				parentKey: typeof node.parentKey === "string" || typeof node.parentKey === "number" ? node.parentKey : node.parentKey == null ? null : void 0,
+				level: typeof node.level === "number" ? node.level : void 0
+			};
+		});
+		onCleanup(() => {
+			virtualizer.setDropTargetIndexResolver(void 0);
+			virtualizer.setDropTargetItemCountResolver(void 0);
+			virtualizer.setDropTargetResolver(void 0);
+		});
+	});
+	const rowIndexByKey = createMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const rows = visibleRows();
+		for (let i = 0; i < rows.length; i += 1) map.set(rows[i].key, i);
+		return map;
+	});
+	const getAfterIndicatorIndexes = (absoluteIndex, renderRange) => {
+		const rows = visibleRows();
+		const current = rows[absoluteIndex];
+		if (!current) return [];
+		const next = rows[absoluteIndex + 1];
+		if (next && next.level >= current.level) return [];
+		const result = [];
+		let cursorIndex = absoluteIndex;
+		while (cursorIndex != null) {
+			const cursor = rows[cursorIndex];
+			if (!cursor) break;
+			if (!(!next || cursor.parentKey !== next.parentKey && next.level < cursor.level)) break;
+			result.push(cursorIndex);
+			if (cursor.parentKey == null) break;
+			cursorIndex = rowIndexByKey().get(cursor.parentKey) ?? null;
+		}
+		if (!renderRange) return result;
+		return result.filter((index) => index >= renderRange.start && index < renderRange.end);
+	};
+	createEffect(() => {
+		if (!virtualizer) return;
+		const direction = resolveTreeDirection(ref());
+		const treeDelegate = createTreeDropTargetDelegate({
+			getDropTargetFromPoint: parentCollectionRenderer?.dropTargetDelegate?.getDropTargetFromPoint ?? ((_x, _y, _v) => null),
+			getKeyboardNavigationTarget: parentCollectionRenderer?.dropTargetDelegate?.getKeyboardNavigationTarget,
+			getKeyboardPageNavigationTarget: parentCollectionRenderer?.dropTargetDelegate?.getKeyboardPageNavigationTarget
+		}, state, direction, virtualizer.getBaseKeyboardNavigationTarget);
+		virtualizer.setKeyboardNavigationOverride(treeDelegate.getKeyboardNavigationTarget ? (target, dir, isValid) => treeDelegate.getKeyboardNavigationTarget(target, dir, isValid) : void 0);
+		onCleanup(() => {
+			virtualizer.setKeyboardNavigationOverride(void 0);
+		});
+	});
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => item,
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	const rootKeyByNodeKey = createMemo(() => {
+		const rootMap = /* @__PURE__ */ new Map();
+		for (const row of visibleRows()) {
+			let rootKey = row.key;
+			let parentKey = row.parentKey;
+			while (parentKey != null) {
+				rootKey = parentKey;
+				parentKey = state.collection.getParentKey(parentKey);
+			}
+			rootMap.set(row.key, rootKey);
+		}
+		return rootMap;
+	});
+	const renderRange = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return null;
+		return {
+			start: range.start,
+			end: range.end
+		};
+	});
+	const renderableRows = createMemo(() => {
+		const offset = renderRange()?.start ?? 0;
+		return virtualizedVisibleRows().map((node, index) => ({
+			node,
+			globalIndex: offset + index
+		}));
+	});
+	const sectionedRenderableRows = createMemo(() => {
+		if (!hasSections()) return null;
+		const rootMap = rootKeyByNodeKey();
+		const rows = renderableRows();
+		return (stateProps.items ?? []).map((entry) => {
+			if (!isCollectionSection(entry)) return {
+				type: "single",
+				item: entry,
+				rows: rows.filter((row) => rootMap.get(row.node.key) === entry.key)
+			};
+			const sectionRootKeys = new Set(entry.items.map((item) => item.key));
+			return {
+				type: "section",
+				section: entry,
+				rows: rows.filter((row) => {
+					const rootKey = rootMap.get(row.node.key);
+					return rootKey != null && sectionRootKeys.has(rootKey);
+				})
+			};
+		});
+	});
+	const renderTreeRow = (node, itemIndex) => {
+		const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "before");
+		const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "on");
+		const afterIndicatorIndexes = () => getAfterIndicatorIndexes(itemIndex, renderRange());
+		const itemData = treeItemDataFromNode(node);
+		const itemState = {
+			isExpanded: node.isExpanded ?? false,
+			isExpandable: node.isExpandable ?? false,
+			level: node.level
+		};
+		return [
+			memo(beforeIndicator),
+			memo(onIndicator),
+			memo(() => props.children(itemData, itemState)),
+			createComponent(For, {
+				get each() {
+					return afterIndicatorIndexes();
+				},
+				children: (afterIndex) => collectionRenderer().renderDropIndicator?.(afterIndex, "after")
+			})
+		];
+	};
+	return createComponent(TreeContext.Provider, {
+		get value() {
+			return contextValue();
+		},
+		get children() {
+			return createComponent(TreeStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(CollectionRendererContext.Provider, {
+						get value() {
+							return collectionRenderer();
+						},
+						get children() {
+							var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, [_el$3, _co$] = getNextMarker(_el$2.nextSibling), _el$4 = _el$3.nextSibling, [_el$5, _co$2] = getNextMarker(_el$4.nextSibling);
+							use((element) => {
+								setRef(element);
+								assignRef(local.ref, element);
+							}, _el$);
+							spread(_el$, mergeProps(() => mergeProps$2(domProps(), cleanTreeProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
+								get ["class"]() {
+									return renderProps.class();
+								},
+								get style() {
+									return renderProps.style();
+								},
+								get ["data-focused"]() {
+									return state.isFocused || void 0;
+								},
+								get ["data-focus-visible"]() {
+									return isFocusVisible() || void 0;
+								},
+								get ["data-disabled"]() {
+									return ariaProps.isDisabled || void 0;
+								},
+								get ["data-empty"]() {
+									return isEmpty() || void 0;
+								},
+								get ["data-drop-target"]() {
+									return isRootDropTarget() || void 0;
+								},
+								get ["data-selection-mode"]() {
+									return memo(() => stateProps.selectionMode !== "none")() ? stateProps.selectionMode : void 0;
+								},
+								get ["data-allows-dragging"]() {
+									return hasDraggableDnd() || void 0;
+								}
+							}), false, true);
+							insert(_el$, createComponent(SharedElementTransition, { get children() {
+								return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
+									var _el$6 = getNextElement(_tmpl$2), _el$7 = _el$6.firstChild;
+									insert(_el$7, () => local.renderEmptyState());
+									return _el$6;
+								})() : [
+									memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+										var _el$8 = getNextElement(_tmpl$3);
+										effect((_$p) => setStyleProperty(_el$8, "height", `${virtualRange().offsetTop}px`));
+										return _el$8;
+									})() : null),
+									createComponent(Show, {
+										get when() {
+											return hasSections();
+										},
+										get fallback() {
+											return createComponent(For, {
+												get each() {
+													return renderableRows();
+												},
+												children: (row) => renderTreeRow(row.node, row.globalIndex)
+											});
+										},
+										get children() {
+											return createComponent(For, {
+												get each() {
+													return sectionedRenderableRows() ?? [];
+												},
+												children: (entry) => createComponent(Show, {
+													get when() {
+														return entry.rows.length > 0;
+													},
+													get children() {
+														return createComponent(Show, {
+															get when() {
+																return entry.type === "section";
+															},
+															get fallback() {
+																return createComponent(For, {
+																	get each() {
+																		return entry.rows;
+																	},
+																	children: (row) => renderTreeRow(row.node, row.globalIndex)
+																});
+															},
+															get children() {
+																return createComponent(TreeSection, { get children() {
+																	return [memo(() => memo(() => !!(entry.type === "section" && entry.section.title))() ? createComponent(TreeHeader, { get children() {
+																		return entry.section.title;
+																	} }) : null), createComponent(For, {
+																		get each() {
+																			return entry.rows;
+																		},
+																		children: (row) => renderTreeRow(row.node, row.globalIndex)
+																	})];
+																} });
+															}
+														});
+													}
+												})
+											});
+										}
+									}),
+									memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+										var _el$9 = getNextElement(_tmpl$4);
+										effect((_$p) => setStyleProperty(_el$9, "height", `${virtualRange().offsetBottom}px`));
+										return _el$9;
+									})() : null)
+								];
+							} }), _el$3, _co$);
+							insert(_el$, (() => {
+								var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
+								return () => _c$() && createComponent(TreeLoadMoreItem, {
+									get onLoadMore() {
+										return local.onLoadMore;
+									},
+									get isLoading() {
+										return local.isLoading;
+									},
+									get loadingState() {
+										return local.loadingState;
+									},
+									get ["class"]() {
+										return local.loadMoreClass;
+									},
+									get style() {
+										return local.loadMoreStyle;
+									},
+									get children() {
+										return local.renderLoadMoreItem?.({ isLoading: !!local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore" });
+									}
+								});
+							})(), _el$5, _co$2);
+							runHydrationEvents();
+							return _el$;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* An item in a tree.
+*/
+function TreeItem(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"onAction",
+		"hasChildItems",
+		"isDisabled",
+		"href",
+		"target",
+		"download",
+		"rel",
+		"hrefLang",
+		"ping",
+		"referrerPolicy",
+		"routerOptions",
+		"ref",
+		"children"
+	]);
+	const context = useContext(TreeStateContext);
+	if (!context) throw new Error("TreeItem must be used within a Tree");
+	const state = context;
+	const treeContext = useContext(TreeContext);
+	const router = useRouter();
+	const linkProps = createMemo(() => useLinkProps({
+		href: local.href,
+		target: local.target,
+		rel: local.rel,
+		download: local.download,
+		ping: local.ping,
+		referrerPolicy: local.referrerPolicy
+	}));
+	const [ref, setRef] = createSignal(null);
+	const setItemRef = (element) => {
+		setRef(element);
+		assignRef(local.ref, element);
+	};
+	const itemNode = createMemo(() => {
+		const node = state.collection.getItem(local.id);
+		if (!node) return {
+			type: "item",
+			key: local.id,
+			value: local.item?.value ?? null,
+			textValue: local.textValue ?? String(local.id),
+			level: 0,
+			index: 0,
+			hasChildNodes: !!local.hasChildItems,
+			childNodes: [],
+			isDisabled: local.isDisabled,
+			isExpandable: !!local.hasChildItems,
+			isExpanded: false
+		};
+		return node;
+	});
+	const treeItemAria = createTreeItem(() => ({
+		node: itemNode(),
+		selectionBehavior: state.selectionBehavior,
+		onAction: local.onAction,
+		isDisabled: local.isDisabled,
+		textValue: local.textValue
+	}), () => state, ref);
+	const isSelected = () => treeItemAria.isSelected;
+	const isDisabled = () => treeItemAria.isDisabled;
+	const isPressed = () => treeItemAria.isPressed;
+	const isExpanded = () => treeItemAria.isExpanded;
+	const isExpandable = () => treeItemAria.isExpandable;
+	const level = () => treeItemAria.level;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return isDisabled();
+	} });
+	const { isFocusVisible, focusProps } = createFocusRing();
+	const isFocused = createMemo(() => state.focusedKey === local.id);
+	const draggableItem = createMemo(() => {
+		if (!treeContext?.dragAndDropHooks?.useDraggableItem || !treeContext.dragState) return void 0;
+		return treeContext.dragAndDropHooks.useDraggableItem({ key: local.id }, treeContext.dragState);
+	});
+	const droppableItem = createMemo(() => {
+		if (!treeContext?.dragAndDropHooks?.useDroppableItem || !treeContext.dropState) return void 0;
+		return treeContext.dragAndDropHooks.useDroppableItem({ key: local.id }, treeContext.dropState, () => ref());
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible() && isFocused(),
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isDisabled: isDisabled(),
+		isExpanded: isExpanded(),
+		isExpandable: isExpandable(),
+		level: level(),
+		selectionMode: state.selectionMode,
+		selectionBehavior: state.selectionBehavior
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Tree-item"
+	}, renderValues);
+	const cleanRowProps = () => {
+		const { ref: _ref1, ...rest } = treeItemAria.rowProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const itemContextValue = createMemo(() => ({
+		node: itemNode(),
+		isExpanded: isExpanded(),
+		isExpandable: isExpandable(),
+		level: level()
+	}));
+	const rowStyle = () => ({
+		"--tree-item-level": String(level()),
+		...typeof renderProps.style() === "object" ? renderProps.style() : {}
+	});
+	const rowContent = () => createComponent(TreeItemContentContext.Provider, {
+		get value() {
+			return renderValues();
+		},
+		get children() {
+			var _el$0 = getNextElement(_tmpl$5);
+			spread(_el$0, mergeProps(() => treeItemAria.gridCellProps, { "class": "solidaria-Tree-item-content" }), false, true);
+			insert(_el$0, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$0;
+		}
+	});
+	const mergedRowProps = () => mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+	const onLinkedRowClick = (event) => {
+		const onClick = mergedRowProps().onClick;
+		onClick?.(event);
+		handleLinkClick(event, router, local.href, local.routerOptions);
+	};
+	const downloadAttr = () => {
+		const download = linkProps().download;
+		return typeof download === "boolean" ? download ? "" : void 0 : download;
+	};
+	const referrerPolicyAttr = () => linkProps().referrerPolicy || void 0;
+	const linkedRowDomProps = () => local.href ? {
+		onClick: onLinkedRowClick,
+		"data-href": linkProps().href,
+		"data-target": linkProps().target,
+		"data-download": downloadAttr(),
+		"data-rel": linkProps().rel,
+		"data-hreflang": local.hrefLang,
+		"data-ping": linkProps().ping,
+		"data-referrer-policy": referrerPolicyAttr()
+	} : {};
+	return createComponent(TreeItemContext.Provider, {
+		get value() {
+			return itemContextValue();
+		},
+		get children() {
+			var _el$1 = getNextElement(_tmpl$5);
+			use(setItemRef, _el$1);
+			spread(_el$1, mergeProps(domProps, mergedRowProps, linkedRowDomProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return rowStyle();
+				},
+				get ["data-selected"]() {
+					return isSelected() || void 0;
+				},
+				get ["data-focused"]() {
+					return isFocused() || void 0;
+				},
+				get ["data-focus-visible"]() {
+					return memo(() => !!isFocusVisible())() && isFocused() || void 0;
+				},
+				get ["data-pressed"]() {
+					return isPressed() || void 0;
+				},
+				get ["data-hovered"]() {
+					return isHovered() || void 0;
+				},
+				get ["data-disabled"]() {
+					return isDisabled() || void 0;
+				},
+				get ["data-expanded"]() {
+					return isExpanded() || void 0;
+				},
+				get ["data-expandable"]() {
+					return isExpandable() || void 0;
+				},
+				get ["data-has-child-items"]() {
+					return isExpandable() || void 0;
+				},
+				get ["data-level"]() {
+					return level();
+				},
+				get ["data-selection-mode"]() {
+					return memo(() => treeContext?.state.selectionMode !== "none")() ? treeContext?.state.selectionMode : void 0;
+				},
+				get ["data-dragging"]() {
+					return draggableItem()?.isDragging || void 0;
+				},
+				get ["data-drop-target"]() {
+					return droppableItem()?.isDropTarget || void 0;
+				}
+			}), false, true);
+			insert(_el$1, rowContent);
+			runHydrationEvents();
+			return _el$1;
+		}
+	});
+}
+/**
+* A button to expand/collapse a tree item.
+*/
+function TreeExpandButton(props) {
+	const itemContext = useContext(TreeItemContext);
+	if (!itemContext) throw new Error("TreeExpandButton must be used within a Tree");
+	const stateContext = useContext(TreeStateContext);
+	if (!stateContext) throw new Error("TreeExpandButton must be used within a Tree");
+	const state = stateContext;
+	const treeItemAria = createTreeItem(() => ({ node: itemContext.node }), () => state, () => null);
+	const cleanExpandProps = () => {
+		const { ref: _ref, ...rest } = treeItemAria.expandButtonProps;
+		return rest;
+	};
+	const dataProps = () => {
+		const result = {};
+		for (const key in props) if (key.startsWith("data-")) result[key] = props[key];
+		return result;
+	};
+	const isExpanded = createMemo(() => state.isExpanded(itemContext.node.key));
+	const renderChildren = () => {
+		if (typeof props.children === "function") return props.children({ isExpanded: isExpanded() });
+		return props.children;
+	};
+	return createComponent(Show, {
+		get when() {
+			return itemContext.isExpandable;
+		},
+		get children() {
+			var _el$10 = getNextElement(_tmpl$6);
+			spread(_el$10, mergeProps(cleanExpandProps, dataProps, {
+				get ["class"]() {
+					return props.class ?? "solidaria-Tree-expand-button";
+				},
+				get style() {
+					return props.style;
+				},
+				get ["data-expanded"]() {
+					return isExpanded() || void 0;
+				}
+			}), false, true);
+			insert(_el$10, renderChildren);
+			runHydrationEvents();
+			return _el$10;
+		}
+	});
+}
+/**
+* A checkbox for item selection in a tree.
+*/
+function TreeSelectionCheckbox(props) {
+	const context = useContext(TreeStateContext);
+	if (!context) throw new Error("TreeSelectionCheckbox must be used within a Tree");
+	const state = context;
+	const treeSelectionCheckboxAria = createTreeSelectionCheckbox(() => ({ key: props.itemKey }), () => state);
+	return (() => {
+		var _el$11 = getNextElement(_tmpl$7);
+		spread(_el$11, mergeProps(() => treeSelectionCheckboxAria.checkboxProps, {
+			get ["class"]() {
+				return props.class ?? "solidaria-Tree-checkbox";
+			},
+			get style() {
+				return props.style;
+			},
+			get tabIndex() {
+				return props.excludeFromTabOrder ? -1 : void 0;
+			},
+			get ["aria-label"]() {
+				return props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"];
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$11;
+	})();
+}
+function TreeLoadMoreItem(props) {
+	let sentinelRef;
+	const [isPending, setIsPending] = createSignal(false);
+	const isLoading = () => !!props.isLoading || props.loadingState === "loading" || props.loadingState === "loadingMore" || isPending();
+	const triggerLoadMore = async () => {
+		if (isLoading()) return;
+		setIsPending(true);
+		try {
+			await props.onLoadMore();
+		} finally {
+			setIsPending(false);
+		}
+	};
+	createEffect(() => {
+		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) triggerLoadMore();
+		}, { rootMargin: margin });
+		observer.observe(sentinelRef);
+		return () => observer.disconnect();
+	});
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-Tree-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return [(() => {
+		var _el$12 = getNextElement(_tmpl$8), _el$13 = _el$12.firstChild;
+		var _ref$ = sentinelRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$13) : sentinelRef = _el$13;
+		return _el$12;
+	})(), (() => {
+		var _el$14 = getNextElement(_tmpl$9), _el$15 = _el$14.firstChild;
+		_el$14.$$focusin = () => {
+			triggerLoadMore();
+		};
+		_el$14.addEventListener("focus", () => {
+			triggerLoadMore();
+		});
+		_el$15.addEventListener("focus", () => {
+			triggerLoadMore();
+		});
+		insert(_el$15, () => renderProps.renderChildren());
+		effect((_p$) => {
+			var _v$ = props.level ?? 1, _v$2 = renderProps.class(), _v$3 = renderProps.style(), _v$4 = isLoading() || void 0, _v$5 = props.level ?? 1;
+			_v$ !== _p$.e && setAttribute(_el$14, "aria-level", _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$14, _p$.t = _v$2);
+			_p$.a = style(_el$14, _v$3, _p$.a);
+			_v$4 !== _p$.o && setAttribute(_el$14, "data-loading", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$14, "data-level", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		runHydrationEvents();
+		return _el$14;
+	})()];
+}
+function TreeItemContent(props) {
+	const context = useContext(TreeItemContentContext);
+	if (!context) throw new Error("TreeItemContent must be used within a TreeItem");
+	const renderProps = useRenderProps({ get children() {
+		return props.children;
+	} }, () => context);
+	return memo(() => renderProps.renderChildren());
+}
+/**
+* A section within a Tree. Renders as `role="rowgroup"` and supplies its
+* optional {@link TreeHeader} with the row/rowheader props that wire up the
+* section's `aria-labelledby` (mirrors upstream `TreeSection`, which reuses
+* `useGridListSection`).
+*/
+function TreeSection(props) {
+	const [local, domProps] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const section = createGridListSection({ get "aria-label"() {
+		return domProps["aria-label"];
+	} });
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TreeSection"
+	}, () => ({ hasChildren: true }));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return (() => {
+		var _el$16 = getNextElement(_tmpl$5);
+		use((el) => assignRef(local.ref, el), _el$16);
+		spread(_el$16, mergeProps(filteredDomProps, () => section.rowGroupProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return local.slot;
+			},
+			"data-section": ""
+		}), false, true);
+		insert(_el$16, createComponent(GridListHeaderContext.Provider, {
+			get value() {
+				return section.rowProps;
+			},
+			get children() {
+				return createComponent(GridListHeaderInnerContext.Provider, {
+					get value() {
+						return section.rowHeaderProps;
+					},
+					get children() {
+						return local.children;
+					}
+				});
+			}
+		}));
+		runHydrationEvents();
+		return _el$16;
+	})();
+}
+/**
+* The header of a {@link TreeSection}. Mirrors upstream `TreeHeader`, which is a
+* thin wrapper over `GridListHeader` with a Tree-specific class. The row and
+* rowheader semantics come from the enclosing section through context.
+*/
+function TreeHeader(props) {
+	return createComponent(GridListHeader, mergeProps({ "class": "solidaria-TreeHeader" }, props, { get children() {
+		return props.children;
+	} }));
+}
+Tree.Item = TreeItem;
+Tree.ExpandButton = TreeExpandButton;
+Tree.SelectionCheckbox = TreeSelectionCheckbox;
+Tree.LoadMoreItem = TreeLoadMoreItem;
+Tree.Section = TreeSection;
+Tree.Header = TreeHeader;
+function areSetsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const entry of a) if (!b.has(entry)) return false;
+	return true;
+}
+delegateEvents(["focusin"]);
+//#endregion
+export { Tree, TreeContext, TreeExpandButton, TreeHeader, TreeItem, TreeItemContent, TreeItemContext, TreeLoadMoreItem, TreeSection, TreeSelectionCheckbox, TreeStateContext };
+
+//# sourceMappingURL=Tree.js.map