@botiverse/raft-ui 0.80.0 → 0.81.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.81.0](https://github.com/botiverse/raft-design/compare/v0.80.0...v0.81.0) (2026-11-09)
+
+### Fixed
+
+- **ScrollArea's scrollbars paint over everything inside the area**: the gutters layer is at the highest `z-index`, and the area's root is a stacking context of its own (`isolation: isolate`), so a sticky heading or any other positioned content inside the area, whatever its `z-index`, no longer covers the thumb, with sticky and absolute gutters alike, and the scrollbars still never paint over anything outside the area.
+  - Why: in the Raft app's activity list each day's sticky heading (an opaque background at z-15) painted over the thumb as it slid by, cutting it into pieces, while the gutters were at z-1 (Artea, #proj-raft-ui:21bae128). Starting the scrollbar below the stuck heading (`railInset`) fixed only the heading at the top, not the ones scrolling past.
+  - Affects: content inside a ScrollArea can no longer cover anything outside it, whatever its `z-index`: a popup, a menu or a dragged copy rendered in place inside an area stacks with the area. Render those through a portal (raft-ui's overlays do, and now `DragLift` by default, below). The scrollbars' strip at the edge now takes the pointer over positioned content there too, as it already did over the rest. How the scrollbars look is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+- **`DragLift` renders the copy in `document.body` by default**: the lifted copy goes through a portal to the body unless `container` names another element, or `null` keeps it in place; the portal keeps the theme scope it was rendered in. `TaskDragOverlay` follows, as `SortableTabsList` and `SortableComposerAttachments` already did.
+  - Why: in place inside a ScrollArea, now a stacking context, the copy couldn't rise above anything outside the area. On the Raft app's Tasks board a dragged card was cut off by the left rail and covered by the top bar (`TaskDragOverlay` with no `container`).
+  - Affects: a `DragLift` or `TaskDragOverlay` without `container` now renders its copy in the body: CSS that styles the copy through an ancestor of the item (`.board [data-slot=drag-lift]`) no longer reaches it, and neither do CSS variables set on that ancestor; style the copy through its own children. The writing direction (`dir`) is carried over, below. Pass `container={null}` for the old in-place copy. How the copy looks is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/drag/#anatomy
+- **In a right-to-left layout the dragged copy keeps its direction**: `DragLift`'s portal carries the item's computed writing direction (`dir`) to the body, as it carries the theme scope.
+  - Why: in the body, the copy took its direction from `<html>`, so an item dragged out of a right-to-left container came out left-to-right (Jasper's review of #1094).
+  - Affects: a copy of an item in a `dir="rtl"` container now lays out right-to-left. Nothing else around the item reaches the copy (font, colour, a container's custom properties); the docs now say so.
+  - Docs: https://raft-design.botiverse.build/components/drag/#anatomy
+- **ChoiceList's row actions keep clear of the scrollbar**: in a list that scrolls (search on, or `fill`), a row's action sits 12px from the end instead of 4px, and rows with an action keep their text 52px from the end instead of 44px.
+  - Why: the scrollbar's 16px strip at the end of a ScrollArea now paints over and takes the pointer from everything in the area; the last 8px of each 32px action lay under it, so a click there paged the list instead.
+  - Affects: in a scrolling ChoiceList, each action moves 8px toward the start, and a long name or description cuts off 8px sooner. A list that doesn't scroll is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/choice-list/#behavior
+
 ## [0.80.0](https://github.com/botiverse/raft-design/compare/v0.79.0...v0.80.0) (2026-11-09)
 
 ### Changed

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

@@ -31,14 +31,27 @@ const choiceList = tv({
 		footer: ["shrink-0 border-t border-line-seam p-1"]
 	},
 	variants: {
-		scroll: { true: { scroller: ["max-h-72"] } },
+		scroll: { true: {
+			scroller: ["max-h-72"],
+			action: ["pr-3"]
+		} },
 		fill: { true: {
 			root: ["flex min-h-0 flex-1 flex-col"],
 			frame: ["min-h-0 flex-1"],
-			scroller: ["flex-1"]
+			scroller: ["flex-1"],
+			action: ["pr-3"]
 		} },
 		hasAction: { true: { item: ["pr-11"] } }
-	}
+	},
+	compoundVariants: [{
+		scroll: true,
+		hasAction: true,
+		class: { item: ["pr-13"] }
+	}, {
+		fill: true,
+		hasAction: true,
+		class: { item: ["pr-13"] }
+	}]
 });
 //#endregion
 export { choiceList };

package/dist/components/composer/sortable-composer-attachments.mjs

@@ -1,6 +1,6 @@
 import { ComposerAttachmentsScrollArea } from "./composer-attachments-scroll-area.mjs";
 import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
-import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
+import { DragLift, useDragSiblingTransition } from "../drag/drag-lift.mjs";
 import { useDragSensors } from "../drag/drag-sensors.mjs";
 import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
 import { Children, createContext, isValidElement, use, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -87,7 +87,6 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, messages,
 	const draftIdsRef = useRef([]);
 	const lastReorderPointerRef = useRef(null);
 	const sensors = useDragSensors();
-	const liftContainer = useLiftContainer(container);
 	const attachments = useMemo(() => attachmentsById(children), [children]);
 	const itemIds = useMemo(() => items.map(String), [items]);
 	const [announced] = useState(() => ({
@@ -186,7 +185,7 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, messages,
 			})
 		}), /* @__PURE__ */ jsx(DragLift, {
 			className: "rounded-control",
-			container: liftContainer,
+			container,
 			children: activeId && overlay ? overlay : null
 		})]
 	});

