@botiverse/raft-ui 0.71.0 → 0.73.0

package/dist/components/message-action-card/message-action-card.mjs

@@ -1,10 +1,10 @@
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Badge } from "../badge/badge.mjs";
 import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
 import { messageActionCard } from "./message-action-card.recipe.mjs";
 import { messageActionCardContent } from "./message-action-card-content.recipe.mjs";
 import { ChevronDown, Info, Zap } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -182,31 +182,18 @@ function MessageActionCardScopeListLabel({ className, render, ...props }) {
 	});
 }
 /**
-* Scrolls a long permission list. It is a Tab stop only while it overflows, so
-* keyboard users can scroll it; a short list adds no empty stop.
+* Scrolls a long permission list: a ScrollArea, so it is a Tab stop only while
+* it overflows (keyboard users can scroll it; a short list adds no empty stop),
+* and its overlay scrollbar takes no room from the rows.
 */
-function MessageActionCardScopeListViewport({ className, render, ...props }) {
-	const { scopeListViewport } = messageActionCardContent();
-	const [element, setElement] = useState(null);
-	const [overflows, setOverflows] = useState(false);
-	useEffect(() => {
-		if (element === null) return;
-		const measure = () => setOverflows(element.scrollHeight > element.clientHeight);
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-		for (const child of element.children) observer.observe(child);
-		return () => observer.disconnect();
-	}, [element]);
-	return useRender({
-		defaultTagName: "div",
-		render,
-		ref: setElement,
-		props: mergeProps({
-			className: scopeListViewport({ className }),
-			tabIndex: overflows ? 0 : void 0
-		}, props),
-		state: { slot: "message-action-card-scope-list-viewport" }
+function MessageActionCardScopeListViewport({ className, ...props }) {
+	const { scopeListViewport, scopeListViewportContent } = messageActionCardContent();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "message-action-card-scope-list-viewport",
+		overscroll: "contain",
+		...props,
+		className: scopeListViewport({ className }),
+		contentClassName: scopeListViewportContent()
 	});
 }
 function MessageActionCardScope({ className, render, ...props }) {
@@ -262,7 +249,7 @@ function MessageActionCardNotice({ className, render, icon, children, ...props }
 		render,
 		props: mergeProps({
 			className: notice({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
 		}, props),
 		state: { slot: "message-action-card-notice" }
 	});

package/dist/components/message-list/message-list.mjs

@@ -1,6 +1,6 @@
-import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
-import { PanelScrollViewport } from "../panel/panel.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { PanelNativeScrollViewport } from "../panel/panel.mjs";
 import { messageList } from "./message-list.recipe.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ function MessageList({ children, className, render, rootClassName, style, ...pro
 	if (isMobile) return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-list",
 		className: root({ className: rootClassName }),
-		children: /* @__PURE__ */ jsx(PanelScrollViewport, {
+		children: /* @__PURE__ */ jsx(PanelNativeScrollViewport, {
 			...props,
 			render,
 			"data-slot": "message-list-viewport",

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { MobileNavItemProps } from "./mobile-nav.mjs";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.mjs";
 import { ComponentPropsWithRef } from "react";
@@ -27,8 +28,9 @@ export type MobileNavServerPopoverContentProps = PopoverContentProps;
  * destinations and the footer after it stay in view.
  */
 export declare function MobileNavServerPopoverContent({ anchor, side, align, sideOffset, collisionPadding, className, ...props }: MobileNavServerPopoverContentProps): import("react").JSX.Element;
-export type MobileNavServerPopoverListProps = ComponentPropsWithRef<"div">;
-/** The server list: takes the room left in the popover and scrolls inside it. */
+export type MobileNavServerPopoverListProps = ScrollAreaProps;
+/** The server list: takes the room left in the popover and scrolls inside it,
+ *  a ScrollArea (a column with no gap, so its gutters move nothing). */
 export declare function MobileNavServerPopoverList({ className, ...props }: MobileNavServerPopoverListProps): import("react").JSX.Element;
 export type MobileNavServerPopoverGroupProps = ComponentPropsWithRef<"div">;
 /** Rows that always stay in view, such as the footer actions. */

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -1,4 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { MobileNavItem } from "./mobile-nav.mjs";
 import "../../lib/touch-drag.mjs";
 import { PopoverContent } from "../popover/popover.mjs";
@@ -17,7 +18,7 @@ const mobileNavServer = tv({ slots: {
 		"w-[calc(var(--anchor-width)-16px)] min-w-0",
 		"max-h-[min(60dvh,calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
 	],
-	list: ["flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-1"],
+	list: ["flex min-h-0 flex-1 flex-col p-1"],
 	group: ["flex shrink-0 flex-col p-1"],
 	row: [
 		"flex w-full shrink-0 cursor-default select-none items-center",
@@ -187,13 +188,16 @@ function MobileNavServerPopoverContent({ anchor, side = "top", align = "center",
 		...props
 	});
 }
-/** The server list: takes the room left in the popover and scrolls inside it. */
+/** The server list: takes the room left in the popover and scrolls inside it,
+*  a ScrollArea (a column with no gap, so its gutters move nothing). */
 function MobileNavServerPopoverList({ className, ...props }) {
 	const { list } = mobileNavServer();
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "mobile-nav-server-popover-list",
-		className: list({ className }),
-		...props
+		overscroll: "contain",
+		tabIndex: -1,
+		...props,
+		className: list({ className })
 	});
 }
 /** Rows that always stay in view, such as the footer actions. */

package/dist/components/notification-center/notification-center.d.mts

@@ -1,6 +1,7 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { VariantProps } from "../../lib/tv.mjs";
 import { ButtonProps } from "../button/button.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { EmptyStateProps } from "../empty-state/empty-state.mjs";
 import { useRender } from "@base-ui/react/use-render";
 import { Popover } from "@base-ui/react/popover";
@@ -198,8 +199,10 @@ export type NotificationCenterTitleProps = useRender.ComponentProps<"span">;
 export declare function NotificationCenterTitle({ render, className, ...props }: NotificationCenterTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type NotificationCenterCountProps = useRender.ComponentProps<"span">;
 export declare function NotificationCenterCount({ render, className, ...props }: NotificationCenterCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type NotificationCenterScrollerProps = useRender.ComponentProps<"div">;
-export declare function NotificationCenterScroller({ render, className, ...props }: NotificationCenterScrollerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterScrollerProps = ScrollAreaProps;
+/** The notices' scroller, a ScrollArea: `ref`, `className`, `render` and the
+ *  native props are the scrolling element's. */
+export declare function NotificationCenterScroller({ className, ...props }: NotificationCenterScrollerProps): import("react").JSX.Element;
 export type NotificationCenterListProps = useRender.ComponentProps<"ul">;
 export declare function NotificationCenterList({ render, className, ...props }: NotificationCenterListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type NotificationCenterItemProps = useRender.ComponentProps<"li"> & Pick<VariantProps<typeof notificationCenter>, "read">;

package/dist/components/notification-center/notification-center.mjs

@@ -2,6 +2,7 @@ import { headEdgePull } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Status } from "../status/status.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { EmptyState } from "../empty-state/empty-state.mjs";
@@ -36,7 +37,7 @@ const notificationCenter = tv({
 		],
 		title: ["font-sans text-headline text-foreground"],
 		count: ["ml-auto", "font-mono text-mono-meta text-foreground-hint"],
-		scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain"],
+		scroller: ["min-h-0 flex-1"],
 		list: [],
 		item: [
 			"group/notification-center-item relative px-4 py-3",
@@ -204,14 +205,15 @@ function NotificationCenterCount({ render, className, ...props }) {
 		state: { slot: "notification-center-count" }
 	});
 }
-function NotificationCenterScroller({ render, className, ...props }) {
+/** The notices' scroller, a ScrollArea: `ref`, `className`, `render` and the
+*  native props are the scrolling element's. */
+function NotificationCenterScroller({ className, ...props }) {
 	const { scroller } = notificationCenter();
-	const defaultProps = { className: scroller({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "notification-center-scroller" }
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "notification-center-scroller",
+		overscroll: "contain",
+		...props,
+		className: scroller({ className })
 	});
 }
 function NotificationCenterList({ render, className, ...props }) {

package/dist/components/panel/panel-action.mjs

@@ -1,6 +1,6 @@
 import { defaultNativeButton } from "../../lib/default-native-button.mjs";
-import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { panelAction } from "./panel-action.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";

package/dist/components/panel/panel.d.mts

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/panel/panel.d.ts
 export type PanelEdge = "attached" | "inset";
@@ -14,8 +15,15 @@ export type PanelHeaderRootProps = useRender.ComponentProps<"div">;
 export declare function PanelHeaderRoot({ className, render, ...props }: PanelHeaderRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type PanelBodyProps = useRender.ComponentProps<"div">;
 export declare function PanelBody({ className, render, ...props }: PanelBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type PanelScrollViewportProps = useRender.ComponentProps<"div">;
-export declare function PanelScrollViewport({ className, render, ...props }: PanelScrollViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelScrollViewportProps = ScrollAreaProps;
+/**
+ * The panel's one scroll container, a ScrollArea: its overlay scrollbar takes
+ * no room and looks the same on every platform, and a scroll that reaches the
+ * end stops there (`overscroll="contain"`). `ref`, `className`, `render` and
+ * the native props are the scrolling element's; ScrollArea's options pass
+ * through.
+ */
+export declare function PanelScrollViewport({ className, ...props }: PanelScrollViewportProps): import("react").JSX.Element;
 export type PanelScrollContentProps = useRender.ComponentProps<"div">;
 export declare function PanelScrollContent({ className, render, ...props }: PanelScrollContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type PanelSectionProps = useRender.ComponentProps<"section">;

package/dist/components/panel/panel.mjs

@@ -1,4 +1,6 @@
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { panel } from "./panel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/panel/panel.tsx
@@ -44,11 +46,32 @@ function PanelBody({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
-function PanelScrollViewport({ className, render, ...props }) {
+/**
+* The panel's one scroll container, a ScrollArea: its overlay scrollbar takes
+* no room and looks the same on every platform, and a scroll that reaches the
+* end stops there (`overscroll="contain"`). `ref`, `className`, `render` and
+* the native props are the scrolling element's; ScrollArea's options pass
+* through.
+*/
+function PanelScrollViewport({ className, ...props }) {
 	const { scrollViewport } = panel();
-	const defaultProps = {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "panel-scroll-viewport",
+		overscroll: "contain",
+		...props,
 		className: scrollViewport({ className })
+	});
+}
+/**
+* The panel's native scroller, for MessageList's phone path only, which
+* scrolls natively below 768px (message-list.md#behavior). Not exported from
+* the package.
+*/
+function PanelNativeScrollViewport({ className, render, ...props }) {
+	const { nativeScrollViewport } = panel();
+	const defaultProps = {
+		"data-slot": "panel-scroll-viewport",
+		className: nativeScrollViewport({ className })
 	};
 	return useRender({
 		defaultTagName: "div",
@@ -93,4 +116,4 @@ function PanelFooter({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { Panel, PanelBody, PanelFooter, PanelHeaderRoot, PanelScrollContent, PanelScrollViewport, PanelSection };
+export { Panel, PanelBody, PanelFooter, PanelHeaderRoot, PanelNativeScrollViewport, PanelScrollContent, PanelScrollViewport, PanelSection };

package/dist/components/panel/panel.recipe.mjs

@@ -5,7 +5,8 @@ const panel = tv({
 		root: ["[--panel-footer-clearance:10rem]", "bg-layer-canvas text-foreground"],
 		header: ["[@media(max-height:600px)]:h-(--header-height-short)"],
 		body: ["relative min-h-0 flex-1 overflow-hidden"],
-		scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
+		scrollViewport: ["h-full min-h-0", "[overflow-anchor:auto]"],
+		nativeScrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
 		scrollContent: ["min-h-full"],
 		section: ["border-t px-(--surface-inset) py-4", "border-line-hairline"],
 		footer: [

package/dist/components/search/search.d.mts

@@ -9,9 +9,11 @@ export declare function SearchShellRoot({ className, edge, render, ...props }: S
 export type SearchShellFiltersProps = ComponentPropsWithRef<"div">;
 export declare function SearchShellFilters({ className, ...props }: SearchShellFiltersProps): import("react").JSX.Element;
 export type SearchShellViewportProps = ComponentPropsWithRef<"div">;
-/** The results' scroller. It publishes its scrollbar's width for the result
- *  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-export declare function SearchShellViewport({ className, ref, ...props }: SearchShellViewportProps): import("react").JSX.Element;
+/** The results' scroller, a ScrollArea: its overlay scrollbar takes no room,
+ *  so the result cells' fills sit 8px from both edges with or without it
+ *  (design/patterns/lists.md). `ref`, `className` and the native props are the
+ *  scrolling element's. */
+export declare function SearchShellViewport({ className, ...props }: SearchShellViewportProps): import("react").JSX.Element;
 export type SearchResultsSummaryProps = useRender.ComponentProps<"span">;
 export declare function SearchResultsSummary({ className, render, ...props }: SearchResultsSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type SearchResultsSectionProps = useRender.ComponentProps<"div">;

package/dist/components/search/search.mjs

@@ -1,6 +1,5 @@
-import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Panel } from "../panel/panel.mjs";
-import { useScrollbarSize } from "../../lib/use-scrollbar-size.mjs";
 import { search } from "./search.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -23,17 +22,17 @@ function SearchShellFilters({ className, ...props }) {
 		...props
 	});
 }
-/** The results' scroller. It publishes its scrollbar's width for the result
-*  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-function SearchShellViewport({ className, ref, ...props }) {
+/** The results' scroller, a ScrollArea: its overlay scrollbar takes no room,
+*  so the result cells' fills sit 8px from both edges with or without it
+*  (design/patterns/lists.md). `ref`, `className` and the native props are the
+*  scrolling element's. */
+function SearchShellViewport({ className, ...props }) {
 	const { viewport } = search();
-	const scrollbarRef = useScrollbarSize();
-	const [setRef] = useMergedRef(ref, scrollbarRef);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "search-shell-viewport",
-		className: viewport({ className }),
+		overscroll: "contain",
 		...props,
-		ref: setRef
+		className: viewport({ className })
 	});
 }
 function SearchResultsSummary({ className, render, ...props }) {

package/dist/components/search/search.recipe.mjs

@@ -12,7 +12,7 @@ const search = tv({ slots: {
 		"border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3",
 		"md:pointer-fine:py-[calc((var(--header-height)-1px-var(--control-height))/2)]"
 	],
-	viewport: ["min-h-0 flex-1 overflow-y-auto scrollbar-list p-4", "bg-layer-canvas px-0 pt-0 pb-4"],
+	viewport: ["min-h-0 flex-1 p-4", "bg-layer-canvas px-0 pt-0 pb-4"],
 	summary: ["block", "mb-0 px-(--surface-inset) pt-2 font-sans text-footnote text-foreground-hint"],
 	section: ["mb-0"],
 	sectionHeading: [

package/dist/components/segmented-control/segmented-control.mjs

@@ -1,6 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
-import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
 import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/sidebar/sidebar.mjs

@@ -1,5 +1,5 @@
-import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { sidebarRecipe } from "./sidebar.recipe.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/components/tabs/tabs.mjs

@@ -1,6 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
-import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
 import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
 import { useDragSensors } from "../drag/drag-sensors.mjs";

package/dist/components/tasks/tasks-panel.d.mts

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/tasks/tasks-panel.d.ts
 export type TasksPanelRootProps = useRender.ComponentProps<"section">;
@@ -15,8 +16,11 @@ export type TasksPanelToolbarViewProps = useRender.ComponentProps<"div">;
 export declare function TasksPanelToolbarView({ className, render, ...props }: TasksPanelToolbarViewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TasksPanelToolbarLabelProps = useRender.ComponentProps<"span">;
 export declare function TasksPanelToolbarLabel({ className, render, ...props }: TasksPanelToolbarLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type TasksPanelViewportProps = useRender.ComponentProps<"div">;
-export declare function TasksPanelViewport({ className, render, ...props }: TasksPanelViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelViewportProps = ScrollAreaProps;
+/** The tasks' scroller, a ScrollArea in both directions (a board is wider
+ *  than the panel): `ref`, `className`, `render` and the native props are the
+ *  scrolling element's. */
+export declare function TasksPanelViewport({ className, ...props }: TasksPanelViewportProps): import("react").JSX.Element;
 export type TasksPanelEmptyProps = useRender.ComponentProps<"div">;
 export declare function TasksPanelEmpty({ className, render, ...props }: TasksPanelEmptyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/tasks/tasks-panel.mjs

@@ -1,4 +1,6 @@
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { tasksPanel } from "./tasks-panel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/tasks/tasks-panel.tsx
@@ -86,16 +88,17 @@ function TasksPanelToolbarLabel({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
-function TasksPanelViewport({ className, render, ...props }) {
+/** The tasks' scroller, a ScrollArea in both directions (a board is wider
+*  than the panel): `ref`, `className`, `render` and the native props are the
+*  scrolling element's. */
+function TasksPanelViewport({ className, ...props }) {
 	const { viewport } = tasksPanel();
-	const defaultProps = {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "tasks-panel-viewport",
+		orientation: "both",
+		overscroll: "contain",
+		...props,
 		className: viewport({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
 	});
 }
 function TasksPanelEmpty({ className, render, ...props }) {

package/dist/components/tasks/tasks-panel.recipe.mjs

@@ -26,7 +26,7 @@ const tasksPanel = tv({ slots: {
 		"font-sans text-footnote font-semibold text-foreground-muted whitespace-nowrap"
 	],
 	viewport: [
-		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
+		"min-h-0 flex-1 p-4",
 		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
 		"bg-layer-canvas px-(--surface-inset)",
 		"@max-md/tasks:px-4"

package/dist/components/toggle-group/toggle-group.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 import { defaultNativeButton } from "../../lib/default-native-button.mjs";
-import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";

package/dist/components/virtual-list/styles/virtual-list.css

@@ -18,6 +18,9 @@
  * scroll would restyle every row. Content that must follow the rows' offset uses `onTransformChange`.
  */
 @layer components {
+  /* VirtualList renders its own scroller (scroll-area.md#native-scrolling): it
+     hides its scrollbar unless asked, and takes ScrollArea's through
+     useScrollAreaContainer. */
   .r-virtual-list {
     max-height: inherit;
     overflow-anchor: none;

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import { Button, ButtonProps, ButtonSize, DeprecatedButtonSize, buttonVariants }
 import "./components/button/index.mjs";
 import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogBody, AlertDialogBodyProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogClose, AlertDialogCloseProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./components/alert-dialog/alert-dialog.mjs";
 import "./components/alert-dialog/index.mjs";
+import { ScrollAreaActions, ScrollAreaContainer, ScrollAreaContainerOptions, ScrollAreaContainerProps, ScrollAreaContentProps, ScrollAreaEdges, ScrollAreaFrameProps, ScrollAreaGuttersBinding, ScrollAreaGuttersPosition, ScrollAreaGuttersProps, ScrollAreaOptions, ScrollAreaOrientation, ScrollAreaOverscroll, ScrollAreaOwnProps, ScrollAreaProps, ScrollAreaRailInset, ScrollAreaScrollToElementOptions, ScrollAreaSize, ScrollAreaTextareaOwnProps, ScrollAreaTextareaProps, ScrollAreaTrigger } from "./components/scroll-area/types.mjs";
 import { PanelAction, PanelActionProps } from "./components/panel/panel-action.mjs";
 import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogNav, DialogNavProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogSurface, DialogSurfaceProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/dialog.mjs";
 import "./components/dialog/index.mjs";
@@ -92,7 +93,6 @@ import { CodeBlock, CodeBlockAction, CodeBlockActionProps, CodeBlockActions, Cod
 import "./components/code-block/index.mjs";
 import { InlineCode, InlineCodeProps } from "./components/inline-code/inline-code.mjs";
 import "./components/inline-code/index.mjs";
-import { ScrollAreaActions, ScrollAreaContainer, ScrollAreaContainerOptions, ScrollAreaContainerProps, ScrollAreaContentProps, ScrollAreaEdges, ScrollAreaFrameProps, ScrollAreaGuttersBinding, ScrollAreaGuttersPosition, ScrollAreaGuttersProps, ScrollAreaOptions, ScrollAreaOrientation, ScrollAreaOverscroll, ScrollAreaOwnProps, ScrollAreaProps, ScrollAreaRailInset, ScrollAreaScrollToElementOptions, ScrollAreaSize, ScrollAreaTextareaOwnProps, ScrollAreaTextareaProps, ScrollAreaTrigger } from "./components/scroll-area/types.mjs";
 import { MarkdownBlockquote, MarkdownBlockquoteProps, MarkdownCell, MarkdownCellProps, MarkdownCheckbox, MarkdownCheckboxProps, MarkdownHeaderCell, MarkdownHeaderCellProps, MarkdownHeading, MarkdownHeadingLevel, MarkdownHeadingProps, MarkdownImage, MarkdownImageProps, MarkdownInlineCode, MarkdownInlineCodeProps, MarkdownLink, MarkdownLinkProps, MarkdownList, MarkdownListItem, MarkdownListItemProps, MarkdownListProps, MarkdownMark, MarkdownMarkProps, MarkdownOrderedList, MarkdownOrderedListProps, MarkdownParagraph, MarkdownParagraphProps, MarkdownRule, MarkdownRuleProps, MarkdownTable, MarkdownTableProps, MarkdownTableRow, MarkdownTableRowProps, MarkdownTableScroll, MarkdownTableScrollProps } from "./components/markdown/markdown-parts.mjs";
 import "./components/markdown/index.mjs";
 import { MessageItem, MessageItemProps } from "./components/message-item/message-item-root.mjs";

package/dist/index.mjs

@@ -4,6 +4,9 @@ import { useTheme } from "./lib/theme/use-theme.mjs";
 import { Spinner } from "./components/spinner/spinner.mjs";
 import { Button, buttonVariants } from "./components/button/button.mjs";
 import { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/alert-dialog/alert-dialog.mjs";
+import { ScrollAreaGutters } from "./components/scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "./components/scroll-area/use-scroll-area-container.mjs";
+import { ScrollArea, ScrollAreaContent } from "./components/scroll-area/scroll-area.mjs";
 import { TextLink, TextLinkExternalIcon, textLinkVariants } from "./components/text-link/text-link.mjs";
 import { PanelAction } from "./components/panel/panel-action.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogNav, DialogOverlay, DialogPortal, DialogSurface, DialogTitle, DialogTrigger } from "./components/dialog/dialog.mjs";
@@ -19,9 +22,6 @@ import { AppRailFooter, AppRailHeader, AppRailItem, AppRailItemAttention, AppRai
 import { CopyableCode, CopyableCodeAction, CopyableCodeRoot } from "./components/copyable-code/copyable-code.mjs";
 import { CheckboxIndicator } from "./components/checkbox/checkbox-indicator.mjs";
 import { Checkbox } from "./components/checkbox/checkbox.mjs";
-import { ScrollAreaGutters } from "./components/scroll-area/scroll-area-gutters.mjs";
-import { useScrollAreaContainer } from "./components/scroll-area/use-scroll-area-container.mjs";
-import { ScrollArea, ScrollAreaContent } from "./components/scroll-area/scroll-area.mjs";
 import { ScrollAreaTextarea } from "./components/scroll-area/scroll-area-textarea.mjs";
 import { SidebarBody, SidebarContent, SidebarGroupLabel, SidebarHeader, SidebarHeaderTitle, SidebarRoot } from "./components/sidebar/sidebar.mjs";
 import { SidebarMenu, SidebarMenuAside, SidebarMenuCount, SidebarMenuIcon, SidebarMenuTitle } from "./components/sidebar/sidebar-menu.mjs";
@@ -125,7 +125,6 @@ import { TasksPanelEmpty, TasksPanelRoot, TasksPanelToolbar, TasksPanelToolbarFi
 import { TaskLoadingList, TaskLoadingRow } from "./components/tasks/task-loading.mjs";
 import { TaskChip } from "./components/tasks/task-chip.mjs";
 import { TaskStatusBadge } from "./components/tasks/task-status-badge.mjs";
-import { useScrollbarSize } from "./lib/use-scrollbar-size.mjs";
 import { ActivityInboxLoadingMore, ActivityInboxPanel, ActivityInboxViewport } from "./components/activity-inbox/activity-inbox-shell.mjs";
 import { ActivityInboxSidebar } from "./components/activity-inbox/activity-inbox-sidebar.mjs";
 import { ActivityInboxControls, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar } from "./components/activity-inbox/activity-inbox-toolbar.mjs";
@@ -136,6 +135,7 @@ import { SearchMessageResult, SearchMessageResultBody, SearchMessageResultHeader
 import { SearchThreadResult, SearchThreadResultHeader, SearchThreadResultMessages, SearchThreadResultMeta, SearchThreadResultTimestamp, SearchThreadResultTitle } from "./components/search/search-thread.mjs";
 import { SearchTrigger, SearchTriggerLabel, SearchTriggerShortcut } from "./components/search/search-trigger.mjs";
 import { LOCATED_MS, useLocated } from "./lib/located.mjs";
+import { useScrollbarSize } from "./lib/use-scrollbar-size.mjs";
 import { installInputModality } from "./lib/input-modality.mjs";
 import { ThemeProvider } from "./lib/theme/theme-provider.mjs";
 export { ActivityInboxControls, ActivityInboxLoadingMore, ActivityInboxPanel, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar, ActivityInboxSidebar, ActivityInboxViewport, AddCommentIcon, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppRailFooter, AppRailHeader, AppRailItem, AppRailItemAttention, AppRailItemBadge, AppRailItemIcon, AppRailItemIndicator, AppRailItemLabel, AppRailNav, AppRailRoot, AppShellMainSlot, AppShellOverlaySlot, AppShellPanelSlot, AppShellRailSlot, AppShellRoot, AppShellSidebarSlot, AppShellSidebarTrigger, ArtifactIcon, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerClose, BannerDescription, BannerTitle, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardLeading, CardTitle, CardTrailing, ChatIcon, Checkbox, CheckboxIndicator, CodeBlock, CodeBlockAction, CodeBlockActions, CodeBlockBody, CodeBlockHeader, CodeBlockPre, CodeBlockTitle, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerCount, ComboboxTriggerIndicator, ComboboxValue, CommentIcon, Composer, ComposerActions, ComposerAttachment, ComposerAttachmentBody, ComposerAttachmentFailedOverlay, ComposerAttachmentFile, ComposerAttachmentImage, ComposerAttachmentMeta, ComposerAttachmentRemove, ComposerAttachmentTitle, ComposerAttachmentUploadProgressBar, ComposerAttachmentUploadingOverlay, ComposerAttachments, ComposerAttachmentsScrollArea, ComposerDropOverlay, ComposerDropOverlayLabel, ComposerDropOverlayPrompt, ComposerIconButton, ComposerInput, ComposerMeta, ComposerRoot, ComposerSubmit, ComposerSuggestionAside, ComposerSuggestionContent, ComposerSuggestionGroup, ComposerSuggestionGroupLabel, ComposerSuggestionIcon, ComposerSuggestionList, ComposerSuggestionMeta, ComposerSuggestionOption, ComposerSuggestionTitle, ComposerToolbar, ComposerToolbarLabel, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuFooter, ContextMenuItem, ContextMenuItemLabel, ContextMenuLabel, ContextMenuPopup, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, ConversationPanelBody, ConversationPanelContent, ConversationPanelEmptyState, ConversationPanelEmptyStateBrand, ConversationPanelEmptyStateBrandMark, ConversationPanelFooter, ConversationPanelRoot, ConversationPanelTabs, CopyableCode, CopyableCodeAction, CopyableCodeRoot, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogNav, DialogOverlay, DialogPortal, DialogSurface, DialogTitle, DialogTrigger, DirectMessageIcon, Drawer, DrawerActions, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuItemLabel, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, FeedbackIcon, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileAction, FileActions, FileContent, FileImage, FileMeta, FileMetaItem, FileName, FilePreview, FilePreviewBadge, FilePreviewCode, FilePreviewDocument, FilePreviewFile, FilePreviewMedia, FileRow, FileRowOpen, FileThumbnail, FilesList, FilesPanel, FilesViewport, FollowArtifactIcon, FollowThreadIcon, FormSection, IconTile, InboxItem, InboxItemActions, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemHoverTarget, InboxItemLeading, InboxItemMarks, InboxItemMessage, InboxItemMetadata, InboxItemSelection, InboxItemSender, InboxItemSubtitle, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing, InboxItemTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, JoinChannelIcon, JoinJointChannelIcon, JoinPrivateChannelIcon, Kbd, KbdGroup, LOCATED_MS, Label, LabelAsterisk, LabelOptional, LabelSub, LeaveChannelIcon, LeaveJointChannelIcon, LeavePrivateChannelIcon, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxHeaderLabel, LightboxHeaderMeta, LightboxInfoActions, LightboxInfoBar, LightboxInfoDock, LightboxInfoTitle, LightboxMedia, LightboxNavigationButton, LightboxPortal, LightboxStage, LightboxThumbnail, LightboxThumbnailStrip, LightboxTitle, LightboxToolbar, LightboxTrigger, ListRow, ListRowBody, ListRowBottom, ListRowChevron, ListRowDescription, ListRowGroup, ListRowIcon, ListRowMeta, ListRowTitle, ListRowTop, ListRowValue, MarkdownBlockquote, MarkdownCell, MarkdownCheckbox, MarkdownHeaderCell, MarkdownHeading, MarkdownImage, MarkdownInlineCode, MarkdownLink, MarkdownList, MarkdownListItem, MarkdownMark, MarkdownOrderedList, MarkdownParagraph, MarkdownRule, MarkdownTable, MarkdownTableRow, MarkdownTableScroll, MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus, MessageAttachmentAction, MessageAttachmentCard, MessageAttachmentCommentSummary, MessageAttachmentDiffAddition, MessageAttachmentDiffDeletion, MessageAttachmentDiffSummary, MessageAttachmentGroup, MessageAttachmentMeta, MessageAttachmentMetaEnd, MessageAttachmentMetaStart, MessageAttachmentSummary, MessageAttachmentTitle, MessageEmbed, MessageEmbedContent, MessageEmbedFooter, MessageEmbedHeader, MessageForwardedBundle, MessageForwardedBundleAttachment, MessageForwardedBundleAttachmentMeta, MessageForwardedBundleAttachmentName, MessageForwardedBundleAttachments, MessageForwardedBundleFooter, MessageForwardedBundleFooterAction, MessageForwardedBundleGallery, MessageForwardedBundleGalleryTile, MessageForwardedBundleHeader, MessageForwardedBundleHeaderContent, MessageForwardedBundleHeaderCount, MessageForwardedBundleHeaderLabel, MessageForwardedBundleItem, MessageForwardedBundleItemAuthor, MessageForwardedBundleItemContent, MessageForwardedBundleItemMeta, MessageForwardedBundleItems, MessageForwardedBundleSource, MessageForwardedBundleSourceLabel, MessageIcon, MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryItem, MessageImageGalleryMedia, MessageImageGalleryOverlay, MessageImageGalleryPreview, MessageImageGalleryRow, MessageItem, MessageItemAttachments, MessageItemAvatarSlot, MessageItemBadge, MessageItemBadgeSeparator, MessageItemBody, MessageItemContent, MessageItemContinuationTime, MessageItemEdited, MessageItemEmbedded, MessageItemFooter, MessageItemGutter, MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemReadReceipt, MessageItemSavedIndicator, MessageItemSearchMatch, MessageItemSender, MessageItemSenderBadges, MessageItemSenderButton, MessageItemSenderGroup, MessageItemTime, MessageItemToolbar, MessageItemToolbarButton, MessageItemTranslationAction, MessageItemTranslationFailedStatus, MessageItemTranslationOriginal, MessageItemTranslationOriginalLabel, MessageItemTranslationProgressTrack, MessageItemTranslationRetryAction, MessageItemTranslationStatus, MessageList, MessageListDateDivider, MessageListEndFade, MessageListHistoryLimited, MessageListNotice, MessageMultiSelect, MessageMultiSelectCheckbox, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, MessageQuotedPreview, MessageQuotedPreviewAttachment, MessageQuotedPreviewAttachments, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorMeta, MessageQuotedPreviewAuthorName, MessageQuotedPreviewChannel, MessageQuotedPreviewContent, MessageQuotedPreviewHeader, MessageQuotedPreviewLoading, MessageQuotedPreviewText, MessageQuotedPreviewThread, MessageQuotedPreviewTimestamp, MessageQuotedPreviewUnavailable, MessageReactionAddButton, MessageReactionChip, MessageReactionCount, MessageReactionErrorIndicator, MessageReactionGlyph, MessageReactionPickerContent, MessageReactionPickerStatic, MessageReactionQuickButton, MessageReactionQuickRow, MessageReactionTooltipContent, MessageReactionTooltipMeta, MessageReactionTooltipName, MessageReactionTooltipNameText, MessageReactionTooltipNames, MessageReactionTooltipSeparator, MessageReferenceChip, MessageReferenceIndicator, MessageReferenceLabel, MessageReferencePending, MessageReferenceReadMark, MessageReferenceSuffix, MessageReferenceText, MessageReferenceUnavailable, MessageReplies, MessageRepliesItem, MessageRepliesItemContent, MessageRepliesItemSender, MessageRepliesItemTime, MessageRepliesSummary, MessageRepliesSummaryItem, MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewFailureAction, MessageVideoPreviewFailureContent, MessageVideoPreviewFailureIcon, MessageVideoPreviewFailureTitle, MessageVideoPreviewFallback, MessageVideoPreviewMedia, MobileNavItem, MobileNavLabel, MobileNavRoot, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, OtterIndicator, Panel, PanelAction, PanelActions, PanelActivity, PanelBody, PanelFooter, PanelHeader, PanelHeaderContent, PanelHeaderIcon, PanelHeaderRoot, PanelHeading, PanelMeta, PanelNotice, PanelNoticeActions, PanelNoticeContent, PanelScrollContent, PanelScrollViewport, PanelSection, PanelSectionHeader, PanelStatus, PanelTitle, PanelToggleAction, PickerTriggerButton, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, PreviewCard, PreviewCardArrow, PreviewCardContent, PreviewCardDescription, PreviewCardHeader, PreviewCardPopup, PreviewCardPortal, PreviewCardSeparator, PreviewCardTitle, PreviewCardTrigger, ProfilePanel, ProfilePanelBody, ProfilePanelHeader, ProfilePanelHeaderContent, ProfilePanelSection, Progress, ProgressHeader, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupIndicator, RadioGroupItem, RaftLogo, RaftLogoLockup, RaftWordmark, ReopenTaskIcon, ResizableGroup, ResizableHandle, ResizablePanel, SINGLE_IMAGE_MAX_HEIGHT, SINGLE_IMAGE_MAX_WIDTH, ScrollArea, ScrollAreaContent, ScrollAreaGutters, ScrollAreaTextarea, SearchEntityResult, SearchEntityResultActivity, SearchEntityResultContent, SearchEntityResultDescription, SearchEntityResultHeader, SearchEntityResultIcon, SearchEntityResultLeading, SearchEntityResultTitle, SearchMessageResult, SearchMessageResultBody, SearchMessageResultHeader, SearchMessageResultMatch, SearchMessageResultMeta, SearchMessageResultSender, SearchMessageResultThreadMeta, SearchMessageResultTimestamp, SearchResultsList, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSummary, SearchShellFilters, SearchShellRoot, SearchShellViewport, SearchThreadMessageResult, SearchThreadResult, SearchThreadResultHeader, SearchThreadResultMessages, SearchThreadResultMeta, SearchThreadResultTimestamp, SearchThreadResultTitle, SearchTrigger, SearchTriggerLabel, SearchTriggerShortcut, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectActionItem, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemDescription, SelectItemIndicator, SelectItemLeading, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarBody, SidebarContent, SidebarControl, SidebarGroupLabel, SidebarHeader, SidebarHeaderTitle, SidebarItem, SidebarItemAside, SidebarItemChannelIcon, SidebarItemContent, SidebarItemCount, SidebarItemCountSeparator, SidebarItemIcon, SidebarItemIndicator, SidebarItemMeta, SidebarItemMetaIcon, SidebarItemStatus, SidebarItemSubtitle, SidebarItemThreadCount, SidebarItemTitle, SidebarList, SidebarMenu, SidebarMenuAside, SidebarMenuCount, SidebarMenuIcon, SidebarMenuTitle, SidebarRoot, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionEndChevron, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing, Skeleton, SortableComposerAttachment, SortableComposerAttachments, SortableComposerAttachmentsScroll, SortableTabsList, SortableTabsTab, Spinner, Status, Step, Steps, Switch, SwitchThumb, SystemMessage, SystemMessageContent, SystemMessageGroup, SystemMessageGroupChevron, SystemMessageGroupDisclosure, SystemMessageGroupHeader, SystemMessageGroupPanel, SystemMessageGroupSummary, SystemMessageTime, TASK_STATUS_IDS, Table, TableBody, TableCaption, TableCell, TableColgroup, TableColumn, TableHead, TableHeader, TableRow, Tabs, TabsLabel, TabsList, TabsPanel, TabsTab, TaskBacklogIcon, TaskBoardColumn, TaskBoardColumnBadge, TaskBoardColumnChevron, TaskBoardColumnCount, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, TaskBoardColumnEmptyBlocked, TaskBoardColumnEmptyIdle, TaskBoardColumnHeading, TaskBoardColumnItems, TaskBoardColumnPanel, TaskBoardColumnTrigger, TaskBoardRoot, TaskCard, TaskCardBody, TaskCardChannel, TaskCardDescription, TaskCardLegacy, TaskCardMeta, TaskCardNumber, TaskCardRow, TaskCardStatus, TaskCardTitle, TaskChip, TaskClosedIcon, TaskDndProvider, TaskDoneIcon, TaskDragOverlay, TaskDraggable, TaskDropPlaceholder, TaskDropZone, TaskInProgressIcon, TaskInReviewIcon, TaskListRoot, TaskLoadingList, TaskLoadingRow, TaskSection, TaskSectionBadge, TaskSectionChevron, TaskSectionCount, TaskSectionEmpty, TaskSectionHeading, TaskSectionItems, TaskSectionPanel, TaskSectionTrigger, TaskStatusBadge, TaskStatusIcon, TaskTodoIcon, TasksPanelEmpty, TasksPanelRoot, TasksPanelToolbar, TasksPanelToolbarFilters, TasksPanelToolbarGroup, TasksPanelToolbarLabel, TasksPanelToolbarNewTask, TasksPanelToolbarView, TasksPanelViewport, Text, TextHeading, TextLink, TextLinkExternalIcon, TextMono, TextSans, TextSelectionToolbar, TextSelectionToolbarButton, TextSelectionToolbarSeparator, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, ThreadIcon, ThreadPanelActions, ThreadPanelBody, ThreadPanelContent, ThreadPanelFooter, ThreadPanelHeader, ThreadPanelOriginalMessage, ThreadPanelReplyCount, ThreadPanelReplySummary, ThreadPanelRoot, ThreadPanelSearch, ThreadPanelSearchCount, ThreadPanelSearchTrailing, ThreadPanelTitle, ThreadPanelTitleMeta, Timeline, TimelineContent, TimelineItem, TimelineTime, TimelineTitle, ToastAction, ToastActions, ToastArrow, ToastBody, ToastClose, ToastContent, ToastDescription, ToastIcon, ToastPortal, ToastPositioner, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToggleGroup, ToggleGroupItem, ToggleGroupLabel, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, UnfollowArtifactIcon, UnfollowThreadIcon, VirtualList, WorkspaceButton, WorkspaceButtonName, buildMessageImageGalleryRows, buttonVariants, classifyMessageImageAspect, cn, createTextSelectionAnchor, createToastManager, getTextSelectionFocusRect, installInputModality, taskStatusSoft, taskStatusStrong, textLinkVariants, toast, useComposerSuggestions, useLocated, useOrderedTabs, useScrollAreaContainer, useScrollbarSize, useTheme, useToastManager };

package/dist/lib/use-scrollbar-size.d.mts

@@ -10,6 +10,9 @@
  * deeper down that grows also grows the child that holds it. A child whose
  * box keeps its size while its content overflows it would not be seen.
  *
+ * For a native scroller that can't be a ScrollArea: a ScrollArea hides the
+ * native scrollbar and its own takes no room, so it needs none of this.
+ *
  * Returns a ref callback for the scroller.
  */
 export declare function useScrollbarSize<E extends HTMLElement>(): (el: E | null) => void;

package/dist/lib/use-scrollbar-size.mjs

@@ -11,6 +11,9 @@ import { useCallback, useRef } from "react";
 * deeper down that grows also grows the child that holds it. A child whose
 * box keeps its size while its content overflows it would not be seen.
 *
+* For a native scroller that can't be a ScrollArea: a ScrollArea hides the
+* native scrollbar and its own takes no room, so it needs none of this.
+*
 * Returns a ref callback for the scroller.
 */
 function useScrollbarSize() {

package/dist/styles.css

@@ -893,8 +893,9 @@ textarea:-webkit-autofill:disabled {
   --list-cell: 1;
 }
 
-/* The scrollbar of a scroller that holds list cells (design/patterns/
-   lists.md): an 8px classic scrollbar with a 4px thumb, so a cell's
+/* For a native scroller of list cells that can't be a ScrollArea
+   (design/patterns/lists.md; raft-ui's own list scrollers are ScrollAreas,
+   whose overlay scrollbar takes no room): an 8px classic scrollbar with a 4px thumb, so a cell's
    end inset can come out of the scrollbar's own width and its fill sits 8px
    from both edges of the list. Styling ::-webkit-scrollbar makes Chromium
    draw this classic, always-visible 8px bar even where the platform's own

package/package.json

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