@fumadocs/base-ui 16.7.14 → 16.7.16

package/css/generated/shared.css

@@ -15,7 +15,6 @@
 @source inline("--anchor-width");
 @source inline("--available-height");
 @source inline("--available-width");
-@source inline("--b");
 @source inline("--callout-color");
 @source inline("--collapsible-panel-height");
 @source inline("--color-fd-");
@@ -24,6 +23,8 @@
 @source inline("--easing");
 @source inline("--fd-animated-height");
 @source inline("--fd-banner-height");
+@source inline("--offset-distance");
+@source inline("--opacity");
 @source inline("--padding-right");
 @source inline("--popup-height");
 @source inline("--popup-width");
@@ -31,7 +32,8 @@
 @source inline("--shiki-dark-bg");
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
-@source inline("--t");
+@source inline("--track-bottom");
+@source inline("--track-top");
 @source inline("--transform-origin");
 @source inline("-circle");
 @source inline("-mb-px");
@@ -65,6 +67,7 @@
 @source inline("[&_svg]:size-5");
 @source inline("[&_svg]:size-full");
 @source inline("[&_svg]:text-fd-muted-foreground");
+@source inline("[offset-distance:var(--offset-distance,0)]");
 @source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("about");
@@ -337,6 +340,7 @@
 @source inline("display");
 @source inline("displayName");
 @source inline("displayed");
+@source inline("distance");
 @source inline("div");
 @source inline("divide-fd-border");
 @source inline("divide-x");
@@ -459,8 +463,6 @@
 @source inline("group-data-[open]:rotate-180");
 @source inline("group-data-[panel-open]:rotate-90");
 @source inline("group-data-active:bg-fd-primary");
-@source inline("group-first:[--t:--spacing(0.75)]");
-@source inline("group-last:[--b:--spacing(0.75)]");
 @source inline("groupListeners");
 @source inline("guides");
 @source inline("h");
@@ -542,6 +544,8 @@
 @source inline("invisible");
 @source inline("is");
 @source inline("isActive");
+@source inline("isFirst");
+@source inline("isLast");
 @source inline("isLoading");
 @source inline("isOpen");
 @source inline("isTabActive");
@@ -671,6 +675,7 @@
 @source inline("my-4");
 @source inline("my-6");
 @source inline("my-auto");
+@source inline("n");
 @source inline("name");
 @source inline("namespace");
 @source inline("nav");
@@ -715,7 +720,6 @@
 @source inline("of");
 @source inline("official");
 @source inline("offset");
-@source inline("offsetDistance");
 @source inline("offsetPath");
 @source inline("offsetTop");
 @source inline("on");
@@ -741,6 +745,7 @@
 @source inline("onTagChangeCallback");
 @source inline("onValueChange");
 @source inline("only");
+@source inline("opacity-(--opacity,0)");
 @source inline("opacity-0");
 @source inline("open");
 @source inline("opening");
@@ -754,6 +759,7 @@
 @source inline("origin-(--transform-origin)");
 @source inline("original");
 @source inline("other");
+@source inline("out");
 @source inline("outer");
 @source inline("outline");
 @source inline("outline-none");
@@ -786,6 +792,7 @@
 @source inline("path");
 @source inline("pathname");
 @source inline("paths");
+@source inline("pb-0");
 @source inline("pb-2");
 @source inline("pe-2");
 @source inline("peer");
@@ -853,6 +860,7 @@
 @source inline("rainbowColors");
 @source inline("raw");
 @source inline("rawTree");
+@source inline("re-exported");
 @source inline("react");
 @source inline("react-dom");
 @source inline("react-hooks/exhaustive-deps");
@@ -909,7 +917,6 @@
 @source inline("rtl:rotate-180");
 @source inline("rtl:rotate-90");
 @source inline("s");
-@source inline("scale");
 @source inline("scope");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
@@ -1067,6 +1074,7 @@
 @source inline("title");
 @source inline("to");
 @source inline("toc");
+@source inline("tocInfo");
 @source inline("tocNoHeadings");
 @source inline("toolbar");
 @source inline("top");
@@ -1076,14 +1084,12 @@
 @source inline("top-2");
 @source inline("top-2.5");
 @source inline("top-4");
