@duro-app/ui 5.5.0 → 5.7.0

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

@@ -1,10 +1,11 @@
 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 {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
 import {layers} from '@duro-app/tokens/tokens/layers.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
   // The item is the drag handle: no browser panning starts on it, so a touch
@@ -26,12 +27,45 @@ export const styles = css.create({
     opacity: 0.4,
     cursor: 'grabbing',
   },
+  // The keyboard path: one focusable widget per item.
+  handle: {
+    borderRadius: radii.sm,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: borders.focusRing,
+    outlineColor: colors.accent,
+    outlineOffset: borders.focusOffset,
+  },
+  // Picked up by keyboard: the ring stays on even without :focus-visible.
+  handlePicked: {
+    outlineStyle: 'dashed',
+  },
   zone: {
     borderRadius: radii.sm,
     transitionProperty: 'box-shadow, background-color',
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
   },
+  listVertical: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  listHorizontal: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  gapXs: {gap: spacing.xs},
+  gapSm: {gap: spacing.sm},
+  gapMs: {gap: spacing.ms},
+  gapMd: {gap: spacing.md},
+  gapLg: {gap: spacing.lg},
+  gapXl: {gap: spacing.xl},
+  gapXxl: {gap: spacing.xxl},
+  gapXxxl: {gap: spacing.xxxl},
+  fill: {
+    boxSizing: 'border-box',
+    width: '100%',
+    height: '100%',
+  },
   // Every zone shows it can receive while something is in the air; the one
   // under the pointer lights up. Drop-target rings, not focus: keyboard focus
   // stays on outlines, which survive forced-colors mode.
@@ -52,6 +86,18 @@ export const styles = css.create({
     outlineColor: 'transparent',
     outlineOffset: `calc(-1 * ${borders.strong})`,
   },
+  // Refused with a reason: the zone says no in the error tone, the ghost
+  // carries the reason.
+  zoneRefused: {
+    backgroundColor: colors.errorBg,
+    outlineStyle: 'dashed',
+    outlineWidth: borders.strong,
+    outlineColor: colors.errorBorder,
+    outlineOffset: `calc(-1 * ${borders.strong})`,
+  },
+  placeholder: {
+    flexShrink: 0,
+  },
   ghost: {
     position: 'fixed',
     top: 0,
@@ -63,9 +109,33 @@ export const styles = css.create({
     opacity: 0.9,
     cursor: 'grabbing',
   },
-  ghostAt: (x: number, y: number, width: number, height: number) => ({
+  // The lifted look: a slight tilt, dropped under reduced motion.
+  ghostTilt: {
+    transform: {
+      default: 'rotate(2deg)',
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+  },
+  refusal: {
+    marginTop: spacing.xs,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderRadius: radii.xs,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.errorBorder,
+    backgroundColor: colors.bgCard,
+    color: colors.errorText,
+    fontSize: typography.fontSizeXs,
+    lineHeight: typography.lineHeight,
+    boxShadow: shadows.md,
+    width: 'max-content',
+    maxWidth: '100%',
+  },
+  ghostSize: (width: number, height: number) => ({
     width,
-    height,
-    transform: `translate3d(${x}px, ${y}px, 0)`,
+    minHeight: height,
   }),
 })

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

@@ -4,6 +4,7 @@ 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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   base: {
@@ -34,6 +35,9 @@ export const styles = css.create({
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
+
+    // Matches Button: every small control is at least controlSm tall (5.6).
+    minHeight: sizes.controlSm,
   },
   primary: {
     backgroundColor: {

package/src/components/Menu/Menu.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant="ghost" suits toolbars. The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.',
+    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant="ghost" suits toolbars; size="small" matches small Toggles and Buttons (a small ghost trigger is iconButtonSm). The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.',
   whenToUse: [
     'Context menu or "more actions" dropdown',
     'Navigation links in a dropdown',

package/src/components/Menu/Menu.tsx

@@ -15,6 +15,7 @@ import {styles} from './styles.css'
 import {MenuContext, useMenu} from './MenuContext'
 import {useMenuRoot} from './useMenuRoot'
 import {devWarnOnce} from '../../shared/devWarnOnce'
+import type {ControlSize} from '../../shared/types'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {computePopoverPosition} from '../Popover/position'
 import {usePopoverLayer} from '../Popover/PopoverLayerContext'
@@ -58,10 +59,18 @@ interface TriggerProps {
   'aria-label'?: string
   /** `ghost`: no border or fill until hover, for toolbars. Default: `default`. */
   variant?: MenuTriggerVariant
+  /** `small` matches a small Toggle or Button beside it; a small ghost trigger is `iconButtonSm`. Default: `default`. */
+  size?: ControlSize
   ref?: Ref<HTMLButtonElement>
 }
 
-function Trigger({children, 'aria-label': ariaLabel, variant = 'default', ref}: TriggerProps) {
+function Trigger({
+  children,
+  'aria-label': ariaLabel,
+  variant = 'default',
+  size = 'default',
+  ref,
+}: TriggerProps) {
   const {open, toggle, menuId, triggerId, triggerRef} = useMenu()
   const grouped = useGroupedControl<HTMLButtonElement>()
   const groupedRef = grouped.ref
@@ -99,7 +108,13 @@ 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, grouped.style]}
+      style={[
+        styles.trigger,
+        variant === 'ghost'
+          ? [styles.triggerGhost, size === 'small' && styles.triggerGhostSmall]
+          : size === 'small' && styles.triggerSmall,
+        grouped.style,
+      ]}
     >
       {children}
     </html.button>

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

@@ -47,6 +47,24 @@ export const styles = css.create({
     paddingRight: spacing.xs,
     borderColor: 'transparent',
   },
+  // size="small": Toggle sizeSmall's values, as longhands so they win over the
+  // trigger's own longhands. Every small control is at least controlSm tall,
+  // whatever it holds, and the touch target under a coarse pointer.
+  triggerSmall: {
+    gap: spacing.xs,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+    minHeight: {default: sizes.controlSm, '@media (pointer: coarse)': sizes.touchTarget},
+  },
+  // A small ghost trigger keeps the ghost's xs padding at the small icon-button size.
+  triggerGhostSmall: {
+    fontSize: typography.fontSizeXs,
+    minWidth: sizes.iconButtonSm,
+    minHeight: {default: sizes.iconButtonSm, '@media (pointer: coarse)': sizes.touchTarget},
+  },
   popup: {
     position: 'fixed',
     top: 0,

package/src/components/Meter/Meter.meta.ts

@@ -0,0 +1,24 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A scalar inside a known range — WIP 2 of 3, a milestone 40% done — as role="meter" with a value text, drawn as a thin bar (the meterH token). The label is the accessible name; valueText says the value in words.',
+  whenToUse: [
+    'A level against a limit or a total: WIP against its limit, tasks done in a milestone, quota used',
+    'Beside a count, when the proportion matters more than the number',
+  ],
+  whenNotToUse: [
+    'Progress of a task that is still running — use Spinner (or a determinate progress pattern)',
+    'Picking a value — use an input; a meter has no thumb',
+    'A status with no range (ok/failing) — use Badge or StatusIcon',
+  ],
+  relatedTo: [
+    {
+      component: 'Badge',
+      kind: 'contrast',
+      relationship: 'Badge states a status or a count; Meter shows a level within a range',
+    },
+  ],
+  example: `<Meter label="In progress WIP" value={2} max={3} valueText="2 of 3" />
+<Meter label="Milestone done" value={0.4} tone="success" />`,
+}

package/src/components/Meter/Meter.stories.tsx

@@ -0,0 +1,64 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Meter} from './Meter'
+import {Text} from '../Text/Text'
+import {onThemeSurface} from '../../docs/themedSurface'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+
+const s = css.create({
+  col: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.gridColMd},
+})
+
+const meta: Meta<typeof Meter> = {
+  title: 'Components/Meter',
+  component: Meter,
+  parameters: {a11y: {test: 'error'}},
+  decorators: [onThemeSurface],
+}
+export default meta
+type Story = StoryObj<typeof Meter>
+
+export const Default: Story = {
+  args: {label: 'Milestone done', value: 0.4},
+  play: async ({canvas}) => {
+    const meter = canvas.getByRole('meter', {name: 'Milestone done'})
+    await expect(meter).toHaveAttribute('aria-valuenow', '0.4')
+    await expect(meter).toHaveAttribute('aria-valuemin', '0')
+    await expect(meter).toHaveAttribute('aria-valuemax', '1')
+    await expect(meter).toHaveAttribute('aria-valuetext', '40%')
+  },
+}
+
+/** Tones for a level against a limit: under, at, over. */
+export const Tones: Story = {
+  render: () => (
+    <html.div style={s.col}>
+      <Text variant="label">Next · 1 of 3</Text>
+      <Meter label="Next WIP" value={1} max={3} valueText="1 of 3" />
+      <Text variant="label">In progress · 3 of 3</Text>
+      <Meter label="In progress WIP" value={3} max={3} valueText="3 of 3" tone="warning" />
+      <Text variant="label">Review · 4 of 3</Text>
+      <Meter label="Review WIP" value={4} max={3} valueText="4 of 3, over the limit" tone="error" />
+      <Text variant="label">Milestone · 70% done</Text>
+      <Meter label="Milestone done" value={0.7} tone="success" />
+    </html.div>
+  ),
+}
+
+/** Over the maximum, aria-valuenow stays in range and the text carries the
+ *  true value; the bar fills, no further. */
+export const OverTheLimit: Story = {
+  args: {label: 'Review WIP', value: 4, max: 3, valueText: '4 of 3, over the limit', tone: 'error'},
+  play: async ({canvas}) => {
+    const meter = canvas.getByRole('meter', {name: 'Review WIP'})
+    await expect(meter).toHaveAttribute('aria-valuenow', '3')
+    await expect(meter).toHaveAttribute('aria-valuetext', '4 of 3, over the limit')
+    const fill = meter.firstElementChild as HTMLElement
+    await expect(fill.getBoundingClientRect().width).toBeCloseTo(
+      meter.getBoundingClientRect().width,
+      0,
+    )
+  },
+}

package/src/components/Meter/Meter.tsx

@@ -0,0 +1,55 @@
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// ---------------------------------------------------------------------------
+// Meter — a scalar inside a known range (WIP 2 of 3, 40% of a milestone's
+// tasks done): role="meter" with a value text, drawn as a thin bar of the
+// `meterH` token. Not a progress bar for a running task (use Spinner) and
+// not an input (no thumb).
+// ---------------------------------------------------------------------------
+
+export type MeterTone = 'accent' | 'success' | 'warning' | 'error'
+
+export interface MeterProps {
+  value: number
+  /** Defaults to 0. */
+  min?: number
+  /** Defaults to 1, so a fraction needs nothing else. */
+  max?: number
+  /** The accessible name, e.g. "In progress WIP". */
+  label: string
+  /** What screen readers read for the value, e.g. "4 of 3, over the limit".
+   *  Defaults to the percentage. */
+  valueText?: string
+  /** The fill's colour; defaults to accent. */
+  tone?: MeterTone
+}
+
+const toneStyle = {
+  accent: styles.accent,
+  success: styles.success,
+  warning: styles.warning,
+  error: styles.error,
+} as const
+
+export function Meter({value, min = 0, max = 1, label, valueText, tone = 'accent'}: MeterProps) {
+  const span = max - min
+  const fraction = span > 0 ? (value - min) / span : 0
+  const clamped = Math.min(Math.max(fraction, 0), 1)
+  // aria-valuenow must sit inside the range; the true value (over the
+  // limit, say) is what valueText is for.
+  const now = Math.min(Math.max(value, min), max)
+  return (
+    <html.div
+      role="meter"
+      aria-label={label}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={now}
+      aria-valuetext={valueText ?? `${Math.round(clamped * 100)}%`}
+      style={styles.track}
+    >
+      <html.div style={[styles.fill, toneStyle[tone], styles.fillAt(clamped * 100)]} />
+    </html.div>
+  )
+}

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

@@ -0,0 +1,30 @@
+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 {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+export const styles = css.create({
+  track: {
+    position: 'relative',
+    width: '100%',
+    height: sizes.meterH,
+    borderRadius: radii.full,
+    backgroundColor: colors.border,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: radii.full,
+    transitionProperty: 'width',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.standard,
+  },
+  accent: {backgroundColor: colors.accent},
+  success: {backgroundColor: colors.success},
+  warning: {backgroundColor: colors.warning},
+  error: {backgroundColor: colors.error},
+  fillAt: (percent: number) => ({
+    width: `${percent}%`,
+  }),
+})

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

@@ -2,10 +2,11 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves.',
+    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size="small" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal.',
   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',
+    'One floating surface over another (a link editor over a selection format bar) — Popover.Popup raised',
     '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: [

package/src/components/Popover/Popover.tsx

@@ -22,6 +22,7 @@ import {PopoverLayerContext, type PopoverLayerContextValue} from './PopoverLayer
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {mergeRefs} from '../../shared/mergeRefs'
+import type {ControlSize} from '../../shared/types'
 import {useInModal} from '../../shared/ModalContext'
 
 // --- Context ---
@@ -166,6 +167,8 @@ function Root({
           unregisterParent?.()
         }
       },
+      // Inside a raised Popup, this Popover is raised too.
+      raised: parentLayer?.raised,
     }),
     [parentLayer],
   )
@@ -201,11 +204,13 @@ interface TriggerProps {
   children: ReactNode
   /** Accessible name: required when the label is an icon only. */
   'aria-label'?: string
+  /** `small` matches a small Toggle or Button beside it. Default: `default`. */
+  size?: ControlSize
   /** The trigger <button>, e.g. to measure it or return focus to it. */
   ref?: Ref<HTMLButtonElement>
 }
 
-function Trigger({children, 'aria-label': ariaLabel, ref}: TriggerProps) {
+function Trigger({children, 'aria-label': ariaLabel, size = 'default', ref}: TriggerProps) {
   const {open, setOpen, popoverId, triggerRef} = usePopover('Trigger')
   const grouped = useGroupedControl<HTMLButtonElement>()
 
@@ -220,7 +225,7 @@ function Trigger({children, 'aria-label': ariaLabel, ref}: TriggerProps) {
       aria-haspopup="dialog"
       aria-expanded={open}
       aria-controls={open ? popoverId : undefined}
-      style={[styles.trigger, grouped.style]}
+      style={[styles.trigger, size === 'small' && styles.triggerSmall, grouped.style]}
     >
       {children}
     </html.button>
@@ -233,9 +238,18 @@ interface PopupProps {
   children: ReactNode
   /** Accessible name for the dialog. */
   label: string
+  /**
+   * Draw over another floating surface: `layers.floatingRaised` outside a
+   * modal, `layers.popoverRaised` inside a Dialog or Drawer, instead of
+   * `floating` / `popover`. For one floating thing that must cover a sibling
+   * one (a link editor over a format bar), never for covering a modal: a
+   * Dialog opened later still covers it. A Popover nested inside a raised one
+   * is raised too. Default: inherited, else `false`.
+   */
+  raised?: boolean
 }
 
-function Popup({children, label}: PopupProps) {
+function Popup({children, label, raised}: PopupProps) {
   const {open, popoverId, side, align, anchor, triggerRef, popupRef, repositionRef} =
     usePopover('Popup')
   const [coords, setCoords] = useState({top: 0, left: 0})
@@ -243,6 +257,14 @@ function Popup({children, label}: PopupProps) {
   // tokens cascade into the popup and it stacks above dialogs.
   const mount = usePortalMount()
   const inModal = useInModal()
+  const layer = useContext(PopoverLayerContext)
+  const isRaised = raised ?? layer?.raised ?? false
+  // Re-provided around the children: the Root can't see this prop, and a
+  // Popover nested in here reads it to stay above this one.
+  const raisedLayer = useMemo<PopoverLayerContextValue | null>(
+    () => (layer ? {...layer, raised: isRaised} : null),
+    [layer, isRaised],
+  )
 
   // Measure before paint on open; re-measure on scroll/resize (capture phase
   // catches any scrolling ancestor) and when Root.reposition() is called.
@@ -291,10 +313,13 @@ function Popup({children, label}: PopupProps) {
       style={[
         styles.popup,
         inModal && styles.popupInModal,
+        isRaised && (inModal ? styles.popupInModalRaised : styles.popupRaised),
         styles.popupPosition(coords.top, coords.left),
       ]}
     >
-      <ControlContextBoundary>{children}</ControlContextBoundary>
+      <PopoverLayerContext.Provider value={raisedLayer}>
+        <ControlContextBoundary>{children}</ControlContextBoundary>
+      </PopoverLayerContext.Provider>
     </html.div>,
     mount ?? document.body,
   )

package/src/components/Popover/PopoverLayerContext.ts

@@ -5,6 +5,9 @@ import {type RefObject, createContext, useContext, useLayoutEffect} from 'react'
 // on them counts as inside the Popover.
 export interface PopoverLayerContextValue {
   register: (el: Element) => () => void
+  /** Set by a `raised` Popup for what it holds, so a Popover nested in it is
+   *  raised too and is not drawn under its parent. */
+  raised?: boolean
 }
 
 export const PopoverLayerContext = createContext<PopoverLayerContextValue | null>(null)