@botiverse/raft-ui 0.76.0 → 0.76.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.76.1](https://github.com/botiverse/raft-design/compare/v0.76.0...v0.76.1) (2026-11-08)
+
+### Fixed
+
+- **Select and Combobox lists never scroll sideways**: a Select list reaches into the popup's 4px inset and pads it back, so a `SelectSeparator` meets the popup's edge and stays inside the list, and Select and Combobox lists set `overflow-x-hidden`. ([#1070](https://github.com/botiverse/raft-design/pull/1070))
+  - Why: the separator reached 4px past each side of the list, which is the scroller, so the list scrolled sideways by 8px, and a classic scrollbar (Windows) drew a horizontal bar under the runtimes list (Artea, #proj-raft-ui:20a421bd). The list also clipped the line 4px short of the popup's edge.
+  - Affects: every Select with a separator, such as the runtime picker's Show installed only row: no sideways scroll, and the line now runs to the popup's border. Options keep their inset. A list action keeps its highlight after it adds items above it, as before.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
 ## [0.76.0](https://github.com/botiverse/raft-design/compare/v0.75.0...v0.76.0) (2026-11-08)
 
 ### Changed

package/dist/components/combobox/combobox.mjs

@@ -67,7 +67,7 @@ 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-y-auto overscroll-contain", "flex flex-col p-1 scroll-py-1"],
+		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain", "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",

package/dist/components/select/select.mjs

@@ -44,7 +44,7 @@ const select = tv({
 			"rounded-container bg-layer-popover p-1 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-6", "flex flex-col"],
+		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain scroll-py-6", "-mx-1 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",
@@ -151,7 +151,9 @@ function findActionValue(value) {
 * row, the same position then holds another item while focus stays on the row,
 * and the next arrow key starts from the wrong place. Once the list has
 * re-rendered, focus the list and then the row again: the row's focus handler
-* re-reads its position and moves the highlight back to it.
+* re-reads its position and moves the highlight back to it. The list takes
+* focus only for this: it has no tabindex of its own, and Chrome focuses a
+* scroller without one only while its content overflows it.
 */
 function keepActionHighlighted(event) {
 	const target = event.target;
@@ -160,8 +162,12 @@ function keepActionHighlighted(event) {
 	if (!row) return;
 	requestAnimationFrame(() => {
 		if (!row.isConnected || row.hasAttribute("data-highlighted")) return;
-		row.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
+		const list = row.closest("[role=\"listbox\"]");
+		const lent = list !== null && !list.hasAttribute("tabindex");
+		if (lent) list.tabIndex = -1;
+		list?.focus({ preventScroll: true });
 		row.focus({ preventScroll: true });
+		if (lent) list.removeAttribute("tabindex");
 	});
 }
 function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {

package/package.json

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