@duro-app/ui 4.3.0 → 4.5.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, s as xt, R as rt, H as kt, a as pt, B as bt, c as mt, C as ft, b as ht, d as yt } from "./Table-JTgcR_Fh.js";
+import { M as F, s as xt, R as rt, H as kt, a as pt, B as bt, c as mt, C as ft, b as ht, d as yt } from "./Table-CUp12BKZ.js";
 import { jsx as u, jsxs as B } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-B2IcI8_O.js";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as St, getFilteredRowModel as Tt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

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

package/src/components/ActionBar/ActionBar.meta.ts

@@ -7,6 +7,7 @@ export const meta: ComponentMeta = {
     'Bulk actions on table selections (delete, revoke, export)',
     'Multi-select workflows where actions apply to all selected items',
     'Selection-scoped verbs on a canvas/editor surface (set `bottomOffset` to clear any bottom chrome such as zoom controls)',
+    'A docked side panel (DetailPanel) is open: pass its width as `insetInlineEnd` so the bar centres beside it, not under it (follows the writing direction: the left edge in right-to-left)',
   ],
   whenNotToUse: [
     'Single-item actions that have an inline home — use inline buttons or a Menu',
@@ -18,6 +19,12 @@ export const meta: ComponentMeta = {
       kind: 'composition',
       relationship: 'Common pattern: Table checkboxes + ActionBar for bulk ops',
     },
+    {
+      component: 'DetailPanel',
+      kind: 'composition',
+      relationship:
+        "With a DetailPanel docked at the end edge, pass the panel's width as insetInlineEnd",
+    },
   ],
   example: `<ActionBar selectedItemCount={selected.size} onClearSelection={() => setSelected(new Set())}>
   <Button variant="danger" size="small" onClick={handleDelete}>Delete</Button>

package/src/components/ActionBar/ActionBar.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, within} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ActionBar} from './ActionBar'
 import {Button} from '../Button/Button'
@@ -155,8 +155,7 @@ export const Default: Story = {
       onClearSelection={args.onClearSelection as () => void}
     />
   ),
-  play: async ({canvasElement}) => {
-    const canvas = within(canvasElement)
+  play: async () => {
     // The ActionBar is portalled to document.body, so query from there
     const toolbar = document.querySelector('[role="toolbar"]')
     await expect(toolbar).toBeInTheDocument()
@@ -310,3 +309,96 @@ export const AllVariants: Story = {
     </html.div>
   ),
 }
+
+// A panel docked at the window's end edge, standing in for an open DetailPanel.
+const docked = css.create({
+  panel: {
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    insetInlineEnd: 0,
+    width: 360,
+    borderInlineStartWidth: 1,
+    borderInlineStartStyle: 'solid',
+  },
+})
+
+// Real buttons: they don't shrink below their labels, so together they are
+// wider than the free area beside the panel.
+const WIDE_ACTIONS = [
+  'Duplicate',
+  'Move to section',
+  'Copy style',
+  'Paste style',
+  'Group',
+  'Ungroup',
+  'Bring forward',
+  'Send backward',
+  'Delete',
+]
+
+const barRect = () =>
+  (document.querySelector('[role="toolbar"]') as Element).getBoundingClientRect()
+const panelRect = () =>
+  (document.querySelector('[data-testid="docked-panel"]') as Element).getBoundingClientRect()
+
+export const NoInset: Story = {
+  render: () => (
+    <ActionBar selectedItemCount={2} onClearSelection={() => {}}>
+      <Button variant="secondary" size="small">
+        Delete
+      </Button>
+    </ActionBar>
+  ),
+  play: async () => {
+    const bar = barRect()
+    const centre = document.documentElement.clientWidth / 2
+    // Today's placement: centred on the window.
+    await expect(Math.abs(bar.left + bar.width / 2 - centre)).toBeLessThanOrEqual(1)
+  },
+}
+
+export const DockedPanel: Story = {
+  render: () => (
+    <>
+      <html.div style={docked.panel} data-testid="docked-panel" />
+      <ActionBar selectedItemCount={2} insetInlineEnd={360} onClearSelection={() => {}}>
+        <Button variant="secondary" size="small">
+          Delete
+        </Button>
+      </ActionBar>
+    </>
+  ),
+  play: async () => {
+    const bar = barRect()
+    const panel = panelRect()
+    // Clear of the panel, and centred in what is left of the window.
+    await expect(bar.right).toBeLessThanOrEqual(panel.left - 24)
+    await expect(Math.abs(bar.left + bar.width / 2 - panel.left / 2)).toBeLessThanOrEqual(1)
+  },
+}
+
+export const DockedPanelWideBar: Story = {
+  render: () => (
+    <>
+      <html.div style={docked.panel} data-testid="docked-panel" />
+      <ActionBar selectedItemCount={2} insetInlineEnd={360} onClearSelection={() => {}}>
+        {WIDE_ACTIONS.map((a) => (
+          <Button key={a} variant="secondary" size="small">
+            {a}
+          </Button>
+        ))}
+      </ActionBar>
+    </>
+  ),
+  play: async () => {
+    // A bar wider than the free area still keeps 24px clear of the panel,
+    // and so does what it holds: the actions scroll, they don't spill.
+    const limit = panelRect().left - 24
+    await expect(barRect().right).toBeLessThanOrEqual(limit)
+    const last = await within(document.body).findByRole('button', {name: 'Delete'})
+    const actions = last.parentElement!
+    await expect(actions.getBoundingClientRect().right).toBeLessThanOrEqual(limit)
+    await expect(actions.scrollWidth).toBeGreaterThan(actions.clientWidth)
+  },
+}

package/src/components/ActionBar/ActionBar.tsx

@@ -22,6 +22,13 @@ export interface ActionBarProps {
    * height. Defaults to the spacing.lg token.
    */
   bottomOffset?: SpacingToken | number
+  /**
+   * Width in px of chrome docked at the window's inline-end edge (right in
+   * left-to-right, left in right-to-left), such as an open DetailPanel: the
+   * bar centres in what is left and keeps 24px clear of it. 0 or omitted
+   * centres on the window.
+   */
+  insetInlineEnd?: number
   /** Action buttons to display. */
   children: ReactNode
 }
@@ -33,6 +40,7 @@ function ActionBarContent({
   onClearSelection,
   dismissible = true,
   bottomOffset,
+  insetInlineEnd = 0,
   children,
 }: ActionBarProps) {
   const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
@@ -44,6 +52,7 @@ function ActionBarContent({
       aria-label={label}
       style={[
         styles.overlay,
+        insetInlineEnd > 0 ? styles.inset(insetInlineEnd) : styles.centered,
         bottomOffset != null &&
           styles.overlayOffset(
             typeof bottomOffset === 'number' ? bottomOffset : SPACING_PX[bottomOffset],
@@ -55,7 +64,9 @@ function ActionBarContent({
         {label}
       </html.span>
       <html.div style={[styles.separator, isEmphasized && styles.separatorEmphasized]} />
-      <html.div style={styles.actions}>{children}</html.div>
+      <html.div style={[styles.actions, insetInlineEnd > 0 && styles.actionsScroll]}>
+        {children}
+      </html.div>
       {dismissible && (
         <html.button
           type="button"

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

@@ -9,8 +9,6 @@ export const styles = css.create({
   overlay: {
     position: 'fixed',
     bottom: spacing.lg,
-    left: '50%',
-    transform: 'translateX(-50%)',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -26,8 +24,25 @@ export const styles = css.create({
     borderRadius: radii.md,
     boxShadow: shadows.lg,
     zIndex: 50,
+  },
+  // Centred on the window: the default, with nothing docked at its edge.
+  centered: {
+    left: '50%',
+    transform: 'translateX(-50%)',
     maxWidth: 'calc(100vw - 48px)',
   },
+  // Centred in the window minus chrome docked at the inline-end edge (a
+  // DetailPanel). Both insets and auto margins centre a fixed box of
+  // fit-content width in what is left, measured on the containing block
+  // (the window without a classic scrollbar), not on 100vw.
+  inset: (end: number) => ({
+    insetInlineStart: 0,
+    insetInlineEnd: end,
+    marginInlineStart: 'auto',
+    marginInlineEnd: 'auto',
+    width: 'fit-content',
+    maxWidth: `calc(100% - ${end}px - 48px)`,
+  }),
   overlayOffset: (bottom: number) => ({
     bottom,
   }),
@@ -51,6 +66,23 @@ export const styles = css.create({
     alignItems: 'center',
     gap: spacing.sm,
   },
+  // Beside a docked panel the room is narrower: more actions than fit scroll
+  // instead of spilling past the bar. A scroll box clips vertically too, so
+  // the row gets room on every side for the buttons' focus rings, taken back
+  // by its margin so the bar keeps its size.
+  actionsScroll: {
+    minWidth: 0,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    marginTop: `calc(-1 * ${spacing.xs})`,
+    marginBottom: `calc(-1 * ${spacing.xs})`,
+    marginLeft: `calc(-1 * ${spacing.xs})`,
+    marginRight: `calc(-1 * ${spacing.xs})`,
+  },
   closeButton: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/Combobox/Combobox.meta.ts

@@ -18,6 +18,12 @@ export const meta: ComponentMeta = {
     optional: ['Empty'],
   },
   relatedTo: [
+    {
+      component: 'Popover',
+      kind: 'composition',
+      relationship:
+        'Inside Popover.Popup a Combobox keeps the popover open while you choose; Escape closes only the list',
+    },
     {
       component: 'Select',
       kind: 'contrast',

package/src/components/Combobox/Combobox.tsx

@@ -5,6 +5,7 @@ import {styles} from './styles.css'
 import {ComboboxContext, useCombobox} from './ComboboxContext'
 import {useComboboxRoot} from './useComboboxRoot'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {usePopoverLayer} from '../Popover/PopoverLayerContext'
 
 // --- Root ---
 interface RootProps {
@@ -137,6 +138,7 @@ function Trigger({children}: {children?: ReactNode}) {
 function Popup({children}: {children: ReactNode}) {
   const {open, listboxId, rootRef} = useCombobox()
   const mount = usePortalMount()
+  const listboxRef = useRef<HTMLDivElement>(null)
   const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
 
   // Measure the root each time the popup opens, and re-measure on scroll/resize
@@ -163,10 +165,13 @@ function Popup({children}: {children: ReactNode}) {
     }
   }, [open, rootRef])
 
+  usePopoverLayer(listboxRef, {active: open && coords !== null})
+
   if (!open || !coords) return null
 
   const node = (
     <html.div
+      ref={listboxRef}
       id={listboxId}
       role="listbox"
       style={[styles.popup, styles.popupPosition(coords.top, coords.left, coords.width)]}

package/src/components/DetailPanel/DetailPanel.meta.ts

@@ -18,6 +18,12 @@ export const meta: ComponentMeta = {
     optional: ['Title', 'Footer', 'Close'],
   },
   relatedTo: [
+    {
+      component: 'ActionBar',
+      kind: 'composition',
+      relationship:
+        "An ActionBar shown while the panel is open takes the panel's width as insetInlineEnd",
+    },
     {
       component: 'Drawer',
       kind: 'contrast',

package/src/components/Drawer/Drawer.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Use for secondary workflows, settings panels, or mobile-friendly detail views.',
+    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). Use for secondary workflows, settings panels, or mobile-friendly detail views.',
   whenToUse: [
     'Settings or configuration panels that slide in from the side',
     'Mobile-friendly detail views (bottom sheet pattern)',

package/src/components/Drawer/Drawer.tsx

@@ -233,6 +233,16 @@ function Portal({children, size = 'md'}: PortalProps) {
     panelRef,
   } = useDrawer()
   const mount = usePortalMount()
+  // The shown panel element, tracked as state so swipe listeners follow it
+  // when the portal mount arrives and the panel is remounted into it.
+  const [panel, setPanel] = useState<HTMLDivElement | null>(null)
+  const attachPanel = useCallback(
+    (el: HTMLDivElement | null) => {
+      panelRef.current = el
+      setPanel(el)
+    },
+    [panelRef],
+  )
 
   const handleBackdropClick = useCallback(() => {
     if (dismissable) {
@@ -245,7 +255,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     anchor,
     enabled: swipeEnabled && open && !closing,
     onDismiss: requestCloseImmediate,
-    panelRef,
+    panel,
   })
 
   if (!open) return null
@@ -269,7 +279,7 @@ function Portal({children, size = 'md'}: PortalProps) {
       {/* Viewport */}
       <html.div style={[styles.viewport, viewportAnchorMap[anchor]]} data-drawer-viewport="">
         <html.div
-          ref={panelRef}
+          ref={attachPanel}
           role="dialog"
           aria-modal={true}
           aria-labelledby={titleId}

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 {ROW_HEIGHT} from '../Toggle/rowHeight'
+
+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 * ROW_HEIGHT.coarse + 3 * 4 + 2 * 4
+    await waitFor(() => expect(Math.abs(viewport.clientHeight - expected)).toBeLessThanOrEqual(2))
+    const toggle = viewport.querySelector('button')!.getBoundingClientRect()
+    // exact: Toggle's styles repeat ROW_HEIGHT, and a drift must fail here
+    await expect(Math.abs(toggle.height - ROW_HEIGHT.coarse)).toBeLessThanOrEqual(0.5)
+    await expect(toggle.width).toBeGreaterThanOrEqual(ROW_HEIGHT.coarse)
+  },
+}