@duro-app/ui 4.4.0 → 4.5.0

package/src/components/Popover/PopoverLayerContext.ts

@@ -0,0 +1,20 @@
+import {type RefObject, createContext, useContext, useLayoutEffect} from 'react'
+
+// A Popover's nested popups (a Select listbox, a Combobox listbox, a child
+// Popover) are portalled out of its DOM subtree. They register here so a press
+// on them counts as inside the Popover.
+export interface PopoverLayerContextValue {
+  register: (el: Element) => () => void
+}
+
+export const PopoverLayerContext = createContext<PopoverLayerContextValue | null>(null)
+
+/** Register the ref's element as part of the enclosing Popover's layer while `active`. */
+export function usePopoverLayer(ref: RefObject<Element | null>, {active}: {active: boolean}) {
+  const layer = useContext(PopoverLayerContext)
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!layer || !active || !el) return
+    return layer.register(el)
+  }, [layer, active, ref])
+}

package/src/components/Popover/PopoverLayers.stories.tsx

@@ -0,0 +1,234 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor, within} from 'storybook/test'
+import {userEvent} from '@testing-library/user-event'
+import {html} from 'react-strict-dom'
+import {Popover} from './Popover'
+import {Select} from '../Select/Select'
+import {Combobox} from '../Combobox/Combobox'
+import {Menu} from '../Menu/Menu'
+import {Stack} from '../Stack/Stack'
+
+const meta: Meta = {
+  title: 'Components/Popover/Layers',
+}
+
+export default meta
+type Story = StoryObj
+
+// Nested popups are portalled out of the canvas, so query the document.
+const page = () => within(document.body)
+
+const dialog = () => page().queryByRole('dialog', {name: 'Style'})
+
+function SelectItems() {
+  return (
+    <Select.Popup>
+      <Select.Item value="primary">
+        <Select.ItemText>Primary</Select.ItemText>
+      </Select.Item>
+      <Select.Item value="secondary">
+        <Select.ItemText>Secondary</Select.ItemText>
+      </Select.Item>
+    </Select.Popup>
+  )
+}
+
+function VariantSelect() {
+  return (
+    <Select.Root defaultValue="primary">
+      <Select.Trigger aria-label="Variant">
+        <Select.Value />
+        <Select.Icon />
+      </Select.Trigger>
+      <SelectItems />
+    </Select.Root>
+  )
+}
+
+function FruitCombobox() {
+  return (
+    <Combobox.Root>
+      <Combobox.Input placeholder="Search fruit...">
+        <Combobox.Trigger />
+      </Combobox.Input>
+      <Combobox.Popup>
+        <Combobox.Item value="apple">
+          <Combobox.ItemText>Apple</Combobox.ItemText>
+        </Combobox.Item>
+        <Combobox.Item value="banana">
+          <Combobox.ItemText>Banana</Combobox.ItemText>
+        </Combobox.Item>
+      </Combobox.Popup>
+    </Combobox.Root>
+  )
+}
+
+function Host({children}: {children: React.ReactNode}) {
+  return (
+    <Stack gap="md">
+      <Popover.Root>
+        <Popover.Trigger>Style</Popover.Trigger>
+        <Popover.Popup label="Style">{children}</Popover.Popup>
+      </Popover.Root>
+      <html.button type="button">Elsewhere</html.button>
+    </Stack>
+  )
+}
+
+export const SelectOutsideField: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await userEvent.click(page().getByRole('option', {name: 'Secondary'}))
+    await expect(trigger).toHaveTextContent('Secondary')
+    await expect(dialog()).toBeInTheDocument()
+  },
+}
+
+export const ComboboxOutsideField: Story = {
+  render: () => (
+    <Host>
+      <FruitCombobox />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const input = page().getByRole('combobox')
+    await userEvent.click(input)
+    await userEvent.click(await page().findByRole('option', {name: 'Banana'}))
+    await waitFor(() => expect(input).toHaveValue('Banana'))
+    await expect(dialog()).toBeInTheDocument()
+  },
+}
+
+export const SelectBackdropPress: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+    // The backdrop covers the viewport: a press at the corner lands on it.
+    const backdrop = document.elementFromPoint(2, 2) as HTMLElement
+    await userEvent.click(backdrop)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(dialog()).toBeInTheDocument()
+
+    // With the Select closed, an outside press closes the Popover.
+    await userEvent.click(canvas.getByRole('button', {name: 'Elsewhere'}))
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const SelectOutsidePopover: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Popover.Root>
+        <Popover.Trigger>Style</Popover.Trigger>
+        <Popover.Popup label="Style">
+          <Popover.Close>Done</Popover.Close>
+        </Popover.Popup>
+      </Popover.Root>
+      <VariantSelect />
+    </Stack>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    await expect(dialog()).toBeInTheDocument()
+    // The Select is not inside the Popover: choosing from it is an outside press.
+    await userEvent.click(canvas.getByRole('combobox', {name: 'Variant'}))
+    await userEvent.click(page().getByRole('option', {name: 'Secondary'}))
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedSelect: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await userEvent.keyboard('{Escape}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedMenu: Story = {
+  render: () => (
+    <Host>
+      <Menu.Root>
+        <Menu.Trigger>Actions</Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Item>Copy</Menu.Item>
+          <Menu.Item>Paste</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    await userEvent.click(page().getByRole('button', {name: 'Actions'}))
+    await expect(await page().findByRole('menu')).toBeVisible()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(page().queryByRole('menu')).not.toBeInTheDocument())
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedCombobox: Story = {
+  render: () => (
+    <Host>
+      <FruitCombobox />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const input = page().getByRole('combobox')
+    await userEvent.click(input)
+    await expect(await page().findByRole('listbox')).toBeVisible()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(page().queryByRole('listbox')).not.toBeInTheDocument())
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const TabFromNestedSelect: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+      <html.button type="button">After</html.button>
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await userEvent.tab()
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await waitFor(() => expect(trigger).not.toHaveFocus())
+  },
+}