package/dist/components/drag/drag-lift.d.mts

@@ -50,8 +50,8 @@ export declare function keepGrabInside(proxyWidth: number, inset?: number): Modi
 export declare function cancelDrag(win?: Window): void;
 /**
  * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
- * lightbox 70) and an app's own top layers: the copy in the hand is always on
- * top. dnd-kit's own default.
+ * lightbox 70) and an app's own top layers, among the layers rendered in
+ * `document.body`, where the copy goes by default. dnd-kit's own default.
  */
 export declare const DRAG_LIFT_Z_INDEX = 999;
 export type DragLiftProps = {
@@ -74,10 +74,14 @@ export type DragLiftProps = {
    */
   autoScroll?: boolean;
   /**
-   * Render the copy in another element, such as `document.body` when an
-   * ancestor has a transform (a drawer, a dialog), which would offset a
-   * `position: fixed` copy. It keeps the theme scope it was rendered in
-   * (`light` / `dark`), as raft-ui's portals do. By default it renders in place.
+   * Where the copy renders: `document.body` by default, so no ancestor holds
+   * it in, neither a stacking context (a ScrollArea, an `isolate`) it couldn't
+   * rise out of nor a transform (a drawer, a dialog) that would offset a
+   * `position: fixed` copy. Another element renders it there, and `null` in
+   * place. It keeps the theme scope it was rendered in (`light` / `dark`), as
+   * raft-ui's portals do, and the item's writing direction (`dir`). Nothing
+   * else is inherited from where it was picked up (font, colour, custom
+   * properties a container sets): give the copy its own styles.
    */
   container?: Element | DocumentFragment | null;
   /** @default DRAG_LIFT_Z_INDEX (999) */

package/dist/components/drag/drag-lift.mjs

@@ -110,17 +110,16 @@ function cancelDrag(win = window) {
 }
 /**
 * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
-* lightbox 70) and an app's own top layers: the copy in the hand is always on
-* top. dnd-kit's own default.
+* lightbox 70) and an app's own top layers, among the layers rendered in
+* `document.body`, where the copy goes by default. dnd-kit's own default.
 */
 const DRAG_LIFT_Z_INDEX = 999;
 const noSubscribe = () => () => {};
 const clientBody = () => document.body;
 const serverBody = () => null;
 /**
-* For a component whose copy goes to `document.body` unless it is told
-* otherwise: `undefined` is the body (once on the client, so hydration
-* matches), `null` is in place, and an element is that element.
+* Where the copy goes: `undefined` is the body (once on the client, so
+* hydration matches), `null` is in place, and an element is that element.
 */
 function useLiftContainer(container) {
 	const body = useSyncExternalStore(noSubscribe, clientBody, serverBody);
@@ -141,8 +140,10 @@ function useLiftContainer(container) {
 function DragLift({ children, className, style, modifiers, autoScroll = true, container, zIndex = 999 }) {
 	const { lift } = drag();
 	const { resolvedMode } = useTheme();
+	const target = useLiftContainer(container);
 	const reduced = useSyncExternalStore(subscribeReducedMotion, reducedMotion, () => false);
-	const { activatorEvent } = useDndContext();
+	const { activatorEvent, activeNode } = useDndContext();
+	const dir = useMemo(() => activeNode ? getComputedStyle(activeNode).direction : void 0, [activeNode]);
 	const liftStyle = useMemo(() => isKeyboardEvent(activatorEvent) ? {
 		translate: KEYBOARD_OFFSET,
 		...style
@@ -162,11 +163,12 @@ function DragLift({ children, className, style, modifiers, autoScroll = true, co
 			})
 		})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DragSession, { autoScroll }), container ? createPortal(/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DragSession, { autoScroll }), target ? createPortal(/* @__PURE__ */ jsx("div", {
 		"data-slot": "drag-lift-portal",
 		className: cn("contents", resolvedMode),
+		dir,
 		children: overlay
-	}), container) : overlay] });
+	}), target) : overlay] });
 }
 /** Where the pointer is during a drag: auto-scroll and the refusal hint read it. */
 const pointer = {
@@ -273,4 +275,4 @@ function autoScrollAt(x, y) {
 	if (dy) window.scrollBy(0, dy);
 }
 //#endregion
-export { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, LIFT_CLASS, ORIGIN_OPACITY, autoScrollAt, cancelDrag, dragPointer, keepGrabInside, useDragSiblingTransition, useLiftContainer };
+export { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, LIFT_CLASS, ORIGIN_OPACITY, autoScrollAt, cancelDrag, dragPointer, keepGrabInside, useDragSiblingTransition };

package/dist/components/scroll-area/scroll-area.css

@@ -452,11 +452,24 @@
     resize: vertical;
   }
 
