fix: proportional scroll fade (#569)

Author: FBalint

.changeset/fix-tabs-scroll-fade.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix segmented `Tabs` scroll fade, scroll-into-view, and ring styling:
+
+- Rewrite CSS scroll-fade masking to use `@property`-animated custom properties, fixing proportional fade rendering across browsers.
+- Scroll the selected tab into view on click so it stays visible in overflowing tab lists.
+- Move `ring ring-kumo-hairline/70` from the inner list to the root container so the segmented variant ring wraps the entire component correctly.

packages/kumo/src/components/tabs/tabs.tsx

@@ -1,4 +1,11 @@
-import { useEffect, useRef, useState, type MouseEvent, type PointerEvent, type ReactNode } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
 import type { TabsTab } from "@base-ui/react/tabs";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "../../utils/cn";
@@ -156,15 +163,25 @@ export function Tabs({
   return (
     <TabsPrimitive.Root
       {...rootProps}
-      className={cn("relative isolate min-w-0 font-medium", className)}
+      className={cn(
+        "relative isolate min-w-0 font-medium",
+        isSegmented &&
+          (isSm ? "rounded-md" : "rounded-lg") + " ring ring-kumo-hairline/70",
+        className,
+      )}
       onValueChange={(nextValue) => {
         const stringValue = String(nextValue);
         onValueChange?.(stringValue);
       }}
     >
       {/* Background element for segmented variant */}
       {isSegmented && (
-        <div className={cn("absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed", isSm ? "h-6.5" : "h-9")} />
+        <div
+          className={cn(
+            "absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed",
+            isSm ? "h-6.5" : "h-9",
+          )}
+        />
       )}
       <TabsPrimitive.List
         ref={listRef}
@@ -173,7 +190,8 @@ export function Tabs({
         {...bindDrag()}
         className={cn(
           "relative flex min-w-0 shrink items-stretch",
-          isSegmented && "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]",
+          isSegmented &&
+            "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)",
           isSegmented && (isSm ? "h-6.5 rounded-md" : "h-9"),
           isOverflowing && "cursor-grab active:cursor-grabbing",
           isUnderline && "gap-4 border-b border-kumo-hairline pb-2",
@@ -188,13 +206,22 @@ export function Tabs({
             data-kumo-part="tab"
             value={tab.value}
             render={tab.render}
+            onClick={(e) => {
+              e.currentTarget.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "nearest",
+              });
+            }}
             className={cn(
               "relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
-              isOverflowing ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
+              isOverflowing
+                ? "cursor-grab active:cursor-grabbing"
+                : "cursor-pointer",
               isSm ? "text-xs" : "text-base",
               isSegmented &&
-                "my-0.5 rounded-md text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
-              isSegmented && (isSm ? "px-2" : "px-2.5"),
+                "my-0.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
+              isSegmented && (isSm ? "px-2 rounded-sm" : "px-2.5 rounded-md"),
               isUnderline &&
                 "text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
               isUnderline && (isSm ? "px-1.5 py-2.5" : "px-2 py-3"),
@@ -213,7 +240,10 @@ export function Tabs({
                 "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
                 "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                 isSegmented &&
-                  cn("top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line", isSm ? "rounded" : "rounded-md"),
+                  cn(
+                    "top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line",
+                    isSm ? "rounded" : "rounded-md",
+                  ),
                 isUnderline && "bottom-0 h-0.5 bg-kumo-brand",
                 indicatorClassName,
               )}
@@ -260,7 +290,8 @@ function useHorizontalDragScroll(
     onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {
       const el = ref.current;
       const state = dragState.current;
-      if (!el || !enabled || !state || state.pointerId !== event.pointerId) return;
+      if (!el || !enabled || !state || state.pointerId !== event.pointerId)
+        return;
 
       const movementX = event.clientX - state.startX;
       if (!state.dragging) {

packages/kumo/src/styles/kumo-binding.css

@@ -218,37 +218,45 @@
    scrollable container based on scroll position. Uses scroll-driven
    animations (Chrome 115+, Edge 115+). Degrades gracefully to no fade.
    Activated by the `data-overflowing` attribute (set via JS ResizeObserver). */
+@property --fade-left-n {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --fade-right-n {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
 @keyframes scroll-fade-x-left {
+  from {
+    --fade-left-n: 0;
+  }
   to {
-    mask-size:
-      var(--scroll-fade-width, 3rem) 100%,
-      100% 100%,
-      var(--scroll-fade-width, 3rem) 100%;
+    --fade-left-n: 1;
   }
 }
 
 @keyframes scroll-fade-x-right {
+  from {
+    --fade-right-n: 1;
+  }
   to {
-    mask-size:
-      var(--scroll-fade-width, 3rem) 100%,
-      100% 100%,
-      0 100%;
+    --fade-right-n: 0;
   }
 }
 
 [data-overflowing] {
   @supports (animation-timeline: scroll()) {
-    mask-image:
-      linear-gradient(to right, white, transparent),
-      linear-gradient(white, white),
-      linear-gradient(to right, transparent, white);
-    mask-size:
-      0 100%,
-      100% 100%,
-      var(--scroll-fade-width, 3rem) 100%;
-    mask-repeat: no-repeat;
-    mask-composite: exclude;
-    mask-position: left, center, right;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      white calc(var(--fade-left-n) * var(--scroll-fade-width, 3rem)),
+      white calc(100% - var(--fade-right-n) * var(--scroll-fade-width, 3rem)),
+      transparent
+    );
 
     animation-name: scroll-fade-x-left, scroll-fade-x-right;
     animation-timing-function: linear, linear;
@@ -257,7 +265,6 @@
       0 var(--scroll-fade-range, 3rem),
       calc(100% - var(--scroll-fade-range, 3rem)) 100%;
     animation-fill-mode: both;
-    animation-composition: replace;
   }
 }