@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/toast.js

@@ -1,38 +1,106 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.tsx
 const toastManager = Toast.createToastManager();
-function withType(type) {
-	return (title, options) => toastManager.add({
+const errorDefaults = {
+	timeout: 0,
+	priority: "high"
+};
+function persistenceDefaults(options) {
+	if (options.type === "error") return errorDefaults;
+	return options.actionProps ? { timeout: 0 } : void 0;
+}
+function show(title, options = {}) {
+	return toastManager.add({
 		title,
+		...persistenceDefaults(options),
+		...options
+	});
+}
+function withType(type) {
+	return (title, options) => show(title, {
 		type,
 		...options
 	});
 }
-const toast = Object.assign((title, options) => toastManager.add({
-	title,
-	...options
-}), {
+function persistentError(update) {
+	return typeof update === "string" ? {
+		...errorDefaults,
+		description: update
+	} : {
+		...errorDefaults,
+		...update
+	};
+}
+const toast = Object.assign(show, {
 	success: withType("success"),
 	error: withType("error"),
 	warning: withType("warning"),
 	info: withType("info"),
-	message: (title, options) => toastManager.add({
-		title,
-		...options
+	message: (title, options) => show(title, options),
+	promise: (promise, options) => toastManager.promise(promise, {
+		...options,
+		error: (reason) => persistentError(typeof options.error === "function" ? options.error(reason) : options.error)
 	}),
-	promise: (...args) => toastManager.promise(...args),
 	dismiss: (id) => toastManager.close(id)
 });
+const statusIcons = {
+	success: CircleCheckIcon,
+	error: CircleXIcon,
+	warning: TriangleAlertIcon,
+	info: InfoIcon
+};
+function isToastStatus(type) {
+	return type !== void 0 && Object.hasOwn(statusIcons, type);
+}
 const useToast = Toast.useToastManager;
-function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function ToastIndicator({ status, style }) {
+	if (!status) return null;
+	const StatusIcon = statusIcons[status];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "toast",
+		"data-control-family": "popup",
+		"data-popup-kind": "toast",
+		"data-slot": "indicator",
+		style,
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(StatusIcon, { className: "size-4" })
+	});
+}
+function ToastText({ entry, statusPrefix }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [entry.title ? /* @__PURE__ */ jsxs(Toast.Title, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "title",
+			children: [statusPrefix, entry.title]
+		}) : null, entry.description ? /* @__PURE__ */ jsxs(Toast.Description, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "description",
+			children: [entry.title ? null : statusPrefix, entry.description]
+		}) : null]
+	});
+}
+function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel, statusLabels }) {
 	const { toasts } = Toast.useToastManager();
 	return toasts.map((entry) => {
+		const status = isToastStatus(entry.type) ? entry.type : void 0;
+		const statusPrefix = status ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: `${statusLabels[status]}: `
+		}) : null;
 		return /* @__PURE__ */ jsx(Toast.Root, {
 			toast: entry,
 			"data-control-ui": "toast",
@@ -43,7 +111,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 			style: rootStyle,
 			"data-slot": "root",
 			"data-surface": "floating",
-			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute end-0 bottom-0 z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:start-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				"data-control-ui": "toast",
 				"data-control-family": "popup",
@@ -51,28 +119,13 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 				"data-slot": "content",
 				className: "flex items-start",
 				children: [
-					entry.type && entry.type !== "message" ? /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						"data-control-ui": "toast",
-						"data-control-family": "popup",
-						"data-popup-kind": "toast",
-						"data-slot": "indicator",
-						style: indicatorStyle,
-						className: "shrink-0"
-					}) : null,
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex min-w-0 flex-1 flex-col",
-						children: [entry.title ? /* @__PURE__ */ jsx(Toast.Title, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "title"
-						}) : null, entry.description ? /* @__PURE__ */ jsx(Toast.Description, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "description"
-						}) : null]
+					/* @__PURE__ */ jsx(ToastIndicator, {
+						status,
+						style: indicatorStyle
+					}),
+					/* @__PURE__ */ jsx(ToastText, {
+						entry,
+						statusPrefix
 					}),
 					entry.actionProps ? /* @__PURE__ */ jsx(Toast.Action, {
 						style: actionStyle,
@@ -86,25 +139,11 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 					}) : null,
 					/* @__PURE__ */ jsx(Toast.Close, {
 						style: closeStyle,
-						"aria-label": "Close",
-						render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+						render: (renderProps) => /* @__PURE__ */ jsx(PopupCloseButton, {
 							...renderProps,
 							"data-popup-kind": "toast",
-							"data-popup-part": "close",
-							variant: "quiet",
-							size: "xs",
-							iconOnly: true
-						}),
-						children: /* @__PURE__ */ jsx("svg", {
-							viewBox: "0 0 16 16",
-							"aria-hidden": "true",
-							fill: "none",
-							children: /* @__PURE__ */ jsx("path", {
-								d: "M4 4 12 12M12 4 4 12",
-								stroke: "currentColor",
-								strokeWidth: "1.4",
-								strokeLinecap: "round"
-							})
+							label: closeLabel,
+							variant: "quiet"
 						})
 					})
 				]
