@botiverse/raft-ui 0.97.0 → 0.98.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.98.0](https://github.com/botiverse/raft-design/compare/v0.97.0...v0.98.0) (2026-11-13)
+
+### Added
+
+- **A side drawer's `DrawerBody` can scroll in a ScrollArea, with raft-ui's scrollbar in place of the platform's** ([Drawer › Scrolling in a ScrollArea](https://raft-design.botiverse.build/components/drawer/#scrolling-in-a-scrollarea)). In a drawer from the right or the left, `<DrawerBody unstable_scrollArea>` renders a frame (`data-slot="drawer-body-frame"`) around the body and binds the body as a ScrollArea with absolute gutters, as `DialogBody` does with the same prop. The body keeps `data-slot="drawer-body"`, `className`, `ref`, the native props, `render` and its children, and is still the flex column they are laid out in, so a layout written on it (`className="gap-4"`) is unchanged and its padding still scrolls with the content; `wrapperClassName` is the frame's class, for the classes that size the body in the drawer (`max-h-*`, `h-*`, `flex-*`). The body is a Tab stop only while it overflows and holds nothing that takes focus (a `tabIndex` of your own wins), so a form gains no stop and a long text that is only read can be scrolled with the keyboard, and a scroll stops at its end (`overscroll="contain"`). A bottom or top sheet ignores both props and renders the body as before.
+  - Why: a side drawer's body was one of the few regions that still scrolled natively, because the body is a flex column callers lay out themselves and ScrollArea's sticky gutters would add a gap before its first item. On Windows, and on a Mac set to always show scrollbars, a long drawer drew the platform's scrollbar, which takes room from the content when it appears. Absolute gutters put nothing inside the body, at the price of one element around it. A bottom sheet stays native: it is a phone surface, where the platform's scrollbar lies over the content and takes no room.
+  - Affects: nothing unless the prop is passed: without it, and in a bottom or top sheet with it, `DrawerBody` renders the same element and classes as before. It becomes the default in a later minor release, together with `DialogBody`'s, and the prop can be deleted then. With it, the frame, not the body, is the child of `DrawerContent`: a selector such as `[data-slot=drawer-content] > [data-slot=drawer-body]` no longer matches, a sizing class on the body moves to `wrapperClassName`, and `render` replaces the body inside the frame, not the drawer's flex child. The frame is a stacking context of its own, so a popup portaled into the body is drawn under the drawer's header; leave popups where raft-ui portals them. Swiping toward the drawer's edge still dismisses it, and a vertical drag on the body scrolls it. `DialogBody` renders the same DOM as before; its Tab-stop check now lives in a file both bodies share.
+  - Docs: https://raft-design.botiverse.build/components/drawer/#scrolling-in-a-scrollarea
+
+### Fixed
+
+- **A bottom sheet's `DrawerBody` scrolls** ([Drawer › Behavior](https://raft-design.botiverse.build/components/drawer/#behavior)). In a `Drawer` from the bottom or the top (`swipeDirection="down"`, the default, or `"up"`), the body now has `min-h-0 overflow-y-auto` of its own: a body taller than the sheet's 82% of the window scrolls natively between `DrawerHeader` and `DrawerFooter`, which stay in the sheet. In a sheet with `snapPoints` the body scrolls only at its full height (the snap point `1`) and is cut at the sheet's bottom edge below it (`overflow-y-hidden`), so a drag up on the body still raises the sheet.
+  - Why: only a side drawer's body scrolled by itself. A sheet's body grew with its content past the sheet's bottom edge, so the footer and the end of a long list were under the window's edge and nothing scrolled to them, unless the caller added the two classes or rendered a scroller as the body. It is native, not a ScrollArea: a bottom sheet is a phone surface, where the platform's scrollbar lies over the content and takes no room, and a drag down at the top of the body has to start closing the sheet.
+  - Affects: a sheet whose body is taller than the sheet now keeps its footer in view and scrolls; a sheet with less content has the same box as before and no scrollbar, and its body is no Tab stop. A caller with its own `min-h-0 overflow-y-auto` on the body, or its own ScrollArea as the body (`render`), sees nothing: the classes are now redundant and can be removed, and so can a `// raft-ui: native-scroll` comment written for them. Swiping is unchanged where it worked: a drag down on the header or the grab handle closes the sheet, and so does one on the body while it is at its top; with the body scrolled down, a drag down scrolls it back first. A body that counted on painting past its own box (a shadow or a focus ring drawn outside a `p-0` body) is now clipped at the body's edge, as in any scroller; `className="min-h-auto overflow-visible"` restores the old box. The body is still a flex column, and its children no longer shrink (`shrink-0` at no specificity, in a sheet and in a side drawer, with or without `unstable_scrollArea`): a row of a fixed height written in the body (`h-13` with one line of text) used to be squashed to its text before the body scrolled, and now keeps its height. A child with `flex-1` or `shrink` still shrinks, so an inner scroller with `min-h-0 flex-1` scrolls as before; one with `min-h-0` alone and no `flex-1` now keeps its content's height and the body scrolls instead. The body's class list gains `[:where(&)>*]:shrink-0`. A side drawer scrolls as before, with and without `unstable_scrollArea`; its children keep their height in the same way.
+  - Docs: https://raft-design.botiverse.build/components/drawer/#behavior
+
 ## [0.97.0](https://github.com/botiverse/raft-design/compare/v0.96.1...v0.97.0) (2026-11-13)
 
 ### Added

package/dist/components/dialog/dialog.d.mts

@@ -62,7 +62,7 @@ export type DialogBodyProps = ComponentPropsWithRef<"div"> & {
    * platform's. A frame (`data-slot="dialog-body-frame"`) is rendered around
    * the body and holds the scrollbars; the body keeps its slot, `className`,
    * `ref`, native props and children, so a layout written on it
-   * (`grid gap-4`) is unchanged. It becomes the default in the next minor
+   * (`grid gap-4`) is unchanged. It becomes the default in a later minor
    * release: delete the prop then. A `bar` body ignores it.
    */
   unstable_scrollArea?: boolean;

package/dist/components/dialog/dialog.mjs

@@ -5,6 +5,7 @@ import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
 import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
+import { useHoldsFocusable } from "../../lib/holds-focusable.mjs";
 import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
@@ -351,49 +352,6 @@ function DialogBodyScrollArea({ className, wrapperClassName, children, ref, tabI
 		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
 	});
 }
-const FOCUSABLE = "a[href], button, input:not([type=\"hidden\"]), select, textarea, summary, iframe, audio[controls], video[controls], [contenteditable]:not([contenteditable=\"false\"]), [tabindex]";
-/** Whether Tab stops at `candidate`: enabled, not inert, and rendered. */
-function takesTab(candidate) {
-	if (!candidate.isContentEditable && candidate.tabIndex < 0) return false;
-	if (candidate.matches(":disabled") || candidate.closest("[inert]")) return false;
-	if (typeof candidate.checkVisibility !== "function") return true;
-	return candidate.checkVisibility({ visibilityProperty: true });
-}
-/** Whether `element` holds something Tab stops at, kept current as its content changes. */
-function useHoldsFocusable(element) {
-	const [holds, setHolds] = useState(true);
-	useEffect(() => {
-		if (!element) return;
-		const read = () => {
-			for (const candidate of element.querySelectorAll(FOCUSABLE)) if (takesTab(candidate)) {
-				setHolds(true);
-				return;
-			}
-			setHolds(false);
-		};
-		read();
-		if (typeof MutationObserver === "undefined") return;
-		const observer = new MutationObserver(read);
-		observer.observe(element, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			attributeFilter: [
-				"disabled",
-				"tabindex",
-				"href",
-				"inert",
-				"contenteditable",
-				"hidden",
-				"class",
-				"style",
-				"open"
-			]
-		});
-		return () => observer.disconnect();
-	}, [element]);
-	return holds;
-}
 function DialogFooter({ className, bar = false, hidden, children, ref, ...props }) {
 	const { sheet, bodyEndSlot } = useDialogSheet();
 	const items = Children.toArray(children);

package/dist/components/drawer/drawer.d.mts

@@ -21,8 +21,26 @@ export type DrawerHeaderProps = useRender.ComponentProps<"div">;
 export declare function DrawerHeader({ className, render, children, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerFooterProps = useRender.ComponentProps<"div">;
 export declare function DrawerFooter({ className, render, ...props }: DrawerFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type DrawerBodyProps = useRender.ComponentProps<"div">;
-export declare function DrawerBody({ className, render, ...props }: DrawerBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DrawerBodyProps = useRender.ComponentProps<"div"> & {
+  /**
+   * In a drawer from a side, scroll the body in a ScrollArea, with raft-ui's
+   * scrollbar in place of the platform's. A frame
+   * (`data-slot="drawer-body-frame"`) is rendered around the body and holds
+   * the scrollbars; the body keeps its slot, `className`, `ref`, native
+   * props, `render` and children, so a layout written on it (`gap-4`) is
+   * unchanged. It becomes the default in a later minor release: delete the
+   * prop then. A bottom or top sheet ignores it: its body is as without it.
+   */
+  unstable_scrollArea?: boolean;
+  /**
+   * With `unstable_scrollArea`, the class of the frame around the body: the
+   * classes that size the body in the drawer (`max-h-*`, `h-*`, `flex-*`) go
+   * here, not in `className`. Ignored without `unstable_scrollArea`, and in a
+   * bottom or top sheet.
+   */
+  wrapperClassName?: string;
+};
+export declare function DrawerBody({ className, render, unstable_scrollArea: scrollArea, wrapperClassName, ...props }: DrawerBodyProps): import("react").JSX.Element;
 export type DrawerActionsProps = useRender.ComponentProps<"div">;
 export declare function DrawerActions({ className, render, children, ...props }: DrawerActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerTitleProps = StyledProps<Drawer.Title.Props>;

package/dist/components/drawer/drawer.mjs

@@ -1,12 +1,15 @@
 import { cn } from "../../cn.mjs";
+import { useHoldsFocusable } from "../../lib/holds-focusable.mjs";
 import { PopupSheetContext, PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
 import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { drawer } from "./drawer.recipe.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { X } from "lucide-react";
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -169,9 +172,27 @@ function DrawerFooter({ className, render, ...props }) {
 		state: { slot: "drawer-footer" }
 	});
 }
-function DrawerBody({ className, render, ...props }) {
+function DrawerBody({ className, render, unstable_scrollArea: scrollArea = false, wrapperClassName, ...props }) {
 	const { swipeAxis } = useDrawerConfig();
-	const { body } = drawer({ axis: swipeAxis });
+	if (scrollArea && swipeAxis === "x") return /* @__PURE__ */ jsx(DrawerBodyScrollArea, {
+		className,
+		render,
+		wrapperClassName,
+		...props
+	});
+	return /* @__PURE__ */ jsx(DrawerBodyNative, {
+		className,
+		render,
+		swipeAxis,
+		...props
+	});
+}
+function DrawerBodyNative({ className, render, swipeAxis, ...props }) {
+	const { hasSnapPoints } = useDrawerConfig();
+	const { body } = drawer({
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
 	const defaultProps = { className: body({ className }) };
 	return useRender({
 		defaultTagName: "div",
@@ -180,6 +201,42 @@ function DrawerBody({ className, render, ...props }) {
 		state: { slot: "drawer-body" }
 	});
 }
+/**
+* A side drawer's DrawerBody as a ScrollArea with absolute gutters: nothing is
+* put inside the body, so its flex column holds only the caller's children.
+*/
+function DrawerBodyScrollArea({ className, render, wrapperClassName, ref, tabIndex, ...props }) {
+	const { bodyFrame, bodyScroll } = drawer();
+	const [body, setBody] = useState(null);
+	const setRef = useCallback((element) => {
+		setBody(element);
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	const holdsFocusable = useHoldsFocusable(body);
+	const { containerProps, frameProps, guttersProps } = useScrollAreaContainer({
+		containerRef: setRef,
+		guttersPosition: "absolute",
+		overscroll: "contain"
+	});
+	const defaultProps = { className: bodyScroll({ className: cn(containerProps.className, className) }) };
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref: containerProps.ref,
+		props: {
+			...mergeProps(defaultProps, props),
+			tabIndex: tabIndex ?? (holdsFocusable ? -1 : containerProps.tabIndex)
+		},
+		state: { slot: "drawer-body" }
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...frameProps,
+		"data-slot": "drawer-body-frame",
+		className: bodyFrame({ className: cn(frameProps.className, wrapperClassName) }),
+		children: [element, /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
+	});
+}
 function DrawerActions({ className, render, children, ...props }) {
 	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
 	const { actions } = drawer({ axis: swipeAxis });

package/dist/components/drawer/drawer.recipe.mjs

@@ -88,7 +88,17 @@ const drawer = tv({
 		closeButton: [barButton],
 		closeIcon: ["size-control-icon"],
 		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
-		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
+		body: [
+			"flex flex-1 flex-col",
+			"items-stretch px-4 pt-2 pb-4 text-left",
+			"[:where(&)>*]:shrink-0"
+		],
+		bodyFrame: ["min-h-0 flex-1"],
+		bodyScroll: [
+			"flex min-h-0 flex-1 flex-col",
+			"items-stretch px-(--surface-inset) pt-(--page-top) pb-(--page-inset) text-left",
+			"[:where(&)>*]:shrink-0"
+		],
 		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
 		actions: [
 			"flex w-full flex-col items-stretch",
@@ -159,7 +169,8 @@ const drawer = tv({
 					"before:left-1/2 before:-translate-x-1/2",
 					"h-4",
 					"before:top-1.5 before:h-1 before:w-9"
-				]
+				],
+				body: ["min-h-0 overflow-y-auto"]
 			}
 		}
 	},
@@ -169,7 +180,10 @@ const drawer = tv({
 	}, {
 		axis: "y",
 		snapPoints: true,
-		class: { popup: ["[--drawer-content-height:100dvh]"] }
+		class: {
+			popup: ["[--drawer-content-height:100dvh]"],
+			body: ["overflow-y-hidden group-data-expanded/drawer-popup:overflow-y-auto"]
+		}
 	}]
 });
 export { drawer };

package/dist/lib/holds-focusable.mjs

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+// src/lib/holds-focusable.ts
+const FOCUSABLE = "a[href], button, input:not([type=\"hidden\"]), select, textarea, summary, iframe, audio[controls], video[controls], [contenteditable]:not([contenteditable=\"false\"]), [tabindex]";
+/** Whether Tab stops at `candidate`: enabled, not inert, and rendered. */
+function takesTab(candidate) {
+	if (!candidate.isContentEditable && candidate.tabIndex < 0) return false;
+	if (candidate.matches(":disabled") || candidate.closest("[inert]")) return false;
+	if (typeof candidate.checkVisibility !== "function") return true;
+	return candidate.checkVisibility({ visibilityProperty: true });
+}
+/** Whether `element` holds something Tab stops at, kept current as its content changes. */
+function useHoldsFocusable(element) {
+	const [holds, setHolds] = useState(true);
+	useEffect(() => {
+		if (!element) return;
+		const read = () => {
+			for (const candidate of element.querySelectorAll(FOCUSABLE)) if (takesTab(candidate)) {
+				setHolds(true);
+				return;
+			}
+			setHolds(false);
+		};
+		read();
+		if (typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(read);
+		observer.observe(element, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"tabindex",
+				"href",
+				"inert",
+				"contenteditable",
+				"hidden",
+				"class",
+				"style",
+				"open"
+			]
+		});
+		return () => observer.disconnect();
+	}, [element]);
+	return holds;
+}
+export { useHoldsFocusable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",