@zyncat/ui 0.10.0 → 0.12.0

package/src/components/composites/modal/Modal.usage.md

@@ -0,0 +1,24 @@
+# Modal - @zyncat/ui/modal
+
+Group: overlays
+
+The SAME modality as Dialog (scrim, focus trap, scroll lock, inert, Esc, motion) with ZERO paint - no header, no body padding, no width cap, no border/radius/shadow.
+
+You supply the whole surface AND its semantics (role="dialog" + a label). Use it ONLY when Dialog's
+chrome is the problem: lightbox / image viewer, full-bleed media, video, a custom layout that owns
+its own edges. If the content is a title + text + buttons, use Dialog instead. htmlProps paints the
+panel (centered by default; width+height 100% = full-bleed), layerProps reaches the box behind it
+(set --bg-overlay to retint the scrim). Also takes trigger, dismissible, container, animation.
+
+```tsx
+<Modal
+  open={!!src}
+  onOpenChange={() => setSrc(null)}
+  htmlProps={{ className: 'lightbox' }}
+  layerProps={{ style: { '--bg-overlay': 'rgb(0 0 0 / 0.92)' } }}
+>
+  <div role="dialog" aria-label="Image viewer">
+    <img src={src} alt="" />
+  </div>
+</Modal>
+```

package/src/components/composites/modal/modal.css

@@ -1,9 +1,13 @@
-/* modal.css - the unpainted modal surface: the shell layer centers the panel and
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* modal.css - the unpainted modal surface: the shell layer centers the panel and
    constrains it to the layer box. Everything else is the consumer's paint. */