-  /* The gutters layer: out of the way of the content, but for each gutter itself. */
+  /*
+   * The scrollbars paint over everything in the area, as native ones do: a
+   * sticky day heading with its own background and `z-index` (z-15 in an
+   * activity list) covered the thumb as it slid by, cutting it into pieces.
+   * The root is a stacking context of its own (`isolation: isolate`), so the
+   * layer's z-index ranks it only among the area's own content and never
+   * lifts it over anything outside the area: a fixed bar, a popup. What
+   * must cover things outside the area portals out of it, as raft-ui's
+   * overlays do.
+   */
+  .r-scroll-area {
+    isolation: isolate;
+  }
+  /* The gutters layer: out of the way of the content, but for each gutter itself; above all of it. */
   .r-scroll-area > .r-scroll-area__gutters {
     pointer-events: none;
     user-select: none;
-    z-index: 1;
+    z-index: 2147483647;
   }
   /*
    * Sticky: a zero-height layer at the top of the viewport, the container's

package/dist/components/tabs/tabs.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.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 { DragLift, useDragSiblingTransition } from "../drag/drag-lift.mjs";
 import { useDragSensors } from "../drag/drag-sensors.mjs";
 import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -275,7 +275,6 @@ function SortableTabsList({ value, onReorder, onDragStart, messages, container,
 	const sensors = useDragSensors();
 	const [copies] = useState(() => /* @__PURE__ */ new Map());
 	const [nodes] = useState(() => /* @__PURE__ */ new Map());
-	const liftContainer = useLiftContainer(container);
 	const selectedValue = use(TabsValueContext);
 	const { tab: tabClassName, content: contentClassName } = tabs({
 		variant,
@@ -353,7 +352,7 @@ function SortableTabsList({ value, onReorder, onDragStart, messages, container,
 			})
 		}), /* @__PURE__ */ jsx(DragLift, {
 			className: "rounded-control",
-			container: liftContainer,
+			container,
 			children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "tabs-tab",
 				"data-active": selectedValue === activeId ? "" : void 0,

package/dist/components/task-dnd/task-dnd.d.mts

@@ -62,7 +62,11 @@ export declare function TaskDropPlaceholder({ id, placement, className, render,
 export type TaskDragOverlayProps = {
   children?: ReactNode;
   className?: string;
-  /** Render the copy in another element, such as `document.body` when an ancestor has a transform. */
+  /**
+   * Where the copy renders: `document.body` by default, so it rises above
+   * everything outside a ScrollArea the board is in. `null` renders it in
+   * place (`DragLift`'s `container`).
+   */
   container?: Element | DocumentFragment | null;
 };
 /**

package/package.json

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