@botiverse/raft-ui 0.72.0 → 0.73.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.73.0](https://github.com/botiverse/raft-design/compare/v0.72.0...v0.73.0) (2026-11-08)
+
+### Changed
+
+- **Every region that scrolls is a ScrollArea**: `PanelScrollViewport`, `ActivityInboxViewport`, `SearchShellViewport`, `NotificationCenterScroller`, `FilesViewport`, `TasksPanelViewport`, ChoiceList's scroller, `MobileNavServerPopoverList`, `ComposerSuggestionList`, `AnnouncementDialogBody`, `MessageActionCardScopeListViewport` and `DialogNav` show ScrollArea's overlay scrollbar instead of the platform's. Native scrolling stays only in the places scroll-area.md lists, each with its reason, and a test fails on any other. ([#1055](https://github.com/botiverse/raft-design/pull/1055))
+  - Why: one look for scrollbars on every platform and theme, and a scrollbar that takes no room from a list's 8px inset (Artea, #proj-raft-ui:#209).
+  - Affects: **keyboard order**: a `PanelScrollViewport` whose content overflows is now a Tab stop of its own, before the controls inside it (a scrolling region must be reachable by keyboard). Check tests that depend on Tab order when upgrading. `PanelScrollViewport`'s `data-slot` (`panel-scroll-viewport`) replaces ScrollArea's own `scroll-area` on that element, so a selector for `[data-slot=scroll-area]` doesn't match it. On a phone MessageList keeps its native scroller. ChoiceList, DialogNav, the mobile server list and the composer suggestions keep their scroller out of the Tab order (`tabIndex={-1}`), since their rows take focus. `scrollbar-list` and `useScrollbarSize` are now only for a native scroller that can't be a ScrollArea.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
+### Fixed
+
+- **FilterChipRemove**: on a touch screen its 44px tap area no longer reaches over the chip's label. It grows 10px up and down, 6px toward the label (exactly to its edge) and 14px outward, so a tap on the label's end no longer clears the filter. ([#1054](https://github.com/botiverse/raft-design/pull/1054))
+  - Why: the tap area grew 10px on every side, across the 6px gap and 4px into the label (Remy, #proj-workspace:#221).
+  - Affects: touch screens. Keep the next control 16px from the chip (was 12), since the tap area now reaches 10px past the chip's end.
+  - Docs: https://raft-design.botiverse.build/components/filter-chip/
+- **ArtifactIcon** is pinned to Lucide's `file-code` by a test, so a Lucide upgrade that changes that icon fails instead of letting the rail drift from the Artifact chip. ([#1054](https://github.com/botiverse/raft-design/pull/1054))
+
 ## [0.72.0](https://github.com/botiverse/raft-design/compare/v0.71.0...v0.72.0) (2026-11-07)
 
 ### Changed

package/dist/components/activity-inbox/activity-inbox-shell.d.mts

@@ -4,9 +4,12 @@ import { ComponentPropsWithRef } from "react";
 export type ActivityInboxPanelProps = ComponentPropsWithRef<typeof Panel>;
 export declare function ActivityInboxPanel({ className, ...props }: ActivityInboxPanelProps): import("react").JSX.Element;
 export type ActivityInboxViewportProps = ComponentPropsWithRef<"div">;
-/** The list's scroller. It publishes its scrollbar's width for the item
- *  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-export declare function ActivityInboxViewport({ className, ref, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
+/** The list's scroller, a ScrollArea container with absolute gutters: the
+ *  overlay scrollbar takes no room, so the item cells' fills sit 8px from both
+ *  edges with or without it (design/patterns/lists.md), and the scroller lays
+ *  out its own column of items. `ref`, `className` and the native props are
+ *  the scrolling element's; a frame around it holds the scrollbar. */
+export declare function ActivityInboxViewport({ children, className, ref, style, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
 export type ActivityInboxLoadingMoreProps = ComponentPropsWithRef<"div">;
 export declare function ActivityInboxLoadingMore({ className, ...props }: ActivityInboxLoadingMoreProps): import("react").JSX.Element;
 //#endregion

package/dist/components/activity-inbox/activity-inbox-shell.mjs

@@ -1,8 +1,10 @@
-import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { cn } from "../../cn.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { Panel } from "../panel/panel.mjs";
-import { useScrollbarSize } from "../../lib/use-scrollbar-size.mjs";
 import { activityInboxShell } from "./activity-inbox-shell.recipe.mjs";
-import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/activity-inbox/activity-inbox-shell.tsx
 function ActivityInboxPanel({ className, ...props }) {
 	const { panel } = activityInboxShell();
@@ -14,17 +16,34 @@ function ActivityInboxPanel({ className, ...props }) {
 		...props
 	});
 }
-/** The list's scroller. It publishes its scrollbar's width for the item
-*  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-function ActivityInboxViewport({ className, ref, ...props }) {
-	const { viewport } = activityInboxShell();
-	const scrollbarRef = useScrollbarSize();
-	const [setRef] = useMergedRef(ref, scrollbarRef);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "activity-inbox-viewport",
-		className: viewport({ className }),
-		...props,
-		ref: setRef
+/** The list's scroller, a ScrollArea container with absolute gutters: the
+*  overlay scrollbar takes no room, so the item cells' fills sit 8px from both
+*  edges with or without it (design/patterns/lists.md), and the scroller lays
+*  out its own column of items. `ref`, `className` and the native props are
+*  the scrolling element's; a frame around it holds the scrollbar. */
+function ActivityInboxViewport({ children, className, ref, style, ...props }) {
+	const { frame, viewport } = activityInboxShell();
+	const { containerProps, frameProps, guttersProps } = useScrollAreaContainer({
+		containerRef: ref,
+		guttersPosition: "absolute",
+		overscroll: "contain"
+	});
+	const ownStyle = useMemo(() => ({
+		...containerProps.style,
+		...style
+	}), [containerProps.style, style]);
+	return /* @__PURE__ */ jsxs("div", {
+		...frameProps,
+		"data-slot": "activity-inbox-viewport-frame",
+		className: frame({ className: frameProps.className }),
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "activity-inbox-viewport",
+			...containerProps,
+			...props,
+			style: ownStyle,
+			className: viewport({ className: cn(containerProps.className, className) }),
+			children
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
 	});
 }
 function ActivityInboxLoadingMore({ className, ...props }) {

package/dist/components/activity-inbox/activity-inbox-shell.recipe.mjs

@@ -7,7 +7,12 @@ const activityInboxShell = tv({ slots: {
 		"bg-layer-canvas font-sans text-foreground",
 		listColumnMargin
 	],
-	viewport: ["relative flex flex-1 flex-col gap-0.5 overflow-y-auto scrollbar-list *:shrink-0", "bg-layer-canvas px-0 pt-2 pb-[calc(8px+env(safe-area-inset-bottom,0px))]"],
+	frame: ["min-h-0 flex-1"],
+	viewport: [
+		"relative flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto *:shrink-0",
+		"outline-none focus-visible:shadow-focus",
+		"bg-layer-canvas px-0 pt-2 pb-[calc(8px+env(safe-area-inset-bottom,0px))]"
+	],
 	loadingMore: ["py-3 text-center", "text-caption text-foreground-hint"]
 } });
 //#endregion

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

@@ -1,11 +1,12 @@
 import { ButtonProps } from "../button/button.mjs";
 import "../button/index.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { Dialog, DialogClose, DialogContentProps, DialogTitleProps, DialogTrigger } from "../dialog/dialog.mjs";
 import "../dialog/index.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
-export declare function AnnouncementDialogBody({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogBody({ className, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export declare function AnnouncementDialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 export declare function AnnouncementDialogLabel({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 export declare function AnnouncementDialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;

package/dist/components/announcement-dialog/announcement-dialog.mjs

@@ -1,5 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "../dialog/dialog.mjs";
 import { useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const announcement = tv({ slots: {
 	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
 	body: [
-		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
+		"min-h-0 max-h-[70dvh] pb-5",
 		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
 		"px-(--surface-inset) pt-(--surface-inset)"
 	],
@@ -43,10 +44,10 @@ function AnnouncementDialogContent({ className, initialFocus, ref, ...props }) {
 }
 function AnnouncementDialogBody({ className, ...props }) {
 	const { body } = announcement();
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "announcement-body",
-		className: body({ className }),
-		...props
+		...props,
+		className: body({ className })
 	});
 }
 function AnnouncementDialogHeader({ className, ...props }) {

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

@@ -1,4 +1,5 @@
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Checkbox } from "../checkbox/checkbox.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/input-group.mjs";
@@ -255,8 +256,10 @@ function ChoiceList(props) {
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			"data-slot": "choice-list-frame",
 			className: slots.frame(),
-			children: [/* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsx(ScrollArea, {
 				"data-slot": "choice-list-scroller",
+				overscroll: "contain",
+				tabIndex: -1,
 				className: slots.scroller(),
 				children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
 					"data-slot": "choice-list-note",

package/dist/components/choice-list/choice-list.recipe.mjs

@@ -31,11 +31,11 @@ const choiceList = tv({
 		footer: ["shrink-0 border-t border-line-seam p-1"]
 	},
 	variants: {
-		scroll: { true: { scroller: ["max-h-72 overflow-y-auto overscroll-contain"] } },
+		scroll: { true: { scroller: ["max-h-72"] } },
 		fill: { true: {
 			root: ["flex min-h-0 flex-1 flex-col"],
 			frame: ["min-h-0 flex-1"],
-			scroller: ["flex-1 overflow-y-auto overscroll-contain"]
+			scroller: ["flex-1"]
 		} },
 		hasAction: { true: { item: ["pr-11"] } }
 	}

package/dist/components/combobox-select/combobox-select.css

@@ -181,6 +181,8 @@
     var(--elevation-float);
   outline: 0;
 }
+/* Native scroll, an allowed exception (scroll-area.md#native-scrolling): Base UI
+   owns the list element and its children (items can be a function of each item). */
 .r-combobox-select__list {
   box-sizing: border-box;
   max-height: var(--combobox-select-list-max-height, 16rem);

package/dist/components/composer/composer-suggestion-list.d.mts

@@ -1,4 +1,5 @@
 import { VariantProps } from "../../lib/tv.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/composer/composer-suggestion-list.d.ts
 declare const composerSuggestionList: import("tailwind-variants/lite").TVReturnType<{
@@ -113,8 +114,10 @@ declare const composerSuggestionList: import("tailwind-variants/lite").TVReturnT
   aside: string[];
   meta: string[];
 }>>;
-export type ComposerSuggestionListProps = useRender.ComponentProps<"div">;
-export declare function ComposerSuggestionList({ className, render, ...props }: ComposerSuggestionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionListProps = ScrollAreaProps;
+/** The suggestions' popup, a ScrollArea: `ref`, `className`, `render` and
+ *  the native props (the listbox's role and id) are the scrolling element's. */
+export declare function ComposerSuggestionList({ className, ...props }: ComposerSuggestionListProps): import("react").JSX.Element;
 type ComposerSuggestionListVariantProps = VariantProps<typeof composerSuggestionList>;
 export type ComposerSuggestionGroupProps = useRender.ComponentProps<"div"> & Pick<ComposerSuggestionListVariantProps, "separated">;
 export declare function ComposerSuggestionGroup({ separated, className, render, ...props }: ComposerSuggestionGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/composer/composer-suggestion-list.mjs

@@ -1,11 +1,13 @@
 import { tv } from "../../lib/tv.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.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/composer/composer-suggestion-list.tsx
 const composerSuggestionList = tv({
 	slots: {
 		root: [
-			"absolute inset-x-0 bottom-full w-auto overflow-y-auto",
+			"absolute inset-x-0 bottom-full w-auto",
 			"mb-2 max-h-60 overflow-x-hidden rounded-container p-1",
 			"bg-layer-popover text-foreground ring-1 ring-line-seam shadow-float"
 		],
@@ -47,16 +49,16 @@ const composerSuggestionList = tv({
 		metaVariant: "text"
 	}
 });
-function ComposerSuggestionList({ className, render, ...props }) {
+/** The suggestions' popup, a ScrollArea: `ref`, `className`, `render` and
+*  the native props (the listbox's role and id) are the scrolling element's. */
+function ComposerSuggestionList({ className, ...props }) {
 	const { root } = composerSuggestionList();
-	const defaultProps = {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "composer-suggestion-list",
+		overscroll: "contain",
+		tabIndex: -1,
+		...props,
 		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
 	});
 }
 function ComposerSuggestionGroup({ separated, className, render, ...props }) {

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

@@ -1,6 +1,7 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { ButtonProps } from "../button/button.mjs";
 import "../button/index.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { PanelActionProps } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ComponentPropsWithRef, ReactNode } from "react";
@@ -78,8 +79,9 @@ export type DialogSurfaceProps = useRender.ComponentProps<"div">;
  * DialogContent draws the same frame for a Base UI dialog.
  */
 export declare function DialogSurface({ className, render, children, ...props }: DialogSurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type DialogNavProps = useRender.ComponentProps<"nav">;
-/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
-export declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DialogNavProps = Omit<ScrollAreaProps, "contentClassName">;
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body: a
+ *  `<nav>` that is a ScrollArea, its rows in the area's content element. */
+export declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").JSX.Element;
 //#endregion
 export { Dialog$1 as Dialog };

package/dist/components/dialog/dialog.mjs

@@ -7,6 +7,7 @@ import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { Button } from "../button/button.mjs";
 import { DialogSheetHeadContext, DialogSheetReset, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { TextLink } from "../text-link/text-link.mjs";
 import { PanelAction } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
@@ -354,17 +355,22 @@ function DialogSurface({ className, render, children, ...props }) {
 		}, props, { children: /* @__PURE__ */ jsx(DialogSheetReset, { children }) })
 	});
 }
-const dialogNav = tv({ slots: { root: ["flex shrink-0 flex-col overflow-y-auto", "w-52 gap-0.5 border-r border-line-seam py-2 max-md:hidden"] } });
-/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
+const dialogNav = tv({ slots: {
+	root: ["shrink-0", "w-52 border-r border-line-seam py-2 max-md:hidden"],
+	content: ["flex flex-col gap-0.5"]
+} });
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body: a
+*  `<nav>` that is a ScrollArea, its rows in the area's content element. */
 function DialogNav({ className, render, ...props }) {
-	const { root } = dialogNav();
-	return useRender({
-		defaultTagName: "nav",
-		render,
-		props: mergeProps({
-			"data-slot": "dialog-nav",
-			className: root({ className })
-		}, props)
+	const { root, content } = dialogNav();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "dialog-nav",
+		overscroll: "contain",
+		tabIndex: -1,
+		...props,
+		render: render ?? /* @__PURE__ */ jsx("nav", {}),
+		className: root({ className }),
+		contentClassName: content()
 	});
 }
 //#endregion

package/dist/components/files/files.d.mts

@@ -1,4 +1,5 @@
 import { ButtonProps } from "../button/button.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/files/files.d.ts
 type FileTag = "button" | "div" | "img" | "section" | "span";
@@ -6,8 +7,10 @@ type DataAttributes = Record<`data-${string}`, string | undefined>;
 type FileSlotProps<Tag extends FileTag> = useRender.ComponentProps<Tag> & DataAttributes;
 export type FilesPanelProps = FileSlotProps<"section">;
 export declare function FilesPanel(props: FilesPanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type FilesViewportProps = FileSlotProps<"div">;
-export declare function FilesViewport(props: FilesViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilesViewportProps = ScrollAreaProps & DataAttributes;
+/** The files' scroller, a ScrollArea: `ref`, `className`, `render`, `onScroll`
+ *  and the native props are the scrolling element's. */
+export declare function FilesViewport({ className, ...props }: FilesViewportProps): import("react").JSX.Element;
 export type FilesListProps = FileSlotProps<"div">;
 export declare function FilesList(props: FilesListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type FileRowProps = FileSlotProps<"div">;

package/dist/components/files/files.mjs

@@ -1,4 +1,5 @@
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { files } from "./files.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -19,8 +20,16 @@ function useFileSlot(slotName, dataSlot, defaultTagName, props) {
 function FilesPanel(props) {
 	return useFileSlot("panel", "files-panel", "section", props);
 }
-function FilesViewport(props) {
-	return useFileSlot("viewport", "files-viewport", "div", props);
+/** The files' scroller, a ScrollArea: `ref`, `className`, `render`, `onScroll`
+*  and the native props are the scrolling element's. */
+function FilesViewport({ className, ...props }) {
+	const { viewport } = files();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "files-viewport",
+		overscroll: "contain",
+		...props,
+		className: viewport({ className })
+	});
 }
 function FilesList(props) {
 	return useFileSlot("list", "files-list", "div", props);

package/dist/components/files/files.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/files/files.recipe.ts
 const files = tv({ slots: {
 	panel: ["flex min-h-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
-	viewport: ["min-h-0 flex-1 overflow-y-auto"],
+	viewport: ["min-h-0 flex-1"],
 	list: ["flex flex-col gap-2 px-(--surface-inset) py-3", "max-md:px-4"],
 	row: [
 		"group/file-row flex w-full min-w-0 gap-3 px-3",

package/dist/components/filter-chip/filter-chip.mjs

@@ -17,7 +17,8 @@ const filterChip = tv({ slots: {
 	remove: [
 		...chipRemoveBase,
 		"relative size-6",
-		"after:absolute after:content-[''] pointer-coarse:after:-inset-2.5"
+		"after:absolute after:content-['']",
+		"pointer-coarse:after:-inset-y-2.5 pointer-coarse:after:-left-1.5 pointer-coarse:after:-right-3.5"
 	]
 } });
 /**

package/dist/components/markdown/markdown-parts.d.mts

@@ -1,8 +1,8 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { CheckboxProps } from "../checkbox/checkbox.mjs";
 import "../checkbox/index.mjs";
 import { InlineCodeProps } from "../inline-code/inline-code.mjs";
 import "../inline-code/index.mjs";
-import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/markdown/markdown-parts.d.ts
 declare const HEADING_TAGS: {

package/dist/components/markdown/markdown-parts.mjs

@@ -1,5 +1,5 @@
-import { Checkbox } from "../checkbox/checkbox.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { Checkbox } from "../checkbox/checkbox.mjs";
 import { InlineCode } from "../inline-code/inline-code.mjs";
 import { markdown } from "./markdown.recipe.mjs";
 import { jsx } from "react/jsx-runtime";

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

@@ -24,7 +24,8 @@ const messageActionCardContent = tv({ slots: {
 		"@max-sm/action-card:min-h-0 @max-sm/action-card:py-0"
 	],
 	scopeList: ["mt-0 stack-y-1.5"],
-	scopeListViewport: ["overflow-y-auto overscroll-contain", "max-h-[136px] stack-y-1.5 pr-1"],
+	scopeListViewport: ["max-h-[136px]"],
+	scopeListViewportContent: ["stack-y-1.5 pr-1"],
 	scopeListLabel: ["text-footnote font-medium text-foreground-hint"],
 	scope: ["min-w-0 border p-1.5", "rounded-control border-line-hairline bg-layer-card px-2.5 py-2"],
 	scopeName: ["break-all font-mono", "text-mono-meta font-normal text-foreground"],

package/dist/components/message-action-card/message-action-card.d.mts

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { BadgeProps } from "../badge/badge.mjs";
 import "../badge/index.mjs";
 import { ComponentProps, ReactNode } from "react";
@@ -38,10 +39,11 @@ export declare function MessageActionCardPropertyValue({ className, render, ...p
 export declare function MessageActionCardScopeList({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeListLabel({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
- * 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.
  */
-export declare function MessageActionCardScopeListViewport({ className, render, ...props }: MessageActionCardScopeListViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageActionCardScopeListViewport({ className, ...props }: MessageActionCardScopeListViewportProps): import("react").JSX.Element;
 export declare function MessageActionCardScope({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeName({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeDescription({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -67,7 +69,7 @@ export type MessageActionCardCollapseTriggerProps = Omit<ComponentProps<typeof C
   className?: string;
   "aria-label": string;
 };
-export type MessageActionCardScopeListViewportProps = useRender.ComponentProps<"div"> & {
+export type MessageActionCardScopeListViewportProps = Omit<ScrollAreaProps, "contentClassName" | "aria-label"> & {
   /** Names the scroll area for screen readers, e.g. "Permissions". */
   "aria-label": string;
 };

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.72.0",
+  "version": "0.73.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",