@ctrl-ui/react 0.8.0 → 0.8.2

package/dist/ui/sidebar-provider.d.ts

@@ -0,0 +1,28 @@
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/sidebar-provider.d.ts
+type SidebarStyle = CSSProperties & SidebarKnobStyle & {
+  "--sidebar-width"?: string;
+  "--sidebar-width-icon"?: string;
+};
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  persistOpen?: boolean;
+  keyboardShortcut?: string | null;
+  style?: SidebarStyle;
+};
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+//#endregion
+export { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar };

package/dist/ui/sidebar-provider.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinSidebarWidth } from "../skin.js";
+import { TooltipProvider } from "./tooltip.js";
+import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/sidebar-provider.tsx
+const SIDEBAR_COOKIE_MAX_AGE = 604800;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_MOBILE_BREAKPOINT = 1024;
+const SidebarContext = createContext(null);
+function useSidebar() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, ref, className, style, children, ...props }) {
+	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
+	const [openMobile, setOpenMobile] = useState(false);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const open = openProp ?? internalOpen;
+	const setOpen = (value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (onOpenChange) onOpenChange(openState);
+		else setInternalOpen(openState);
+		if (persistOpen) document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	};
+	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
+	const toggleRef = useRef(toggleSidebar);
+	useEffect(() => {
+		toggleRef.current = toggleSidebar;
+	});
+	useEffect(() => {
+		if (keyboardShortcut === null) return;
+		const handleKeyDown = (event) => {
+			if (event.key === keyboardShortcut && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleRef.current();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [keyboardShortcut]);
+	const contextValue = {
+		state: open ? "expanded" : "collapsed",
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	};
+	const wrapperStyle = {
+		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
+		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+		...style
+	};
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "wrapper",
+				style: wrapperStyle,
+				className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { SidebarProvider, useSidebar };

package/dist/ui/sidebar.d.ts

@@ -1,55 +1,16 @@
-import { RenderProp, SelectionIndicator } from "../control-props.js";
 import { Button } from "./button.js";
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
-declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
-type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
-declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
-type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
 type SidebarRailProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
 type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
-type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-} & {
-  render?: RenderProp<ComponentProps<"div">>;
-};
-type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-} & {
-  render?: RenderProp<ComponentProps<"button">>;
-  isActive?: boolean;
-  tooltip?: ReactNode;
-  variant?: SidebarMenuButtonVariant;
-  size?: SidebarMenuButtonSize;
-};
-/** Exported so blocks can set width through `style` and stay type-checked. */
-type SidebarStyle = CSSProperties & SidebarKnobStyle & {
-  "--sidebar-width"?: string;
-  "--sidebar-width-icon"?: string;
-};
 type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-declare function useSidebar(): SidebarContextProps;
-type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  style?: SidebarStyle;
-};
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
 declare function Sidebar({ side, variant, collapsible, ref, className, children, style, ...props }: Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
@@ -66,23 +27,5 @@ declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> &
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
 declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type SidebarSelectionIndicator = SelectionIndicator;
-declare function SidebarMenu({ className, indicator, children, ...props }: ComponentProps<"ul"> & {
-  /**
-   * `slide` replaces per-row backgrounds with one pill that glides to hovered or active item.
-   * Defaults to ControlUiSkin.indicators.sidebar, else `none`.
-   */
-  indicator?: SidebarSelectionIndicator;
-} & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSelectionIndicator, SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailProps, type SidebarSelectionIndicator, type SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/sidebar.js

@@ -1,100 +1,21 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator, skinSidebarLayout, skinSidebarWidth } from "../skin.js";
+import { skinSidebarLayout } from "../skin.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
-import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
-import { useIsMobile } from "../hooks/use-mobile.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { Suspense, createContext, lazy, useContext, useEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
+import { SidebarProvider, useSidebar } from "./sidebar-provider.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
-import { cva } from "class-variance-authority";
 //#region src/ui/sidebar.tsx
-const sidebarMenuButtonVariants = ["default", "outline"];
-const sidebarMenuButtonSizes = [
-	"default",
-	"sm",
-	"lg"
-];
-const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
-const SIDEBAR_COOKIE_MAX_AGE = 604800;
-const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const SIDEBAR_MOBILE_BREAKPOINT = 1024;
 const sidebarTriggerWidth = {
 	xs: "w-[var(--control-h-xs)]",
 	sm: "w-[var(--control-h-sm)]",
 	md: "w-[var(--control-h-md)]",
 	lg: "w-[var(--control-h-lg)]"
 };
-const SidebarContext = createContext(null);
-function useSidebar() {
-	const context = useContext(SidebarContext);
-	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
-	return context;
-}
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }) {
-	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
-	const [openMobile, setOpenMobile] = useState(false);
-	const [_open, _setOpen] = useState(defaultOpen);
-	const open = openProp ?? _open;
-	const setOpen = (value) => {
-		const openState = typeof value === "function" ? value(open) : value;
-		if (setOpenProp) setOpenProp(openState);
-		else _setOpen(openState);
-		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-	};
-	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
-	const toggleRef = useRef(toggleSidebar);
-	useEffect(() => {
-		toggleRef.current = toggleSidebar;
-	});
-	useEffect(() => {
-		const handleKeyDown = (event) => {
-			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				toggleRef.current();
-			}
-		};
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, []);
-	const contextValue = {
-		state: open ? "expanded" : "collapsed",
-		open,
-		setOpen,
-		isMobile,
-		openMobile,
-		setOpenMobile,
-		toggleSidebar
-	};
-	const wrapperStyle = {
-		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
-		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-		...style
-	};
-	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(TooltipProvider, {
-			delay: 0,
-			children: /* @__PURE__ */ jsx("div", {
-				ref,
-				"data-control-ui": "sidebar",
-				"data-control-family": "sidebar",
-				"data-slot": "wrapper",
-				style: wrapperStyle,
-				className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
-				...props,
-				children
-			})
-		})
-	});
-}
 function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, className, children, style, ...props }) {
 	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 	const resolvedVariant = variant ?? skinSidebarLayout() ?? "sidebar";
@@ -118,11 +39,6 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 			open: openMobile,
 			onOpenChange: setOpenMobile,
 			children: /* @__PURE__ */ jsxs(SheetContent, {
-				ref,
-				"data-control-ui": "sidebar",
-				"data-control-family": "sidebar",
-				"data-slot": "root",
-				"data-surface": "panel",
 				side,
 				className: "w-(--sidebar-width) gap-0 p-0",
 				style: mobileSheetStyle,
@@ -130,11 +46,23 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 					className: "sr-only",
 					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
 				}), /* @__PURE__ */ jsx("div", {
+					ref,
 					"data-control-ui": "sidebar",
 					"data-control-family": "sidebar",
-					"data-slot": "inner",
-					className: "flex h-full w-full flex-col",
-					children
+					"data-slot": "root",
+					"data-surface": "panel",
+					"data-mobile": "",
+					"data-side": side,
+					className: cn("flex min-h-0 flex-1 flex-col", className),
+					style,
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-control-ui": "sidebar",
+						"data-control-family": "sidebar",
+						"data-slot": "inner",
+						className: "flex min-h-0 flex-1 flex-col",
+						children
+					})
 				})]
 			})
 		});