package/src/components/ScrollArea/ScrollArea.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required.',
+    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.',
   whenToUse: [
     'Custom-styled scrollbars for content overflow areas',
     'Chat logs, code blocks, or long lists with constrained height',

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useRef, useCallback} from 'react'
+import {type ComponentProps, type ReactNode, useRef, useCallback} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {ScrollAreaContext, useScrollArea} from './ScrollAreaContext'
@@ -25,19 +25,25 @@ function Root({children}: RootProps) {
 interface ViewportProps {
   children: ReactNode
   maxHeight?: number | string
+  /** Extra styles for the viewport (e.g. a pointer-aware max height). */
+  style?: ComponentProps<typeof html.div>['style']
+  /** A roving-focus group owns the keyboard: drop the viewport's own tab stop
+   *  and region role. */
+  rovingOwner?: boolean
 }
 
-function Viewport({children, maxHeight}: ViewportProps) {
+function Viewport({children, maxHeight, style, rovingOwner = false}: ViewportProps) {
   const {viewportRef, viewportId} = useScrollArea()
 
   return (
     <html.div
       ref={viewportRef}
       id={viewportId}
-      tabIndex={0}
-      role="region"
-      aria-label="Scrollable content"
-      style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight)]}
+      data-duro-scroll=""
+      tabIndex={rovingOwner ? undefined : 0}
+      role={rovingOwner ? undefined : 'region'}
+      aria-label={rovingOwner ? undefined : 'Scrollable content'}
+      style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight), style]}
     >
       {children}
     </html.div>

package/src/components/Select/Select.meta.ts