-@source inline("top-[calc(50%-var(--t,0px)+var(--b,0px))]");
-@source inline("topL");
 @source inline("touch");
 @source inline("transform");
 @source inline("transition-[clip-path]");
 @source inline("transition-[height,opacity]");
 @source inline("transition-[height]");
-@source inline("transition-[offset-distance]");
+@source inline("transition-[opacity,offset-distance]");
 @source inline("transition-[opacity,transform,translate]");
 @source inline("transition-[opacity,transform,width,height,scale,translate]");
 @source inline("transition-all");

package/css/lib/shiki.css

@@ -95,3 +95,14 @@
     font-style: var(--shiki-dark-font-style);
   }
 }
+
+/* inline code */
+code.shiki span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+}
+
+.dark code.shiki span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+}

package/dist/components/toc/clerk.d.ts

@@ -10,6 +10,7 @@ declare function TOCItems({
   ref,
   className,
   thumbBox,
+  children,
   ...props
 }: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;

package/dist/components/toc/clerk.js

@@ -5,7 +5,7 @@ import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { useTOCItems } from "./index.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/clerk.tsx
 var clerk_exports = /* @__PURE__ */ __exportAll({
@@ -13,7 +13,7 @@ var clerk_exports = /* @__PURE__ */ __exportAll({
 	TOCItem: () => TOCItem,
 	TOCItems: () => TOCItems
 });
-function TOCItems({ ref, className, thumbBox = true, ...props }) {
+function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
 	const [svg, setSvg] = useState(null);
@@ -78,12 +78,12 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 		if (thumbBox) {
 			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 			path.setAttribute("d", d);
-			let l = 0;
-			for (const [top, bottom] of positions) {
-				while (path.getPointAtLength(l).y < top) l++;
-				const topL = l;
-				while (path.getPointAtLength(l).y < bottom) l++;
-				itemLineLengths.push([topL, l]);
+			const n = path.getTotalLength();
+			for (let i = 0; i < positions.length; i++) {
+				const [top, bottom] = positions[i];
+				let l = i > 0 ? itemLineLengths[i - 1][1] + (top - positions[i - 1][1]) : top;
+				while (l < n && path.getPointAtLength(l).y < top) l++;
+				itemLineLengths.push([l, l + bottom - top]);
 			}
 		}
 		setSvg({
@@ -105,18 +105,15 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			observer.unobserve(container);
 		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-0 inset-s-0",
-		style: {
-			width: svg.width,
-			height: svg.height
-		},
-		children: [/* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
-	}), /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref: mergeRefs(containerRef, ref),
-		className: cn("flex flex-col", className),
-		...props
-	})] });
+		className: cn("relative flex flex-col", className),
+		...props,
+		children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+			computed: svg,
+			thumbBox
+		}), children]
+	});
 }
 function TOCEmpty() {
 	const { text } = useI18n();
@@ -125,48 +122,60 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
-function ThumbTrack({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: `0 0 ${computed.width} ${computed.height}`,
-		className: "absolute transition-[clip-path]",
+function ThumbTrack({ computed, thumbBox }) {
+	const ref = useRef(null);
+	const previousRef = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	function calculate(items) {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		const endIdx = items.findLastIndex((item) => item.active);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		if (thumbBox) {
+			let isUp = false;
+			if (previousRef.current) {
+				const prev = previousRef.current;
+				isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+			}
+			previousRef.current = {
+				startIdx,
+				endIdx,
+				isUp
+			};
+			out["--offset-distance"] = isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`;
+			out["--opacity"] = items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1";
+		}
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "absolute top-0 inset-s-0",
 		style: {
 			width: computed.width,
 			height: computed.height,
-			clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})`
+			...calculate(tocInfo.get())
 		},
-		children: computed.content
-	});
-}
-function ThumbBox({ computed }) {
-	const items = Primitive.useItems();
-	const previousRef = useRef(null);
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	let isUp = false;
-	if (previousRef.current) {
-		const prev = previousRef.current;
-		isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
-	}
-	previousRef.current = {
-		startIdx,
-		endIdx,
-		isUp
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "absolute size-1 bg-fd-primary rounded-full transition-[offset-distance]",
-		style: {
-			offsetPath: `path("${computed.d}")`,
-			offsetDistance: isUp ? computed.itemLineLengths[startIdx][0] : computed.itemLineLengths[endIdx][1],
-			scale: items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1"
-		}
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		}), thumbBox && /* @__PURE__ */ jsx("div", {
+			className: "absolute size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
+			style: { offsetPath: `path("${computed.d}")` }
+		})]
 	});
 }
 const a = 8;
@@ -182,11 +191,13 @@ function getLineOffset(depth) {
 }
 function TOCItem({ item, ...props }) {
 	const items = useTOCItems();
-	const { lowerOffset, offset, upperOffset } = useMemo(() => {
+	const { lowerOffset, offset, upperOffset, isFirst, isLast } = useMemo(() => {
 		const index = items.indexOf(item);
 		const offset = getLineOffset(item.depth);
 		return {
 			offset,
+			isFirst: index === 0,
+			isLast: index === items.length - 1,
 			upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
 			lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
 		};
@@ -194,7 +205,7 @@ function TOCItem({ item, ...props }) {
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
 		...props,
-		className: cn("group prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", props.className),
+		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary", isFirst && "pt-0", isLast && "pb-0", props.className),
 		style: {
 			paddingInlineStart: getItemOffset(item.depth),
 			...props.style
@@ -222,8 +233,11 @@ function TOCItem({ item, ...props }) {
 				style: { insetInlineStart: offset }
 			}),
 			item._step !== void 0 && /* @__PURE__ */ jsx("div", {
-				className: "absolute flex items-center justify-center -translate-1/2 -z-1 top-[calc(50%-var(--t,0px)+var(--b,0px))] size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none group-first:[--t:--spacing(0.75)] group-last:[--b:--spacing(0.75)]",
-				style: { insetInlineStart: offset },
+				className: "absolute flex items-center justify-center -translate-1/2 -z-1 size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none",
+				style: {
+					top: `calc(50% + ${(isFirst ? -.75 : 0) + (isLast ? .75 : 0)} * var(--spacing))`,
+					insetInlineStart: offset
+				},
 				children: item._step
 			}),
 			item.title

package/dist/components/toc/default.js

@@ -53,15 +53,29 @@ function TOCItems({ ref, className, ...props }) {
 	});
 }
 function TocThumb({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
+	const ref = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	function calculate(items) {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		const endIdx = items.findLastIndex((item) => item.active);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
-		style: { clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})` }
+		style: {
+			clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`,
+			...calculate(tocInfo.get())
+		}
 	});
 }
 function TOCEmpty() {

package/dist/components/ui/button.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
   color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
+  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion

package/dist/components/ui/navigation-menu.d.ts

@@ -6,7 +6,7 @@ import * as _$_base_ui_react0 from "@base-ui/react";
 //#region src/components/ui/navigation-menu.d.ts
 type NavigationMenuContentProps = NavigationMenu$1.Content.Props;
 type NavigationMenuTriggerProps = NavigationMenu$1.Trigger.Props;
-declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.NavigationMenuRootProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationMenu: <Value = any>(props: NavigationMenu$1.Root.Props<Value>) => React$1.JSX.Element;
 declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.NavigationMenuListProps, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
 declare function NavigationMenuItem({
   className,

package/dist/layouts/home/slots/header.d.ts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "icon" | "main" | "button" | null | undefined;
+  variant?: "button" | "main" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header(props: ComponentProps<'header'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/provider/base.d.ts

@@ -1,9 +1,9 @@
 import { SearchProviderProps } from "../contexts/search.js";
 import { DefaultSearchDialogProps } from "../components/dialog/search-default.js";
 import { I18nProviderProps } from "../contexts/i18n.js";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProviderProps, UseThemeProps, useTheme } from "next-themes";
 
 //#region src/provider/base.d.ts
 interface SearchOptions extends Omit<SearchProviderProps, 'children'> {
@@ -15,6 +15,14 @@ interface SearchOptions extends Omit<SearchProviderProps, 'children'> {
    */
   enabled?: boolean;
 }
+interface ThemeOptions extends ThemeProviderProps {
+  /**
+   * Enable `next-themes`
+   *
+   * @defaultValue true
+   */
+  enabled?: boolean;
+}
 interface RootProviderProps {
   /**
    * `dir` option for Base UI
@@ -25,16 +33,9 @@ interface RootProviderProps {
    */
   search?: Partial<SearchOptions>;
   /**
-   * Customise options of `next-themes`
+   * Customise options for `next-themes`
    */
-  theme?: Partial<ComponentPropsWithoutRef<typeof ThemeProvider>> & {
-    /**
-     * Enable `next-themes`
-     *
-     * @defaultValue true
-     */
-    enabled?: boolean;
-  };
+  theme?: ThemeOptions;
   i18n?: Omit<I18nProviderProps, 'children'>;
   children?: ReactNode;
 }
@@ -46,4 +47,4 @@ declare function RootProvider({
   i18n
 }: RootProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
+export { RootProvider, RootProviderProps, type UseThemeProps, useTheme };

package/dist/provider/base.js

@@ -3,7 +3,7 @@ import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
 import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider, useTheme } from "next-themes";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 //#region src/provider/base.tsx
 const DefaultSearchDialog = lazy(() => import("../components/dialog/search-default.js"));
@@ -32,4 +32,4 @@ function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
 	});
 }
 //#endregion
-export { RootProvider };
+export { RootProvider, useTheme };

package/dist/style.css

@@ -358,9 +358,6 @@
   .top-\[calc\(--spacing\(4\)\+var\(--fd-docs-row-3\)\)\] {
     top: calc(calc(var(--spacing) * 4) + var(--fd-docs-row-3));
   }
-  .top-\[calc\(50\%-var\(--t\,0px\)\+var\(--b\,0px\)\)\] {
-    top: calc(50% - var(--t,0px) + var(--b,0px));
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -920,6 +917,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -1675,6 +1675,9 @@
   .pr-\(--removed-body-scroll-bar-size\,0\) {
     padding-right: var(--removed-body-scroll-bar-size,0);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -1814,6 +1817,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\(--opacity\,0\) {
+    opacity: var(--opacity,0);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1885,8 +1891,8 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[offset-distance\] {
-    transition-property: offset-distance;
+  .transition-\[opacity\,offset-distance\] {
+    transition-property: opacity,offset-distance;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2004,6 +2010,9 @@
   .\[grid-area\:toc\] {
     grid-area: toc;
   }
+  .\[offset-distance\:var\(--offset-distance\,0\)\] {
+    offset-distance: var(--offset-distance,0);
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -2078,16 +2087,6 @@
       margin-bottom: calc(var(--spacing) * 2);
     }
   }
-  .group-first\:\[--t\:--spacing\(0\.75\)\] {
-    &:is(:where(.group):first-child *) {
-      --t: calc(var(--spacing) * 0.75);
-    }
-  }
-  .group-last\:\[--b\:--spacing\(0\.75\)\] {
-    &:is(:where(.group):last-child *) {
-      --b: calc(var(--spacing) * 0.75);
-    }
-  }
   .group-data-active\:bg-fd-primary {
     &:is(:where(.group)[data-active] *) {
       background-color: var(--color-fd-primary);
@@ -3237,6 +3236,14 @@
     font-style: var(--shiki-dark-font-style);
   }
 }
+code.shiki span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+}
+.dark code.shiki span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+}
 @layer base {
   body {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.7.14",
+  "version": "16.7.16",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -116,7 +116,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
+    "@base-ui/react": "^1.4.0",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.38.0",
@@ -124,13 +124,14 @@
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
+    "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "unist-util-visit": "^5.1.0",
     "@fumadocs/tailwind": "0.0.5"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.2",
-    "@tsdown/css": "^0.21.6",
+    "@tsdown/css": "^0.21.8",
     "@types/hast": "^3.0.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "^25.6.0",
@@ -138,12 +139,11 @@
     "@types/react-dom": "^19.2.3",
     "fuma-cli": "^0.0.5",
     "react-medium-image-zoom": "^5.4.3",
-    "shiki": "^4.0.2",
     "tailwindcss": "^4.2.2",
-    "tsdown": "0.21.7",
+    "tsdown": "0.21.8",
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.3.7",
-    "fumadocs-core": "16.7.14",
+    "fumadocs-core": "16.7.16",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -153,13 +153,9 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "shiki": "*",
-    "fumadocs-core": "16.7.14"
+    "fumadocs-core": "16.7.16"
   },
   "peerDependenciesMeta": {
-    "shiki": {
-      "optional": true
-    },
     "next": {
       "optional": true
     },