@botiverse/raft-ui 0.76.1 → 0.77.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.77.0](https://github.com/botiverse/raft-design/compare/v0.76.1...v0.77.0) (2026-11-08)
+
+### Changed
+
+- **Select, Combobox and ComboboxSelect lists scroll in a ScrollArea**: each list is a `useScrollAreaContainer` container with absolute gutters, inside a frame (`data-slot="select-list-frame"`, `combobox-list-frame`) that holds the overlay scrollbar. The list is never a Tab stop: focus stays in the input or on the options. ([#1074](https://github.com/botiverse/raft-design/pull/1074))
+  - Why: they were the last native-scrolling exception for Base UI lists; on Windows they drew a classic scrollbar with arrows that took width from the options (Artea's runtimes list, #proj-raft-ui:20a421bd).
+  - Affects: the scrollbar is the thin overlay thumb on every platform. `SelectList` / `ComboboxList` render a frame `<div>` around the list element; `ref`, `className`, `style` and the other props still go to the list. CSS or tests that expected the list to be the popup's direct child, or waited on `document.getAnimations()` to finish (the thumb runs on a scroll timeline), need updating.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
 ## [0.76.1](https://github.com/botiverse/raft-design/compare/v0.76.0...v0.76.1) (2026-11-08)
 
 ### Fixed

package/dist/components/combobox/combobox.d.mts

@@ -42,7 +42,13 @@ export type ComboboxContentProps = StyledProps<Combobox.Popup.Props> & Pick<Comb
 };
 export declare function ComboboxContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, initialFocus, finalFocus, ...props }: ComboboxContentProps): import("react").JSX.Element;
 export type ComboboxListProps = StyledProps<Combobox.List.Props>;
-export declare function ComboboxList({ className, ...props }: ComboboxListProps): import("react").JSX.Element;
+/**
+ * The scrolling list, a ScrollArea container with absolute gutters: the
+ * overlay scrollbar lies on a frame around it, since Base UI owns the list's
+ * children (items can be a function of each item). The list is never a Tab
+ * stop: focus stays in the input, as Base UI manages it.
+ */
+export declare function ComboboxList({ className, ref, style, ...props }: ComboboxListProps): import("react").JSX.Element;
 export type ComboboxItemProps = StyledProps<Combobox.Item.Props>;
 export declare function ComboboxItem({ className, ...props }: ComboboxItemProps): import("react").JSX.Element;
 export type ComboboxItemIndicatorProps = StyledProps<Combobox.ItemIndicator.Props>;

package/dist/components/combobox/combobox.mjs

@@ -1,12 +1,15 @@
+import { cn } from "../../cn.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { chipRemoveBase } from "../../lib/chip-remove.mjs";
 import { Check, X } from "lucide-react";
 import { createContext, use, useCallback, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/components/combobox/combobox.tsx
 const combobox = tv({
@@ -67,7 +70,8 @@ const combobox = tv({
 		],
 		header: ["flex items-center justify-between px-3", "gap-2 py-1.5 pr-1.5 pl-4"],
 		separator: ["h-px shrink-0 border-0", "bg-line-hairline"],
-		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain", "flex flex-col p-1 scroll-py-1"],
+		listFrame: ["min-h-0"],
+		list: ["max-h-64 min-h-0", "flex flex-col p-1 scroll-py-1"],
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
@@ -319,12 +323,35 @@ function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPaddin
 		})
 	});
 }
