@duro-app/ui 4.4.0 → 5.0.0

package/src/components/Drawer/DrawerScroll.stories.tsx

@@ -0,0 +1,292 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor} from 'storybook/test'
+import {cdp, page} from 'vitest/browser'
+import {Drawer} from './Drawer'
+import {ToggleGroup} from '../ToggleGroup/ToggleGroup'
+import {Toggle} from '../Toggle/Toggle'
+import {Icon, type IconName} from '../Icon'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+
+const meta: Meta = {
+  title: 'Components/Drawer/Scroll',
+  parameters: {layout: 'fullscreen'},
+}
+
+export default meta
+type Story = StoryObj
+
+const ICON_NAMES: IconName[] = [
+  'x-circle',
+  'check-circle',
+  'check-done',
+  'clock',
+  'forbidden',
+  'info-circle',
+  'alert-triangle',
+  'shield',
+  'lock',
+  'key',
+  'map',
+  'layers',
+  'repeat',
+  'database',
+  'shield-check',
+  'route',
+  'git-branch',
+  'menu',
+  'pin',
+  'server',
+  'hard-drive',
+  'box',
+  'image',
+  'tag',
+  'pie-chart',
+  'users',
+  'user-plus',
+  'mail',
+  'file-text',
+  'plug',
+  'search',
+  'mic',
+  'sun',
+  'moon',
+  'monitor',
+  'contrast',
+  'info-circle-filled',
+  'alert-triangle-filled',
+  'check-circle-filled',
+  'x-circle-filled',
+  'shield-filled',
+  'lock-filled',
+]
+
+function Scene({pressed}: {pressed?: string} = {}) {
+  return (
+    <Drawer.Root anchor="bottom" defaultOpen>
+      <Drawer.Portal>
+        <Drawer.Header>
+          <Drawer.Title>Pick an icon</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>
+          <ToggleGroup
+            wrap
+            maxRows={3}
+            size="small"
+            aria-label="Icon"
+            defaultValue={pressed ? [pressed] : []}
+          >
+            {ICON_NAMES.map((name) => (
+              <Toggle key={name} value={name} aria-label={name}>
+                <Icon name={name} size="sm" />
+              </Toggle>
+            ))}
+          </ToggleGroup>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+type Point = {x: number; y: number}
+
+/** `CDPSession` is empty until the provider's typings load; `send` exists at runtime. */
+const cdpSend = (method: string, params: object) =>
+  (cdp() as unknown as {send: (method: string, params: object) => Promise<unknown>}).send(
+    method,
+    params,
+  )
+
+const pause = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+/**
+ * CDP input lands in top-level page coordinates; the story runs in an iframe
+ * the test runner offsets and may scale to fit. Map a point up every frame.
+ */
+function toPage(p: Point): Point {
+  let {x, y} = p
+  let win: Window = window
+  while (win.frameElement && win.parent !== win) {
+    const rect = win.frameElement.getBoundingClientRect()
+    const scale = rect.width / win.innerWidth
+    x = rect.left + x * scale
+    y = rect.top + y * scale
+    win = win.parent
+  }
+  return {x, y}
+}
+
+/**
+ * A page-coordinate touch point with a 1px radius: Chrome's touch adjustment
+ * snaps a fat default touch onto the nearest control, which would turn every
+ * drag in the list into a drag on a toggle.
+ */
+const touchAt = (p: Point) => ({...toPage(p), radiusX: 1, radiusY: 1})
+
+/** Real touch drag through CDP; synthetic pointer events don't scroll. */
+async function touchDrag(from: Point, to: Point) {
+  const steps = 12
+  const send = (type: string, touchPoints: Point[]) =>
+    cdpSend('Input.dispatchTouchEvent', {type, touchPoints: touchPoints.map(touchAt)})
+  await send('touchStart', [from])
+  for (let i = 1; i <= steps; i++) {
+    await send('touchMove', [
+      {x: from.x + ((to.x - from.x) * i) / steps, y: from.y + ((to.y - from.y) * i) / steps},
+    ])
+    await pause(16)
+  }
+  await send('touchEnd', [])
+}
+
+const getViewport = () => document.querySelector<HTMLElement>('[data-duro-scroll]')!
+const getDialog = () => document.querySelector('[role="dialog"]')
+
+/**
+ * A point inside the list that is not on a toggle, so a drag starting there
+ * is the case the deferral decides (a drag starting on a toggle is decided
+ * the same way, but on origin/main it was left to the native scroll).
+ */
+function freePoint(el: HTMLElement, fy: number): Point {
+  const r = el.getBoundingClientRect()
+  const y = r.top + r.height * fy
+  for (let dy = 0; dy < 12; dy++) {
+    for (let x = r.left + 2; x < r.right; x += 2) {
+      const hit = document.elementFromPoint(x, y + dy)
+      if (hit && el.contains(hit) && !hit.closest('button')) return {x, y: y + dy}
+    }
+  }
+  throw new Error('no free point in the list')
+}
+
+async function setup() {
+  await page.viewport(390, 844)
+  await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
+  await waitFor(() => expect(getViewport()).toBeTruthy())
+  const viewport = getViewport()
+  await expect(viewport.scrollHeight).toBeGreaterThan(viewport.clientHeight)
+  // let the slide-in animation finish
+  await pause(500)
+  return viewport
+}
+
+export const DragUpAtTopScrolls: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    await expect(viewport.scrollTop).toBe(0)
+    const from = freePoint(viewport, 0.7)
+    await touchDrag(from, {x: from.x, y: from.y - 60})
+    await pause(300)
+    await expect(viewport.scrollTop).toBeGreaterThan(0)
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const DragDownMidListScrolls: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    viewport.scrollTop = 40
+    await pause(100)
+    const before = viewport.scrollTop
+    await expect(before).toBeGreaterThan(0)
+    const from = freePoint(viewport, 0.5)
+    await touchDrag(from, {x: from.x, y: from.y + 20})
+    await pause(300)
+    await expect(viewport.scrollTop).toBeLessThan(before)
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const DragDownAtTopDismisses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    await expect(viewport.scrollTop).toBe(0)
+    const from = freePoint(viewport, 0.5)
+    await touchDrag(from, {x: from.x, y: from.y + 300})
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}
+
+export const DragDownOnHeaderDismisses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    await setup()
+    const title = [...document.querySelectorAll('[role="dialog"] *')].find(
+      (el) => el.textContent === 'Pick an icon',
+    ) as HTMLElement
+    const r = title.getBoundingClientRect()
+    const from = {x: r.left + r.width / 2, y: r.top + r.height / 2}
+    await touchDrag(from, {x: from.x, y: from.y + 300})
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}
+
+export const TapOnToggleStillPresses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    await setup()
+    const key = document.querySelector<HTMLElement>('[role="dialog"] button[aria-label="key"]')!
+    const r = key.getBoundingClientRect()
+    const at = toPage({x: r.left + r.width / 2, y: r.top + r.height / 2})
+    await cdpSend('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [{...at, radiusX: 1, radiusY: 1}],
+    })
+    await cdpSend('Input.dispatchTouchEvent', {type: 'touchEnd', touchPoints: []})
+    await waitFor(() => expect(key).toHaveAttribute('aria-pressed', 'true'))
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const MountKeepsTheDrawerStill: Story = {
+  // size the page before the render: a drawer mounts at its final width
+  beforeEach: async () => {
+    await page.viewport(390, 844)
+  },
+  render: () => <Scene pressed={ICON_NAMES[39]} />,
+  play: async () => {
+    const pageScroll = document.scrollingElement?.scrollTop
+    await waitFor(() => expect(getViewport()).toBeTruthy())
+    await pause(500)
+    const viewport = getViewport()
+    const body = viewport.closest('[role="dialog"]')!
+    // the list scrolled itself to the pressed icon …
+    await expect(viewport.scrollTop).toBeGreaterThan(0)
+    const pressed = viewport.querySelector('[aria-pressed="true"]')!.getBoundingClientRect()
+    const v = viewport.getBoundingClientRect()
+    await expect(pressed.top).toBeGreaterThanOrEqual(v.top - 1)
+    await expect(pressed.bottom).toBeLessThanOrEqual(v.bottom + 1)
+    // … and nothing outside it moved
+    for (const el of body.querySelectorAll<HTMLElement>('*')) {
+      if (el !== viewport && !viewport.contains(el)) await expect(el.scrollTop).toBe(0)
+    }
+    await expect(document.scrollingElement?.scrollTop).toBe(pageScroll)
+  },
+}
+
+/** The coarse-pointer rows of a wrapping group, measured, not inferred. */
+export const CoarsePointerRows: Story = {
+  render: () => (
+    <ToggleGroup wrap maxRows={3} size="small" aria-label="Icon">
+      {ICON_NAMES.map((name) => (
+        <Toggle key={name} value={name} aria-label={name}>
+          <Icon name={name} size="sm" />
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  ),
+  play: async () => {
+    // phone width, so 42 icons overflow three rows
+    await page.viewport(390, 844)
+    await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
+    await waitFor(() => expect(matchMedia('(pointer: coarse)').matches).toBe(true))
+    const viewport = getViewport()
+    const expected = 3.5 * SIZES_PX.touchTarget + 3 * 4 + 2 * 4
+    await waitFor(() => expect(Math.abs(viewport.clientHeight - expected)).toBeLessThanOrEqual(2))
+    const toggle = viewport.querySelector('button')!.getBoundingClientRect()
+    // exact: Toggle's styles read the same size tokens, and a drift must fail here
+    await expect(Math.abs(toggle.height - SIZES_PX.touchTarget)).toBeLessThanOrEqual(0.5)
+    await expect(toggle.width).toBeGreaterThanOrEqual(SIZES_PX.touchTarget)
+  },
+}

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

@@ -4,13 +4,15 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   // --- Backdrop ---
   backdrop: {
     position: 'fixed',
     inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    backgroundColor: colors.scrim,
     zIndex: 1000,
     // Portaled into the ThemeProvider mount, which is pointer-events: none:
     // the backdrop must take clicks back (outside click dismisses).
@@ -77,13 +79,13 @@ export const styles = css.create({
   panelHorizontal: {
     width: '100%',
     height: '100%',
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
   },
   panelVertical: {
     width: '100%',
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
     borderTopLeftRadius: radii.lg,
@@ -92,15 +94,15 @@ export const styles = css.create({
   },
   panelLeftBorder: {
     borderLeftWidth: 0,
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
   },
 
   // --- Panel widths (horizontal anchors) ---
-  sm: {maxWidth: 360},
-  md: {maxWidth: 480},
-  lg: {maxWidth: 640},
+  sm: {maxWidth: sizes.panelSm},
+  md: {maxWidth: sizes.panelMd},
+  lg: {maxWidth: sizes.panelLg},
 
   // --- Slide animations: Right ---
   slideInRight: {
@@ -166,7 +168,10 @@ export const styles = css.create({
   // The closeAnimationDuration prop token drives both these and the unmount
   // timeout, so the exit animation can never race the unmount.
   closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationMinimal: {animationDuration: duration.minimal},
+  closeDurationQuick: {animationDuration: duration.quick},
   closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBrisk: {animationDuration: duration.brisk},
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
@@ -221,7 +226,7 @@ export const styles = css.create({
     paddingLeft: spacing.lg,
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },
@@ -231,8 +236,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 32,
-    height: 32,
+    width: sizes.iconButton,
+    height: sizes.iconButton,
     borderRadius: radii.sm,
     borderWidth: 0,
     backgroundColor: {

package/src/components/Drawer/useSwipeDismiss.ts

@@ -21,7 +21,12 @@ interface UseSwipeDismissOptions {
   anchor: DrawerAnchor
   enabled: boolean
   onDismiss: () => void
-  panelRef: React.RefObject<HTMLDivElement | null>
+  /**
+   * The panel element itself, not a ref: a Drawer open from its first render
+   * draws the panel inline, then remounts it into the portal once the mount
+   * exists, and listeners must follow the element that is actually shown.
+   */
+  panel: HTMLDivElement | null
 }
 
 interface SwipeState {
@@ -32,6 +37,9 @@ interface SwipeState {
   startTime: number
   swiping: boolean
   panelSize: number
+  /** Inner Duro scroll viewport the gesture started in; capture is deferred until the axis is decided */
+  deferredScroll: HTMLElement | null
+  pointerId: number
 }
 
 /**
@@ -41,7 +49,7 @@ interface SwipeState {
  * Opposite direction: iOS-style — panel stays anchored, shows subtle
  * overscroll feedback (box-shadow intensifies), then snaps back.
  */
-export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipeDismissOptions) {
+export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDismissOptions) {
   const stateRef = useRef<SwipeState>({
     startX: 0,
     startY: 0,
@@ -50,6 +58,8 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
     startTime: 0,
     swiping: false,
     panelSize: 0,
+    deferredScroll: null,
+    pointerId: 0,
   })
 
   const isHorizontal = anchor === 'left' || anchor === 'right'
@@ -169,14 +179,18 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
   }, [])
 
   useEffect(() => {
-    if (!enabled) return
-    const panel = panelRef.current
-    if (!panel) return
+    if (!enabled || !panel) return
 
     function handlePointerDown(e: PointerEvent) {
       if (e.button !== 0) return
       const target = e.target as HTMLElement
-      if (target.closest('button, a, input, textarea, select, [role="button"]')) {
+      const scrollEl = target.closest<HTMLElement>('[data-duro-scroll]')
+      // Outside a ScrollArea a control keeps its press. Inside one the gesture
+      // is decided on the first move even from a control: a list of toggles is
+      // all buttons, and touch adjustment snaps a finger onto one. A tap
+      // (under the 8px slop) still presses it; a drag never captures before
+      // the decision, so the release lands on the panel, not the control.
+      if (!scrollEl && target.closest('button, a, input, textarea, select, [role="button"]')) {
         return
       }
 
@@ -190,14 +204,30 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       state.swiping = false
       state.panelSize = isHorizontal ? rect.width : rect.height
 
+      state.pointerId = e.pointerId
+      state.deferredScroll = scrollEl
+
       panel!.dataset.panelSize = String(state.panelSize)
-      panel!.setPointerCapture(e.pointerId)
+
+      // Inside a Duro ScrollArea the scroll may own the gesture: wait for the first move.
+      if (!state.deferredScroll) beginCapture(e.pointerId)
+    }
+
+    function beginCapture(pointerId: number) {
+      panel!.setPointerCapture(pointerId)
 
       // Freeze CSS animation — we take over positioning.
       // Never restore it; the panel is already at its final resting position.
       panel!.style.animation = 'none'
     }
 
+    /** True when the viewport can't scroll further against the dismiss direction */
+    function isAtDismissEdge(el: HTMLElement) {
+      if (!isHorizontal) return el.scrollTop <= 0
+      if (anchor === 'right') return el.scrollLeft <= 0
+      return el.scrollLeft + el.clientWidth >= el.scrollWidth - 1
+    }
+
     function handlePointerMove(e: PointerEvent) {
       const state = stateRef.current
       if (state.startTime === 0) return
@@ -219,8 +249,21 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
         } else {
           // Wrong axis — abort gesture
           state.startTime = 0
+          state.deferredScroll = null
           return
         }
+
+        const scrollEl = state.deferredScroll
+        if (scrollEl) {
+          state.deferredScroll = null
+          if (getMovement(state) <= 0 || !isAtDismissEdge(scrollEl)) {
+            // The scroll owns this gesture: no swiping, no capture, no preventDefault
+            state.swiping = false
+            state.startTime = 0
+            return
+          }
+          beginCapture(state.pointerId)
+        }
       }
 
       if (state.swiping) {
@@ -239,6 +282,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       const velocity = movement / elapsed
 
       state.startTime = 0
+      state.deferredScroll = null
 
       if (!state.swiping) {
         return
@@ -266,6 +310,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       const state = stateRef.current
       state.startTime = 0
       state.swiping = false
+      state.deferredScroll = null
       resetStyles(panel!)
     }
 
@@ -290,7 +335,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
     }
   }, [
     enabled,
-    panelRef,
+    panel,
     anchor,
     isHorizontal,
     getMovement,

package/src/components/Field/Field.stories.tsx

@@ -11,6 +11,7 @@ import {Checkbox} from '../Checkbox/Checkbox'
 import {Stack} from '../Stack/Stack'
 import {Fieldset} from '../Fieldset/Fieldset'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Field',
@@ -70,8 +71,8 @@ export const WithError: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
-  stackWide: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 600},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.dialogSm},
+  stackWide: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.pageSm},
 })
 
 export const FormExample: Story = {

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

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -21,7 +22,7 @@ export const styles = css.create({
     color: colors.text,
   },
   labelSide: {
-    minWidth: 120,
+    minWidth: sizes.labelMinW,
     paddingTop: spacing.sm,
     flexShrink: 0,
   },

package/src/components/Form/Form.stories.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn, userEvent, within} from 'storybook/test'
+import {expect, fn, userEvent} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Schema} from 'effect'
 import {Form} from './Form'
@@ -9,6 +9,7 @@ import {Input} from '../Input/Input'
 import {Textarea} from '../Textarea/Textarea'
 import {Fieldset} from '../Fieldset/Fieldset'
 import {Button} from '../Button/Button'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Form',
@@ -48,8 +49,8 @@ const ProfileSchema = Schema.Struct({
 })
 
 const wrapStyles = css.create({
-  wrap: {maxWidth: 400},
-  wrapWide: {maxWidth: 600},
+  wrap: {maxWidth: sizes.dialogSm},
+  wrapWide: {maxWidth: sizes.pageSm},
 })
 
 // --- Stories ---

package/src/components/Grid/Grid.meta.ts

@@ -24,14 +24,14 @@ export const meta: ComponentMeta = {
       relationship: 'Grid layout="split" with a List and a Panel is the split-pane recipe',
     },
   ],
-  example: `// Split: list ≥ 240px beside a detail pane, one column below md
+  example: `// Split: list ≥ sizes.gridColSm (240px) beside a detail pane, one column below md
 <Grid layout="split" gap="lg">
   <List.Root>…</List.Root>
   <Panel.Root>…</Panel.Root>
 </Grid>
 
 // Responsive: columns auto-fit based on min width
-<Grid minColumnWidth="280px" gap="md">
+<Grid minColumnWidth="gridColMd" gap="md">
   <Card>A</Card>
   <Card>B</Card>
   <Card>C</Card>

package/src/components/Grid/Grid.stories.tsx

@@ -8,6 +8,7 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
 import {useContainerQuery} from '../../hooks/useContainerQuery'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta<typeof Grid> = {
   title: 'Layout/Grid',
@@ -45,7 +46,7 @@ const localStyles = css.create({
   },
   frame: (width: number) => ({
     width,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
   }),
@@ -74,7 +75,7 @@ export const FixedColumns: Story = {
 
 export const AutoFit: Story = {
   render: () => (
-    <Grid gap="md" minColumnWidth="200px">
+    <Grid gap="md" minColumnWidth="gridColSm">
       <Cell>Card A</Cell>
       <Cell>Card B</Cell>
       <Cell>Card C</Cell>

package/src/components/Grid/Grid.tsx

@@ -4,6 +4,7 @@ import {styles} from './styles.css'
 import {isNative} from '../../platform'
 import {cellBasis, cellPosition, columnWeights, gridTemplate, type GridColumns} from './columns'
 import type {SpacingToken} from '@duro-app/tokens/keys'
+import {resolveLength, type Length} from '../../shared/length'
 
 export type GridLayout = 'split' | 'split-wide'
 
@@ -13,10 +14,11 @@ interface GridProps {
    *  two-thirds split. Weights are the portable form of a track list — a CSS
    *  template string would be silently ignored on native. */
   columns?: GridColumns
-  /** Responsive auto-fit: as many columns of at least this width as fit.
-   *  Wins over `columns` when both are set. On native this approximates to
-   *  cells of that minimum width that grow and wrap. */
-  minColumnWidth?: string
+  /** Responsive auto-fit: as many columns of at least this width as fit — a
+   *  size token key (`"gridColMd"`) or a relative length. Wins over `columns`
+   *  when both are set. On native this approximates to cells of that minimum
+   *  width that grow and wrap. */
+  minColumnWidth?: Length
   /**
    * A named responsive layout. `split` is list/detail (1:2, list ≥ 240px),
    * `split-wide` is nav/content (1:3, nav ≥ 280px). Each collapses to one
@@ -101,7 +103,7 @@ export function Grid({gap = 'md', columns, minColumnWidth, layout, children}: Gr
   const columnStyle = layout
     ? layoutMap[layout]
     : minColumnWidth
-      ? styles.autoFit(minColumnWidth)
+      ? styles.autoFit(resolveLength(minColumnWidth))
       : typeof columns === 'number'
         ? columnsMap[columns]
         : columns
@@ -136,7 +138,7 @@ function NativeGrid({gap = 'md', columns, minColumnWidth, children}: GridProps)
     return (
       <html.div style={[styles.nativeRow, gapMap[gap]]}>
         {items.map((child, index) => (
-          <html.div key={index} style={styles.nativeMinCell(minColumnWidth)}>
+          <html.div key={index} style={styles.nativeMinCell(resolveLength(minColumnWidth))}>
             {child}
           </html.div>
         ))}

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

@@ -22,7 +22,7 @@ export const styles = css.create({
   col4: {gridTemplateColumns: 'repeat(4, 1fr)'},
   col5: {gridTemplateColumns: 'repeat(5, 1fr)'},
   col6: {gridTemplateColumns: 'repeat(6, 1fr)'},
-  autoFit: (minWidth: string) => ({
+  autoFit: (minWidth: string | number) => ({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
   }),
   // Hosts the @container query for a named layout. A container cannot query
@@ -86,7 +86,7 @@ export const styles = css.create({
   // Auto-fit approximation: start at the minimum width, grow to fill. flexGrow
   // is fine here: this style is native-only, so RSD-web's forced flex-grow: 0
   // never applies.
-  nativeMinCell: (minWidth: string) => ({
+  nativeMinCell: (minWidth: string | number) => ({
     flexBasis: minWidth,
     flexGrow: 1,
     boxSizing: 'border-box',