@trackunit/react-components 2.13.11 → 2.13.13

package/index.cjs.js

@@ -29,6 +29,8 @@ var defaultTranslations = {
 	"breadcrumb.expandButton": "expand",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
+	"horizontalOverflowScroller.scrollLeft": "Scroll left",
+	"horizontalOverflowScroller.scrollRight": "Scroll right",
 	"moreMenu.buttonLabel": "Show more"
 };
 
@@ -5788,34 +5790,79 @@ const ZStack = ({ children, className, "data-testid": dataTestId, style, ref })
         }) }));
 };
 
+const fadeMaskStyleSheet = `
+  @property --tu-hos-solid-left {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-solid-right {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-fade-left {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-fade-right {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+`;
 const cvaHorizontalOverflowScroller = cssClassVarianceUtilities.cva({
-    base: ["flex", "flex-nowrap", "gap-1", "overflow-y-hidden", "overflow-x-scroll", "w-full", "no-scrollbar"],
+    base: [
+        "flex",
+        "flex-nowrap",
+        "gap-1",
+        "overflow-y-hidden",
+        "overflow-x-scroll",
+        "scroll-px-9",
+        "w-full",
+        "no-scrollbar",
+    ],
 });
-const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cssClassVarianceUtilities.cva({ base: ["group", "w-full", "overflow-clip"] });
-
-const cvaOverflowIndicatorContainer = cssClassVarianceUtilities.cva({
-    base: ["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"],
+const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cssClassVarianceUtilities.cva({
+    base: ["group", "w-full", "overflow-clip"],
 });
-const cvaOverflowIndicatorGradient = cssClassVarianceUtilities.cva({
+const cvaHorizontalOverflowScrollerFadeMask = cssClassVarianceUtilities.cva({
     base: [
-        "pointer-events-none",
-        "self-stretch",
-        "w-16",
-        "opacity-0",
-        "transition-opacity",
         "duration-200",
-        "group-hover:opacity-100",
-        "group-focus-within:opacity-100",
+        "ease-out",
+        "[mask-image:linear-gradient(to_right,transparent_0,transparent_var(--tu-hos-solid-left),#000_var(--tu-hos-fade-left),#000_calc(100%_-_var(--tu-hos-fade-right)),transparent_calc(100%_-_var(--tu-hos-solid-right)),transparent_100%)]",
+        "[transition-property:--tu-hos-solid-left,--tu-hos-solid-right,--tu-hos-fade-left,--tu-hos-fade-right]",
     ],
     variants: {
-        direction: {
-            left: ["bg-gradient-to-r", "from-white", "from-30%", "to-transparent"],
-            right: ["bg-gradient-to-l", "from-white", "from-30%", "to-transparent"],
+        canScrollLeft: {
+            true: [
+                "[--tu-hos-solid-left:0px]",
+                "[--tu-hos-fade-left:1.25rem]",
+                "group-hover:[--tu-hos-solid-left:1rem]",
+                "group-hover:[--tu-hos-fade-left:2.25rem]",
+                "group-has-[:focus-visible]:[--tu-hos-fade-left:2.25rem]",
+            ],
+            false: ["[--tu-hos-solid-left:0px]", "[--tu-hos-fade-left:0px]"],
+        },
+        canScrollRight: {
+            true: [
+                "[--tu-hos-solid-right:0px]",
+                "[--tu-hos-fade-right:1.25rem]",
+                "group-hover:[--tu-hos-solid-right:1rem]",
+                "group-hover:[--tu-hos-fade-right:2.25rem]",
+                "group-has-[:focus-visible]:[--tu-hos-fade-right:2.25rem]",
+            ],
+            false: ["[--tu-hos-solid-right:0px]", "[--tu-hos-fade-right:0px]"],
         },
     },
 });
-const cvaJustificationContainer = cssClassVarianceUtilities.cva({
-    base: ["flex", "w-full", "items-center", "pointer-events-none"],
+
+const cvaOverflowIndicatorHitRow = cssClassVarianceUtilities.cva({
+    base: ["flex", "h-full", "w-full", "items-center", "pointer-events-none", "z-10"],
     variants: {
         direction: {
             left: ["justify-start"],
@@ -5823,43 +5870,72 @@ const cvaJustificationContainer = cssClassVarianceUtilities.cva({
         },
     },
 });
-const cvaOverflowIndicatorButton = cssClassVarianceUtilities.cva({
+const cvaOverflowIndicatorHit = cssClassVarianceUtilities.cva({
     base: [
-        "shadow-md",
+        "pointer-events-auto",
+        "inline-flex",
+        "h-full",
+        "items-center",
+        "justify-center",
+        "px-1",
+        "border-0",
+        "bg-transparent",
+        "cursor-pointer",
+        "supports-[color:contrast-color(white)]:[color:contrast-color(var(--hos-surface,Canvas))]",
+        "supports-[not_(color:contrast-color(white))]:text-neutral-900",
+        "supports-[not_(color:contrast-color(white))]:[filter:drop-shadow(0_0_0.5px_#fff)_drop-shadow(0_1px_0_#fff)_drop-shadow(0_-1px_0_#fff)_drop-shadow(1px_0_0_#fff)_drop-shadow(-1px_0_0_#fff)]",
         "opacity-0",
+        "starting:opacity-0",
         "transition-opacity",
         "duration-200",
-        "pointer-events-auto",
-        "starting:opacity-0",
-        "group-hover:opacity-100",
-        "group-focus-within:opacity-100",
-        "rounded-full",
-        "mx-1",
+        // Keyboard focus (not a plain mouse-click `:focus`) always reveals the control it landed
+        // on, even the disabled one at an exhausted edge -- that's the only way a sighted keyboard
+        // user gets to see what they just tabbed to.
+        "group-has-[:focus-visible]:opacity-100",
     ],
+    variants: {
+        disabled: {
+            // Nothing to scroll to on this side: don't let a mouse hover over the row reveal a
+            // control that would be a no-op if clicked.
+            true: [],
+            false: ["group-hover:opacity-100"],
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
 });
 
 /**
- * Overflow indicator component that shows visual cues when content extends beyond visible area
- * Shows a scroll button on hover to navigate in the specified direction
+ * Edge control for HorizontalOverflowScroller. The fade lives on the content
+ * mask; this is the hover/focus hit target that pages left or right.
  *
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, style, }) => {
+const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, disabled = false, style, }) => {
+    const [t] = useTranslation();
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxRuntime.jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, disabled: true, icon: jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", title: "" // We dont want to show a tooltip here
-                    , variant: "secondary" }) })] }));
+    const ariaLabel = direction === "left" ? t("horizontalOverflowScroller.scrollLeft") : t("horizontalOverflowScroller.scrollRight");
+    return (jsxRuntime.jsx("div", { className: cvaOverflowIndicatorHitRow({ className, direction }), "data-testid": dataTestId, style: style, children: jsxRuntime.jsx("button", { "aria-disabled": disabled, "aria-label": ariaLabel, className: cvaOverflowIndicatorHit({ disabled }), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, onClick: disabled ? undefined : onClickScroll, type: "button", children: jsxRuntime.jsx(Icon, { ariaHidden: true, name: iconName, size: "small" }) }) }));
 };
 
 /**
  * HorizontalOverflowScroller displays child elements in a horizontal row with automatic overflow detection.
- * When content overflows, it shows left/right scroll indicators with click-to-scroll functionality.
+ * When content overflows, it fades the overflowing edge and reveals chevrons on hover or focus so the row can be paged.
+ *
+ * The fade is a CSS mask on the content itself, so it works on any background. At rest the ramp is short so more
+ * items stay visible; hover grows a solid plateau under the chevron and pushes the ramp further in, while
+ * keyboard focus only extends the ramp — a plateau there would erase the focus ring of a child flush with the
+ * edge. Set `--hos-surface` on an ancestor to the background color behind the scroller so the chevrons pick a
+ * contrasting color. It defaults to `Canvas`.
  *
  * ### When to use
  * Use HorizontalOverflowScroller to display a row of items (cards, tags, buttons) that may overflow on smaller screens, with visual cues that more content is available.
  *
  * ### When not to use
  * Do not use HorizontalOverflowScroller for tab navigation — use `TabList` which has its own scroll handling.
+ * Do not use it to hide extra actions — use `MoreMenu` when the overflowing items are secondary actions rather than a row of content to browse.
  *
  * @example Horizontal scroller for KPI cards
  * ```tsx
@@ -5879,36 +5955,36 @@ const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, on
  * @returns {ReactElement} HorizontalOverflowScroller component
  */
 const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, style, ref, }) => {
-    const childrenArray = react.Children.toArray(children);
-    const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
-    const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
+    const onScrollStateChangeRef = react.useRef(onScrollStateChange);
+    react.useEffect(() => {
+        onScrollStateChangeRef.current = onScrollStateChange;
+    }, [onScrollStateChange]);
+    const handleScrollStateChange = react.useCallback((state) => {
+        onScrollStateChangeRef.current?.({
+            isScrollable: state.isScrollable,
+            isAtBeginning: state.isAtBeginning,
+            isAtEnd: state.isAtEnd,
+        });
+    }, []);
+    const { ref: scrollRef, element, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
         direction: "horizontal",
-        onScrollStateChange: onScrollStateChange
-            ? (state) => onScrollStateChange({
-                isScrollable: state.isScrollable,
-                isAtBeginning: state.isAtBeginning,
-                isAtEnd: state.isAtEnd,
-            })
-            : undefined,
+        onScrollStateChange: handleScrollStateChange,
     });
-    const mergedRef = useMergeRefs([measureRef, scrollRef, ref]);
-    const handleScrollLeft = () => {
-        if (!element || containerGeometry?.width === undefined)
-            return;
-        element.scrollBy({
-            left: -containerGeometry.width,
-            behavior: "smooth",
-        });
-    };
-    const handleScrollRight = () => {
-        if (!element || containerGeometry?.width === undefined)
+    const mergedRef = useMergeRefs([scrollRef, ref]);
+    const canScrollLeft = isScrollable && !isAtBeginning;
+    const canScrollRight = isScrollable && !isAtEnd;
+    const scrollByPage = react.useCallback((direction) => {
+        if (!element) {
             return;
+        }
         element.scrollBy({
-            left: containerGeometry.width,
+            left: direction * element.clientWidth,
             behavior: "smooth",
         });
-    };
-    return (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    }, [element]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: fadeMaskStyleSheet }), jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller({
+                            className: cvaHorizontalOverflowScrollerFadeMask({ canScrollLeft, canScrollRight }),
+                        }), "data-testid": dataTestId, ref: mergedRef, children: children }), isScrollable ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": dataTestId ? `${dataTestId}-left-indicator` : undefined, direction: "left", disabled: !canScrollLeft, onClickScroll: () => scrollByPage(-1) })) : null, isScrollable ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": dataTestId ? `${dataTestId}-right-indicator` : undefined, direction: "right", disabled: !canScrollRight, onClickScroll: () => scrollByPage(1) })) : null] })] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cva({ base: ["inline-flex", "items-center"] });
@@ -8290,6 +8366,7 @@ const cvaMoreMenu = cssClassVarianceUtilities.cva({ base: ["p-0"] });
  *
  * ### When not to use
  * Do not use MoreMenu for primary actions that should always be visible. Use `Button` instead.
+ * Do not use it to overflow a row of content (tags, KPIs, chips) — use `HorizontalOverflowScroller` when those items should stay visible and be browsed horizontally.
  *
  * @example Action items with render prop — Pass a function as `children` to receive the `close` callback and dismiss the menu after an action.
  * ```tsx

package/index.esm.js

@@ -28,6 +28,8 @@ var defaultTranslations = {
 	"breadcrumb.expandButton": "expand",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
+	"horizontalOverflowScroller.scrollLeft": "Scroll left",
+	"horizontalOverflowScroller.scrollRight": "Scroll right",
 	"moreMenu.buttonLabel": "Show more"
 };
 
@@ -5787,34 +5789,79 @@ const ZStack = ({ children, className, "data-testid": dataTestId, style, ref })
         }) }));
 };
 
+const fadeMaskStyleSheet = `
+  @property --tu-hos-solid-left {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-solid-right {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-fade-left {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+
+  @property --tu-hos-fade-right {
+    syntax: '<length>';
+    initial-value: 0px;
+    inherits: false;
+  }
+`;
 const cvaHorizontalOverflowScroller = cva({
-    base: ["flex", "flex-nowrap", "gap-1", "overflow-y-hidden", "overflow-x-scroll", "w-full", "no-scrollbar"],
+    base: [
+        "flex",
+        "flex-nowrap",
+        "gap-1",
+        "overflow-y-hidden",
+        "overflow-x-scroll",
+        "scroll-px-9",
+        "w-full",
+        "no-scrollbar",
+    ],
 });
-const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cva({ base: ["group", "w-full", "overflow-clip"] });
-
-const cvaOverflowIndicatorContainer = cva({
-    base: ["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"],
+const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cva({
+    base: ["group", "w-full", "overflow-clip"],
 });
-const cvaOverflowIndicatorGradient = cva({
+const cvaHorizontalOverflowScrollerFadeMask = cva({
     base: [
-        "pointer-events-none",
-        "self-stretch",
-        "w-16",
-        "opacity-0",
-        "transition-opacity",
         "duration-200",
-        "group-hover:opacity-100",
-        "group-focus-within:opacity-100",
+        "ease-out",
+        "[mask-image:linear-gradient(to_right,transparent_0,transparent_var(--tu-hos-solid-left),#000_var(--tu-hos-fade-left),#000_calc(100%_-_var(--tu-hos-fade-right)),transparent_calc(100%_-_var(--tu-hos-solid-right)),transparent_100%)]",
+        "[transition-property:--tu-hos-solid-left,--tu-hos-solid-right,--tu-hos-fade-left,--tu-hos-fade-right]",
     ],
     variants: {
-        direction: {
-            left: ["bg-gradient-to-r", "from-white", "from-30%", "to-transparent"],
-            right: ["bg-gradient-to-l", "from-white", "from-30%", "to-transparent"],
+        canScrollLeft: {
+            true: [
+                "[--tu-hos-solid-left:0px]",
+                "[--tu-hos-fade-left:1.25rem]",
+                "group-hover:[--tu-hos-solid-left:1rem]",
+                "group-hover:[--tu-hos-fade-left:2.25rem]",
+                "group-has-[:focus-visible]:[--tu-hos-fade-left:2.25rem]",
+            ],
+            false: ["[--tu-hos-solid-left:0px]", "[--tu-hos-fade-left:0px]"],
+        },
+        canScrollRight: {
+            true: [
+                "[--tu-hos-solid-right:0px]",
+                "[--tu-hos-fade-right:1.25rem]",
+                "group-hover:[--tu-hos-solid-right:1rem]",
+                "group-hover:[--tu-hos-fade-right:2.25rem]",
+                "group-has-[:focus-visible]:[--tu-hos-fade-right:2.25rem]",
+            ],
+            false: ["[--tu-hos-solid-right:0px]", "[--tu-hos-fade-right:0px]"],
         },
     },
 });
-const cvaJustificationContainer = cva({
-    base: ["flex", "w-full", "items-center", "pointer-events-none"],
+
+const cvaOverflowIndicatorHitRow = cva({
+    base: ["flex", "h-full", "w-full", "items-center", "pointer-events-none", "z-10"],
     variants: {
         direction: {
             left: ["justify-start"],
@@ -5822,43 +5869,72 @@ const cvaJustificationContainer = cva({
         },
     },
 });
-const cvaOverflowIndicatorButton = cva({
+const cvaOverflowIndicatorHit = cva({
     base: [
-        "shadow-md",
+        "pointer-events-auto",
+        "inline-flex",
+        "h-full",
+        "items-center",
+        "justify-center",
+        "px-1",
+        "border-0",
+        "bg-transparent",
+        "cursor-pointer",
+        "supports-[color:contrast-color(white)]:[color:contrast-color(var(--hos-surface,Canvas))]",
+        "supports-[not_(color:contrast-color(white))]:text-neutral-900",
+        "supports-[not_(color:contrast-color(white))]:[filter:drop-shadow(0_0_0.5px_#fff)_drop-shadow(0_1px_0_#fff)_drop-shadow(0_-1px_0_#fff)_drop-shadow(1px_0_0_#fff)_drop-shadow(-1px_0_0_#fff)]",
         "opacity-0",
+        "starting:opacity-0",
         "transition-opacity",
         "duration-200",
-        "pointer-events-auto",
-        "starting:opacity-0",
-        "group-hover:opacity-100",
-        "group-focus-within:opacity-100",
-        "rounded-full",
-        "mx-1",
+        // Keyboard focus (not a plain mouse-click `:focus`) always reveals the control it landed
+        // on, even the disabled one at an exhausted edge -- that's the only way a sighted keyboard
+        // user gets to see what they just tabbed to.
+        "group-has-[:focus-visible]:opacity-100",
     ],
+    variants: {
+        disabled: {
+            // Nothing to scroll to on this side: don't let a mouse hover over the row reveal a
+            // control that would be a no-op if clicked.
+            true: [],
+            false: ["group-hover:opacity-100"],
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
 });
 
 /**
- * Overflow indicator component that shows visual cues when content extends beyond visible area
- * Shows a scroll button on hover to navigate in the specified direction
+ * Edge control for HorizontalOverflowScroller. The fade lives on the content
+ * mask; this is the hover/focus hit target that pages left or right.
  *
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, style, }) => {
+const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, disabled = false, style, }) => {
+    const [t] = useTranslation();
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), "data-testid": dataTestId, style: style, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, disabled: true, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", title: "" // We dont want to show a tooltip here
-                    , variant: "secondary" }) })] }));
+    const ariaLabel = direction === "left" ? t("horizontalOverflowScroller.scrollLeft") : t("horizontalOverflowScroller.scrollRight");
+    return (jsx("div", { className: cvaOverflowIndicatorHitRow({ className, direction }), "data-testid": dataTestId, style: style, children: jsx("button", { "aria-disabled": disabled, "aria-label": ariaLabel, className: cvaOverflowIndicatorHit({ disabled }), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, onClick: disabled ? undefined : onClickScroll, type: "button", children: jsx(Icon, { ariaHidden: true, name: iconName, size: "small" }) }) }));
 };
 
 /**
  * HorizontalOverflowScroller displays child elements in a horizontal row with automatic overflow detection.
- * When content overflows, it shows left/right scroll indicators with click-to-scroll functionality.
+ * When content overflows, it fades the overflowing edge and reveals chevrons on hover or focus so the row can be paged.
+ *
+ * The fade is a CSS mask on the content itself, so it works on any background. At rest the ramp is short so more
+ * items stay visible; hover grows a solid plateau under the chevron and pushes the ramp further in, while
+ * keyboard focus only extends the ramp — a plateau there would erase the focus ring of a child flush with the
+ * edge. Set `--hos-surface` on an ancestor to the background color behind the scroller so the chevrons pick a
+ * contrasting color. It defaults to `Canvas`.
  *
  * ### When to use
  * Use HorizontalOverflowScroller to display a row of items (cards, tags, buttons) that may overflow on smaller screens, with visual cues that more content is available.
  *
  * ### When not to use
  * Do not use HorizontalOverflowScroller for tab navigation — use `TabList` which has its own scroll handling.
+ * Do not use it to hide extra actions — use `MoreMenu` when the overflowing items are secondary actions rather than a row of content to browse.
  *
  * @example Horizontal scroller for KPI cards
  * ```tsx
@@ -5878,36 +5954,36 @@ const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, on
  * @returns {ReactElement} HorizontalOverflowScroller component
  */
 const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, style, ref, }) => {
-    const childrenArray = Children.toArray(children);
-    const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
-    const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
+    const onScrollStateChangeRef = useRef(onScrollStateChange);
+    useEffect(() => {
+        onScrollStateChangeRef.current = onScrollStateChange;
+    }, [onScrollStateChange]);
+    const handleScrollStateChange = useCallback((state) => {
+        onScrollStateChangeRef.current?.({
+            isScrollable: state.isScrollable,
+            isAtBeginning: state.isAtBeginning,
+            isAtEnd: state.isAtEnd,
+        });
+    }, []);
+    const { ref: scrollRef, element, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
         direction: "horizontal",
-        onScrollStateChange: onScrollStateChange
-            ? (state) => onScrollStateChange({
-                isScrollable: state.isScrollable,
-                isAtBeginning: state.isAtBeginning,
-                isAtEnd: state.isAtEnd,
-            })
-            : undefined,
+        onScrollStateChange: handleScrollStateChange,
     });
-    const mergedRef = useMergeRefs([measureRef, scrollRef, ref]);
-    const handleScrollLeft = () => {
-        if (!element || containerGeometry?.width === undefined)
-            return;
-        element.scrollBy({
-            left: -containerGeometry.width,
-            behavior: "smooth",
-        });
-    };
-    const handleScrollRight = () => {
-        if (!element || containerGeometry?.width === undefined)
+    const mergedRef = useMergeRefs([scrollRef, ref]);
+    const canScrollLeft = isScrollable && !isAtBeginning;
+    const canScrollRight = isScrollable && !isAtEnd;
+    const scrollByPage = useCallback((direction) => {
+        if (!element) {
             return;
+        }
         element.scrollBy({
-            left: containerGeometry.width,
+            left: direction * element.clientWidth,
             behavior: "smooth",
         });
-    };
-    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment$1, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    }, [element]);
+    return (jsxs(Fragment, { children: [jsx("style", { children: fadeMaskStyleSheet }), jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsx("div", { className: cvaHorizontalOverflowScroller({
+                            className: cvaHorizontalOverflowScrollerFadeMask({ canScrollLeft, canScrollRight }),
+                        }), "data-testid": dataTestId, ref: mergedRef, children: children }), isScrollable ? (jsx(OverflowIndicator, { "data-testid": dataTestId ? `${dataTestId}-left-indicator` : undefined, direction: "left", disabled: !canScrollLeft, onClickScroll: () => scrollByPage(-1) })) : null, isScrollable ? (jsx(OverflowIndicator, { "data-testid": dataTestId ? `${dataTestId}-right-indicator` : undefined, direction: "right", disabled: !canScrollRight, onClickScroll: () => scrollByPage(1) })) : null] })] }));
 };
 
 const cvaIndicator = cva({ base: ["inline-flex", "items-center"] });
