@duro-app/ui 5.2.0 → 5.4.0

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

@@ -6,6 +6,7 @@ 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'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   // --- Backdrop ---
@@ -13,7 +14,7 @@ export const styles = css.create({
     position: 'fixed',
     inset: 0,
     backgroundColor: colors.scrim,
-    zIndex: 1000,
+    zIndex: layers.overlay,
     // Portaled into the ThemeProvider mount, which is pointer-events: none:
     // the backdrop must take clicks back (outside click dismisses).
     pointerEvents: 'auto',
@@ -41,7 +42,7 @@ export const styles = css.create({
   viewport: {
     position: 'fixed',
     inset: 0,
-    zIndex: 1001,
+    zIndex: layers.modal,
     display: 'flex',
     pointerEvents: 'none',
   },

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

@@ -6,6 +6,7 @@ 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'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   popup: {
@@ -24,7 +25,7 @@ export const styles = css.create({
     paddingBottom: spacing.xs,
     overflowY: 'auto',
     // Above Dialog/Drawer (1000/1001): they portal into the same mount.
-    zIndex: 1050,
+    zIndex: layers.popup,
     // The portal mount is pointer-events: none; the list takes them back.
     pointerEvents: 'auto',
   },

package/src/components/Menu/Menu.tsx

@@ -18,6 +18,8 @@ import {devWarnOnce} from '../../shared/devWarnOnce'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {computePopoverPosition} from '../Popover/position'
 import {usePopoverLayer} from '../Popover/PopoverLayerContext'
+import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 
 // --- Root ---
 interface RootProps {
@@ -61,14 +63,17 @@ interface TriggerProps {
 
 function Trigger({children, 'aria-label': ariaLabel, variant = 'default', ref}: TriggerProps) {
   const {open, toggle, menuId, triggerId, triggerRef} = useMenu()
+  const grouped = useGroupedControl<HTMLButtonElement>()
+  const groupedRef = grouped.ref
 
   const setRef = useCallback(
     (el: HTMLButtonElement | null) => {
       triggerRef.current = el
+      groupedRef.current = el
       if (typeof ref === 'function') ref(el)
       else if (ref) ref.current = el
     },
-    [ref, triggerRef],
+    [ref, triggerRef, groupedRef],
   )
 
   // TypeScript can't stop a <Button> child; the DOM can tell.
@@ -85,6 +90,8 @@ function Trigger({children, 'aria-label': ariaLabel, variant = 'default', ref}:
   return (
     <html.button
       ref={setRef}
+      tabIndex={grouped.tabIndex}
+      onFocus={grouped.onFocus}
       id={triggerId}
       type="button"
       onClick={toggle}
@@ -92,7 +99,7 @@ function Trigger({children, 'aria-label': ariaLabel, variant = 'default', ref}:
       aria-expanded={open}
       aria-haspopup="menu"
       aria-controls={open ? menuId : undefined}
-      style={[styles.trigger, variant === 'ghost' && styles.triggerGhost]}
+      style={[styles.trigger, variant === 'ghost' && styles.triggerGhost, grouped.style]}
     >
       {children}
     </html.button>
@@ -154,7 +161,7 @@ function Popup({children, align = 'start'}: PopupProps) {
       aria-activedescendant={highlightedId ?? undefined}
       style={[styles.popup, styles.popupPosition(coords.top, coords.left)]}
     >
-      {children}
+      <ControlContextBoundary>{children}</ControlContextBoundary>
     </html.div>,
     mount ?? document.body,
   )

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

@@ -6,6 +6,7 @@ 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'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   root: {
@@ -63,7 +64,7 @@ export const styles = css.create({
     overflowY: 'auto',
     // Above Dialog/Drawer (1000/1001), like Select and Combobox: they portal
     // into the same mount, so a menu opened inside a dialog must out-rank it.
-    zIndex: 1050,
+    zIndex: layers.popup,
     // The portal layer is pointer-events: none so clicks fall through it;
     // the popup takes them back.
     pointerEvents: 'auto',

package/src/components/Popover/Popover.tsx

@@ -19,6 +19,10 @@ import {styles} from './styles.css'
 import {computePopoverPosition, type PopoverAlign, type PopoverSide} from './position'
 import {isOutsidePress} from './outside'
 import {PopoverLayerContext, type PopoverLayerContextValue} from './PopoverLayerContext'
+import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+import {mergeRefs} from '../../shared/mergeRefs'
+import {useInModal} from '../../shared/ModalContext'
 
 // --- Context ---
 
@@ -193,18 +197,30 @@ function Root({
 // --- Trigger ---
 // Trigger IS the button (like Menu.Trigger): give it a label, not a Button.
 
-function Trigger({children}: {children: ReactNode}) {
+interface TriggerProps {
+  children: ReactNode
+  /** Accessible name: required when the label is an icon only. */
+  'aria-label'?: string
+  /** The trigger <button>, e.g. to measure it or return focus to it. */
+  ref?: Ref<HTMLButtonElement>
+}
+
+function Trigger({children, 'aria-label': ariaLabel, ref}: TriggerProps) {
   const {open, setOpen, popoverId, triggerRef} = usePopover('Trigger')
+  const grouped = useGroupedControl<HTMLButtonElement>()
 
   return (
     <html.button
-      ref={triggerRef}
+      ref={mergeRefs(triggerRef, grouped.ref, ref)}
+      tabIndex={grouped.tabIndex}
+      onFocus={grouped.onFocus}
       type="button"
       onClick={() => setOpen(!open)}
+      aria-label={ariaLabel}
       aria-haspopup="dialog"
       aria-expanded={open}
       aria-controls={open ? popoverId : undefined}
-      style={styles.trigger}
+      style={[styles.trigger, grouped.style]}
     >
       {children}
     </html.button>
@@ -226,6 +242,7 @@ function Popup({children, label}: PopupProps) {
   // Inside ThemeProvider's portal layer, like Select/Dialog/Drawer: theme
   // tokens cascade into the popup and it stacks above dialogs.
   const mount = usePortalMount()
+  const inModal = useInModal()
 
   // Measure before paint on open; re-measure on scroll/resize (capture phase
   // catches any scrolling ancestor) and when Root.reposition() is called.
@@ -271,9 +288,13 @@ function Popup({children, label}: PopupProps) {
       role="dialog"
       aria-label={label}
       tabIndex={-1}
-      style={[styles.popup, styles.popupPosition(coords.top, coords.left)]}
+      style={[
+        styles.popup,
+        inModal && styles.popupInModal,
+        styles.popupPosition(coords.top, coords.left),
+      ]}
     >
-      {children}
+      <ControlContextBoundary>{children}</ControlContextBoundary>
     </html.div>,
     mount ?? document.body,
   )

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

@@ -5,6 +5,7 @@ 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 {borders} from '@duro-app/tokens/tokens/borders.css'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   trigger: {
@@ -30,6 +31,11 @@ export const styles = css.create({
     transitionProperty: 'background-color, border-color',
     transitionDuration: duration.fast,
   },
+  // Inside a Dialog or Drawer: above that modal (same portal mount), below a
+  // Select or Menu opened from inside the Popover.
+  popupInModal: {
+    zIndex: layers.popover,
+  },
   popup: {
     position: 'fixed',
     top: 0,
@@ -45,7 +51,9 @@ export const styles = css.create({
     fontFamily: typography.fontFamily,
     fontSize: typography.fontSizeSm,
     color: colors.text,
-    zIndex: 50,
+    // Outside a modal: floating chrome, so a Dialog or Drawer opened later
+    // (even from inside this Popover) covers it.
+    zIndex: layers.floating,
     // The portal layer is pointer-events: none so clicks fall through it;
     // the popup takes them back.
     pointerEvents: 'auto',

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

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {microSpacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   root: {
@@ -23,7 +24,7 @@ export const styles = css.create({
   },
   scrollbar: {
     position: 'absolute',
-    zIndex: 1,
+    zIndex: layers.raised,
     display: 'flex',
     touchAction: 'none',
     userSelect: 'none',

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn, screen} from 'storybook/test'
+import {expect, screen} from 'storybook/test'
 import {Dialog} from '../Dialog/Dialog'
 import {Select} from './Select'
 
@@ -194,3 +194,22 @@ export const InsideDialog: Story = {
     await expect(listbox.closest('[role="dialog"]')).toBeNull()
   },
 }
+
+/** Closed, the trigger opens on ArrowDown or ArrowUp, on the selected option (5.3). */
+export const ArrowKeysOpen: Story = {
+  render: Default.render,
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('combobox')
+    trigger.focus()
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await expect(trigger).toHaveFocus()
+    const selected = screen.getByRole('option', {name: 'English'})
+    await expect(trigger).toHaveAttribute('aria-activedescendant', selected.id)
+    await userEvent.keyboard('{Escape}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await userEvent.keyboard('{Escape}')
+  },
+}

package/src/components/Select/Select.tsx

@@ -7,6 +7,9 @@ import {useSelectRoot} from './useSelectRoot'
 import {useFieldContext} from '../Field/FieldContext'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {usePopoverLayer} from '../Popover/PopoverLayerContext'
+import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+import {mergeRefs} from '../../shared/mergeRefs'
 
 // --- Root ---
 interface RootProps {
@@ -41,6 +44,7 @@ function Trigger({
 }) {
   const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
   const localRef = useRef<HTMLButtonElement>(null)
+  const grouped = useGroupedControl<HTMLButtonElement>()
   // Inside a <Field.Root>, adopt its controlId so <Field.Label for={controlId}>
   // labels the trigger (a labelable <button>) — no manual aria-label needed; and
   // surface the field's description/error + invalid state, mirroring <Input>.
@@ -56,7 +60,9 @@ function Trigger({
 
   return (
     <html.button
-      ref={localRef}
+      ref={mergeRefs(localRef, grouped.ref)}
+      tabIndex={grouped.tabIndex}
+      onFocus={grouped.onFocus}
       id={fieldCtx?.controlId}
       type="button"
       role={'combobox' as 'listbox'}
@@ -68,7 +74,7 @@ function Trigger({
       aria-activedescendant={highlightedId ?? undefined}
       aria-describedby={describedBy || undefined}
       aria-invalid={fieldCtx?.invalid || undefined}
-      style={styles.trigger}
+      style={[styles.trigger, grouped.style]}
     >
       {children}
     </html.button>
@@ -161,7 +167,7 @@ function Popup({children}: {children: ReactNode}) {
           coords && styles.popupPosition(coords.top, coords.left, coords.width),
         ]}
       >
-        {children}
+        <ControlContextBoundary>{children}</ControlContextBoundary>
       </html.div>
     </>
   )

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

@@ -6,6 +6,7 @@ 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'
+import {layers} from '@duro-app/tokens/tokens/layers.css'
 
 export const styles = css.create({
   root: {
@@ -55,7 +56,7 @@ export const styles = css.create({
     bottom: 0,
     // Above Dialog/Drawer (1000/1001): they portal into the same mount, so a
     // popup opened from inside a dialog must out-rank the dialog itself.
-    zIndex: 1049,
+    zIndex: layers.popupBackdrop,
     // The portal mount is pointer-events: none, so re-enable here to catch
     // outside clicks that close the popup.
     pointerEvents: 'auto',
@@ -76,7 +77,7 @@ export const styles = css.create({
     minWidth: sizes.labelMinW,
     maxHeight: sizes.listMaxH,
     overflowY: 'auto',
-    zIndex: 1050,
+    zIndex: layers.popup,
     // Re-enable pointer events: the portal mount is pointer-events: none.
     pointerEvents: 'auto',
   },

package/src/components/Select/useSelectRoot.ts

@@ -80,6 +80,23 @@ export function useSelectRoot({
     }
   }, [])
 
+  // Closed: ArrowDown/ArrowUp on the trigger open the listbox (the APG
+  // select-only combobox), on the selected option or the first. In a Toolbar
+  // this is why a closed Select keeps those keys; Left/Right still move on.
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || open) return
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.target !== triggerRef.current) return
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return
+      if (e.altKey || e.ctrlKey || e.metaKey) return
+      e.preventDefault()
+      toggle()
+    }
+    root.addEventListener('keydown', handleKeyDown)
+    return () => root.removeEventListener('keydown', handleKeyDown)
+  }, [open, toggle])
+
   // Native keydown for full KeyboardEvent access (preventDefault)
   useEffect(() => {
     const root = rootRef.current