@@ -173,11 +101,13 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 	});
 }
 function SidebarTrigger({ className, onClick, size = "sm", ...props }) {
-	const { toggleSidebar } = useSidebar();
+	const { toggleSidebar, isMobile, openMobile, open } = useSidebar();
 	return /* @__PURE__ */ jsxs(Button, {
 		"data-control-ui": "sidebar",
 		"data-slot": "trigger",
+		"data-sidebar-trigger": "",
 		variant: "ghost",
+		"aria-expanded": isMobile ? openMobile : open,
 		size,
 		className: cn(sidebarTriggerWidth[size], "px-0", className),
 		onClick: (event) => {
@@ -211,7 +141,7 @@ function SidebarInset({ className, ...props }) {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "inset",
-		className: cn("relative flex w-full flex-1 flex-col", className),
+		className: cn("relative flex min-w-0 w-full flex-1 flex-col", className),
 		...props
 	});
 }
@@ -249,114 +179,5 @@ function SidebarContent({ className, children, ...props }) {
 		})
 	});
 }
-function SidebarGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "group",
-		className: cn("relative flex w-full min-w-0 flex-col", className),
-		...props
-	});
-}
-function SidebarGroupLabel({ className, render, children, ...props }) {
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: {
-			...props,
-			"data-control-ui": "sidebar",
-			"data-control-family": "sidebar",
-			"data-slot": "group-label",
-			className: cn("flex h-[var(--control-h-sm)] shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-[var(--control-h-sm)] group-data-[collapsible=icon]:opacity-0", className),
-			children
-		}
-	});
-}
-const SidebarMenuContext = createContext("none");
-function SidebarMenu({ className, indicator, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
-	const sliding = resolvedIndicator === "slide";
-	const list = /* @__PURE__ */ jsx("ul", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu",
-		"data-indicator": resolvedIndicator,
-		className: cn("flex w-full min-w-0 flex-col", sliding ? void 0 : className),
-		...props,
-		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
-			value: resolvedIndicator,
-			children
-		})
-	});
-	if (!sliding) return list;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu-track",
-		"data-indicator": resolvedIndicator,
-		className: cn("relative isolate", className),
-		children: [/* @__PURE__ */ jsx(Suspense, {
-			fallback: null,
-			children: /* @__PURE__ */ jsx(TrackHighlight, {
-				itemSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"]",
-				activeSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"][data-active]"
-			})
-		}), list]
-	});
-}
-function SidebarMenuItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx("li", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu-item",
-		className: cn("group/menu-item relative", className),
-		...props
-	});
-}
-const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
-	variants: {
-		variant: {
-			default: null,
-			outline: null
-		},
-		size: {
-			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
-			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
-			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
-	const { isMobile, state } = useSidebar();
-	const button = useRender({
-		defaultTagName: "button",
-		render,
-		props: {
-			...props,
-			"data-control-ui": "sidebar",
-			"data-control-family": "sidebar",
-			"data-slot": "menu-button",
-			"data-size": size,
-			"data-variant": variant,
-			"data-active": isActive || void 0,
-			className: cn(sidebarMenuButtonClasses({
-				variant,
-				size
-			}), className),
-			children
-		}
-	});
-	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "right",
-		align: "center",
-		hidden: state !== "collapsed" || isMobile,
-		children: tooltip
-	})] });
-}
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/table-of-contents.js

