@duro-app/ui 4.4.0 → 5.0.0

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

@@ -3,6 +3,8 @@ 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 {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -19,9 +21,9 @@ export const styles = css.create({
     cursor: 'not-allowed',
   },
   box: {
-    width: 18,
-    height: 18,
-    borderWidth: 1,
+    width: sizes.indicator,
+    height: sizes.indicator,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.xs,
     display: 'inline-flex',
@@ -47,12 +49,12 @@ export const styles = css.create({
   // rotated 45° into a tick. Pure CSS (RSD translates the transform string to
   // an RN transform), so no SVG / react-native-svg weight reaches web.
   checkmark: {
-    width: 5,
-    height: 9,
-    borderRightWidth: 2,
+    width: sizes.checkMarkW,
+    height: sizes.checkMarkH,
+    borderRightWidth: borders.strong,
     borderRightStyle: 'solid',
     borderRightColor: colors.accentContrast,
-    borderBottomWidth: 2,
+    borderBottomWidth: borders.strong,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.accentContrast,
     transform: 'rotate(45deg)',
@@ -77,12 +79,9 @@ export const styles = css.create({
     backgroundColor: 'transparent',
     padding: 0,
   },
+  // Layered on visuallyHidden.base: a native input is also made transparent.
   input: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
     opacity: 0,
-    overflow: 'hidden',
   },
   // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
   // native via `isNative` (on both .root and .box); web keeps inline-flex.

package/src/components/Cluster/Cluster.stories.tsx

@@ -5,6 +5,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Cluster> = {
   title: 'Layout/Cluster',
@@ -41,7 +42,7 @@ const localStyles = css.create({
     whiteSpace: 'nowrap',
   },
   narrow: {
-    maxWidth: 300,
+    maxWidth: sizes.gridColMd,
   },
 })
 

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

@@ -1,14 +1,16 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
-    width: 44,
-    height: 34,
-    padding: 2,
+    width: sizes.swatchW,
+    height: sizes.swatchH,
+    padding: microSpacing.px2,
     backgroundColor: colors.bg,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -18,7 +20,7 @@ export const styles = css.create({
     cursor: 'pointer',
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -28,7 +30,7 @@ export const styles = css.create({
       default: 'transparent',
       ':focus-visible': colors.accent,
     },
-    outlineOffset: 1,
+    outlineOffset: borders.focusOffsetSm,
   },
   invalid: {
     borderColor: colors.error,

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

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.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({
   button: {
@@ -9,7 +10,7 @@ export const styles = css.create({
     alignItems: 'center',
     justifyContent: 'center',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -25,9 +26,9 @@ export const styles = css.create({
     transitionProperty: 'background-color, border-color, color',
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
-    outlineWidth: {default: 0, ':focus-visible': 2},
+    outlineWidth: {default: 0, ':focus-visible': borders.focusRing},
     outlineStyle: 'solid',
     outlineColor: colors.accent,
-    outlineOffset: 2,
+    outlineOffset: borders.focusOffset,
   },
 })

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/Combobox/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: {
@@ -17,7 +19,7 @@ export const styles = css.create({
     paddingLeft: spacing.md,
     paddingRight: spacing.xs,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -71,14 +73,14 @@ export const styles = css.create({
     // ancestor with `overflow: hidden` or `transform` (e.g. inside a Dialog).
     position: 'fixed',
     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,
-    maxHeight: 200,
+    maxHeight: sizes.listMaxHSm,
     overflowY: 'auto',
     zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none so

package/src/components/DetailPanel/DetailPanel.stories.tsx

@@ -11,6 +11,8 @@ import {Inline} from '../Inline/Inline'
 import {Badge} from '../Badge/Badge'
 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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/DetailPanel',
@@ -22,8 +24,8 @@ type Story = StoryObj
 const layoutStyles = css.create({
   container: {
     display: 'flex',
-    height: 400,
-    borderWidth: 1,
+    height: sizes.dialogSm,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -117,7 +119,7 @@ const tableStyles = css.create({
     paddingBottom: spacing.sm,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },

package/src/components/DetailPanel/DetailPanel.tsx

@@ -17,7 +17,10 @@ import {styles} from './styles.css'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>

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

@@ -1,8 +1,11 @@
 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 {radii, spacing} from '@duro-app/tokens/tokens/spacing.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 {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 // The "Apple ease" curves and the 280ms open live in the shared motion tokens
 // (easing.easeOut/easeIn, duration.slow). The close is duration.base, and the
@@ -62,7 +65,7 @@ export const styles = css.create({
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: colors.bgCard,
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
     boxShadow: shadows.sm,
@@ -70,8 +73,8 @@ export const styles = css.create({
   },
 
   // Content must maintain its target width even while wrapper is narrower
-  contentSm: {width: 360},
-  contentMd: {width: 480},
+  contentSm: {width: sizes.panelSm},
+  contentMd: {width: sizes.panelMd},
 
   // --- Content slide + fade animations ---
   slideIn: {
@@ -109,7 +112,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},
 
@@ -123,15 +129,15 @@ export const styles = css.create({
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
     gap: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
 
   // --- Title ---
   title: {
-    fontSize: 18,
-    fontWeight: 600,
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
     lineHeight: 1.4,
     color: colors.text,
     margin: 0,
@@ -166,7 +172,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,
   },
@@ -176,9 +182,9 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 32,
-    height: 32,
-    borderRadius: 8,
+    width: sizes.iconButton,
+    height: sizes.iconButton,
+    borderRadius: radii.sm,
     borderWidth: 0,
     backgroundColor: {
       default: 'transparent',

package/src/components/Dialog/Dialog.stories.tsx

@@ -12,6 +12,7 @@ import {Field} from '../Field/Field'
 import {Select} from '../Select/Select'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta = {
   title: 'Components/Dialog',
@@ -334,7 +335,7 @@ const barStyles = css.create({
   bar: {
     transform: 'translateZ(0)',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },

package/src/components/Dialog/Dialog.tsx

@@ -21,7 +21,10 @@ export type DialogSize = 'sm' | 'md' | 'lg'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>

package/src/components/Dialog/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).
@@ -62,7 +64,7 @@ export const styles = css.create({
     flexDirection: 'column',
     overflow: 'hidden',
     pointerEvents: 'auto',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -103,14 +105,17 @@ 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},
 
   // --- Sizes ---
-  sm: {maxWidth: 400},
-  md: {maxWidth: 520},
-  lg: {maxWidth: 680},
+  sm: {maxWidth: sizes.dialogSm},
+  md: {maxWidth: sizes.dialogMd},
+  lg: {maxWidth: sizes.dialogLg},
 
   // --- Header ---
   header: {
@@ -163,7 +168,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,
   },
@@ -173,8 +178,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: {
@@ -196,6 +201,6 @@ export const styles = css.create({
 
   // --- Reduced motion ---
   reducedMotion: {
-    animationDuration: '1ms',
+    animationDuration: duration.minimal,
   },
 })

package/src/components/DragDrop/DragDrop.stories.tsx

@@ -11,6 +11,7 @@ import {Tag} from '../Tag/Tag'
 import {Text} from '../Text/Text'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta<typeof DragDrop.Root> = {
   title: 'Interaction/DragDrop',
@@ -24,7 +25,7 @@ const localStyles = css.create({
   zone: {
     padding: spacing.md,
     minHeight: spacing.xxl,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
     borderRadius: radii.sm,

package/src/components/DragDrop/DragDrop.tsx

@@ -11,6 +11,7 @@ import {
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {isNative} from '../../platform'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 // ---------------------------------------------------------------------------
 // DragDrop — move items between zones with one pointer, on mouse, pen and
@@ -358,7 +359,7 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
           {drag.preview}
         </html.div>
       )}
-      <html.div role="status" aria-live="polite" aria-atomic style={styles.liveRegion}>
+      <html.div role="status" aria-live="polite" aria-atomic style={visuallyHidden.base}>
         {announcement}
       </html.div>
     </RootContext.Provider>

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

@@ -52,11 +52,4 @@ export const styles = css.create({
     height,
     transform: `translate3d(${x}px, ${y}px, 0)`,
   }),
-  // Same visually-hidden recipe as TagGroup's live region.
-  liveRegion: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    overflow: 'hidden',
-  },
 })

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

@@ -23,7 +23,10 @@ export type DrawerSize = 'sm' | 'md' | 'lg'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>
@@ -233,6 +236,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 +258,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     anchor,
     enabled: swipeEnabled && open && !closing,
     onDismiss: requestCloseImmediate,
-    panelRef,
+    panel,
   })
 
   if (!open) return null
@@ -269,7 +282,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}