-function ComboboxList({ className, ...props }) {
-	const { list } = combobox();
-	return /* @__PURE__ */ jsx(Combobox.List, {
-		"data-slot": "combobox-list",
-		className: list({ className }),
-		...props
+/**
+* The scrolling list, a ScrollArea container with absolute gutters: the
+* overlay scrollbar lies on a frame around it, since Base UI owns the list's
+* children (items can be a function of each item). The list is never a Tab
+* stop: focus stays in the input, as Base UI manages it.
+*/
+function ComboboxList({ className, ref, style, ...props }) {
+	const { list, listFrame } = combobox();
+	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": "combobox-list-frame",
+		className: listFrame({ className: frameProps.className }),
+		children: [/* @__PURE__ */ jsx(Combobox.List, {
+			"data-slot": "combobox-list",
+			...containerProps,
+			tabIndex: -1,
+			...props,
+			style: ownStyle,
+			className: list({ className: cn(containerProps.className, className) })
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
 	});
 }
 function ComboboxItem({ className, ...props }) {

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

@@ -181,13 +181,14 @@
     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-frame {
+  min-height: 0;
+}
+/* A ScrollArea container (absolute gutters): useScrollAreaContainer gives it its overflow. */
 .r-combobox-select__list {
   box-sizing: border-box;
   max-height: var(--combobox-select-list-max-height, 16rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  min-height: 0;
   scroll-padding-block: 4px;
   padding: 4px;
 }

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

@@ -1,5 +1,7 @@
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { usePhoneMedia } from "../../lib/phone-media.mjs";
@@ -457,9 +459,8 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 					className: popupClassName,
 					children: [
 						/* @__PURE__ */ jsx(Combobox.Status, { children: loadingMessage }),
-						/* @__PURE__ */ jsx(Combobox.List, {
-							className: "r-combobox-select__list",
-							"aria-busy": loading,
+						/* @__PURE__ */ jsx(ComboboxSelectList, {
+							loading,
 							children: renderGroup
 						}),
 						/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage })
@@ -469,5 +470,28 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 		})]
 	});
 }
+/**
+* The scrolling list, a ScrollArea container with absolute gutters: the
+* overlay scrollbar lies on a frame around it, since Base UI owns the list's
+* children (a function of each group). The list is never a Tab stop: focus
+* stays in the input, as Base UI manages it.
+*/
+function ComboboxSelectList({ children, loading }) {
+	const { containerProps, frameProps, guttersProps } = useScrollAreaContainer({
+		guttersPosition: "absolute",
+		overscroll: "contain"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...frameProps,
+		className: `${frameProps.className} r-combobox-select__list-frame`,
+		children: [/* @__PURE__ */ jsx(Combobox.List, {
+			...containerProps,
+			tabIndex: -1,
+			className: `${containerProps.className} r-combobox-select__list`,
+			"aria-busy": loading,
+			children
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
+	});
+}
 //#endregion
 export { ComboboxSelect };

package/dist/components/select/select.d.mts

@@ -35,7 +35,14 @@ export type SelectContentProps = StyledProps<Select.Popup.Props> & Pick<Select.P
 };
 export declare function SelectContent({ align, alignItemWithTrigger, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, ...props }: SelectContentProps): import("react").JSX.Element;
 export type SelectListProps = StyledProps<Select.List.Props>;
-export declare function SelectList({ className, ...props }: SelectListProps): import("react").JSX.Element;
+/**
+ * The scrolling list, a ScrollArea container with absolute gutters: its frame
+ * reaches into the popup's 4px inset and the list pads it back, so a
+ * separator meets the popup's edge, and the overlay scrollbar takes no room
+ * from the options, on every platform. The list is never a Tab stop: focus
+ * stays on the options, as Base UI manages it.
+ */
+export declare function SelectList({ className, ref, style, ...props }: SelectListProps): import("react").JSX.Element;
 export type SelectItemProps = StyledProps<Select.Item.Props>;
 export declare function SelectItem({ className, ...props }: SelectItemProps): import("react").JSX.Element;
 export type SelectItemLeadingProps = StyledProps<ComponentPropsWithRef<"span">>;

package/dist/components/select/select.mjs

@@ -1,11 +1,14 @@
+import { cn } from "../../cn.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { Check, ChevronDown } from "lucide-react";
 import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
 const select = tv({
@@ -44,7 +47,8 @@ const select = tv({
 			"rounded-container bg-layer-popover p-1 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain scroll-py-6", "-mx-1 flex flex-col px-1"],
+		listFrame: ["-mx-1 min-h-0"],
+		list: ["max-h-64 min-h-0 scroll-py-6", "flex flex-col px-1"],
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
@@ -306,12 +310,36 @@ function SelectContent({ align = "start", alignItemWithTrigger = false, alignOff
 		children: positionerNode
 	});
 }
-function SelectList({ className, ...props }) {
-	const { list } = select();
-	return /* @__PURE__ */ jsx(Select.List, {
-		"data-slot": "select-list",
-		className: list({ className }),
-		...props
+/**
+* The scrolling list, a ScrollArea container with absolute gutters: its frame
+* reaches into the popup's 4px inset and the list pads it back, so a
+* separator meets the popup's edge, and the overlay scrollbar takes no room
+* from the options, on every platform. The list is never a Tab stop: focus
+* stays on the options, as Base UI manages it.
+*/
+function SelectList({ className, ref, style, ...props }) {
+	const { list, listFrame } = select();
+	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": "select-list-frame",
+		className: listFrame({ className: frameProps.className }),
+		children: [/* @__PURE__ */ jsx(Select.List, {
+			"data-slot": "select-list",
+			...containerProps,
+			tabIndex: -1,
+			...props,
+			style: ownStyle,
+			className: list({ className: cn(containerProps.className, className) })
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
 	});
 }
 const SelectItemPartsContext = createContext(null);

package/package.json

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