@duro-app/ui 0.38.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.38.0"
+    "@duro-app/tokens": "^0.39.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Button/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 {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -17,11 +18,20 @@ export const styles = css.create({
     borderWidth: 1,
     borderStyle: 'solid',
     cursor: 'pointer',
-    transitionProperty: 'background-color, border-color, color, opacity',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionProperty: 'background-color, border-color, color, opacity, transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     textDecoration: 'none',
     whiteSpace: 'nowrap',
+    // Tactile press feedback. The scale is suppressed under reduced motion (and
+    // duration.fast collapses to 0ms there too), so it's inert for those users.
+    transform: {
+      default: 'scale(1)',
+      ':active': {
+        default: 'scale(0.97)',
+        '@media (prefers-reduced-motion: reduce)': 'scale(1)',
+      },
+    },
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Card/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 {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -41,11 +42,16 @@ export const styles = css.create({
     },
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color, transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    // Lift on hover; suppressed under reduced motion so there's no positional
+    // shift (the token duration also collapses to 0ms there).
     transform: {
       default: 'translateY(0)',
-      ':hover': 'translateY(-2px)',
+      ':hover': {
+        default: 'translateY(-2px)',
+        '@media (prefers-reduced-motion: reduce)': 'translateY(0)',
+      },
     },
   },
   // Sizes (padding)

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

@@ -2,12 +2,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 {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
-/** Apple-standard ease: aggressive deceleration, feels like "arriving" */
-const APPLE_EASE_OUT = 'cubic-bezier(0.32, 0.72, 0, 1)'
-const APPLE_EASE_IN = 'cubic-bezier(0.72, 0, 0.68, 0.28)'
-
-const OPEN_DURATION = '280ms'
+// The "Apple ease" curves and the 280ms open now live in the shared motion
+// tokens (easing.easeOut/easeIn, duration.slow). The 220ms close is specific to
+// this panel's exit, so it stays local.
 const CLOSE_DURATION = '220ms'
 
 export const styles = css.create({
@@ -24,8 +23,8 @@ export const styles = css.create({
       from: {width: 0},
       to: {width: 360},
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   wrapperCloseSm: {
@@ -34,7 +33,7 @@ export const styles = css.create({
       to: {width: 0},
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -44,8 +43,8 @@ export const styles = css.create({
       from: {width: 0},
       to: {width: 480},
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   wrapperCloseMd: {
@@ -54,7 +53,7 @@ export const styles = css.create({
       to: {width: 0},
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -87,8 +86,8 @@ export const styles = css.create({
         opacity: 1,
       },
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOut: {
@@ -103,7 +102,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -183,7 +182,8 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
 
   inlineWrapper: {

package/src/components/SideNav/SideNav.stories.tsx

@@ -58,6 +58,28 @@ export const Collapsed: Story = {
   },
 }
 
+// Regression: a `defaultExpanded` group that ALSO contains the active item used
+// to be toggled twice on mount (once by defaultExpanded, once by auto-expand of
+// the active group) and end up collapsed, hiding the active item. It must stay
+// open.
+export const DefaultExpandedWithActiveItem: Story = {
+  render: (args) => (
+    <SideNav.Root {...args} defaultValue="security">
+      <SideNav.Group label="Settings" defaultExpanded>
+        <SideNav.Item value="profile">Profile</SideNav.Item>
+        <SideNav.Item value="security">Security</SideNav.Item>
+      </SideNav.Group>
+    </SideNav.Root>
+  ),
+  play: async ({canvas}) => {
+    const trigger = canvas.getByText('Settings')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const active = canvas.getByText('Security')
+    await expect(active).toBeInTheDocument()
+    await expect(active).toHaveAttribute('aria-current', 'page')
+  },
+}
+
 export const Interactive: Story = {
   render: (args) => (
     <SideNav.Root {...args}>

package/src/components/SideNav/SideNav.tsx

@@ -38,6 +38,19 @@ function Root({children, value: controlledValue, defaultValue, onValueChange}: R
     })
   }, [])
 
+  // Idempotent expand — never closes an already-open group. The mount effects
+  // in Group (defaultExpanded + auto-expand-active) use this instead of
+  // toggleGroup so a group that qualifies on both counts stays open rather than
+  // being toggled open-then-closed.
+  const expandGroup = useCallback((group: string) => {
+    setExpandedGroups((prev) => {
+      if (prev.has(group)) return prev
+      const next = new Set(prev)
+      next.add(group)
+      return next
+    })
+  }, [])
+
   const registerItem = useCallback((value: string) => {
     if (!orderRef.current.includes(value)) {
       orderRef.current.push(value)
@@ -47,19 +60,17 @@ function Root({children, value: controlledValue, defaultValue, onValueChange}: R
     }
   }, [])
 
-  // Auto-expand group containing active value
-  useEffect(() => {
-    if (activeValue) {
-      setExpandedGroups((prev) => {
-        // We don't know which group it belongs to here — Group handles this
-        return prev
-      })
-    }
-  }, [activeValue])
-
   return (
     <SideNavContext.Provider
-      value={{activeValue, onSelect, expandedGroups, toggleGroup, registerItem, orderRef}}
+      value={{
+        activeValue,
+        onSelect,
+        expandedGroups,
+        toggleGroup,
+        expandGroup,
+        registerItem,
+        orderRef,
+      }}
     >
       <html.nav role="navigation" style={styles.root}>
         {children}
@@ -79,25 +90,27 @@ interface GroupProps {
 
 function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
   const key = groupKey ?? label
-  const {expandedGroups, toggleGroup, activeValue} = useSideNav()
+  const {expandedGroups, toggleGroup, expandGroup, activeValue} = useSideNav()
   const isExpanded = expandedGroups.has(key)
   const groupRef = useRef<HTMLDivElement>(null)
 
-  // Auto-expand if this group contains the active item
+  // Auto-expand if this group contains the active item. Uses expandGroup (not
+  // toggleGroup) so it never races the defaultExpanded effect into a closed
+  // state when the active item lives in a defaultExpanded group.
   useEffect(() => {
     if (!activeValue || expandedGroups.has(key)) return
     const el = groupRef.current
     if (!el) return
     const activeBtn = el.querySelector(`[data-nav-value="${activeValue}"]`)
     if (activeBtn) {
-      toggleGroup(key)
+      expandGroup(key)
     }
-  }, [activeValue, key, expandedGroups, toggleGroup])
+  }, [activeValue, key, expandedGroups, expandGroup])
 
-  // Expand on first render if defaultExpanded
+  // Expand on first render if defaultExpanded (idempotent add, not a toggle).
   useEffect(() => {
-    if (defaultExpanded && !expandedGroups.has(key)) {
-      toggleGroup(key)
+    if (defaultExpanded) {
+      expandGroup(key)
     }
     // Only run on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/SideNav/SideNavContext.ts

@@ -5,6 +5,10 @@ export interface SideNavContextValue {
   onSelect: (value: string) => void
   expandedGroups: Set<string>
   toggleGroup: (group: string) => void
+  /** Idempotent expand (add-only) — used by auto-expand/defaultExpanded so a
+   *  group that qualifies twice (e.g. defaultExpanded AND holding the active
+   *  item) doesn't get toggled back closed. `toggleGroup` stays for user clicks. */
+  expandGroup: (group: string) => void
   registerItem: (value: string) => () => void
   orderRef: React.RefObject<string[]>
 }

package/src/global-reset.css

@@ -33,3 +33,22 @@
     text-decoration: none;
   }
 }
+
+/*
+ * Reduced-motion safety net. Neutralizes animation/transition timing globally
+ * for users who prefer reduced motion, covering every component (dialogs,
+ * drawers, detail panels, spinners, …) without touching their per-component
+ * tuned animations. Uses 0.01ms (not 0) so animationend/transitionend still
+ * fire and any state-driven mount/unmount logic completes. Kept outside
+ * `@layer reset` so its `!important` wins regardless of cascade layers.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}