@@ -8289,6 +8365,7 @@ const cvaMoreMenu = cva({ base: ["p-0"] });
  *
  * ### When not to use
  * Do not use MoreMenu for primary actions that should always be visible. Use `Button` instead.
+ * Do not use it to overflow a row of content (tags, KPIs, chips) — use `HorizontalOverflowScroller` when those items should stay visible and be browsed horizontally.
  *
  * @example Action items with render prop — Pass a function as `children` to receive the `close` callback and dismiss the menu after an action.
  * ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.13.11",
+  "version": "2.13.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.26",
-    "@trackunit/css-class-variance-utilities": "2.0.7",
-    "@trackunit/shared-utils": "1.16.42",
-    "@trackunit/ui-icons": "1.14.35",
+    "@trackunit/ui-design-tokens": "1.15.28",
+    "@trackunit/css-class-variance-utilities": "2.0.9",
+    "@trackunit/shared-utils": "1.16.44",
+    "@trackunit/ui-icons": "1.14.37",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.51"
+    "@trackunit/i18n-library-translation": "2.4.53"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.d.ts

@@ -1,27 +1,35 @@
-import { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
+export type HorizontalOverflowScrollState = {
+    readonly isScrollable: boolean;
+    readonly isAtBeginning: boolean;
+    readonly isAtEnd: boolean;
+};
 export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     children: ReactNode;
     /**
-     * Callback fired when scroll state changes (scrollable, at edges, etc.)
+     * Called when overflow or edge position changes.
      */
-    onScrollStateChange?: (state: {
-        isScrollable: boolean;
-        isAtBeginning: boolean;
-        isAtEnd: boolean;
-    }) => void;
+    onScrollStateChange?: (state: HorizontalOverflowScrollState) => void;
 }
 /**
  * HorizontalOverflowScroller displays child elements in a horizontal row with automatic overflow detection.
- * When content overflows, it shows left/right scroll indicators with click-to-scroll functionality.
+ * When content overflows, it fades the overflowing edge and reveals chevrons on hover or focus so the row can be paged.
+ *
+ * The fade is a CSS mask on the content itself, so it works on any background. At rest the ramp is short so more
+ * items stay visible; hover grows a solid plateau under the chevron and pushes the ramp further in, while
+ * keyboard focus only extends the ramp — a plateau there would erase the focus ring of a child flush with the
+ * edge. Set `--hos-surface` on an ancestor to the background color behind the scroller so the chevrons pick a
+ * contrasting color. It defaults to `Canvas`.
  *
  * ### When to use
  * Use HorizontalOverflowScroller to display a row of items (cards, tags, buttons) that may overflow on smaller screens, with visual cues that more content is available.
  *
  * ### When not to use
  * Do not use HorizontalOverflowScroller for tab navigation — use `TabList` which has its own scroll handling.
+ * Do not use it to hide extra actions — use `MoreMenu` when the overflowing items are secondary actions rather than a row of content to browse.
  *
  * @example Horizontal scroller for KPI cards
  * ```tsx

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.variants.d.ts

@@ -1,3 +1,4 @@
+export declare const fadeMaskStyleSheet = "\n  @property --tu-hos-solid-left {\n    syntax: '<length>';\n    initial-value: 0px;\n    inherits: false;\n  }\n\n  @property --tu-hos-solid-right {\n    syntax: '<length>';\n    initial-value: 0px;\n    inherits: false;\n  }\n\n  @property --tu-hos-fade-left {\n    syntax: '<length>';\n    initial-value: 0px;\n    inherits: false;\n  }\n\n  @property --tu-hos-fade-right {\n    syntax: '<length>';\n    initial-value: 0px;\n    inherits: false;\n  }\n";
 export declare const cvaHorizontalOverflowScroller: import("cva").CVAComponent<Omit<{
     base: string[];
 }, "defaultVariants"> & {
@@ -10,3 +11,37 @@ export declare const cvaHorizontalOverflowScrollerAndIndicatorsContainer: import
     variants: unknown;
     defaultVariants: Omit<{}, never>;
 }, unknown>;
+export declare const cvaHorizontalOverflowScrollerFadeMask: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        canScrollLeft: {
+            true: string[];
+            false: string[];
+        };
+        canScrollRight: {
+            true: string[];
+            false: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        canScrollLeft: {
+            true: string[];
+            false: string[];
+        };
+        canScrollRight: {
+            true: string[];
+            false: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    canScrollLeft: {
+        true: string[];
+        false: string[];
+    };
+    canScrollRight: {
+        true: string[];
+        false: string[];
+    };
+}>;

package/src/components/HorizontalOverflowScroller/OverflowIndicator.d.ts

@@ -1,23 +1,27 @@
-import { MouseEventHandler, ReactElement } from "react";
+import { type MouseEventHandler, type ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import type { Styleable } from "../../common/Styleable";
 type OverflowDirection = "left" | "right";
 export interface OverflowIndicatorProps extends CommonProps, Styleable {
     /**
-     * Direction of the overflow indicator
+     * Which edge of the scroller this control sits on.
      */
     direction: OverflowDirection;
     /**
-     * Callback function to handle scroll action
+     * Called when the chevron is activated to page in this direction.
      */
     onClickScroll?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether the control has reached the corresponding scroll edge.