@@ -12,9 +12,6 @@ const tableOfContentsVariants = [
 const DETECTION_MARGIN = "-80px 0px -20% 0px";
 const TOC_ITEM_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"]";
 const TOC_ACTIVE_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"][data-active]";
-const tableOfContentsItemClass = "block";
-const tableOfContentsHighlightClass = "";
-const tableOfContentsTrailClass = "absolute inset-y-0 left-0 w-0.5";
 function getScrollContainer(el) {
 	let node = el.parentElement;
 	while (node) {
@@ -91,8 +88,6 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 	const normalizedItems = normalizeItems(items, Math.min(...collectLevels(items), 2));
 	const targetIds = flattenItems(normalizedItems).map((item) => item.href.replace(/^#/, ""));
 	const activeSet = activeIdsInRange(useVisibleSections(targetIds), targetIds);
-	const railStyle = style;
-	const highlightStyle = style;
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsxs("nav", {
 		"data-control-ui": "table-of-contents",
@@ -119,8 +114,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					"data-control-ui": "table-of-contents",
 					"data-control-family": "table-of-contents",
 					"data-slot": "rail",
-					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px",
-					style: railStyle
+					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px"
 				}),
 				/* @__PURE__ */ jsx(TrackHighlight, {
 					"data-variant": variant,
@@ -128,14 +122,12 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					activeSelector: TOC_ACTIVE_SELECTOR,
 					range: true,
 					followHover: false,
-					style: highlightStyle,
-					className: tableOfContentsHighlightClass,
 					children: variant !== "background" && /* @__PURE__ */ jsx("div", {
 						"aria-hidden": true,
 						"data-control-ui": "table-of-contents",
 						"data-control-family": "table-of-contents",
 						"data-slot": "trail",
-						className: tableOfContentsTrailClass
+						className: "absolute inset-y-0 left-0 w-0.5"
 					})
 				}),
 				/* @__PURE__ */ jsx(TocList, {
@@ -167,7 +159,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 				"data-depth": item.depth,
 				"aria-current": isActive ? "location" : void 0,
 				href: item.href,
-				className: tableOfContentsItemClass,
+				className: "block",
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,

package/dist/ui/toggle.d.ts

@@ -1,4 +1,4 @@
-import { ControlledMultiChoice } from "../control-props.js";
+import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ButtonProps } from "./button.js";
 import { ComponentProps } from "react";
 //#region src/ui/toggle.d.ts
@@ -13,8 +13,9 @@ type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<"div
   multiple?: boolean;
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 };
 declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
-declare function ToggleGroup<TValue extends string = string>({ className, orientation, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
+declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
 //#endregion
 export { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps };

package/dist/ui/toggle.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { buttonContentClasses, buttonStructureClasses } from "./button.js";
+import { skinIndicator } from "../skin.js";
+import { ButtonTrackContext, buttonContentClasses, buttonStructureClasses, buttonTrackStructureClasses } from "./button.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/ui/toggle.tsx
 function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
+	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Toggle$1, {
+		"data-track-item": tracksHover ? "" : void 0,
 		pressed,
 		defaultPressed,
 		onPressedChange,
@@ -56,15 +61,22 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, sh
 		children
 	});
 }
-function ToggleGroup({ className, orientation = "horizontal", ...props }) {
-	return /* @__PURE__ */ jsx(ToggleGroup$1, {
-		"data-control-ui": "toggle",
-		"data-control-family": "button",
-		"data-slot": "group",
-		"data-orientation": orientation,
-		orientation,
-		className: cn("inline-flex items-center", orientation === "vertical" && "flex-col", className),
-		...props
+function ToggleGroup({ className, orientation = "horizontal", indicator, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("toggle-group") ?? "none";
+	const tracksHover = resolvedIndicator === "hover";
+	return /* @__PURE__ */ jsx(ButtonTrackContext, {
+		value: tracksHover,
+		children: /* @__PURE__ */ jsxs(ToggleGroup$1, {
+			"data-control-ui": "toggle",
+			"data-control-family": "button",
+			"data-slot": "group",
+			"data-orientation": orientation,
+			"data-track": resolvedIndicator,
+			orientation,
+			className: cn(buttonTrackStructureClasses, "inline-flex items-center data-[track=hover]:gap-0", orientation === "vertical" && "flex-col", className),
+			...props,
+			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
+		})
 	});
 }
 //#endregion

package/dist/ui/tree.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { skinIndicator } from "../skin.js";
-import { Children, Suspense, createContext, isValidElement, lazy, useContext, useRef, useState } from "react";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { Children, createContext, isValidElement, useContext, 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 { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
-const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
 const TYPEAHEAD_TIMEOUT = 500;
 const TreeContext = createContext(null);
 function useTree() {
@@ -211,17 +211,14 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 		toggleExpanded,
 		setFocusedValue
 	};
-	const rootStyle = style;
 	const sliding = resolvedIndicator === "slide";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "tree",
 		"data-control-family": "tree",
-		"data-indicator": resolvedIndicator,
-		"data-slot": "root",
+		"data-slot": "list",
 		role: "tree",
 		"aria-multiselectable": selectionMode === "multiple" || void 0,
-		className: cn("flex flex-col", sliding ? void 0 : className),
-		style: sliding ? void 0 : rootStyle,
+		className: "flex flex-col",
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			handleTreeKeyDown(event, contextValue, typeahead);
@@ -238,21 +235,18 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 	});
 	return /* @__PURE__ */ jsx(TreeContext.Provider, {
 		value: contextValue,
-		children: sliding ? /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			"data-control-ui": "tree",
 			"data-control-family": "tree",
-			"data-slot": "track",
+			"data-slot": "root",
 			"data-indicator": resolvedIndicator,
-			className: cn("relative isolate", className),
-			style: rootStyle,
-			children: [/* @__PURE__ */ jsx(Suspense, {
-				fallback: null,
-				children: /* @__PURE__ */ jsx(TrackHighlight, {
-					itemSelector: "[data-control-ui=tree][data-slot=item-trigger]",
-					activeSelector: "[data-control-ui=tree][data-slot=item-trigger][data-selected]"
-				})
-			}), list]
-		}) : list
+			className: cn(sliding && "relative isolate", className),
+			style,
+			children: [sliding ? /* @__PURE__ */ jsx(TrackHighlight, {
+				itemSelector: "[data-control-ui=tree][data-slot=item-trigger]",
+				activeSelector: "[data-control-ui=tree][data-slot=item-trigger][data-selected]"
+			}) : null, list]
+		})
 	});
 }
 function TreeItem({ value, disabled = false, label, className, style, children, ref, ...props }) {