@duro-app/ui 4.3.0 → 4.5.0

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/Menu/useMenuRoot.ts

@@ -109,7 +109,11 @@ export function useMenuRoot() {
           })
           break
         }
-        case 'Escape':
+        case 'Escape': {
+          e.preventDefault()
+          close()
+          break
+        }
         case 'Tab': {
           close()
           break

package/src/components/Popover/Popover.meta.ts

@@ -6,6 +6,7 @@ export const meta: ComponentMeta = {
   whenToUse: [
     'A small form or controls tied to one element that stay open while you work in them',
     'Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor',
+    'Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover',
   ],
   whenNotToUse: [
     'A list of actions — use Menu',
@@ -47,6 +48,12 @@ export const meta: ComponentMeta = {
       relationship:
         'Drawer is the modal edge panel for phone width; Popover is anchored and non-modal',
     },
+    {
+      component: 'Select',
+      kind: 'composition',
+      relationship:
+        'A Select or Combobox inside Popover.Popup keeps the popover open while you choose; a Select backdrop press closes only its list',
+    },
     {
       component: 'Field',
       kind: 'composition',

package/src/components/Popover/Popover.tsx

@@ -8,6 +8,7 @@ import {
   useId,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -17,6 +18,7 @@ import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
 import {computePopoverPosition, type PopoverAlign, type PopoverSide} from './position'
 import {isOutsidePress} from './outside'
+import {PopoverLayerContext, type PopoverLayerContextValue} from './PopoverLayerContext'
 
 // --- Context ---
 
@@ -47,27 +49,6 @@ const FOCUSABLE =
 
 const OFFSET = 4 // `xs` token
 
-/**
- * Whether a nested popup control owns this Escape: a Select, Menu or
- * Combobox inside the popup closes on Esc without preventing default, and
- * that Esc must close only it. Only controls that open a popup count — an
- * expanded trigger that declares one (`aria-haspopup`), an expanded combobox,
- * or focus inside a listbox or menu — never a plain disclosure, and never
- * this popover's own Trigger.
- *
- * holds-until: Duro's Select, Menu and Combobox call preventDefault on the
- * Escape they consume; the defaultPrevented check alone then suffices and
- * this selector goes.
- */
-const NESTED_POPUP_OWNER =
-  '[aria-expanded="true"][aria-haspopup], [role="combobox"][aria-expanded="true"], [role="listbox"], [role="menu"]'
-
-function nestedOwnsEscape(target: EventTarget | null, ownTrigger: Element | null): boolean {
-  if (!(target instanceof Element)) return false
-  const owner = target.closest(NESTED_POPUP_OWNER)
-  return owner !== null && owner !== ownTrigger
-}
-
 // --- Root ---
 
 export interface PopoverHandle {
@@ -148,7 +129,6 @@ function Root({
 
     function onKeyDown(e: KeyboardEvent) {
       if (e.key !== 'Escape' || e.defaultPrevented) return
-      if (nestedOwnsEscape(e.target, triggerRef.current)) return
       e.preventDefault()
       setOpen(false)
     }
@@ -157,7 +137,7 @@ function Root({
       const ignored = (ignoreRef.current ?? []).map((entry) =>
         typeof entry === 'function' ? entry() : entry,
       )
-      const inside = [popupRef.current, triggerRef.current, ...ignored]
+      const inside = [popupRef.current, triggerRef.current, ...ignored, ...layersRef.current]
       if (isOutsidePress(e.target as Node | null, inside)) setOpen(false)
     }
 
@@ -169,6 +149,28 @@ function Root({
     }
   }, [open, setOpen])
 
+  const layersRef = useRef(new Set<Element>())
+  // A nested Popover's layers are inside its parent too.
+  const parentLayer = useContext(PopoverLayerContext)
+  const layerCtx = useMemo<PopoverLayerContextValue>(
+    () => ({
+      register: (el) => {
+        layersRef.current.add(el)
+        const unregisterParent = parentLayer?.register(el)
+        return () => {
+          layersRef.current.delete(el)
+          unregisterParent?.()
+        }
+      },
+    }),
+    [parentLayer],
+  )
+  useLayoutEffect(() => {
+    const popup = popupRef.current
+    if (!open || !popup) return
+    return parentLayer?.register(popup)
+  }, [open, parentLayer])
+
   const ctx: PopoverContextValue = {
     open,
     setOpen,
@@ -181,7 +183,11 @@ function Root({
     repositionRef,
   }
 
-  return <PopoverContext.Provider value={ctx}>{children}</PopoverContext.Provider>
+  return (
+    <PopoverContext.Provider value={ctx}>
+      <PopoverLayerContext.Provider value={layerCtx}>{children}</PopoverLayerContext.Provider>
+    </PopoverContext.Provider>
+  )
 }
 
 // --- Trigger ---

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',