@@ -17,6 +17,12 @@ export const meta: ComponentMeta = {
     optional: ['Value', 'Icon', 'ItemText'],
   },
   relatedTo: [
+    {
+      component: 'Popover',
+      kind: 'composition',
+      relationship:
+        'Inside Popover.Popup a Select keeps the popover open while you choose; its backdrop press and Escape close only the list',
+    },
     {
       component: 'Menu',
       kind: 'contrast',

package/src/components/Select/Select.tsx

@@ -6,6 +6,7 @@ import {SelectContext, useSelect} from './SelectContext'
 import {useSelectRoot} from './useSelectRoot'
 import {useFieldContext} from '../Field/FieldContext'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {usePopoverLayer} from '../Popover/PopoverLayerContext'
 
 // --- Root ---
 interface RootProps {
@@ -141,10 +142,16 @@ function Popup({children}: {children: ReactNode}) {
     }
   }, [open, triggerRef])
 
+  const listboxRef = useRef<HTMLDivElement>(null)
+  const backdropRef = useRef<HTMLDivElement>(null)
+  usePopoverLayer(listboxRef, {active: open})
+  usePopoverLayer(backdropRef, {active: open})
+
   const node = (
     <>
-      {open && <html.div style={styles.backdrop} onClick={close} />}
+      {open && <html.div ref={backdropRef} style={styles.backdrop} onClick={close} />}
       <html.div
+        ref={listboxRef}
         id={listboxId}
         role="listbox"
         aria-hidden={!open}

package/src/components/Select/useSelectRoot.ts

@@ -88,7 +88,12 @@ export function useSelectRoot({
     function handleKeyDown(e: KeyboardEvent) {
       const order = orderRef.current
       const items = itemsRef.current
-      if (order.length === 0) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        close()
+        return
+      }
+      if (order.length === 0 && e.key !== 'Tab') return
 
       switch (e.key) {
         case 'ArrowDown': {
@@ -132,7 +137,6 @@ export function useSelectRoot({
           })
           break
         }
-        case 'Escape':
         case 'Tab': {
           close()
           break

package/src/components/Toggle/Toggle.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection.',
+    'Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection. Under a coarse pointer (touch) every Toggle is at least 44×44px; in a wrapping ToggleGroup each keeps its own border and a fixed row height.',
   whenToUse: [
     'Toolbar buttons that toggle on/off (bold, italic, grid view)',
     'Within ToggleGroup for selecting from visible options',

package/src/components/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useCallback} from 'react'
+import {type ReactNode, useCallback, useLayoutEffect, useRef} from 'react'
 import {html} from 'react-strict-dom'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
@@ -23,6 +23,11 @@ interface ToggleProps {
   children: ReactNode
 }
 
+const wrappedSizeMap = {
+  default: styles.wrappedDefault,
+  small: styles.wrappedSmall,
+} as const
+
 const sizeMap = {
   default: styles.sizeDefault,
   small: styles.sizeSmall,
@@ -46,6 +51,14 @@ export function Toggle({
   const disabled = disabledProp || (group?.disabled ?? false)
   const size = group?.size ?? sizeProp
 
+  const wrap = group?.wrap ?? false
+  const ref = useRef<HTMLButtonElement>(null)
+  const register = group?.register
+  useLayoutEffect(() => {
+    if (!wrap || !register || value === undefined || !ref.current) return
+    return register(value, ref.current)
+  }, [wrap, register, value])
+
   const [standalonePressed, setStandalonePressed] = useControllableValue(
     controlledPressed,
     defaultPressed,
@@ -65,7 +78,10 @@ export function Toggle({
 
   return (
     <html.button
+      ref={ref}
       type="button"
+      tabIndex={wrap && value !== undefined ? (group?.tabStopValue === value ? 0 : -1) : undefined}
+      onFocus={wrap && value !== undefined ? () => group?.onItemFocus(value) : undefined}
       aria-pressed={pressed}
       aria-label={ariaLabel}
       disabled={disabled}
@@ -75,7 +91,8 @@ export function Toggle({
         styles.base,
         sizeMap[size],
         pressed ? styles.pressed : styles.unpressed,
-        isGrouped && styles.grouped,
+        wrap && wrappedSizeMap[size],
+        isGrouped && !wrap && styles.grouped,
         disabled && styles.disabled,
       ]}
     >

package/src/components/Toggle/rowHeight.ts

@@ -0,0 +1,12 @@
+/**
+ * The fixed block size of a Toggle in a wrapping group, per size, and under a
+ * coarse pointer. One source for ToggleGroup's `maxRows` arithmetic and the
+ * stories that measure it.
+ *
+ * holds-until: StyleX can import a constant into a static style. Toggle's
+ * `styles.css.ts` must repeat these numbers in its `wrapped*` heights. The
+ * ToggleGroup stories (small, default) and the Drawer coarse-pointer story
+ * measure a rendered toggle against this module to ±0.5px, so a drift in
+ * either file fails a test rather than a layout.
+ */
+export const ROW_HEIGHT = {small: 28, default: 39, coarse: 44} as const

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

@@ -21,6 +21,8 @@ export const styles = css.create({
     outlineStyle: 'solid',
     outlineColor: colors.accent,
     outlineOffset: 2,
+    minWidth: {default: null, '@media (pointer: coarse)': 44},
+    minHeight: {default: null, '@media (pointer: coarse)': 44},
   },
   sizeDefault: {
     padding: `${spacing.sm} ${spacing.md}`,
@@ -34,6 +36,16 @@ export const styles = css.create({
     borderRadius: radii.sm,
     gap: spacing.xs,
   },
+  // wrapped toggles: a fixed block size per size, 44px under a coarse pointer.
+  // Must equal ROW_HEIGHT in ./rowHeight (StyleX cannot import it here).
+  wrappedDefault: {
+    boxSizing: 'border-box',
+    height: {default: 39, '@media (pointer: coarse)': 44},
+  },
+  wrappedSmall: {
+    boxSizing: 'border-box',
+    height: {default: 28, '@media (pointer: coarse)': 44},
+  },
   unpressed: {
     backgroundColor: {
       default: 'transparent',

package/src/components/ToggleGroup/ToggleGroup.meta.ts

@@ -6,10 +6,11 @@ export const meta: ComponentMeta = {
   whenToUse: [
     'Visible option set where user picks one or more (view mode, filter categories)',
     'Segmented control pattern',
+    'A visible grid of icon choices: wrap + maxRows (rows scroll past maxRows, one tab stop with arrow keys, 44px touch targets)',
   ],
   whenNotToUse: [
     'Dropdown selection — use Select',
-    'Many options (5+) — use Select for space efficiency',
+    'Many text options (5+) — use Select for space efficiency; does not apply to icon-only choices, which keep options visible and open no layer',
     'Form checkboxes — use Checkbox group in Fieldset',
   ],
   relatedTo: [
@@ -30,5 +31,14 @@ export const meta: ComponentMeta = {
   <Toggle value="list">List view</Toggle>
   <Toggle value="grid">Grid view</Toggle>
   <Toggle value="board">Board view</Toggle>
+</ToggleGroup>
+
+// Icon choices: wraps onto rows, scrolls past three, one tab stop
+<ToggleGroup wrap maxRows={3} size="small" value={[icon]} onValueChange={(v) => v[0] && setIcon(v[0])} aria-label="Icon">
+  {names.map((name) => (
+    <Toggle key={name} value={name} aria-label={name}>
+      <Icon name={name} size="sm" />
+    </Toggle>
+  ))}
 </ToggleGroup>`,
 }

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -3,6 +3,8 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ToggleGroup} from './ToggleGroup'
 import {Toggle} from '../Toggle/Toggle'
+import {Icon, type IconName} from '../Icon'
+import {ROW_HEIGHT} from '../Toggle/rowHeight'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof ToggleGroup> = {
@@ -158,3 +160,157 @@ export const AllVariants: Story = {
     await expect(groups.length).toBe(4)
   },
 }
+
+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',
+]
+
+const iconStyles = css.create({
+  frame: {width: 320},
+})
+
+function IconChoices({
+  names,
+  pressed,
+  size = 'small',
+}: {
+  names: IconName[]
+  pressed: string
+  size?: 'small' | 'default'
+}) {
+  return (
+    <html.div style={iconStyles.frame}>
+      <ToggleGroup wrap maxRows={3} size={size} defaultValue={[pressed]} aria-label="Icon">
+        {names.map((name) => (
+          <Toggle key={name} value={name} aria-label={name}>
+            <Icon name={name} size="sm" />
+          </Toggle>
+        ))}
+      </ToggleGroup>
+    </html.div>
+  )
+}
+
+export const IconChoicesStory: Story = {
+  name: 'Icon choices',
+  render: () => <IconChoices names={ICON_NAMES} pressed={ICON_NAMES[39]} />,
+  play: async ({canvas, canvasElement}) => {
+    const scrollTopBefore = document.scrollingElement?.scrollTop
+    await expect(ICON_NAMES.length).toBe(42)
+    const viewport = canvasElement.querySelector<HTMLElement>('[data-duro-scroll]')!
+    await expect(Math.abs(viewport.clientHeight - 118)).toBeLessThanOrEqual(2)
+
+    const pressed = canvas.getByRole('button', {name: ICON_NAMES[39]})
+    const other = canvas.getByRole('button', {name: ICON_NAMES[0]})
+    await expect(pressed).toHaveAttribute('aria-pressed', 'true')
+    for (const el of [pressed, other]) {
+      const cs = getComputedStyle(el)
+      await expect(cs.borderTopWidth).toBe('1px')
+      await expect(cs.borderRightWidth).toBe('1px')
+      await expect(cs.borderBottomWidth).toBe('1px')
+      await expect(cs.borderLeftWidth).toBe('1px')
+      // radii.sm
+      await expect(cs.borderTopLeftRadius).toBe('8px')
+    }
+
+    // the pressed toggle is visible inside the viewport
+    const v = viewport.getBoundingClientRect()
+    const p = pressed.getBoundingClientRect()
+    await expect(p.top).toBeGreaterThanOrEqual(v.top - 1)
+    await expect(p.bottom).toBeLessThanOrEqual(v.bottom + 1)
+    await expect(document.scrollingElement?.scrollTop).toBe(scrollTopBefore)
+  },
+}
+
+export const FiveIcons: Story = {
+  name: 'Five icons',
+  render: () => <IconChoices names={ICON_NAMES.slice(0, 5)} pressed={ICON_NAMES[0]} />,
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('toolbar')
+    await expect(group.getBoundingClientRect().height).toBe(ROW_HEIGHT.small)
+    // exact: Toggle's styles repeat ROW_HEIGHT, and a drift must fail here
+    const toggle = canvas.getAllByRole('button')[0].getBoundingClientRect()
+    await expect(Math.abs(toggle.height - ROW_HEIGHT.small)).toBeLessThanOrEqual(0.5)
+  },
+}
+
+export const KeyboardRoving: Story = {
+  render: () => <IconChoices names={ICON_NAMES} pressed={ICON_NAMES[3]} />,
+  play: async ({canvas, userEvent}) => {
+    const btn = (i: number) => canvas.getByRole('button', {name: ICON_NAMES[i]})
+    await userEvent.tab()
+    await expect(btn(3)).toHaveFocus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(btn(4)).toHaveFocus()
+    await userEvent.keyboard('{ArrowLeft}{ArrowLeft}')
+    await expect(btn(2)).toHaveFocus()
+    // Down moves to the next row, Up back
+    const top = btn(2).getBoundingClientRect().top
+    await userEvent.keyboard('{ArrowDown}')
+    const active = document.activeElement as HTMLElement
+    await expect(active.getBoundingClientRect().top).toBeGreaterThan(top + 20)
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(btn(2)).toHaveFocus()
+    await userEvent.keyboard('{End}')
+    await expect(btn(41)).toHaveFocus()
+    await userEvent.keyboard('{Home}')
+    await expect(btn(0)).toHaveFocus()
+    await userEvent.keyboard('{Enter}')
+    await expect(btn(0)).toHaveAttribute('aria-pressed', 'true')
+    // a second tab leaves the group
+    await userEvent.tab()
+    await expect(canvas.getAllByRole('button')).not.toContain(document.activeElement)
+  },
+}
+
+export const DefaultSizeRows: Story = {
+  name: 'Default size rows',
+  render: () => (
+    <IconChoices names={ICON_NAMES.slice(0, 5)} pressed={ICON_NAMES[0]} size="default" />
+  ),
+  play: async ({canvas}) => {
+    const toggle = canvas.getAllByRole('button')[0].getBoundingClientRect()
+    await expect(Math.abs(toggle.height - ROW_HEIGHT.default)).toBeLessThanOrEqual(0.5)
+  },
+}