+     */
+    disabled?: boolean;
 }
 /**
- * Overflow indicator component that shows visual cues when content extends beyond visible area
- * Shows a scroll button on hover to navigate in the specified direction
+ * Edge control for HorizontalOverflowScroller. The fade lives on the content
+ * mask; this is the hover/focus hit target that pages left or right.
  *
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-export declare const OverflowIndicator: ({ className, "data-testid": dataTestId, direction, onClickScroll, style, }: OverflowIndicatorProps) => ReactElement;
+export declare const OverflowIndicator: ({ className, "data-testid": dataTestId, direction, onClickScroll, disabled, style, }: OverflowIndicatorProps) => ReactElement;
 export {};

package/src/components/HorizontalOverflowScroller/OverflowIndicator.variants.d.ts

@@ -1,10 +1,4 @@
-export declare const cvaOverflowIndicatorContainer: import("cva").CVAComponent<Omit<{
-    base: string[];
-}, "defaultVariants"> & {
-    variants: unknown;
-    defaultVariants: Omit<{}, never>;
-}, unknown>;
-export declare const cvaOverflowIndicatorGradient: import("cva").CVAComponent<Omit<{
+export declare const cvaOverflowIndicatorHitRow: import("cva").CVAComponent<Omit<{
     base: string[];
     variants: {
         direction: {
@@ -26,31 +20,30 @@ export declare const cvaOverflowIndicatorGradient: import("cva").CVAComponent<Om
         right: string[];
     };
 }>;
-export declare const cvaJustificationContainer: import("cva").CVAComponent<Omit<{
+export declare const cvaOverflowIndicatorHit: import("cva").CVAComponent<Omit<{
     base: string[];
     variants: {
-        direction: {
-            left: string[];
-            right: string[];
+        disabled: {
+            true: never[];
+            false: string[];
         };
     };
+    defaultVariants: {
+        disabled: false;
+    };
 }, "defaultVariants"> & {
     variants: {
-        direction: {
-            left: string[];
-            right: string[];
+        disabled: {
+            true: never[];
+            false: string[];
         };
     };
-    defaultVariants: Omit<{}, never>;
+    defaultVariants: Omit<{}, "disabled"> & {
+        disabled: false;
+    };
 }, {
-    direction: {
-        left: string[];
-        right: string[];
+    disabled: {
+        true: never[];
+        false: string[];
     };
 }>;
-export declare const cvaOverflowIndicatorButton: import("cva").CVAComponent<Omit<{
-    base: string[];
-}, "defaultVariants"> & {
-    variants: unknown;
-    defaultVariants: Omit<{}, never>;
-}, unknown>;

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -50,6 +50,7 @@ export interface MoreMenuProps extends CommonProps, Styleable, Refable<HTMLDivEl
  *
  * ### When not to use
  * Do not use MoreMenu for primary actions that should always be visible. Use `Button` instead.
+ * Do not use it to overflow a row of content (tags, KPIs, chips) — use `HorizontalOverflowScroller` when those items should stay visible and be browsed horizontally.
  *
  * @example Action items with render prop — Pass a function as `children` to receive the `close` callback and dismiss the menu after an action.
  * ```tsx