@duro-app/ui 4.4.0 → 5.0.0

package/src/components/Input/Input.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Input} from './Input'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
@@ -83,7 +84,7 @@ export const Disabled: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: 320},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: sizes.panelSm},
 })
 
 export const AllVariants: Story = {

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

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
@@ -16,7 +17,7 @@ export const styles = css.create({
     lineHeight: typography.lineHeight,
     color: colors.text,
     backgroundColor: colors.bg,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
@@ -24,7 +25,7 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -36,7 +37,7 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus-visible': 1,
+      ':focus-visible': borders.focusOffsetSm,
     },
   },
   default: {

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -5,6 +5,7 @@ import {InputGroup} from './InputGroup'
 import {Input} from '../Input/Input'
 import {Icon} from '../Icon/Icon'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/InputGroup',
@@ -115,8 +116,8 @@ export const StandaloneInput: Story = {
 }
 
 const layoutStyles = css.create({
-  container: {maxWidth: 400},
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
+  container: {maxWidth: sizes.dialogSm},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.dialogSm},
 })
 
 export const AllVariants: Story = {

package/src/components/InputGroup/InputGroup.tsx

@@ -4,6 +4,7 @@ import {css, html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {InputGroupContext} from './InputGroupContext'
 import {styles} from './styles.css'
+import {resolveLength, type Length} from '../../shared/length'
 
 // --- Root ---
 interface RootProps {
@@ -29,8 +30,9 @@ interface AddonProps {
   position?: 'start' | 'end'
   onClick?: () => void
   disabled?: boolean
-  /** Optional minimum width to prevent layout shift (e.g. Copy → Copied!) */
-  minWidth?: number | string
+  /** Optional minimum width to prevent layout shift (e.g. Copy → Copied!): a
+   *  size token key or a relative length. */
+  minWidth?: Length
   children: ReactNode
 }
 
@@ -42,7 +44,7 @@ function Addon({position = 'end', onClick, disabled, minWidth, children}: AddonP
     positionStyle,
     onClick && !disabled && styles.addonClickable,
     disabled && styles.addonDisabled,
-    minWidth != null && dynamicStyles.minWidth(minWidth),
+    minWidth != null && dynamicStyles.minWidth(resolveLength(minWidth)),
   ]
 
   if (onClick) {

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

@@ -3,12 +3,13 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   wrapper: {
     display: 'flex',
     alignItems: 'stretch',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -35,12 +36,12 @@ export const styles = css.create({
     borderWidth: 0,
   },
   addonStart: {
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
   },
   addonEnd: {
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
   },

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

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
@@ -46,7 +47,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     color: colors.textMuted,

package/src/components/List/List.stories.tsx

@@ -8,6 +8,8 @@ import {Button} from '../Button/Button'
 import {Checkbox} from '../Checkbox/Checkbox'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/List',
@@ -73,8 +75,8 @@ export const Default: Story = {
 
 const narrowContainer = css.create({
   box: {
-    maxWidth: 360,
-    borderWidth: 1,
+    maxWidth: sizes.panelSm,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,

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

@@ -1,7 +1,9 @@
 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 {microSpacing, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   // --- Root ---
@@ -21,7 +23,7 @@ export const styles = css.create({
     paddingBottom: spacing.sm,
     paddingLeft: spacing.ms,
     paddingRight: spacing.ms,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     backgroundColor: {
@@ -29,7 +31,7 @@ export const styles = css.create({
       ':hover': colors.bgCardHover,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '120ms',
+    transitionDuration: duration.quick,
     cursor: 'default',
   },
   itemSelected: {
@@ -51,7 +53,7 @@ export const styles = css.create({
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    gap: 2,
+    gap: microSpacing.px2,
     minWidth: 0,
   },
 

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

@@ -4,6 +4,8 @@ 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} 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({
   root: {
@@ -25,7 +27,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -47,14 +49,14 @@ export const styles = css.create({
     left: 0,
     marginTop: spacing.xs,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
     boxShadow: shadows.md,
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
-    minWidth: 160,
+    minWidth: sizes.popupMinW,
     zIndex: 50,
   },
   popupEnd: {
@@ -84,7 +86,7 @@ export const styles = css.create({
     height: 0,
     marginTop: spacing.xs,
     marginBottom: spacing.xs,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },

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/PageShell/styles.css.ts

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {layoutSpacing} from '@duro-app/tokens/tokens/layout-spacing.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -12,9 +13,9 @@ export const styles = css.create({
     marginRight: 'auto',
   },
   // Max-width presets
-  maxSm: {maxWidth: 600},
-  maxMd: {maxWidth: 800},
-  maxLg: {maxWidth: 1200},
+  maxSm: {maxWidth: sizes.pageSm},
+  maxMd: {maxWidth: sizes.pageMd},
+  maxLg: {maxWidth: sizes.pageLg},
   // Horizontal padding
   padSm: {paddingLeft: layoutSpacing.containerSm, paddingRight: layoutSpacing.containerSm},
   padMd: {paddingLeft: layoutSpacing.containerMd, paddingRight: layoutSpacing.containerMd},

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

@@ -1,6 +1,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 {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -9,7 +10,7 @@ export const styles = css.create({
     backgroundColor: colors.bgCard,
   },
   bordered: {
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -23,7 +24,7 @@ export const styles = css.create({
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
     gap: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -53,7 +54,7 @@ export const styles = css.create({
     paddingBottom: spacing.md,
     paddingLeft: spacing.lg,
     paddingRight: spacing.lg,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },

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.stories.tsx

@@ -10,6 +10,8 @@ import {Field} from '../Field/Field'
 import {Input} from '../Input/Input'
 import {Select} from '../Select/Select'
 import {Stack} from '../Stack/Stack'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Popover',
@@ -24,8 +26,8 @@ const page = () => within(document.body)
 const styles = css.create({
   stage: {
     position: 'relative',
-    height: 320,
-    borderWidth: 1,
+    height: sizes.panelSm,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
@@ -34,9 +36,9 @@ const styles = css.create({
     position: 'absolute',
     top: 120,
     left: 160,
-    width: 120,
+    width: sizes.labelMinW,
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.accent,
   },

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])
+}