@teamofsilicons/silicon-ui 0.3.0 → 0.4.0

package/components/date-range-picker/date-range-picker.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useSta
 import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
 import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import { useToday } from "../../lib/use-today.js";
 import styles from "./date-range-picker.module.css";
 const DAY = 864e5;
@@ -50,21 +51,21 @@ const GROW = physical(.48, .12), SHRINK = physical(.38, 0), STRETCH = physical(.
 const TRIGGER_RADIUS = 18, PANEL_RADIUS = 26, WIDE_CELL = 36, WIDE_MIN = 712, EDGE = 8;
 const roll = {
     enter: (direction) => ({ opacity: 0, y: `${direction * .45}em`, filter: `blur(${blur.subtle}px)` }),
-    center: { opacity: 1, y: "0em", filter: "blur(0px)", transition: { duration: .26, ease: enterEase } },
-    exit: (direction) => ({ opacity: 0, y: `${direction * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .14, ease: standardEase } }),
+    center: { opacity: 1, y: "0em", filter: "blur(0px)", transition: { duration: motionTokens.duration.exit, ease: enterEase } },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: standardEase } }),
 };
-const fade = { enter: { opacity: 0 }, center: { opacity: 1, y: "0em", filter: "blur(0px)", transition: { duration: .12 } }, exit: { opacity: 0, transition: { duration: .08 } } };
+const fade = { enter: { opacity: 0 }, center: { opacity: 1, y: "0em", filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 /** Panel content arrives just behind the growing surface and leaves ahead of it. */
 const faceIn = {
     hidden: { opacity: 0, y: -4, filter: `blur(${blur.soft}px)` },
-    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: .26, ease: enterEase, delay: .07 } },
-    gone: { opacity: 0, y: -2, filter: `blur(${blur.soft}px)`, transition: { duration: .12, ease: standardEase } },
+    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.exit, ease: enterEase, delay: motionTokens.duration.instant } },
+    gone: { opacity: 0, y: -2, filter: `blur(${blur.soft}px)`, transition: { duration: motionTokens.duration.instant, ease: standardEase } },
 };
-const faceFade = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .12 } }, gone: { opacity: 0, transition: { duration: .08 } } };
+const faceFade = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 const slide = {
     enter: (direction) => ({ opacity: 0, x: direction * 48, filter: `blur(${blur.soft}px)` }),
-    center: { opacity: 1, x: 0, filter: "blur(0px)", transition: { x: SLIDE, opacity: { duration: .22, ease: enterEase }, filter: { duration: .24, ease: enterEase } } },
-    exit: (direction) => ({ opacity: 0, x: direction * -36, filter: `blur(${blur.soft}px)`, transition: { x: SLIDE, opacity: { duration: .14, ease: standardEase }, filter: { duration: .14, ease: standardEase } } }),
+    center: { opacity: 1, x: 0, filter: "blur(0px)", transition: { x: SLIDE, opacity: { duration: motionTokens.duration.exit, ease: enterEase }, filter: { duration: motionTokens.duration.exit, ease: enterEase } } },
+    exit: (direction) => ({ opacity: 0, x: direction * -36, filter: `blur(${blur.soft}px)`, transition: { x: SLIDE, opacity: { duration: motionTokens.duration.fast, ease: standardEase }, filter: { duration: motionTokens.duration.fast, ease: standardEase } } }),
 };
 /** Words roll one by one: a later date rises from below, an earlier one drops from above; words that stay the same hold still. */
 function Rolling({ text, direction, reduced }) {
@@ -216,6 +217,8 @@ export function DateRangePicker({ value, defaultValue = null, onChange, label =
     const triggerRef = useRef(null);
     const panelRef = useRef(null);
     const railRef = useRef(null);
+    // Fluid hover on the presets: the nearest one is lit, gaps and padding included, and a click there picks it. Focus has its own fill.
+    const presetHover = useFluidHover(railRef, { items: "[data-preset]", axis: "xy", followFocus: false });
     const pendingFocus = useRef(null);
     /* ---------- One surface: the trigger's box springs to the panel's box and back ---------- */
     // Before the first measurement the surface simply fills the root and the root wraps the trigger, so server markup already looks right.
@@ -524,10 +527,10 @@ export function DateRangePicker({ value, defaultValue = null, onChange, label =
     const layoutId = reduced ? undefined : `${uid}-value`;
     const cellSize = compact && panelWidth ? Math.max(32, Math.min(42, Math.floor((panelWidth - 24) / 7))) : WIDE_CELL;
     const quiet = open ? (reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${blur.subtle}px)` }) : { opacity: 1, filter: "blur(0px)" };
-    const quietTransition = open ? { duration: .12, ease: standardEase } : { duration: .22, ease: enterEase, delay: reduced ? 0 : .1 };
+    const quietTransition = open ? { duration: motionTokens.duration.instant, ease: standardEase } : { duration: motionTokens.duration.exit, ease: enterEase, delay: reduced ? 0 : .1 };
     return _jsxs(motion.div, { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), style: { width: rootWidth }, "data-open": open || undefined, onKeyDown: onRootKey, onBlur: onRootBlur, children: [_jsxs("button", { ref: triggerRef, type: "button", className: styles.trigger, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? `${uid}-panel` : undefined, "aria-label": `${label}: ${committedText}`, disabled: !today, inert: open || undefined, onClick: openPanel, children: [_jsx(motion.span, { className: styles.triggerIcon, initial: false, animate: quiet, transition: quietTransition, children: _jsx(CalendarDays, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), open || !layoutId
                         ? _jsx(motion.span, { className: styles.value, "data-empty": !committed || undefined, initial: false, animate: open ? { opacity: 0 } : { opacity: 1 }, transition: quietTransition, children: _jsx(Rolling, { text: committedText, direction: committedDirection, reduced: reduced }) }, "resting")
-                        : _jsx(motion.span, { layoutId: layoutId, layout: "position", className: styles.value, "data-empty": !committed || undefined, transition: SHRINK, children: _jsx(Rolling, { text: committedText, direction: committedDirection, reduced: reduced }) }, "shared"), _jsx(motion.span, { className: styles.chevron, initial: false, animate: quiet, transition: quietTransition, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx(motion.div, { className: styles.surface, style: { width, height, borderRadius: radius, x }, children: _jsx(AnimatePresence, { children: open && today && _jsxs(motion.div, { ref: panelRef, id: `${uid}-panel`, className: styles.panel, role: "dialog", "aria-label": label, "data-compact": compact || undefined, style: { "--cell": `${cellSize}px`, width: compact && panelWidth ? panelWidth : undefined }, exit: { opacity: 1, transition: { duration: .14 } }, children: [_jsxs(motion.div, { className: styles.body, variants: reduced ? faceFade : faceIn, initial: "hidden", animate: "shown", exit: "gone", children: [_jsxs("div", { ref: railRef, className: styles.rail, role: "group", "aria-label": "Presets", onKeyDown: onRailKey, children: [_jsx(motion.span, { className: styles.railHighlight, style: { x: gx, y: gy, width: gw, height: gh, opacity: go }, "aria-hidden": "true" }), presets.map((preset, index) => _jsx("button", { type: "button", className: styles.preset, "data-preset": index, "aria-pressed": index === activePreset, onClick: () => choosePreset(preset), children: preset.label }, preset.label))] }), _jsxs("div", { className: styles.calendars, onPointerLeave: () => { if (anchor)
+                        : _jsx(motion.span, { layoutId: layoutId, layout: "position", className: styles.value, "data-empty": !committed || undefined, transition: SHRINK, children: _jsx(Rolling, { text: committedText, direction: committedDirection, reduced: reduced }) }, "shared"), _jsx(motion.span, { className: styles.chevron, initial: false, animate: quiet, transition: quietTransition, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx(motion.div, { className: styles.surface, style: { width, height, borderRadius: radius, x }, children: _jsx(AnimatePresence, { children: open && today && _jsxs(motion.div, { ref: panelRef, id: `${uid}-panel`, className: styles.panel, role: "dialog", "aria-label": label, "data-compact": compact || undefined, style: { "--cell": `${cellSize}px`, width: compact && panelWidth ? panelWidth : undefined }, exit: { opacity: 1, transition: { duration: motionTokens.duration.fast } }, children: [_jsxs(motion.div, { className: styles.body, variants: reduced ? faceFade : faceIn, initial: "hidden", animate: "shown", exit: "gone", children: [_jsxs("div", { ref: railRef, className: styles.rail, role: "group", "aria-label": "Presets", onKeyDown: onRailKey, ...presetHover.handlers, children: [_jsx(FluidHoverHighlight, { hover: presetHover, className: styles.railHover }), _jsx(motion.span, { className: styles.railHighlight, style: { x: gx, y: gy, width: gw, height: gh, opacity: go }, "aria-hidden": "true" }), presets.map((preset, index) => _jsx("button", { type: "button", className: styles.preset, "data-preset": index, "aria-pressed": index === activePreset, onClick: () => choosePreset(preset), children: preset.label }, preset.label))] }), _jsxs("div", { className: styles.calendars, onPointerLeave: () => { if (anchor)
                                             setHover(null); }, children: [_jsx("button", { type: "button", className: styles.navButton, "data-side": "prev", "aria-label": "Previous month", onClick: () => goTo(addMonths(view, -1)), disabled: Boolean(minDate && monthDiff(view, minDate) <= 0), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: styles.navButton, "data-side": "next", "aria-label": "Next month", onClick: () => goTo(addMonths(view, 1)), disabled: Boolean(maxDate && monthDiff(addMonths(view, count - 1), maxDate) >= 0), children: _jsx(ChevronRight, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("div", { className: styles.viewport, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: direction, children: _jsx(Months, { direction: direction, reduced: reduced, children: visible.map(month => _jsx(Month, { month: month, range: shown, tabbable: tabbable, today: today, minDate: minDate, maxDate: maxDate, weekStartsOn: weekStartsOn, reduced: reduced, formatters: formatters, idBase: uid, onPick: pick, onHover: date => { if (anchor)
                                                                 setHover(date); }, onKey: onDayKey, onFocusDay: date => setFocusKey(keyOf(date)) }, keyOf(month))) }, `${keyOf(view)}-${count}`) }) })] })] }), _jsxs("div", { className: styles.footer, children: [_jsxs("div", { className: styles.summary, children: [_jsx(motion.span, { layoutId: layoutId, layout: layoutId ? "position" : undefined, className: styles.summaryValue, transition: GROW, variants: layoutId ? undefined : faceFade, initial: layoutId ? undefined : "hidden", animate: layoutId ? undefined : "shown", exit: layoutId ? undefined : "gone", children: _jsx(Rolling, { text: shownText, direction: shownDirection, reduced: reduced }) }), _jsx(motion.span, { className: styles.summaryCount, variants: reduced ? faceFade : faceIn, initial: "hidden", animate: "shown", exit: "gone", children: countText && _jsx(Rolling, { text: anchor && sameDay(anchor, hover) ? "Pick an end date" : countText, direction: shownDirection, reduced: reduced }) })] }), _jsxs(motion.div, { className: styles.actions, variants: reduced ? faceFade : faceIn, initial: "hidden", animate: "shown", exit: "gone", children: [_jsx("button", { type: "button", className: styles.ghost, onClick: () => close(true), children: "Cancel" }), _jsx("button", { type: "button", className: styles.primary, onClick: apply, disabled: !shown, children: "Apply" })] })] }), _jsx("p", { className: styles.srOnly, "aria-live": "polite", children: status })] }, "panel") }) })] });
 }

package/components/date-range-picker/date-range-picker.module.css

@@ -66,6 +66,8 @@
 .body { display: flex; gap: var(--space-group); }
 
 .rail { position: relative; display: flex; width: 9.25rem; flex: none; flex-direction: column; gap: var(--space-hair); padding-right: var(--space-group); border-right: 1px solid var(--border-subtle); }
+/* The hover fill glides between presets, under the chosen preset's highlight. */
+.railHover { border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 4%, transparent); }
 .railHighlight { position: absolute; top: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
 .preset {
   position: relative;
@@ -198,7 +200,6 @@
   .root:not([data-open]):has(> .trigger:hover:not(:disabled)) .surface { background: color-mix(in oklab, var(--foreground) 3%, var(--surface-raised)); }
   .root:not([data-open]):has(> .trigger:hover:not(:disabled)) .surface::after { border-color: var(--border-strong); }
   .preset:hover { color: var(--foreground); }
-  .preset:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
   .navButton:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 6.5%, transparent); color: var(--foreground); }
   .day:hover:not(:disabled):not([data-edge]) > span { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
   .ghost:hover { background: var(--surface-muted); color: var(--foreground); }

package/components/donut-chart/donut-chart.module.css

@@ -10,7 +10,7 @@
 .svg { display: block; width: 100%; height: 100%; overflow: visible; cursor: default; }
 .svg[data-hovering] { cursor: pointer; }
 /* The track shows only before the first sweep and when there is nothing to draw, so the gaps between segments stay the page colour. */
-.track { fill: none; stroke: var(--surface-muted); transition: opacity var(--duration-considered, .48s) var(--ease-standard); opacity: 0; }
+.track { fill: none; stroke: var(--surface-muted); transition: opacity var(--duration-expressive, .48s) var(--ease-standard); opacity: 0; }
 .track[data-idle] { opacity: 1; }
 /* Shapes are written every frame from script; only colour and dimming ease here, on the compositor. */
 .segment { fill: var(--slice); shape-rendering: geometricPrecision; transition: fill var(--duration-standard) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard); }

package/components/drawer/drawer.module.css

@@ -89,9 +89,9 @@
 
 @media (prefers-reduced-motion: reduce) {
   .keyframes.overlay[data-state="open"] { animation: overlay-in var(--duration-instant) linear both; }
-  .keyframes.overlay[data-state="closed"] { animation: overlay-out 100ms linear both; }
+  .keyframes.overlay[data-state="closed"] { animation: overlay-out var(--duration-fast) linear both; }
   .keyframes.content[data-state="open"] { animation: drawer-fade-in var(--duration-instant) linear both; }
-  .keyframes.content[data-state="closed"] { animation: drawer-fade-out 100ms linear both; }
+  .keyframes.content[data-state="closed"] { animation: drawer-fade-out var(--duration-fast) linear both; }
   .close, .close:active { transition: none; }
   .close:active { transform: none; }
 }

package/components/elastic-slider/elastic-slider.js

@@ -109,7 +109,7 @@ export function ElasticSlider({ label, value, defaultValue, onValueChange, onVal
     function pulse(mark, haptic) {
         const node = tickRefs.current.get(mark);
         if (node && !reduced)
-            animate(node, { scale: [1, 2.1, 1] }, { duration: .34, ease: enterEase });
+            animate(node, { scale: [1, 2.1, 1] }, { duration: motionTokens.duration.standard, ease: enterEase });
         if (haptic && typeof navigator !== "undefined" && "vibrate" in navigator)
             navigator.vibrate?.(6);
     }
@@ -255,7 +255,7 @@ export function ElasticSlider({ label, value, defaultValue, onValueChange, onVal
     return _jsxs("div", { className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, "data-dragging": dragging || undefined, "data-tag": bubble || undefined, "data-marks": labelled.length > 0 || undefined, children: [_jsxs("div", { className: styles.header, children: [_jsx("span", { id: labelId, className: styles.label, children: label }), showValue && _jsx("span", { className: styles.readout, "aria-hidden": "true", children: text })] }), _jsxs("div", { className: styles.body, children: [startIcon && _jsx(motion.span, { className: styles.start, style: { x: startShift }, "aria-hidden": "true", children: startIcon }), _jsxs("div", { className: styles.control, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onLostPointerCapture: onPointerEnd, onMouseDown: event => event.preventDefault(), children: [_jsxs("div", { ref: trackRef, className: styles.rail, children: [_jsx(motion.div, { className: styles.track, style: { scaleX, scaleY, originX }, children: _jsx(motion.div, { className: styles.fill, style: { clipPath } }) }), markList.filter(mark => mark.value > min && mark.value < max).map(mark => _jsx("span", { ref: node => { if (node)
                                             tickRefs.current.set(mark.value, node);
                                         else
-                                            tickRefs.current.delete(mark.value); }, className: styles.tick, "data-on": mark.value <= current || undefined, style: { left: `${pct(mark.value)}%` } }, mark.value))] }), _jsxs("div", { className: styles.thumbs, children: [_jsx(motion.div, { className: styles.layer, style: { x: bubbleX }, children: _jsx(motion.span, { className: styles.bubbleAnchor, style: { x: over, "--at": bubbleAt }, children: _jsx(AnimatePresence, { children: bubble && _jsx(motion.span, { className: styles.bubble, "aria-hidden": "true", style: { rotate }, initial: reduced ? { opacity: 0 } : bubbleIn, animate: bubbleRest, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : bubbleOut, transition: reduced ? { duration: .15 } : bubbleEnter, children: text }, "bubble") }) }) }), _jsx(motion.div, { className: styles.layer, style: { x: thumbX }, children: _jsx(motion.div, { className: styles.shift, style: { x: over }, children: _jsx(motion.div, { ref: thumbRef, role: "slider", "data-thumb": "", className: styles.thumb, tabIndex: disabled ? -1 : 0, "aria-labelledby": labelId, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": text, "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, initial: false, animate: { scale: dragging ? 1.28 : 1 }, transition: reduced ? { duration: 0 } : spring.snappy, onKeyDown: onKeyDown, onBlur: () => setKeyed(false) }) }) })] })] }), endIcon && _jsx(motion.span, { className: styles.end, style: { x: endShift }, "aria-hidden": "true", children: endIcon }), labelled.length > 0 && _jsx("div", { className: styles.marks, "aria-hidden": "true", children: labelled.map(mark => _jsx("span", { className: styles.markLabel, "data-on": mark.value === current || undefined, "data-edge": mark.value === min ? "start" : mark.value === max ? "end" : undefined, style: { left: `${pct(mark.value)}%` }, onClick: () => { if (disabled || mark.value === latest.current)
+                                            tickRefs.current.delete(mark.value); }, className: styles.tick, "data-on": mark.value <= current || undefined, style: { left: `${pct(mark.value)}%` } }, mark.value))] }), _jsxs("div", { className: styles.thumbs, children: [_jsx(motion.div, { className: styles.layer, style: { x: bubbleX }, children: _jsx(motion.span, { className: styles.bubbleAnchor, style: { x: over, "--at": bubbleAt }, children: _jsx(AnimatePresence, { children: bubble && _jsx(motion.span, { className: styles.bubble, "aria-hidden": "true", style: { rotate }, initial: reduced ? { opacity: 0 } : bubbleIn, animate: bubbleRest, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : bubbleOut, transition: reduced ? { duration: motionTokens.duration.fast } : bubbleEnter, children: text }, "bubble") }) }) }), _jsx(motion.div, { className: styles.layer, style: { x: thumbX }, children: _jsx(motion.div, { className: styles.shift, style: { x: over }, children: _jsx(motion.div, { ref: thumbRef, role: "slider", "data-thumb": "", className: styles.thumb, tabIndex: disabled ? -1 : 0, "aria-labelledby": labelId, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": text, "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, initial: false, animate: { scale: dragging ? 1.28 : 1 }, transition: reduced ? { duration: 0 } : spring.snappy, onKeyDown: onKeyDown, onBlur: () => setKeyed(false) }) }) })] })] }), endIcon && _jsx(motion.span, { className: styles.end, style: { x: endShift }, "aria-hidden": "true", children: endIcon }), labelled.length > 0 && _jsx("div", { className: styles.marks, "aria-hidden": "true", children: labelled.map(mark => _jsx("span", { className: styles.markLabel, "data-on": mark.value === current || undefined, "data-edge": mark.value === min ? "start" : mark.value === max ? "end" : undefined, style: { left: `${pct(mark.value)}%` }, onClick: () => { if (disabled || mark.value === latest.current)
                                 return; emit(mark.value); pulse(mark.value, false); onValueCommit?.(mark.value); }, children: mark.label }, mark.value)) })] }), name && _jsx("input", { type: "hidden", name: name, value: current, disabled: disabled })] });
 }
 export default ElasticSlider;

package/components/expandable-card/expandable-card.js

@@ -17,7 +17,7 @@ const settleTime = 450;
 const boxTransition = (expanded, hold) => expanded || !hold ? morph : { ...morph, delay: closeHold };
 const contentTransition = (expanded) => expanded
     ? { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.standard], delay: 0.12 }
-    : { duration: 0.1, ease: [...motionTokens.ease.standard] };
+    : { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
 const still = { duration: 0 };
 /** Changed words in the summary rise in; unchanged words hold still. */
 const wordMotion = {

package/components/expanding-button-group/expanding-button-group.module.css

@@ -17,8 +17,8 @@
 :global(:root[data-theme="dark"]) .item[data-tone="danger"][data-expanded] { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); }
 :global(:root[data-theme="dark"]) .item[data-state="done"]:not([data-tone="danger"]) { background: color-mix(in oklab, var(--success) 14%, var(--surface)); }
 
-.icon { position: relative; display: grid; width: var(--ebg-icon); height: var(--ebg-icon); flex: none; place-items: center; transition: transform 320ms var(--ease-spring); }
-.item:active:not([aria-disabled="true"]) .icon { transform: scale(.86); transition-duration: 90ms; transition-timing-function: var(--ease-standard); }
+.icon { position: relative; display: grid; width: var(--ebg-icon); height: var(--ebg-icon); flex: none; place-items: center; transition: transform var(--duration-standard) var(--ease-spring); }
+.item:active:not([aria-disabled="true"]) .icon { transform: scale(.86); transition-duration: var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .glyph { display: grid; grid-area: 1 / 1; place-items: center; width: 100%; height: 100%; }
 .glyph svg { width: 100%; height: 100%; stroke-width: 1.75; }
 

package/components/expanding-search/expanding-search.js

@@ -112,10 +112,10 @@ function Listbox({ id, label, groups, query, activeIndex, optionId, reduced, key
     }, [activeId, layoutKey, reduced, travel, fade, keyboard]);
     return _jsx("div", { ref: listRef, id: id, role: "listbox", "aria-label": label, className: styles.listbox, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: groups.map(group => {
                 const headingId = `${id}-${group.name || "results"}`.replace(/\s+/g, "-");
-                return _jsxs(motion.div, { role: "group", "aria-labelledby": group.name ? headingId : undefined, className: styles.group, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, children: [group.name && _jsx("div", { id: headingId, className: styles.groupLabel, role: "presentation", children: group.name }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: group.items.map(item => {
+                return _jsxs(motion.div, { role: "group", "aria-labelledby": group.name ? headingId : undefined, className: styles.group, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, children: [group.name && _jsx("div", { id: headingId, className: styles.groupLabel, role: "presentation", children: group.name }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: group.items.map(item => {
                                 const position = flat.indexOf(item);
                                 const active = position === activeIndex;
-                                return _jsxs(motion.div, { id: optionId(item), role: "option", "aria-selected": active, "data-active": active || undefined, className: styles.option, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, onPointerMove: () => { if (!active) {
+                                return _jsxs(motion.div, { id: optionId(item), role: "option", "aria-selected": active, "data-active": active || undefined, className: styles.option, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, onPointerMove: () => { if (!active) {
                                         keyboard.current = false;
                                         onHover(position);
                                     } }, onMouseDown: event => event.preventDefault(), onClick: () => onChoose(item), children: [active && _jsx(motion.span, { className: styles.highlight, style: { y: travel, opacity: fade }, "aria-hidden": "true" }), item.icon && _jsx("span", { className: styles.optionIcon, "aria-hidden": "true", children: item.icon }), _jsxs("span", { className: styles.optionText, children: [_jsx("span", { className: styles.optionTitle, children: _jsx(Match, { text: item.title, query: query }) }), item.meta && _jsx("span", { className: styles.optionMeta, children: item.meta })] })] }, item.id);
@@ -235,7 +235,7 @@ export function ExpandingSearch({ label, items, suggestions = [], suggestionsLab
                             setFocused(false);
                             if (open.current && !inputRef.current?.value.trim())
                                 collapse(false);
-                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: expanded && query && _jsx(motion.button, { type: "button", tabIndex: -1, className: styles.clear, "aria-label": "Clear search", onMouseDown: event => event.preventDefault(), onClick: () => { setQuery(""); setActive(-1); inputRef.current?.focus({ preventScroll: true }); }, initial: clearHidden, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...clearHidden, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: .15 } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } }, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsx(AnimatePresence, { children: panelOpen && _jsx(Panel, { width: width, reduced: reduced, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.div, { className: styles.view, initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1, ease: standard } }, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter }, children: mode === "empty"
+                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: expanded && query && _jsx(motion.button, { type: "button", tabIndex: -1, className: styles.clear, "aria-label": "Clear search", onMouseDown: event => event.preventDefault(), onClick: () => { setQuery(""); setActive(-1); inputRef.current?.focus({ preventScroll: true }); }, initial: clearHidden, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...clearHidden, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: motionTokens.duration.fast } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } }, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsx(AnimatePresence, { children: panelOpen && _jsx(Panel, { width: width, reduced: reduced, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.div, { className: styles.view, initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter }, children: mode === "empty"
                                 ? _jsxs("div", { className: styles.empty, children: [_jsxs("p", { className: styles.emptyTitle, children: ["No results for \u201C", trimmed, "\u201D"] }), _jsx("p", { className: styles.emptyHint, children: emptyHint })] })
                                 : _jsx(Listbox, { id: listboxId, label: mode === "suggestions" ? suggestionsLabel : `Results for ${trimmed}`, groups: groups, query: mode === "results" ? trimmed : "", activeIndex: activeIndex, optionId: optionId, reduced: reduced, keyboard: keyboard, onHover: setActive, onChoose: choose }) }, mode) }) }, "panel") }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
 }

package/components/file-dropzone/file-dropzone.js

@@ -12,7 +12,7 @@ const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.
 const instant = { duration: 0 };
 const fade = { duration: motionTokens.duration.instant };
 /** Exits are shorter than entries: the same critically damped spring, settled sooner. */
-const collapse = { ...motionTokens.spring.smooth, visualDuration: .3 };
+const collapse = { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
 const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
 const shown = { opacity: 1, y: "0em", filter: "blur(0px)" };
@@ -21,7 +21,7 @@ const clamp = (value) => Math.min(Math.max(value, 0), 100);
 const SHAKE = { x: [0, -7, 6, -4, 3, -1.5, 0] };
 const shakeTransition = { duration: .42, ease: "easeOut" };
 /** New rows drop out of the target into the list, with a touch of life as they land. */
-const land = { type: "spring", visualDuration: .42, bounce: .14 };
+const land = { type: "spring", visualDuration: motionTokens.spring.slow.visualDuration, bounce: .14 };
 export function formatFileSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -76,7 +76,7 @@ function ErrorRow({ text }) {
 }
 /** The circle closes, then the tick draws through it. */
 function DrawnCheck({ reduce }) {
-    return _jsxs("svg", { className: styles.stateIcon, width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx(motion.path, { d: "M12 2.5a9.5 9.5 0 1 1 0 19a9.5 9.5 0 1 1 0-19", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: motionTokens.duration.considered * .7, ease: [...motionTokens.ease.enter] } }), _jsx(motion.path, { d: "m8.2 12.4 2.6 2.6 5-5.2", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { ...enter, delay: .16 } })] });
+    return _jsxs("svg", { className: styles.stateIcon, width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx(motion.path, { d: "M12 2.5a9.5 9.5 0 1 1 0 19a9.5 9.5 0 1 1 0-19", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: motionTokens.duration.expressive * .7, ease: [...motionTokens.ease.enter] } }), _jsx(motion.path, { d: "m8.2 12.4 2.6 2.6 5-5.2", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { ...enter, delay: .16 } })] });
 }
 function Thumb({ item }) {
     const [broken, setBroken] = useState(false);

package/components/filter-toolbar/filter-toolbar.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from
 import { Check, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
 import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./filter-toolbar.module.css";
 const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
 const leave = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
@@ -128,6 +129,10 @@ function MenuList({ rows, labelledBy, onChoose, onBack, onLeave, radio }) {
     const typed = useRef({ text: "", at: 0 });
     const [current, setCurrent] = useState(() => Math.max(0, rows.findIndex(row => row.checked)));
     const [highlight, setHighlight] = useState(null);
+    // Fluid hover: the mouse focuses the nearest row, gaps and padding included, so the highlight (which follows focus) lights
+    // it and the keyboard carries on from there. A click in a gap picks that row.
+    const nearest = useNearestItem({ items: "[data-row]", onPick: item => { pointer.current = true; if (document.activeElement !== item)
+            item.focus({ preventScroll: true }); } });
     const items = () => Array.from(list.current?.querySelectorAll("[data-row]") ?? []);
     const move = (item) => {
         const node = list.current;
@@ -183,9 +188,8 @@ function MenuList({ rows, labelledBy, onChoose, onBack, onLeave, radio }) {
         if (!list.current?.contains(event.relatedTarget))
             setHighlight(previous => previous && { ...previous, glide: false, ring: false, shown: false });
     }
-    return _jsxs("div", { ref: list, className: styles.list, role: "menu", "aria-labelledby": labelledBy, "data-current": present ? "" : undefined, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerLeave: () => { if (pointer.current && list.current?.contains(document.activeElement))
-            onLeave(); }, children: [_jsx(motion.span, { className: styles.highlight, "data-ring": highlight?.ring || undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: highlight.shown ? 1 : 0 } : { opacity: 0 }, transition: { default: highlight?.glide ? motionTokens.spring.snappy : still, opacity: { duration: reduced ? 0 : .08 } } }), rows.map((row, index) => _jsxs("button", { type: "button", className: styles.item, role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? !!row.checked : undefined, tabIndex: index === current ? 0 : -1, "data-row": row.key, "data-text": row.label, onPointerMove: event => { pointer.current = true; if (document.activeElement !== event.currentTarget)
-                    event.currentTarget.focus({ preventScroll: true }); }, onClick: (event) => onChoose(row, event.detail === 0), children: [row.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: styles.itemLabel, children: row.label }), row.meta ? _jsx("span", { className: styles.itemMeta, children: row.meta }) : null] }, row.key))] });
+    return _jsxs("div", { ref: list, className: styles.list, role: "menu", "aria-labelledby": labelledBy, "data-current": present ? "" : undefined, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, ...nearest, onPointerLeave: () => { if (pointer.current && list.current?.contains(document.activeElement))
+            onLeave(); }, children: [_jsx(motion.span, { className: styles.highlight, "data-ring": highlight?.ring || undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: highlight.shown ? 1 : 0 } : { opacity: 0 }, transition: { default: highlight?.glide ? motionTokens.spring.snappy : still, opacity: { duration: reduced ? 0 : .08 } } }), rows.map((row, index) => _jsxs("button", { type: "button", className: styles.item, role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? !!row.checked : undefined, tabIndex: index === current ? 0 : -1, "data-row": row.key, "data-text": row.label, onClick: (event) => onChoose(row, event.detail === 0), children: [row.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: styles.itemLabel, children: row.label }), row.meta ? _jsx("span", { className: styles.itemMeta, children: row.meta }) : null] }, row.key))] });
 }
 /** The room the panel may use: the viewport, narrowed on each axis by any ancestor that clips that axis, so a panel
  *  inside a scrolling or clipped container flips and shifts within what is actually visible. */

package/components/floating-button-group/floating-button-group.module.css

@@ -70,5 +70,5 @@
 
 @media (prefers-reduced-motion: reduce) {
   .item, .highlight { transition: color var(--duration-instant) linear, background-color var(--duration-instant) linear, opacity var(--duration-instant) linear; }
-  .sideTip, .sideTip[data-state="closed"] { transform: none; transition: opacity 90ms linear; }
+  .sideTip, .sideTip[data-state="closed"] { transform: none; transition: opacity var(--duration-fast) linear; }
 }

package/components/gauge/gauge.js

@@ -9,7 +9,7 @@ const rise = { hidden: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, f
 // Same keys as `rise` so the settled style is identical whichever branch renders on the server.
 const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
 /** The first fill is slower and never overshoots, like a ring closing when the view opens. */
-const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered * 1.6 };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.expressive * 1.6 };
 /** New copy rises in while the old copy leaves, popped out of flow so the line never holds both. */
 function Swap({ text, direction = 1 }) {
     const reduceMotion = !!useReducedMotion();

package/components/hover-card/hover-card.js

@@ -59,8 +59,8 @@ const Surface = forwardRef(function Surface({ instant, reduced, className, style
         const unsubscribe = progress.on("change", apply);
         apply(progress.get());
         const controls = isPresent
-            ? animate(progress, 1, still ? { duration: .14, ease: enter } : motionTokens.spring.smooth)
-            : animate(progress, 0, { duration: .12, ease: standard });
+            ? animate(progress, 1, still ? { duration: motionTokens.duration.fast, ease: enter } : motionTokens.spring.smooth)
+            : animate(progress, 0, { duration: motionTokens.duration.instant, ease: standard });
         // The fade leads the grow on the way in and runs alongside it on the way out; it starts from the current opacity either way.
         const fade = isPresent
             ? animate(opacity, 1, { duration: reduced ? .15 : still ? .09 : .16, ease: enter })

package/components/line-chart/line-chart.js

@@ -10,7 +10,7 @@ const physical = ({ visualDuration, bounce }, restDelta = .001) => { const root
 const settle = physical(spring.smooth);
 const glide = physical(spring.snappy, .0001);
 const follow = { stiffness: glide.stiffness, damping: glide.damping, restDelta: .01 };
-const draw = { duration: duration.considered * 1.75, ease: [...ease.inOut] };
+const draw = { duration: duration.expressive * 1.75, ease: [...ease.inOut] };
 const fadeFast = { duration: duration.instant, ease: [...ease.standard] };
 /** Room above the top gridline, and the gap between the crosshair and its tooltip. */
 const TOP = 12, GAP = 14;

package/components/mention-input/mention-input.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useId, useImperativeHandle, useLayoutEffect, u
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Hash } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./mention-input.module.css";
 const EMPTY = { text: "", mentions: [] };
 const SYMBOL = { person: "@", channel: "#" };
@@ -111,6 +112,8 @@ export const MentionInput = forwardRef(function MentionInput({ value: valueProp,
     const [focused, setFocused] = useState(false);
     const [dismissed, setDismissed] = useState(null);
     const [active, setActive] = useState(0);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActive(Number(item.dataset.index)) });
     const commit = useCallback((next) => {
         if (valueProp === undefined)
             setInner(next);
@@ -404,8 +407,7 @@ export const MentionInput = forwardRef(function MentionInput({ value: valueProp,
     const optionId = (index) => `${uid}-option-${index}`;
     const popIn = reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: anchor?.above ? 4 : -4 };
     const countLabel = open ? (suggestions.length ? `${suggestions.length} ${trigger?.kind === "person" ? (suggestions.length === 1 ? "person" : "people") : (suggestions.length === 1 ? "channel" : "channels")}` : "No matches") : "";
-    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsxs(motion.div, { ref: fieldRef, className: styles.field, style: { height }, "data-focused": focused || undefined, children: [_jsxs("div", { ref: backdropRef, className: styles.backdrop, "aria-hidden": "true", children: [mirror, "\u200b"] }), _jsx("textarea", { ref: areaRef, id: id, name: name, className: styles.textarea, value: value.text, placeholder: placeholder, disabled: disabled, rows: minRows, spellCheck: true, role: "combobox", "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : undefined, onChange: onInput, onSelect: onSelect, onKeyDown: onKeyDown, onScroll: onScroll, onFocus: () => setFocused(true), onBlur: () => { setFocused(false); setCaret(null); } })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: countLabel }), _jsx(AnimatePresence, { children: open && anchor && _jsx(motion.div, { className: styles.popover, "data-above": anchor.above || undefined, style: { left: anchor.x, top: anchor.y, height: panelHeight, transformOrigin: anchor.above ? "14px 100%" : "14px 0" }, initial: popIn, animate: { opacity: 1, scale: 1, y: 0, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } } }, exit: { ...popIn, transition: { duration: duration.exit * .7, ease: standard } }, onMouseDown: event => event.preventDefault(), children: _jsx("div", { ref: bodyRef, className: styles.popoverBody, children: suggestions.length ? _jsxs("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": trigger?.kind === "person" ? "People" : "Channels", className: styles.list, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.highlight, style: { y: hy, height: hh } }), suggestions.map((suggestion, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, "data-index": index, className: styles.option, onPointerMove: () => { if (index !== activeIndex)
-                                        setActive(index); }, onClick: () => choose(suggestion), children: [suggestion.kind === "person"
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsxs(motion.div, { ref: fieldRef, className: styles.field, style: { height }, "data-focused": focused || undefined, children: [_jsxs("div", { ref: backdropRef, className: styles.backdrop, "aria-hidden": "true", children: [mirror, "\u200b"] }), _jsx("textarea", { ref: areaRef, id: id, name: name, className: styles.textarea, value: value.text, placeholder: placeholder, disabled: disabled, rows: minRows, spellCheck: true, role: "combobox", "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : undefined, onChange: onInput, onSelect: onSelect, onKeyDown: onKeyDown, onScroll: onScroll, onFocus: () => setFocused(true), onBlur: () => { setFocused(false); setCaret(null); } })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: countLabel }), _jsx(AnimatePresence, { children: open && anchor && _jsx(motion.div, { className: styles.popover, "data-above": anchor.above || undefined, style: { left: anchor.x, top: anchor.y, height: panelHeight, transformOrigin: anchor.above ? "14px 100%" : "14px 0" }, initial: popIn, animate: { opacity: 1, scale: 1, y: 0, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } } }, exit: { ...popIn, transition: { duration: duration.exit * .7, ease: standard } }, onMouseDown: event => event.preventDefault(), ...nearest, children: _jsx("div", { ref: bodyRef, className: styles.popoverBody, children: suggestions.length ? _jsxs("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": trigger?.kind === "person" ? "People" : "Channels", className: styles.list, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.highlight, style: { y: hy, height: hh } }), suggestions.map((suggestion, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, "data-index": index, className: styles.option, onClick: () => choose(suggestion), children: [suggestion.kind === "person"
                                             ? _jsx("span", { className: styles.avatar, "aria-hidden": "true", children: suggestion.item.avatar
                                                     // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic
                                                     ? _jsx("img", { src: suggestion.item.avatar, alt: "", width: 28, height: 28, loading: "lazy" })

package/components/money-input/money-input.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayo
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Check, ChevronDown } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./money-input.module.css";
 const enterEase = [...motionTokens.ease.enter];
 const standardEase = [...motionTokens.ease.standard];
@@ -374,6 +375,9 @@ export const MoneyInput = forwardRef(function MoneyInput({ label, hideLabel = fa
     /* ---------------------------------------------- Currency menu ---------------------------------------------- */
     const [menuOpen, setMenuOpen] = useState(false);
     const [activeCode, setActiveCode] = useState(code);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => { if (item.dataset.code)
+            setActiveCode(item.dataset.code); } });
     const menuRef = useRef(null);
     const listRef = useRef(null);
     const menuButtonRef = useRef(null);
@@ -489,11 +493,10 @@ export const MoneyInput = forwardRef(function MoneyInput({ label, hideLabel = fa
                                                 setDraft(settle(draft, info.digits)); onBlur?.(event); } })] }), info.position === "suffix" && _jsx(SymbolSlot, { symbol: info.symbol, reduced: reduced })] }) }), canSwitch ? _jsxs("div", { ref: menuRef, className: styles.menuAnchor, children: [_jsxs("button", { ref: menuButtonRef, type: "button", className: styles.currencyButton, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": menuOpen, "aria-controls": `${uid}-currencies`, "aria-label": `Currency, ${info.name}`, "data-open": menuOpen || undefined, onClick: () => (menuOpen ? closeMenu(true) : openMenu()), onKeyDown: event => { if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                                     event.preventDefault();
                                     openMenu();
-                                } }, children: [_jsx("span", { className: styles.code, children: code }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: menuOpen ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { children: menuOpen && _jsx(motion.div, { className: styles.menu, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: -4, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : { opacity: 0, scale: .97, y: -2, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }, transition: reduced ? { duration: duration.instant } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } }, children: _jsxs("div", { ref: listRef, id: `${uid}-currencies`, className: styles.list, role: "listbox", tabIndex: -1, "aria-label": "Currency", "aria-activedescendant": `${uid}-cur-${activeCode}`, onKeyDown: onMenuKeyDown, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), options.map(option => _jsxs("div", { id: `${uid}-cur-${option.code}`, role: "option", "aria-selected": option.code === code, className: styles.option, "data-active": option.code === activeCode || undefined, ref: node => { if (node)
+                                } }, children: [_jsx("span", { className: styles.code, children: code }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: menuOpen ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { children: menuOpen && _jsx(motion.div, { className: styles.menu, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: -4, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : { opacity: 0, scale: .97, y: -2, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }, transition: reduced ? { duration: duration.instant } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } }, children: _jsxs("div", { ref: listRef, id: `${uid}-currencies`, className: styles.list, role: "listbox", tabIndex: -1, "aria-label": "Currency", "aria-activedescendant": `${uid}-cur-${activeCode}`, onKeyDown: onMenuKeyDown, onPointerDown: event => event.preventDefault(), ...nearest, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), options.map(option => _jsxs("div", { id: `${uid}-cur-${option.code}`, role: "option", "aria-selected": option.code === code, className: styles.option, "data-active": option.code === activeCode || undefined, ref: node => { if (node)
                                                     optionRefs.current.set(option.code, node);
                                                 else
-                                                    optionRefs.current.delete(option.code); }, onPointerMove: event => { if (event.pointerType === "mouse" && option.code !== activeCode)
-                                                    setActiveCode(option.code); }, onPointerDown: event => event.preventDefault(), onClick: () => chooseCurrency(option), children: [_jsx("span", { className: styles.optionSymbol, "aria-hidden": "true", children: option.symbol }), _jsx("span", { className: styles.optionCode, children: option.code }), _jsx("span", { className: styles.optionName, children: option.name }), _jsx("span", { className: styles.check, "data-on": option.code === code || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.code))] }) }, "menu") })] }) : _jsx("span", { className: styles.codeStatic, children: code })] }), (chips.length > 0 || range) && _jsxs("div", { className: styles.toolbar, children: [chips.length > 0 && _jsx("div", { className: styles.chips, role: "group", "aria-label": "Quick add", children: chips.map(amount => {
+                                                    optionRefs.current.delete(option.code); }, "data-code": option.code, onPointerDown: event => event.preventDefault(), onClick: () => chooseCurrency(option), children: [_jsx("span", { className: styles.optionSymbol, "aria-hidden": "true", children: option.symbol }), _jsx("span", { className: styles.optionCode, children: option.code }), _jsx("span", { className: styles.optionName, children: option.name }), _jsx("span", { className: styles.check, "data-on": option.code === code || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.code))] }) }, "menu") })] }) : _jsx("span", { className: styles.codeStatic, children: code })] }), (chips.length > 0 || range) && _jsxs("div", { className: styles.toolbar, children: [chips.length > 0 && _jsx("div", { className: styles.chips, role: "group", "aria-label": "Quick add", children: chips.map(amount => {
                             const add = amount * pow10(info.digits);
                             const atMax = max !== undefined && (minor ?? 0) >= max;
                             return _jsxs("button", { type: "button", className: styles.chip, disabled: disabled, "aria-disabled": atMax || undefined, "aria-controls": inputId, "aria-label": `Add ${info.whole.format(amount)}`, onClick: () => nudge(add, "chip"), children: ["+", info.whole.format(amount)] }, amount);

package/components/money-input/money-input.module.css

@@ -60,7 +60,7 @@
 .chips { display: flex; flex-wrap: wrap; gap: var(--space-related); }
 .chip { height: 30px; padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .chip:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
-.chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; }
+.chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast); }
 .chip[aria-disabled="true"] { opacity: .45; }
 .chip:disabled { opacity: .45; cursor: not-allowed; }
 .range { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; transition: color var(--duration-standard) var(--ease-standard); }

package/components/morph-select/morph-select.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useSta
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Check, ChevronDown, Search, X } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./morph-select.module.css";
 const { blur } = motionTokens;
 const enter = [...motionTokens.ease.enter];
@@ -49,9 +50,9 @@ function matches(option, needle) {
 const valueVariants = {
     enter: (change) => change.fly ? { opacity: 1, x: change.fly.x, y: change.fly.y, filter: "blur(0px)" } : { opacity: 0, x: 0, y: `${change.dir * .5}em`, filter: `blur(${blur.soft}px)` },
     rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" },
-    exit: (change) => ({ opacity: 0, x: 0, y: change.fly ? "-0.3em" : `${change.dir * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .12, ease: standard } }),
+    exit: (change) => ({ opacity: 0, x: 0, y: change.fly ? "-0.3em" : `${change.dir * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } }),
 };
-const valueFade = { enter: { opacity: 0 }, rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1 } } };
+const valueFade = { enter: { opacity: 0 }, rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 /** The closed trigger's width, rounded up. offsetWidth rounds to the nearest pixel, and half a pixel short is enough to ellipsize the label. */
 const triggerWidth = (node) => {
     const exact = node.getBoundingClientRect().width, rounded = node.offsetWidth;
@@ -80,6 +81,8 @@ export function MorphSelect({ label, hideLabel = false, items, value, defaultVal
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
     const [active, setActive] = useState(null);
+    // Fluid hover: the mouse makes the nearest option active, group labels and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActive(item.dataset.value ?? null) });
     const [change, setChange] = useState({ key: 0, value: null, dir: 1, fly: null });
     const needle = query.trim().toLowerCase();
     const visibleSections = useMemo(() => needle
@@ -377,15 +380,14 @@ export function MorphSelect({ label, hideLabel = false, items, value, defaultVal
                                             close(true);
                                         else
                                             openList(); }, onKeyDown: event => onKey(event, false), onKeyUp: event => { if (event.key === " ")
-                                            window.setTimeout(() => { suppressClick.current = false; }); }, children: _jsx("span", { ref: slotRef, className: styles.slot, "data-hidden": showSearch || undefined, children: _jsx(AnimatePresence, { initial: false, custom: changeForLayer, children: _jsx(motion.span, { className: styles.layer, custom: changeForLayer, variants: reduced ? valueFade : valueVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: .12 } : changeForLayer.fly ? { x: FLY, y: FLY, opacity: { duration: 0 } } : { y: GLIDE, opacity: { duration: .2, ease: enter }, filter: { duration: .22, ease: enter } }, children: renderValue(selectedOption) }, layerKey) }) }) }), canSearch && _jsxs(motion.div, { className: styles.searchRow, inert: !showSearch || undefined, initial: false, animate: showSearch ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: showSearch ? { duration: .18, ease: enter, delay: reduced ? 0 : .04 } : { duration: .1, ease: standard }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": `Search ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: event => onKey(event, true) }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); inputRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": `Close ${label.toLowerCase()}`, onClick: () => close(true) })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: .2, ease: enter, delay: reduced ? 0 : .04 }, filter: { duration: .22, ease: enter, delay: .04 } } : { duration: .1, ease: standard }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-labelledby": labelId, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), visibleSections.map(section => {
+                                            window.setTimeout(() => { suppressClick.current = false; }); }, children: _jsx("span", { ref: slotRef, className: styles.slot, "data-hidden": showSearch || undefined, children: _jsx(AnimatePresence, { initial: false, custom: changeForLayer, children: _jsx(motion.span, { className: styles.layer, custom: changeForLayer, variants: reduced ? valueFade : valueVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: motionTokens.duration.instant } : changeForLayer.fly ? { x: FLY, y: FLY, opacity: { duration: 0 } } : { y: GLIDE, opacity: { duration: motionTokens.duration.exit, ease: enter }, filter: { duration: motionTokens.duration.exit, ease: enter } }, children: renderValue(selectedOption) }, layerKey) }) }) }), canSearch && _jsxs(motion.div, { className: styles.searchRow, inert: !showSearch || undefined, initial: false, animate: showSearch ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: showSearch ? { duration: motionTokens.duration.exit, ease: enter, delay: reduced ? 0 : motionTokens.stagger.word } : { duration: motionTokens.duration.instant, ease: standard }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": `Search ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: event => onKey(event, true) }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); inputRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: motionTokens.duration.instant } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": `Close ${label.toLowerCase()}`, onClick: () => close(true) })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: motionTokens.duration.exit, ease: enter, delay: reduced ? 0 : motionTokens.stagger.word }, filter: { duration: motionTokens.duration.exit, ease: enter, delay: motionTokens.stagger.word } } : { duration: motionTokens.duration.instant, ease: standard }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-labelledby": labelId, onPointerDown: event => event.preventDefault(), ...nearest, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), visibleSections.map(section => {
                                                 const rows = section.options.map(option => {
                                                     const index = indexOf.get(option.value) ?? 0;
                                                     const isSelected = option.value === selected, isActive = option.value === current;
                                                     return _jsxs("div", { id: optionId(index), role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": isActive || undefined, ref: node => { if (node)
                                                             optionRefs.current.set(option.value, node);
                                                         else
-                                                            optionRefs.current.delete(option.value); }, onPointerMove: event => { if (event.pointerType === "mouse" && !option.disabled && option.value !== current)
-                                                            setActive(option.value); }, onPointerDown: event => event.preventDefault(), onClick: event => commit(option, event.currentTarget), children: [_jsxs("span", { className: styles.optionValue, "data-part": "value", children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta }), _jsx("span", { className: styles.check, "data-on": isSelected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.value);
+                                                            optionRefs.current.delete(option.value); }, "data-value": option.value, onPointerDown: event => event.preventDefault(), onClick: event => commit(option, event.currentTarget), children: [_jsxs("span", { className: styles.optionValue, "data-part": "value", children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta }), _jsx("span", { className: styles.check, "data-on": isSelected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.value);
                                                 });
                                                 return section.label
                                                     ? _jsxs("div", { role: "group", "aria-labelledby": `${uid}-${section.key}`, className: styles.group, children: [_jsx("div", { id: `${uid}-${section.key}`, className: styles.groupLabel, role: "presentation", children: section.label }), rows] }, section.key)

package/components/multi-select/multi-select.js

@@ -4,6 +4,7 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { ChevronDown, X } from "lucide-react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./multi-select.module.css";
 const enter = motionTokens.ease.enter;
 const standard = motionTokens.ease.standard;
@@ -41,6 +42,8 @@ export function MultiSelect({ label, options, value, defaultValue = [], onValueC
     const [internal, setInternal] = useState(defaultValue);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there toggles it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActiveIndex(Number(item.dataset.index)) });
     const selected = value ?? internal;
     const selectedSet = useMemo(() => new Set(selected), [selected]);
     const labelFor = (item) => options.find((option) => option.value === item)?.label ?? item;
@@ -100,6 +103,5 @@ export function MultiSelect({ label, options, value, defaultValue = [], onValueC
         }
     };
     const reduce = useReducedMotion();
-    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.control, children: [_jsxs("button", { type: "button", className: `${styles.trigger} ${selected.length ? styles.hasClear : ""}`, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => setOpen((current) => !current), onKeyDown: onKeyDown, children: [_jsx("span", { id: valueId, className: styles.srOnly, children: selected.length ? selected.map(labelFor).join(", ") : placeholder }), _jsx("span", { className: styles.value, "aria-hidden": "true", children: _jsxs(AnimatePresence, { initial: false, children: [visible.map((item) => _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsx(motion.span, { className: styles.chip, variants: reduce ? chipStill : chip, children: item.label }) }, `chip-${item.value}`)), remaining > 0 && _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsxs(motion.span, { className: styles.more, variants: reduce ? chipStill : chip, children: ["+", _jsx("span", { className: styles.count, children: _jsx(AnimatePresence, { initial: false, custom: countDirection, children: _jsx(motion.span, { custom: countDirection, variants: reduce ? fade : roll, initial: "hidden", animate: "shown", exit: "gone", children: remaining }, remaining) }) })] }) }, "more"), !selected.length && _jsx(motion.span, { className: styles.placeholder, variants: fade, initial: "hidden", animate: "shown", exit: "gone", children: placeholder }, "placeholder")] }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: selected.length > 0 && !disabled && _jsx(motion.button, { type: "button", "aria-label": "Clear selections", className: styles.clear, onClick: clear, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduce ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: standard } }, whileTap: { scale: reduce ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: standard } }, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }) }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": label, "aria-multiselectable": "true", initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { type: "button", role: "option", "aria-selected": selectedSet.has(option.value), "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": activeIndex === index, disabled: option.disabled, onPointerMove: () => { if (activeIndex !== index)
-                                    setActiveIndex(index); }, onClick: () => toggle(option), children: [_jsx("span", { children: option.label }), _jsx(AnimatePresence, { initial: false, children: selectedSet.has(option.value) && _jsx(CheckMark, { reduce: reduce }, "check") })] }, option.value)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.control, children: [_jsxs("button", { type: "button", className: `${styles.trigger} ${selected.length ? styles.hasClear : ""}`, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => setOpen((current) => !current), onKeyDown: onKeyDown, children: [_jsx("span", { id: valueId, className: styles.srOnly, children: selected.length ? selected.map(labelFor).join(", ") : placeholder }), _jsx("span", { className: styles.value, "aria-hidden": "true", children: _jsxs(AnimatePresence, { initial: false, children: [visible.map((item) => _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsx(motion.span, { className: styles.chip, variants: reduce ? chipStill : chip, children: item.label }) }, `chip-${item.value}`)), remaining > 0 && _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsxs(motion.span, { className: styles.more, variants: reduce ? chipStill : chip, children: ["+", _jsx("span", { className: styles.count, children: _jsx(AnimatePresence, { initial: false, custom: countDirection, children: _jsx(motion.span, { custom: countDirection, variants: reduce ? fade : roll, initial: "hidden", animate: "shown", exit: "gone", children: remaining }, remaining) }) })] }) }, "more"), !selected.length && _jsx(motion.span, { className: styles.placeholder, variants: fade, initial: "hidden", animate: "shown", exit: "gone", children: placeholder }, "placeholder")] }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: selected.length > 0 && !disabled && _jsx(motion.button, { type: "button", "aria-label": "Clear selections", className: styles.clear, onClick: clear, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduce ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: standard } }, whileTap: { scale: reduce ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: standard } }, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }) }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": label, "aria-multiselectable": "true", ...nearest, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { type: "button", role: "option", "aria-selected": selectedSet.has(option.value), "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": activeIndex === index, disabled: option.disabled, "data-index": index, onClick: () => toggle(option), children: [_jsx("span", { children: option.label }), _jsx(AnimatePresence, { initial: false, children: selectedSet.has(option.value) && _jsx(CheckMark, { reduce: reduce }, "check") })] }, option.value)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
 }

package/components/nav-list/nav-list.d.ts

@@ -19,8 +19,8 @@ export interface NavListProps {
     onNavigate?: (choice: NavChoice) => void;
 }
 /**
- * A sidebar's list of destinations: a `<nav>` with a list of NavItem rows, optionally grouped by NavSection. One hover highlight
- * glides between rows for the pointer, and the current page's marker glides when the page changes.
+ * A sidebar's list of destinations: a `<nav>` with a list of NavItem rows, optionally grouped by NavSection. The row nearest
+ * the pointer is lit (fluid hover), and the current page's marker glides when the page changes.
  */
 export declare function NavList({ label, children, className, ref, onNavigate }: NavListProps): import("react").JSX.Element;
 export interface NavSectionProps {