@duro-app/ui 0.47.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.47.0"
+    "@duro-app/tokens": "^0.48.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/Table.stories.tsx

@@ -1198,12 +1198,26 @@ export const ScrollsHorizontallyWhenDense: Story = {
   play: async ({canvas}) => {
     const grid = canvas.getByRole('table')
     const scroller = grid.parentElement as HTMLElement
+    const frame = scroller.parentElement as HTMLElement
+    const rightFade = frame.lastElementChild as HTMLElement
+    const leftFade = rightFade.previousElementSibling as HTMLElement
     await waitFor(async () => {
       // Still tabular: all 8 headers present (NOT carded up).
       await expect(canvas.queryAllByRole('columnheader')).toHaveLength(8)
+      // The wrapper scrolls: content (8 × 120px ≈ 960) exceeds its 800px box.
+      await expect(scroller.scrollWidth).toBeGreaterThan(scroller.clientWidth + 2)
+      // Scroll affordance: at the start the RIGHT edge fades (more →), the
+      // left edge doesn't.
+      await expect(getComputedStyle(rightFade).opacity).toBe('1')
+      await expect(getComputedStyle(leftFade).opacity).toBe('0')
+    })
+    // Scroll to the end → the cue flips: the left edge fades, the right clears.
+    scroller.scrollLeft = scroller.scrollWidth
+    scroller.dispatchEvent(new Event('scroll'))
+    await waitFor(async () => {
+      await expect(getComputedStyle(leftFade).opacity).toBe('1')
+      await expect(getComputedStyle(rightFade).opacity).toBe('0')
     })
-    // The wrapper scrolls: content (8 × 120px ≈ 960) exceeds its 800px box.
-    await expect(scroller.scrollWidth).toBeGreaterThan(scroller.clientWidth + 2)
   },
 }
 

package/src/components/Table/Table.tsx

@@ -4,7 +4,9 @@ import {
   type MutableRefObject,
   createContext,
   useContext,
+  useEffect,
   useRef,
+  useState,
   Children,
   isValidElement,
 } from 'react'
@@ -169,6 +171,55 @@ function extractColumnMeta(
   }
 }
 
+// --- ScrollFrame ---
+//
+// Wraps the grid in the horizontal-scroll port and paints a soft fade at
+// whichever edge still has hidden columns, so a scrollable table advertises
+// that there's more to see (and stops advertising once you reach the end).
+// This is the ONLY JS the responsive Table uses, and it's purely cosmetic —
+// it reads scroll position and toggles fade opacity; it never changes layout,
+// so none of the flicker/oscillation risk of the old auto-stacking applies.
+function ScrollFrame({children}: {children: ReactNode}) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [edges, setEdges] = useState({start: false, end: false})
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const update = () => {
+      const overflowing = el.scrollWidth - el.clientWidth > 1
+      setEdges({
+        start: overflowing && el.scrollLeft > 1,
+        end: overflowing && el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      })
+    }
+    update()
+    el.addEventListener('scroll', update, {passive: true})
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null
+    ro?.observe(el)
+    return () => {
+      el.removeEventListener('scroll', update)
+      ro?.disconnect()
+    }
+  }, [])
+
+  return (
+    <html.div style={styles.scrollFrame}>
+      <html.div ref={scrollRef} style={styles.scrollX}>
+        {children}
+      </html.div>
+      <html.div
+        aria-hidden
+        style={[styles.edgeFade, styles.edgeFadeLeft, edges.start && styles.edgeFadeVisible]}
+      />
+      <html.div
+        aria-hidden
+        style={[styles.edgeFade, styles.edgeFadeRight, edges.end && styles.edgeFadeVisible]}
+      />
+    </html.div>
+  )
+}
+
 // --- Root ---
 
 interface RootProps {
@@ -240,7 +291,7 @@ export function Root({
   // a dense table overflows this wrapper and scrolls sideways instead of
   // crushing. Below it (@container ≤ sm) the grid is one column and there's
   // nothing to scroll. Non-responsive tables opt out of the frame entirely.
-  const framedGrid = responsive ? <html.div style={styles.scrollX}>{grid}</html.div> : grid
+  const framedGrid = responsive ? <ScrollFrame>{grid}</ScrollFrame> : grid
 
   // Slots render unconditionally — `responsive=false` still wants its sort/
   // pagination chrome. Only the containerType:inline-size wrapper is

package/src/components/Table/styles.css.ts

@@ -347,6 +347,42 @@ export const styles = css.create({
     WebkitOverflowScrolling: 'touch',
   },
 
+  // Positioning context for the scroll-affordance edge fades, which sit on
+  // top of the scroll port (not inside it, so they don't scroll away).
+  scrollFrame: {
+    position: 'relative',
+  },
+  // A soft fade pinned to a scroll edge that hints "there's more this way".
+  // It fades the content into the surface colour, so it reads in any theme.
+  // Toggled by opacity from JS scroll position; pointer-events off so it
+  // never eats clicks. Sits just inside the rounded frame border.
+  edgeFade: {
+    position: 'absolute',
+    top: 1,
+    bottom: 1,
+    width: spacing.xl,
+    pointerEvents: 'none',
+    opacity: 0,
+    transitionProperty: 'opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+  },
+  edgeFadeLeft: {
+    left: 1,
+    borderTopLeftRadius: radii.md,
+    borderBottomLeftRadius: radii.md,
+    backgroundImage: `linear-gradient(to left, transparent, ${colors.bgCard})`,
+  },
+  edgeFadeRight: {
+    right: 1,
+    borderTopRightRadius: radii.md,
+    borderBottomRightRadius: radii.md,
+    backgroundImage: `linear-gradient(to right, transparent, ${colors.bgCard})`,
+  },
+  edgeFadeVisible: {
+    opacity: 1,
+  },
+
   // Dynamic: grid columns applied on Root (non-responsive path only).
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,