@@ -112,7 +151,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 		}, entry.id);
 	});
 }
-function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel = "Dismiss notification", successLabel = "Success", errorLabel = "Error", warningLabel = "Warning", infoLabel = "Info" }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Toast.Provider, {
 		toastManager,
@@ -125,12 +164,19 @@ function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionS
 			"data-slot": "viewport",
 			"data-skin": skin.id,
 			"data-effects": controlEffectsAttribute(skin.effects),
-			className: cn("fixed right-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
+			className: cn("fixed end-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:end-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,
 				indicatorStyle,
 				actionStyle,
-				closeStyle
+				closeStyle,
+				closeLabel,
+				statusLabels: {
+					success: successLabel,
+					error: errorLabel,
+					warning: warningLabel,
+					info: infoLabel
+				}
 			})
 		}) })
 	});

package/dist/ui/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/toolbar.d.ts
 export type ToolbarVariant = "default" | "inverse" | "floating";
 export type ToolbarLinkVariant = "default" | "track";
@@ -15,6 +15,7 @@ export type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
 };
 export type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
   variant?: ToolbarLinkVariant;
+  active?: boolean;
   style?: CSSProperties & ToolbarKnobStyle;
 };
 export type ToolbarGroupProps = ComponentProps<"div"> & {
@@ -31,7 +32,7 @@ export declare function Toolbar({ orientation, variant, className, children, ...
 type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
 export declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
 type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;
-export declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
+export declare function ToolbarLink({ variant, active, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
 export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
 export declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
 type RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof Toolbar$1.Input>, "render">;

package/dist/ui/toolbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/toolbar.tsx
 function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {
@@ -37,7 +37,7 @@ function ToolbarButton({ iconOnly = false, className, ...props }) {
 		...props
 	});
 }
-function ToolbarLink({ variant = "default", className, ...props }) {
+function ToolbarLink({ variant = "default", active = false, className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
 		"data-control-ui": "toolbar",
 		"data-control-family": "toolbar",
@@ -45,6 +45,8 @@ function ToolbarLink({ variant = "default", className, ...props }) {
 		"data-control": "true",
 		"data-size": "sm",
 		"data-variant": variant,
+		"data-active": active || void 0,
+		"aria-current": active ? "page" : void 0,
 		className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", variant === "track" && "relative z-[2]", className),
 		...props
 	});

package/dist/ui/tooltip.js

@@ -1,7 +1,8 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { PopupArrowShape } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/ui/tooltip.tsx
@@ -64,29 +65,11 @@ function TooltipContent({ className, children, side = "top", sideOffset = 8, ali
 				"data-control-family": "popup",
 				"data-popup-kind": "tooltip",
 				"data-slot": "arrow",
-				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
-				children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+				className: "flex",
+				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
 			}) : null]
 		})
 	}) });
 }
-function TooltipArrowSvg() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		focusable: "false",
-		width: "12",
-		height: "8",
-		viewBox: "0 0 12 8",
-		fill: "none",
-		overflow: "visible",
-		children: /* @__PURE__ */ jsx("path", {
-			"data-control-ui": "tooltip",
-			"data-popup-kind": "tooltip",
-			"data-control-family": "popup",
-			"data-slot": "arrow-shape",
-			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z"
-		})
-	});
-}
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tree.js

@@ -2,10 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
-import { Children, createContext, isValidElement, useContext, useRef, useState } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
 const TYPEAHEAD_TIMEOUT = 500;
@@ -34,8 +34,18 @@ function compareTreeItems(a, b) {
 	if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
 	return 0;
 }