-.overlay-layer--modal {
-  place-items: center;
-}
-.overlay-panel--modal {
-  max-width: 100%;
-  max-height: 100%;
+  .overlay-layer--modal {
+    place-items: center;
+  }
+  .overlay-panel--modal {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }

package/src/components/composites/pagination/Pagination.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import './pagination.css';
+
 import { useEffect, useRef, type HTMLAttributes } from 'react';
+
+import type { DataAttributes } from '../../../dom-props';
 import { animate } from '../../../engine';
+import { slideIn } from '../../../motion/presets';
 import { UIMotion } from '../../../tokens/motion-tokens';
-import { tokenPx } from '../../internal/utils/token-px';
 import { Icon } from '../../internal/icon/Icon';
-import { Button } from '../../primitives/button/Button';
-import type { DataAttributes } from '../../../dom-props';
 import { cx } from '../../internal/utils/cx';
+import { Button } from '../../primitives/button/Button';
 
 export interface PaginationProps {
   /** Accessible name for the nav landmark - name the list ("Posts"), not "pagination". @default 'Pagination' */
@@ -33,12 +35,6 @@ export interface PaginationProps {
   htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;
 }
 
-let pgnTravelPx: number | null = null;
-function pgnTravel() {
-  if (pgnTravelPx == null) pgnTravelPx = tokenPx('--space-2');
-  return pgnTravelPx;
-}
-
 function pgnFormat(n: number) {
   return n.toLocaleString('en-US').replace(/,/g, '\u2009');
 }
@@ -70,8 +66,7 @@ export function Pagination({
     if (pf === from && pt === to) return;
     const dir = from > pf ? 1 : -1;
     shownRef.current = range;
-    if (rangeRef.current)
-      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });
+    if (rangeRef.current) animate(rangeRef.current, slideIn(dir * UIMotion.dist.sm, UIMotion.t.enter));
   }, [from, to]);
 
   useEffect(() => {

package/src/components/composites/pagination/Pagination.usage.md

@@ -0,0 +1,12 @@
+# Pagination - @zyncat/ui/pagination
+
+Group: data-display
+Docs: https://ui.zyncat.app/pagination
+
+Cursor strip: mono range readout + prev/next pair.
+
+range: [from,to], total?, hasPrev/hasNext, onPrev/onNext, ariaLabel.
+
+```tsx
+<Pagination ariaLabel="Rows" range={[from, to]} total={312} hasPrev hasNext onPrev={...} onNext={...} />
+```

package/src/components/composites/pagination/pagination.css

@@ -1,43 +1,47 @@
-/* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
+@layer zyncat.tokens, zyncat.components;
 
-.pgn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-}
+@layer zyncat.components {
+  /* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
 
-/* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
-.pgn__readout {
-  font: var(--type-mono);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  white-space: nowrap;
-}
-.pgn__range {
-  display: inline-block;
-}
-.pgn__range b {
-  font-weight: var(--weight-medium);
-  color: var(--text-body);
-}
+  .pgn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
 
-/* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
-.pgn__nav {
-  display: flex;
-  gap: var(--space-1);
-}
-.pgn__btn {
-  width: var(--control-height-sm);
-  padding: 0;
-}
+  /* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
+  .pgn__readout {
+    font: var(--type-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    white-space: nowrap;
+  }
+  .pgn__range {
+    display: inline-block;
+  }
+  .pgn__range b {
+    font-weight: var(--weight-medium);
+    color: var(--text-body);
+  }
 
-/* Caret nudges toward its direction on hover - a 1px optical cue. */
-.pgn__btn .icon {
-  transition: transform var(--duration-fast) var(--ease-standard);
-}
-.pgn__btn--prev:hover:not(:disabled) .icon {
-  transform: translateX(calc(var(--space-px) * -1));
-}
-.pgn__btn--next:hover:not(:disabled) .icon {
-  transform: translateX(var(--space-px));
+  /* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
+  .pgn__nav {
+    display: flex;
+    gap: var(--space-1);
+  }
+  .pgn__btn {
+    width: var(--control-height-sm);
+    padding: 0;
+  }
+
+  /* Caret nudges toward its direction on hover - a 1px optical cue. */
+  .pgn__btn .icon {
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+  .pgn__btn--prev:hover:not(:disabled) .icon {
+    transform: translateX(calc(var(--space-px) * -1));
+  }
+  .pgn__btn--next:hover:not(:disabled) .icon {
+    transform: translateX(var(--space-px));
+  }
 }

package/src/components/composites/popover/Popover.tsx

@@ -1,16 +1,21 @@
 'use client';
 
 import './popover.css';
+
 import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode, type RefObject } from 'react';
-import { Presence } from '../../../motion/presence';
-import { useMotion, type MotionSpecs } from '../../../motion/use-motion';
+
+import type { DataAttributes } from '../../../dom-props';
 import { resolveMotionTiming } from '../../../motion/motion-timing';
+import { Presence } from '../../../motion/presence';
+import { popIn, popOut } from '../../../motion/presets';
 import type { DisableableAnimation } from '../../../motion/timing';
+import { useMotion, type MotionSpecs } from '../../../motion/use-motion';
+import { UIMotion } from '../../../tokens/motion-tokens';
 import { useControllable } from '../../internal/hooks/use-controllable';
-import { ovCloneTrigger, useOverlayEntry, useOutsidePress, OverlayPortal } from '../../internal/overlay/layer';
 import { useReturnFocus } from '../../internal/overlay/focus';
+import { ovCloneTrigger, OverlayPortal, useOutsidePress, useOverlayEntry } from '../../internal/overlay/layer';
 import { useAnchorPosition, type VirtualAnchor } from '../../internal/overlay/position';
-import type { DataAttributes } from '../../../dom-props';
+import type { ActivateOn } from '../../internal/utils/activation';
 import { cx } from '../../internal/utils/cx';
 
 export type { VirtualAnchor };
@@ -30,6 +35,8 @@ export interface PopoverProps {
 
   /** Cloned to toggle the panel, and used as the anchor unless `anchor` is set. */
   trigger?: ReactElement | null;
+  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+  activateOn?: ActivateOn;
   /** Anchor to an arbitrary rect instead of the trigger - any `{ getBoundingClientRect() }`, which an element also satisfies.
    *  Drive `open` yourself; pass a new object to re-place a moving anchor. */
   anchor?: VirtualAnchor | null;
@@ -103,6 +110,7 @@ export function Popover({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   anchor = null,
   side = 'bottom',
   align = 'start',
@@ -122,14 +130,21 @@ export function Popover({
 
   return (
     <Fragment>
-      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(!open), panelId, haspopup: 'true', triggerRef })}
+      {ovCloneTrigger(trigger, {
+        open,
+        onPress: () => setOpen(!open),
+        panelId,
+        haspopup: 'true',
+        triggerRef,
+        activateOn,
+      })}
       <OverlayPortal>
         <Presence>
           {open && (
             <PopoverPanel
               key="panel"
-              animate={{ opacity: [0, 1], scale: [0.96, 1], timing: timings.open }}
-              exit={{ opacity: [0], scale: [0.96], timing: timings.close }}
+              animate={popIn(UIMotion.scale.floating, timings.open)}
+              exit={popOut(UIMotion.scale.floating, timings.close)}
               panelId={panelId}
               side={side}
               align={align}

package/src/components/composites/popover/Popover.usage.md

@@ -0,0 +1,15 @@
+# Popover - @zyncat/ui/popover
+
+Group: overlays
+Docs: https://ui.zyncat.app/popover
+
+Headless anchored panel, non-modal.
+
+side, align, arrow, trigger (node), dismissible. Anchor without a trigger: pass anchor - anything
+with getBoundingClientRect (a DOMRect source, an element) - and drive open yourself. Pass a new
+object to re-place a moving anchor.
+
+```tsx
+<Popover side="bottom" align="start" trigger={<Button>Actions</Button>}><menu>...</menu></Popover>
+<Popover open={!!spot} onOpenChange={dismiss} anchor={spot} side="right"><menu>...</menu></Popover>
+```

package/src/components/composites/popover/popover.css

@@ -1,69 +1,73 @@
-/* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
-.overlay-popover {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: max-content;
-  outline: none;
-}
+@layer zyncat.tokens, zyncat.components;
 
-.overlay-popover[data-align='start'] {
-  --ov-origin: var(--space-4);
-}
-.overlay-popover[data-align='center'] {
-  --ov-origin: 50%;
-}
-.overlay-popover[data-align='end'] {
-  --ov-origin: calc(100% - var(--space-4));
-}
+@layer zyncat.components {
+  /* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
+  .overlay-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    outline: none;
+  }
 
-.overlay-popover[data-side='bottom'] {
-  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
-}
-.overlay-popover[data-side='top'] {
-  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
-}
-.overlay-popover[data-side='right'] {
-  transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
-}
-.overlay-popover[data-side='left'] {
-  transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
-}
+  .overlay-popover[data-align='start'] {
+    --ov-origin: var(--space-4);
+  }
+  .overlay-popover[data-align='center'] {
+    --ov-origin: 50%;
+  }
+  .overlay-popover[data-align='end'] {
+    --ov-origin: calc(100% - var(--space-4));
+  }
 
-/* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
-.overlay-popover__arrow {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: var(--overlay-arrow-bg, var(--bg-surface-raised));
-  border: var(--border-hairline) solid var(--border-default);
-  pointer-events: none;
-}
-.overlay-popover[data-side='bottom'] .overlay-popover__arrow {
-  top: -5px;
-  left: var(--overlay-arrow-x, 50%);
-  transform: translateX(-50%) rotate(45deg);
-  border-right: none;
-  border-bottom: none;
-}
-.overlay-popover[data-side='top'] .overlay-popover__arrow {
-  bottom: -5px;
-  left: var(--overlay-arrow-x, 50%);
-  transform: translateX(-50%) rotate(45deg);
-  border-left: none;
-  border-top: none;
-}
-.overlay-popover[data-side='right'] .overlay-popover__arrow {
-  left: -5px;
-  top: var(--overlay-arrow-y, 50%);
-  transform: translateY(-50%) rotate(45deg);
-  border-right: none;
-  border-top: none;
-}
-.overlay-popover[data-side='left'] .overlay-popover__arrow {
-  right: -5px;
-  top: var(--overlay-arrow-y, 50%);
-  transform: translateY(-50%) rotate(45deg);
-  border-left: none;
-  border-bottom: none;
+  .overlay-popover[data-side='bottom'] {
+    transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
+  }
+  .overlay-popover[data-side='top'] {
+    transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
+  }
+  .overlay-popover[data-side='right'] {
+    transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
+  }
+  .overlay-popover[data-side='left'] {
+    transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
+  }
+
+  /* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
+  .overlay-popover__arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--overlay-arrow-bg, var(--bg-surface-raised));
+    border: var(--border-hairline) solid var(--border-default);
+    pointer-events: none;
+  }
+  .overlay-popover[data-side='bottom'] .overlay-popover__arrow {
+    top: -5px;
+    left: var(--overlay-arrow-x, 50%);
+    transform: translateX(-50%) rotate(45deg);
+    border-right: none;
+    border-bottom: none;
+  }
+  .overlay-popover[data-side='top'] .overlay-popover__arrow {
+    bottom: -5px;
+    left: var(--overlay-arrow-x, 50%);
+    transform: translateX(-50%) rotate(45deg);
+    border-left: none;
+    border-top: none;
+  }
+  .overlay-popover[data-side='right'] .overlay-popover__arrow {
+    left: -5px;
+    top: var(--overlay-arrow-y, 50%);
+    transform: translateY(-50%) rotate(45deg);
+    border-right: none;
+    border-top: none;
+  }
+  .overlay-popover[data-side='left'] .overlay-popover__arrow {
+    right: -5px;
+    top: var(--overlay-arrow-y, 50%);
+    transform: translateY(-50%) rotate(45deg);
+    border-left: none;
+    border-bottom: none;
+  }
 }

package/src/components/composites/select/MultiSelect.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import './select.css';
+
 import type { HTMLAttributes, ReactNode } from 'react';
-import { useControllable } from '../../internal/hooks/use-controllable';
-import { CheckGlyph } from '../../primitives/checkbox/check-glyph';
-import { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';
-import type { DisableableAnimation } from '../../../motion/timing';
+
 import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import type { ActivateOn } from '../../internal/utils/activation';
 import { cx } from '../../internal/utils/cx';
+import { CheckGlyph } from '../../primitives/checkbox/check-glyph';
+import { ListboxPanel, SelectTrigger, useListbox, type SelectGroup, type SelectOption } from './core';
 
 export type { SelectOption, SelectGroup } from './core';
 
@@ -42,6 +45,9 @@ export interface MultiSelectProps {
   ariaLabel?: string;
   /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */
   htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Whether the trigger and the options fire on `pointerdown` (snappier) or wait for `click`.
+   *  @default 'pointerdown' */
+  activateOn?: ActivateOn;
   /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */
   animation?: DisableableAnimation;
 }
@@ -70,6 +76,7 @@ export function MultiSelect({
   id,
   ariaLabel,
   htmlProps,
+  activateOn = 'pointerdown',
   animation,
 }: MultiSelectProps) {
   const [value, setValue] = useControllable<string[], SelectOption>(
@@ -116,6 +123,7 @@ export function MultiSelect({
         text={loading ? 'Loading...' : isPlaceholder ? placeholder : selectedOptions[0].label}
         isPlaceholder={isPlaceholder}
         count={selectedOptions.length - 1}
+        activateOn={activateOn}
       />
       <ListboxPanel
         lb={lb}
@@ -124,8 +132,8 @@ export function MultiSelect({
         searchPlaceholder={searchPlaceholder}
         ariaLabel={ariaLabel}
         multiple
+        activateOn={activateOn}
         animation={animation}
-        size={size}
         check={(sel) => <CheckboxTick checked={sel} />}
       />
     </div>

package/src/components/composites/select/MultiSelect.usage.md

@@ -0,0 +1,12 @@
+# MultiSelect - @zyncat/ui/multi-select
+
+Group: forms
+Docs: https://ui.zyncat.app/multi-select
+
+Many-of listbox; stays open while toggling, trigger summarises as first +N.
+
+value: string[], onChange(string[]); searchable.
+
+```tsx
+<MultiSelect options={PEOPLE} value={ids} onChange={setIds} placeholder="Choose members" ariaLabel="Members" />
+```

package/src/components/composites/select/Select.tsx

@@ -1,13 +1,22 @@
 'use client';
 
 import './select.css';
+
 import type { HTMLAttributes, ReactNode } from 'react';
-import { useControllable } from '../../internal/hooks/use-controllable';
-import { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';
-import type { DisableableAnimation } from '../../../motion/timing';
+
 import type { DataAttributes } from '../../../dom-props';
-import { ButtonProps } from '../../primitives/button/Button';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import type { ActivateOn } from '../../internal/utils/activation';
 import { cx } from '../../internal/utils/cx';
+import {
+  ListboxPanel,
+  SelectTrigger,
+  useListbox,
+  type SelectGroup,
+  type SelectOption,
+  type SelectTriggerHtmlProps,
+} from './core';
 
 export type { SelectOption, SelectGroup } from './core';
 
@@ -42,10 +51,15 @@ export interface SelectProps {
   ariaLabel?: string;
   /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */
   htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Whether the trigger and the options fire on `pointerdown` (snappier) or wait for `click`.
+   *  @default 'pointerdown' */
+  activateOn?: ActivateOn;
   /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */
   animation?: DisableableAnimation;
-  /** Trigger props */
-  triggerProps?: ButtonProps;
+  /** Standard <button> attributes (className, style, aria-*, data-*, ...) merged onto the trigger.
+   *  `onClick` and `onKeyDown` run before the built-in open/close and arrow-key handling, which
+   *  cannot be replaced - the trigger is the combobox. */
+  triggerProps?: SelectTriggerHtmlProps;
   /** Show check icon on selected value */
   showCheck?: boolean;
 }
@@ -66,6 +80,7 @@ export function Select({
   id,
   ariaLabel,
   htmlProps,
+  activateOn = 'pointerdown',
   animation,
   triggerProps,
   showCheck = true,
@@ -105,6 +120,7 @@ export function Select({
         leading={leadingIcon || (selected && selected.icon) || null}
         text={loading ? 'Loading...' : isPlaceholder ? placeholder : selected.label}
         isPlaceholder={isPlaceholder}
+        activateOn={activateOn}
         {...triggerProps}
       />
       <ListboxPanel
@@ -113,8 +129,8 @@ export function Select({
         searchable={searchable}
         searchPlaceholder={searchPlaceholder}
         ariaLabel={ariaLabel}
+        activateOn={activateOn}
         animation={animation}
-        size={size}
         {...(!showCheck && { check: () => null })}
       />
     </div>

package/src/components/composites/select/Select.usage.md

@@ -0,0 +1,20 @@
+# Select - @zyncat/ui/select
+
+Group: forms
+Docs: https://ui.zyncat.app/select
+
+Single-select listbox in a popover, searchable; holds value: string | null.
+
+options: SelectOption[]; value: string|null, onChange(value); searchable, leadingIcon, placeholder,
+invalid, loading, ariaLabel.
+
+```tsx
+<Select
+  options={TIMEZONES}
+  value={tz}
+  onChange={setTz}
+  searchable
+  placeholder="Choose a time zone"
+  ariaLabel="Time zone"
+/>
+```

package/src/components/composites/select/core/index.ts

@@ -1,4 +1,4 @@
 export { useListbox, type ListboxState } from './use-listbox';
-export { SelectTrigger } from './trigger';
+export { SelectTrigger, type SelectTriggerHtmlProps } from './trigger';
 export { ListboxPanel } from './panel';
 export type { SelectOption, SelectGroup } from './types';

package/src/components/composites/select/core/menu.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { useLayoutEffect, useRef, type ReactNode, type RefObject } from 'react';
+
 import type { Layer } from '../../../../engine';
+import { resolveMotionTiming } from '../../../../motion/motion-timing';
 import { Presence } from '../../../../motion/presence';
+import type { DisableableAnimation } from '../../../../motion/timing';
 import { useMotion, type MotionSpecs } from '../../../../motion/use-motion';
 import { UIMotion, type MotionTransition } from '../../../../tokens/motion-tokens';
-import { resolveMotionTiming } from '../../../../motion/motion-timing';
-import type { DisableableAnimation } from '../../../../motion/timing';
-import { OverlayPortal, useOverlayEntry, useOutsidePress } from '../../../internal/overlay/layer';
+import { OverlayPortal, useOutsidePress, useOverlayEntry } from '../../../internal/overlay/layer';
 import { useAnchorPosition } from '../../../internal/overlay/position';
 
 const SELECT_MENU_TIMING = {
@@ -18,13 +19,14 @@ const SELECT_MENU_TIMING = {
 function selectMenuLayers(animation: DisableableAnimation | undefined, dir: 'open' | 'close'): Layer[] {
   const t = resolveMotionTiming(animation, SELECT_MENU_TIMING)[dir];
   const fade = (d: MotionTransition) => ({ duration: d.duration === 0 ? 0 : UIMotion.dur.fast, ease: d.ease });
+  const drop = -UIMotion.dist.sm;
   return dir === 'open'
     ? [
-        { y: [-6, 0], scale: [0.96, 1], timing: t },
+        { y: [drop, 0], scale: [UIMotion.scale.floating, 1], timing: t },
         { opacity: [0, 1], timing: fade(t) },
       ]
     : [
-        { y: [-6], scale: [0.96], timing: t },
+        { y: [drop], scale: [UIMotion.scale.floating], timing: t },
         { opacity: [0], timing: fade(t) },
       ];
 }
@@ -67,7 +69,7 @@ function MenuSurface({
   return (
     <div
       ref={menuRef}
-      className="select__menu"
+      className="menu-surface select__menu"
       id={menuId}
       role="presentation"
       data-multiple={multiple ? 'true' : undefined}