@signal9/era-ui 1.5.1 → 1.6.0

package/dist/ui/pane/pane-tab-list.svelte

@@ -6,14 +6,15 @@
 	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 
 	// When the pane is too narrow to fit every tab, the strip scrolls (min-w-0 +
-	// overflow-x-auto — chromeless via scrollbar-none; wheel/touch work natively).
+	// overflow-x-auto — chromeless via scrollbar-none; touch pans natively).
 	// data-pane-control carves it out of the pane's drag zone so a sideways drag
 	// scrolls the tabs instead of moving the pane.
 	//
 	// Mouse drag-to-scroll: grab anywhere in the strip and slide. A small
 	// threshold tells a scroll-drag from a tab click; once we've dragged, the
 	// trailing click is swallowed (capture phase) so a tab isn't toggled. Touch
-	// and pen fall through to native panning.
+	// and pen fall through to native panning. A wheel handler (below) maps the
+	// vertical mouse wheel onto horizontal scroll while hovering the strip.
 	let startX = 0;
 	let startScroll = 0;
 	let dragging = false;
@@ -43,8 +44,13 @@
 		if (ref?.hasPointerCapture(e.pointerId)) ref.releasePointerCapture(e.pointerId);
 	}
 
-	// Swallow the click that follows a scroll-drag so the tab under the cursor
-	// isn't selected. Capture phase, so it beats the trigger's own handler.
+	// Two listeners that need non-default registration (capture / non-passive),
+	// so they're added imperatively rather than as element props:
+	//   - click (capture): swallow the click that follows a scroll-drag so the
+	//     tab under the cursor isn't selected — beats the trigger's own handler.
+	//   - wheel (non-passive): translate a vertical mouse wheel into horizontal
+	//     scroll while hovering the strip, and only consume the event when the
+	//     strip can actually move that way (otherwise the page scrolls as usual).
 	$effect(() => {
 		const node = ref;
 		if (!node) return;
@@ -55,8 +61,22 @@
 				dragged = false;
 			}
 		};
+		const onWheel = (e: WheelEvent) => {
+			const max = node.scrollWidth - node.clientWidth;
+			if (max <= 0) return;
+			const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+			if (delta === 0) return;
+			const next = Math.max(0, Math.min(max, node.scrollLeft + delta));
+			if (next === node.scrollLeft) return; // at an edge going further out — let it bubble
+			node.scrollLeft = next;
+			e.preventDefault();
+		};
 		node.addEventListener('click', swallow, true);
-		return () => node.removeEventListener('click', swallow, true);
+		node.addEventListener('wheel', onWheel, { passive: false });
+		return () => {
+			node.removeEventListener('click', swallow, true);
+			node.removeEventListener('wheel', onWheel);
+		};
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "1.5.1",
+	"version": "1.6.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",