-function visibleItems(items) {
-	return [...items.values()].filter((item) => !item.disabled && item.node.checkVisibility()).sort(compareTreeItems);
+function isUnderExpandedAncestors(item, items, expanded) {
+	for (let parentValue = item.parentValue; parentValue !== void 0; parentValue = items.get(parentValue)?.parentValue) if (!expanded.has(parentValue)) return false;
+	return true;
+}
+function reachableItems(items, expanded) {
+	return [...items.values()].filter((item) => isUnderExpandedAncestors(item, items, expanded)).sort(compareTreeItems);
+}
+function resolveTabStop(items, expanded, selected, focusedValue) {
+	const reachable = reachableItems(items, expanded);
+	if (reachable.some((item) => item.value === focusedValue)) return focusedValue;
+	const enabled = reachable.filter((item) => !item.disabled);
+	return (enabled.find((item) => selected.has(item.value)) ?? enabled[0])?.value ?? null;
 }
 function focusItem(item, ctx) {
 	if (!item) return;
@@ -55,40 +65,56 @@ function handleTypeahead(event, items, index, ctx, typeahead) {
 	const now = Date.now();
 	typeahead.current.query = now - typeahead.current.at > TYPEAHEAD_TIMEOUT ? event.key : typeahead.current.query + event.key;
 	typeahead.current.at = now;
-	const query = typeahead.current.query.toLowerCase();
-	const match = [...items.slice(index + 1), ...items.slice(0, index + 1)].find((item) => labelOf(item, ctx).toLowerCase().startsWith(query));
+	const typed = typeahead.current.query.toLowerCase();
+	const query = [...typed].every((character) => character === typed[0]) ? typed.charAt(0) : typed;
+	const searchStart = query.length === 1 ? index + 1 : index;
+	const match = [...items.slice(searchStart), ...items.slice(0, searchStart)].find((item) => labelOf(item, ctx).toLowerCase().startsWith(query));
 	if (match) focusItem(match, ctx);
 }
-function registeredItemFromTarget(target, root, itemsByNode) {
-	let node = target;
-	while (node && root.contains(node)) {
-		const item = itemsByNode.get(node);
-		if (item) return item;
-		if (node === root) return;
-		node = node.parentElement;
-	}
-}
 function getTreeKeyboardState(event, ctx) {
 	if (event.defaultPrevented || !(event.target instanceof HTMLElement)) return null;
-	const current = ctx.getItemFromTarget(event.target, event.currentTarget);
-	if (!current) return null;
-	const items = ctx.getVisibleItems();
-	const index = items.indexOf(current);
+	const item = ctx.getItemFromTarget(event.target, event.currentTarget);
+	if (!item) return null;
+	const items = ctx.getNavigableItems();
+	const index = items.indexOf(item);
 	if (index === -1) return null;
 	return {
-		value: current.value,
+		item,
 		items,
 		index,
-		isBranch: current.expandable,
-		isExpanded: ctx.expanded.has(current.value),
-		level: current.level
+		isExpanded: ctx.expanded.has(item.value)
 	};
 }
+const RTL_ARROW_KEYS = {
+	ArrowLeft: "ArrowRight",
+	ArrowRight: "ArrowLeft"
+};
+function handleInlineArrow(key, { item, items, index, isExpanded }, ctx) {
+	const isBranch = item.expandable && !item.disabled;
+	if (key === "ArrowRight") {
+		if (!isBranch) return;
+		if (isExpanded) focusItem(items[index + 1], ctx);
+		else ctx.toggleExpanded(item.value, true, "keyboard");
+		return;
+	}
+	if (isBranch && isExpanded) ctx.toggleExpanded(item.value, false, "keyboard");
+	else focusParentItem(items, index, item.level, ctx);
+}
+function activateItem(key, item, ctx) {
+	if (item.disabled) return;
+	if (key === " ") {
+		ctx.select(item.value, "keyboard", ctx.selectionMode === "multiple");
+		return;
+	}
+	ctx.select(item.value, "keyboard", false);
+	if (item.expandable) ctx.toggleExpanded(item.value, void 0, "keyboard");
+}
 function handleTreeKeyDown(event, ctx, typeahead) {
 	const state = getTreeKeyboardState(event, ctx);
 	if (!state) return;
-	const { value, items, index, isBranch, isExpanded, level } = state;
-	switch (event.key) {
+	const { item, items, index } = state;
+	const key = getComputedStyle(event.currentTarget).direction === "rtl" && RTL_ARROW_KEYS[event.key] || event.key;
+	switch (key) {
 		case "ArrowDown":
 			event.preventDefault();
 			focusItem(items[index + 1], ctx);
@@ -98,14 +124,9 @@ function handleTreeKeyDown(event, ctx, typeahead) {
 			focusItem(items[index - 1], ctx);
 			break;
 		case "ArrowRight":
-			event.preventDefault();
-			if (isBranch && !isExpanded) ctx.toggleExpanded(value, true, "keyboard");
-			else if (isBranch && isExpanded) focusItem(items[index + 1], ctx);
-			break;
 		case "ArrowLeft":
 			event.preventDefault();
-			if (isBranch && isExpanded) ctx.toggleExpanded(value, false, "keyboard");
-			else focusParentItem(items, index, level, ctx);
+			handleInlineArrow(key, state, ctx);
 			break;
 		case "Home":
 			event.preventDefault();
@@ -116,13 +137,9 @@ function handleTreeKeyDown(event, ctx, typeahead) {
 			focusItem(items[items.length - 1], ctx);
 			break;
 		case "Enter":
-			event.preventDefault();
-			ctx.select(value, "keyboard", false);
-			if (isBranch) ctx.toggleExpanded(value, void 0, "keyboard");
-			break;
 		case " ":
 			event.preventDefault();
-			ctx.select(value, "keyboard", ctx.selectionMode === "multiple");
+			activateItem(key, item, ctx);
 			break;
 		default: handleTypeahead(event, items, index, ctx, typeahead);
 	}
@@ -132,31 +149,23 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 	const [selectedState, setSelectedState] = useState(() => new Set(defaultValue));
 	const [expandedState, setExpandedState] = useState(() => new Set(defaultExpandedValue));
 	const [focusedValue, setFocusedValue] = useState(null);
+	const [items, setItems] = useState(() => /* @__PURE__ */ new Map());
+	const [registerItem] = useState(() => (item) => {
+		setItems((current) => new Map(current).set(item.value, item));
+		return () => setItems((current) => {
+			if (current.get(item.value) !== item) return current;
+			const next = new Map(current);
+			next.delete(item.value);
+			return next;
+		});
+	});
 	const selected = value ? new Set(value) : selectedState;
 	const expanded = expandedValue ? new Set(expandedValue) : expandedState;
 	const typeahead = useRef({
 		query: "",
 		at: 0
 	});
-	const itemsRef = useRef(/* @__PURE__ */ new Map());
-	const itemsByNodeRef = useRef(/* @__PURE__ */ new WeakMap());
 	const labelsRef = useRef(/* @__PURE__ */ new Map());
-	const seededFocusRef = useRef(false);
-	const registerItem = (item) => {
-		const previous = itemsRef.current.get(item.value);
-		if (previous) itemsByNodeRef.current.delete(previous.node);
-		itemsRef.current.set(item.value, item);
-		itemsByNodeRef.current.set(item.node, item);
-		if (!seededFocusRef.current && !item.disabled) {
-			seededFocusRef.current = true;
-			setFocusedValue(item.value);
-		}
-		return () => {
-			if (itemsRef.current.get(item.value) !== item) return;
-			itemsRef.current.delete(item.value);
-			itemsByNodeRef.current.delete(item.node);
-		};
-	};
 	const registerLabel = (itemValue, node) => {
 		if (!node) return;
 		labelsRef.current.set(itemValue, node);
@@ -164,10 +173,15 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 			if (labelsRef.current.get(itemValue) === node) labelsRef.current.delete(itemValue);
 		};
 	};
-	const getVisibleItems = () => visibleItems(itemsRef.current);
-	const getItemFromTarget = (target, root) => registeredItemFromTarget(target, root, itemsByNodeRef.current);
+	const getNavigableItems = () => reachableItems(items, expanded).filter((item) => item.node.checkVisibility());
+	const getItemFromTarget = (target, root) => {
+		const node = target.closest("[data-control-family=\"tree\"][data-slot=\"item\"]");
+		if (!(node instanceof HTMLLIElement) || !root.contains(node)) return;
+		const item = items.get(node.dataset.value ?? "");
+		return item?.node === node ? item : void 0;
+	};
 	const getLabel = (itemValue) => labelsRef.current.get(itemValue)?.textContent ?? "";
-	const getItem = (itemValue) => itemsRef.current.get(itemValue);
+	const getItem = (itemValue) => items.get(itemValue);
 	const select = (itemValue, reason, toggle) => {
 		if (selectionMode === "none") return;
 		let next;
@@ -201,10 +215,10 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 		indicator: resolvedIndicator,
 		selected,
 		expanded,
-		focusedValue,
+		tabStopValue: resolveTabStop(items, expanded, selected, focusedValue),
 		registerItem,
 		registerLabel,
-		getVisibleItems,
+		getNavigableItems,
 		getItemFromTarget,
 		getLabel,
 		getItem,
@@ -252,33 +266,48 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 }
 function TreeItem({ value, disabled = false, label, className, style, children, ref, ...props }) {
 	const tree = useTree();
-	const level = (useContext(TreeItemContext)?.level ?? 0) + 1;
+	const parent = useContext(TreeItemContext);
+	const parentValue = parent?.value;
+	const level = (parent?.level ?? 0) + 1;
 	const expandable = Children.toArray(children).some((child) => isValidElement(child) && child.type === TreeItemContent);
+	const labelId = useId();
+	const [labelled, setLabelled] = useState(false);
+	const nodeRef = useRef(null);
+	const { registerItem } = tree;
+	useEffect(() => {
+		const node = nodeRef.current;
+		if (!node) return;
+		return registerItem({
+			value,
+			parentValue,
+			node,
+			level,
+			disabled,
+			expandable,
+			label
+		});
+	}, [
+		registerItem,
+		value,
+		parentValue,
+		level,
+		disabled,
+		expandable,
+		label
+	]);
 	const expanded = expandable && tree.expanded.has(value);
 	const selected = tree.selected.has(value);
 	const itemContext = {
 		value,
 		level,
 		disabled,
-		expandable
+		expandable,
+		labelId,
+		setLabelled
 	};
 	const itemRef = (node) => {
-		const itemNode = node instanceof HTMLLIElement ? node : null;
-		const refCleanup = setRef(ref, itemNode);
-		if (!itemNode) return;
-		const unregister = tree.registerItem({
-			value,
-			node: itemNode,
-			level,
-			disabled,
-			expandable,
-			label
-		});
-		return () => {
-			unregister();
-			if (typeof refCleanup === "function") refCleanup();
-			else setRef(ref, null);
-		};
+		nodeRef.current = node instanceof HTMLLIElement ? node : null;
+		return setRef(ref, nodeRef.current);
 	};
 	const baseClass = cn("list-none", className);
 	const itemStyle = {
@@ -286,6 +315,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 		...style
 	};
 	const shared = {
+		"aria-labelledby": labelled ? labelId : void 0,
 		...props,
 		"data-control-ui": "tree",
 		"data-control-family": "tree",
@@ -298,7 +328,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 		"aria-level": level,
 		"aria-selected": tree.selectionMode === "none" ? void 0 : selected,
 		"aria-disabled": disabled || void 0,
-		tabIndex: tree.focusedValue === value ? 0 : -1,
+		tabIndex: tree.tabStopValue === value ? 0 : -1,
 		style: itemStyle
 	};
 	if (!expandable) return /* @__PURE__ */ jsx(TreeItemContext.Provider, {
@@ -321,7 +351,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 				...shared,
 				role: "treeitem",
 				"aria-expanded": expanded,
-				tabIndex: tree.focusedValue === value ? 0 : -1,
+				tabIndex: shared.tabIndex,
 				"data-state": expanded ? "open" : "closed",
 				className: cn(renderProps.className, baseClass)
 			}),
@@ -353,7 +383,7 @@ function TreeItemTrigger({ className, children, onClick, render, ...props }) {
 				if (item.expandable) tree.toggleExpanded(item.value);
 				focusItem(tree.getItem(item.value), tree);
 			},
-			className: cn("flex cursor-pointer select-none items-center", "pl-[calc(var(--\\_tree-level,1)*1.25rem)]", "aria-disabled:pointer-events-none", className),
+			className: cn("flex cursor-pointer select-none items-center", "aria-disabled:pointer-events-none", className),
 			children
 		}
 	});
@@ -378,12 +408,20 @@ function TreeItemIndicator({ className, children, ...props }) {
 		"aria-hidden": true,
 		className: cn("inline-flex shrink-0 items-center justify-center", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"data-icon-dir": "inline",
+			className: "size-4"
+		})
 	});
 }
 function TreeItemLabel({ className, children, render, ref, ...props }) {
 	const tree = useTree();
 	const item = useTreeItem();
+	const { setLabelled } = item;
+	useEffect(() => {
+		setLabelled(true);
+		return () => setLabelled(false);
+	}, [setLabelled]);
 	const labelRef = (node) => {
 		const unregister = tree.registerLabel(item.value, node);
 		const cleanup = setRef(ref, node);
@@ -398,8 +436,10 @@ function TreeItemLabel({ className, children, render, ref, ...props }) {
 		defaultTagName: "span",
 		render,
 		props: {
+			title: typeof children === "string" ? children : void 0,
 			...props,
 			ref: labelRef,
+			id: item.labelId,
 			"data-control-ui": "tree",
 			"data-control-family": "tree",
 			"data-slot": "item-label",