@teamofsilicons/silicon-ui 0.3.0 → 0.4.0

package/components/nav-list/nav-list.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import { MenuHighlight } from "../../lib/menu-highlight.js";
 import { SiliconLink } from "../../lib/silicon-provider.js";
 import { Badge } from "../badge/badge.js";
@@ -10,14 +11,14 @@ const boxOf = (item) => ({ top: item.offsetTop, height: item.offsetHeight, dange
 /** Lets NavItem reach its list without prop drilling: the active marker's position, and reporting a choice. */
 const NavContext = createContext(null);
 /**
- * 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 function NavList({ label, children, className, ref, onNavigate }) {
     const root = useRef(null);
-    const [hover, setHover] = useState(null);
     const [active, setActive] = useState(null);
-    const pointer = useRef(false);
+    // The row nearest the pointer is lit, gaps included, and a click in a gap follows the row (lib/fluid-hover).
+    const hover = useFluidHover(root, { items: ITEM });
     // The latest handler, read at choice time, so a new function each render never changes the context.
     const navigateHandler = useRef(onNavigate);
     useEffect(() => { navigateHandler.current = onNavigate; });
@@ -56,16 +57,8 @@ export function NavList({ label, children, className, ref, onNavigate }) {
         observer.observe(node);
         return () => observer.disconnect();
     }, [measureActive]);
-    function show(target, glide) {
-        const item = target instanceof HTMLElement ? target.closest(ITEM) : null;
-        if (!item || item.getAttribute("aria-disabled") === "true")
-            return setHover(null);
-        setHover(current => ({ ...boxOf(item), glide: glide && current !== null }));
-    }
     const context = useMemo(() => ({ activeChanged: measureActive, navigate: (choice) => navigateHandler.current?.(choice) }), [measureActive]);
-    return (_jsx(NavContext.Provider, { value: context, children: _jsxs("nav", { ref: setRoot, "aria-label": label, className: [styles.list, className].filter(Boolean).join(" "), onPointerOver: (event) => { pointer.current = true; show(event.target, true); }, onPointerLeave: () => setHover(null), onKeyDownCapture: () => { pointer.current = false; }, onFocus: (event) => { if (!pointer.current && event.target.matches(":focus-visible"))
-                show(event.target, false); }, onBlur: (event) => { if (!pointer.current && !event.currentTarget.contains(event.relatedTarget))
-                setHover(null); }, children: [_jsx(MenuHighlight, { state: hover, className: styles.highlight }), _jsx(MenuHighlight, { state: active, className: styles.active }), _jsx("ul", { className: styles.items, children: children })] }) }));
+    return (_jsx(NavContext.Provider, { value: context, children: _jsxs("nav", { ref: setRoot, "aria-label": label, className: [styles.list, className].filter(Boolean).join(" "), ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.highlight }), _jsx(MenuHighlight, { state: active, className: styles.active }), _jsx("ul", { className: styles.items, children: children })] }) }));
 }
 /** A labelled group of NavItem rows inside a NavList. */
 export function NavSection({ label, children }) {

package/components/number-field/number-field.js

@@ -42,7 +42,7 @@ function partsOf(value, format) {
    Scale and opacity ride the same spring as width, so a digit grows with its slot instead of landing on its neighbours. */
 const slot = {
     enter: (direction) => ({ width: 0, scale: .6, opacity: 0, y: `${direction * .3}em`, filter: `blur(${blur.soft}px)` }),
-    center: { width: "auto", scale: 1, opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" }, transition: { width: spring.morph, scale: spring.morph, opacity: spring.morph, y: spring.snappy, filter: { duration: .3, ease: exitEase } } },
+    center: { width: "auto", scale: 1, opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" }, transition: { width: spring.morph, scale: spring.morph, opacity: spring.morph, y: spring.snappy, filter: { duration: motionTokens.duration.standard, ease: exitEase } } },
     exit: (direction) => ({ width: 0, scale: .6, opacity: 0, y: `${direction * -.3}em`, filter: `blur(${blur.subtle}px)`, transition: { width: spring.smooth, scale: spring.smooth, y: { duration: duration.fast, ease: exitEase }, opacity: { duration: duration.instant }, filter: { duration: duration.instant } } }),
 };
 /* Reduced motion keeps a short fade and no travel. While typing, columns follow the draft at once so they never lag the caret.
@@ -99,8 +99,8 @@ const directionsBetween = (from, to) => { const before = from.split(" "); return
 const wordRise = {
     enter: (direction) => ({ opacity: 0, y: `${direction * .3}em`, filter: `blur(${blur.soft}px)` }),
     // Opacity follows the slot's width spring, so a longer word never shows before its room has opened.
-    center: { opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" }, transition: { duration: .22, ease: enterEase, opacity: spring.morph } },
-    exit: (direction) => ({ opacity: 0, y: `${direction * -.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .14, ease: exitEase } }),
+    center: { opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" }, transition: { duration: motionTokens.duration.exit, ease: enterEase, opacity: spring.morph } },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: exitEase } }),
 };
 const wordFade = { enter: { opacity: 0, y: 0, filter: "none" }, center: { opacity: 1, y: 0, filter: "none", transition: { duration: duration.instant } }, exit: { opacity: 0, transition: { duration: 0 } } };
 /** A word's width follows its new copy on a spring, so a price gaining a digit eases the rest of the line along instead of shoving it. */

package/components/number-field/number-field.module.css

@@ -26,7 +26,7 @@
 @media (hover: hover) and (pointer: fine) { .step:hover:not(:disabled, [aria-disabled="true"]) { background: var(--surface-muted); color: var(--foreground); } }
 /* Quick press, spring release: the fill deepens and the glyph sinks. A held button stays pressed for as long as it repeats. */
 .step:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"]) { background: color-mix(in oklab, var(--foreground) 10%, var(--surface)); color: var(--foreground); transition: background-color 60ms linear, color 60ms linear; }
-.step:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"]) svg { transform: scale(.82); transition: transform 90ms var(--ease-standard); }
+.step:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"]) svg { transform: scale(.82); transition: transform var(--duration-fast) var(--ease-standard); }
 .step:focus-visible { outline: none; background: var(--surface-muted); color: var(--foreground); }
 /* At a limit the button dims and refuses, but stays in the tab order; pressing it strains the value toward the limit and it shakes once. */
 .step[aria-disabled="true"] { opacity: .32; cursor: not-allowed; }

package/components/pagination/pagination.module.css

@@ -7,7 +7,7 @@
 .nav:not([data-mark-ready]) button[aria-current="page"] { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-resting); }
 /* Only the arrows press in. Page numbers move with Motion, so they keep CSS off transform and opacity. */
 .nav .step { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
-.nav .step:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard), var(--ease-standard), var(--ease-standard), ease-out; }
+.nav .step:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard), var(--ease-standard), var(--ease-standard), var(--ease-standard); }
 .nav button:disabled { opacity: .4; cursor: not-allowed; }
 @media (hover: hover) and (pointer: fine) {
   .nav button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }

package/components/password-field/password-field.module.css

@@ -15,7 +15,7 @@
 @keyframes resolve-hidden { from { opacity: .35; filter: blur(2px); } }
 .shell button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .shell button:hover { background: var(--surface-muted); color: var(--foreground); } }
-.shell button:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); }
+.shell button:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
 .shell button[aria-pressed="true"] { color: var(--foreground); }
 /* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
 .messageSlot { display: block; overflow: hidden; }

package/components/password-strength/password-strength.module.css

@@ -20,7 +20,7 @@
 @keyframes resolve-hidden { from { opacity: .35; filter: blur(2px); } }
 .reveal { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: calc(var(--radius-control) - var(--space-tight)); corner-shape: var(--corner-shape); background: transparent; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .reveal:hover { background: var(--surface-muted); color: var(--foreground); } }
-.reveal:active { transform: scale(.94); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); }
+.reveal:active { transform: scale(.94); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
 .reveal[aria-pressed="true"] { color: var(--foreground); }
 /* The row's space is padding inside the clipped slot, so its height opens from a true zero. */
 .errorSlot { display: block; overflow: hidden; }

package/components/phone-input/phone-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, Search, X } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./phone-input.module.css";
 const country = (iso, name, dial, patterns, example, trunk = "0", areaCodes) => ({ iso, name, dial, patterns: Array.isArray(patterns) ? patterns : [patterns], example, trunk, areaCodes });
 const CA_AREA_CODES = "204 226 236 249 250 263 289 306 343 354 365 367 368 382 387 403 416 418 428 431 437 438 450 468 474 506 514 519 548 579 581 584 587 604 613 639 647 672 683 705 709 742 753 778 780 782 807 819 825 867 873 879 902 905".split(" ");
@@ -150,9 +151,9 @@ function useReducedFlag() {
 const layerVariants = {
     enter: (dir) => ({ opacity: 0, y: `${dir * .6}em`, filter: `blur(${blur.soft}px)` }),
     rest: { opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" } },
-    exit: (dir) => ({ opacity: 0, y: `${dir * -.5}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .12, ease: standardEase } }),
+    exit: (dir) => ({ opacity: 0, y: `${dir * -.5}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standardEase } }),
 };
-const layerFade = { enter: { opacity: 0 }, rest: { opacity: 1, y: 0, filter: "none" }, exit: { opacity: 0, transition: { duration: .08 } } };
+const layerFade = { enter: { opacity: 0 }, rest: { opacity: 1, y: 0, filter: "none" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 function matchesQuery(entry, needle) {
     if (!needle)
         return true;
@@ -191,7 +192,7 @@ function caretAfterDigits(text, count) {
 }
 function MessageRow({ id, text, tone }) {
     const reduced = useReducedFlag();
-    return _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { id: id, className: tone === "error" ? styles.error : styles.hint, role: tone === "error" ? "alert" : undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1 } }, transition: { duration: reduced ? .12 : motionTokens.duration.standard, ease: enterEase }, children: text }, text) }) });
+    return _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { id: id, className: tone === "error" ? styles.error : styles.hint, role: tone === "error" ? "alert" : undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { duration: reduced ? .12 : motionTokens.duration.standard, ease: enterEase }, children: text }, text) }) });
 }
 /**
  * A phone number field with a country picker. The country button grows into a searchable list, the number formats as it is
@@ -339,6 +340,8 @@ export const PhoneInput = forwardRef(function PhoneInput({ label, hideLabel = fa
     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.key ?? null) });
     const [roll, setRoll] = useState(1);
     const needle = query.trim().toLowerCase();
     const sections = useMemo(() => {
@@ -594,19 +597,18 @@ export const PhoneInput = forwardRef(function PhoneInput({ label, hideLabel = fa
     const describedBy = [description ? hintId : null, message ? errorId : null].filter(Boolean).join(" ") || undefined;
     const rootStyle = { "--pi-closed-r": `${CLOSED_RADIUS}px` };
     const face = (entry) => _jsxs(_Fragment, { children: [_jsx("span", { className: styles.flag, "aria-hidden": "true", children: flagOf(entry.iso) }), _jsxs("span", { className: styles.dial, children: ["+", entry.dial] })] });
-    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), style: rootStyle, "data-open": open || undefined, "data-disabled": disabled || undefined, onBlur: onRootBlur, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? styles.srOnly : styles.label, children: label }), _jsxs("div", { ref: controlRef, className: styles.control, "data-invalid": invalid || undefined, children: [_jsxs(motion.div, { className: styles.anchor, style: { width: anchorW }, children: [_jsx("span", { ref: measureRef, className: `${styles.trigger} ${styles.measure}`, "aria-hidden": "true", children: face(current) }), _jsxs(motion.div, { className: styles.shape, style: { width: shapeW, height: shapeH, borderRadius: radius }, children: [_jsxs("div", { className: styles.lid, children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.trigger, disabled: disabled, inert: open || undefined, tabIndex: open ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-label": `Country, ${current.name} +${current.dial}`, onClick: () => (open ? close("trigger") : openList()), onKeyDown: onTriggerKeyDown, children: _jsx("span", { className: styles.slot, "data-hidden": open || undefined, children: _jsx(AnimatePresence, { initial: false, custom: roll, children: _jsx(motion.span, { className: styles.layer, custom: roll, variants: reduced ? layerFade : layerVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: .12 } : { y: GLIDE, opacity: { duration: .2, ease: enterEase }, filter: { duration: .22, ease: enterEase } }, children: face(current) }, current.iso) }) }) }), _jsxs(motion.div, { className: styles.searchRow, inert: !open || undefined, initial: false, animate: open ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { duration: .18, ease: enterEase, delay: reduced ? 0 : .05 } : { duration: .1, ease: standardEase }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: searchRef, className: styles.search, type: "text", role: "combobox", "aria-label": "Search countries or calling codes", "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && activeKey ? optionId(activeKey) : undefined, placeholder: "Country or code", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: onSearchKeyDown }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); searchRef.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 country list", onClick: () => close("trigger") })] }), _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: enterEase, delay: reduced ? 0 : .04 }, filter: { duration: .22, ease: enterEase, delay: .04 } } : { duration: .1, ease: standardEase }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-label": "Countries", children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), sections.map(section => {
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), style: rootStyle, "data-open": open || undefined, "data-disabled": disabled || undefined, onBlur: onRootBlur, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? styles.srOnly : styles.label, children: label }), _jsxs("div", { ref: controlRef, className: styles.control, "data-invalid": invalid || undefined, children: [_jsxs(motion.div, { className: styles.anchor, style: { width: anchorW }, children: [_jsx("span", { ref: measureRef, className: `${styles.trigger} ${styles.measure}`, "aria-hidden": "true", children: face(current) }), _jsxs(motion.div, { className: styles.shape, style: { width: shapeW, height: shapeH, borderRadius: radius }, children: [_jsxs("div", { className: styles.lid, children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.trigger, disabled: disabled, inert: open || undefined, tabIndex: open ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-label": `Country, ${current.name} +${current.dial}`, onClick: () => (open ? close("trigger") : openList()), onKeyDown: onTriggerKeyDown, children: _jsx("span", { className: styles.slot, "data-hidden": open || undefined, children: _jsx(AnimatePresence, { initial: false, custom: roll, children: _jsx(motion.span, { className: styles.layer, custom: roll, variants: reduced ? layerFade : layerVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: motionTokens.duration.instant } : { y: GLIDE, opacity: { duration: motionTokens.duration.exit, ease: enterEase }, filter: { duration: motionTokens.duration.exit, ease: enterEase } }, children: face(current) }, current.iso) }) }) }), _jsxs(motion.div, { className: styles.searchRow, inert: !open || undefined, initial: false, animate: open ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { duration: motionTokens.duration.exit, ease: enterEase, delay: reduced ? 0 : motionTokens.duration.instant } : { duration: motionTokens.duration.instant, ease: standardEase }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: searchRef, className: styles.search, type: "text", role: "combobox", "aria-label": "Search countries or calling codes", "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && activeKey ? optionId(activeKey) : undefined, placeholder: "Country or code", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: onSearchKeyDown }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); searchRef.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 country list", onClick: () => close("trigger") })] }), _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: enterEase, delay: reduced ? 0 : motionTokens.stagger.word }, filter: { duration: motionTokens.duration.exit, ease: enterEase, delay: motionTokens.stagger.word } } : { duration: motionTokens.duration.instant, ease: standardEase }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-label": "Countries", onPointerDown: event => event.preventDefault(), ...nearest, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), sections.map(section => {
                                                         const body = section.rows.map(row => {
                                                             const selected = row.entry.iso === current.iso;
                                                             return _jsxs("div", { id: optionId(row.key), role: "option", "aria-selected": selected, className: styles.option, "data-active": row.key === activeKey || undefined, ref: node => { if (node)
                                                                     rowRefs.current.set(row.key, node);
                                                                 else
-                                                                    rowRefs.current.delete(row.key); }, onPointerMove: event => { if (event.pointerType === "mouse" && row.key !== activeKey)
-                                                                    setActive(row.key); }, onPointerDown: event => event.preventDefault(), onClick: () => pick(row.entry), children: [_jsx("span", { className: styles.flag, "aria-hidden": "true", children: flagOf(row.entry.iso) }), _jsx("span", { className: styles.name, children: row.entry.name }), _jsxs("span", { className: styles.meta, children: ["+", row.entry.dial] }), _jsx("span", { className: styles.check, "data-on": selected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, row.key);
+                                                                    rowRefs.current.delete(row.key); }, "data-key": row.key, onPointerDown: event => event.preventDefault(), onClick: () => pick(row.entry), children: [_jsx("span", { className: styles.flag, "aria-hidden": "true", children: flagOf(row.entry.iso) }), _jsx("span", { className: styles.name, children: row.entry.name }), _jsxs("span", { className: styles.meta, children: ["+", row.entry.dial] }), _jsx("span", { className: styles.check, "data-on": selected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, row.key);
                                                         });
                                                         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 }), body] }, section.key)
                                                             : _jsx("div", { role: "presentation", className: styles.group, children: body }, section.key);
-                                                    }), rows.length === 0 && _jsxs("p", { className: styles.empty, children: ["No countries match \u201C", query.trim(), "\u201D"] })] }) }) })] })] }), _jsxs("div", { className: styles.numberWrap, children: [_jsxs("span", { className: styles.guide, "aria-hidden": "true", children: [_jsx("span", { className: styles.guideTyped, children: formatted }), guide] }), _jsx("input", { ref: inputRef, id: inputId, className: styles.number, type: "tel", inputMode: "tel", autoComplete: "tel", value: formatted, disabled: disabled, required: required, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": hideLabel ? label : undefined, onChange: event => onNumberChange(event.currentTarget), onKeyDown: onNumberKeyDown, onPaste: onPaste, onBlur: event => { setTouched(digits.length > 0); onBlur?.(event); } }), _jsx(AnimatePresence, { initial: false, children: showCheck && _jsx(motion.span, { className: styles.valid, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: reduced ? 1 : .8, transition: { duration: .1 } }, transition: reduced ? { duration: .12 } : motionTokens.spring.snappy, children: _jsx(Check, { size: 16, strokeWidth: 2 }) }, "ok") })] })] }), _jsx(AnimatePresence, { initial: false, children: description && !message && _jsx(MessageRow, { id: hintId, text: description, tone: "hint" }, "hint") }), _jsx(AnimatePresence, { initial: false, children: message && _jsx(MessageRow, { id: errorId, text: message, tone: "error" }, "error") }), name && _jsx("input", { type: "hidden", name: name, value: e164 }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement || (showCheck ? `Valid ${current.name} number` : "") })] });
+                                                    }), rows.length === 0 && _jsxs("p", { className: styles.empty, children: ["No countries match \u201C", query.trim(), "\u201D"] })] }) }) })] })] }), _jsxs("div", { className: styles.numberWrap, children: [_jsxs("span", { className: styles.guide, "aria-hidden": "true", children: [_jsx("span", { className: styles.guideTyped, children: formatted }), guide] }), _jsx("input", { ref: inputRef, id: inputId, className: styles.number, type: "tel", inputMode: "tel", autoComplete: "tel", value: formatted, disabled: disabled, required: required, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": hideLabel ? label : undefined, onChange: event => onNumberChange(event.currentTarget), onKeyDown: onNumberKeyDown, onPaste: onPaste, onBlur: event => { setTouched(digits.length > 0); onBlur?.(event); } }), _jsx(AnimatePresence, { initial: false, children: showCheck && _jsx(motion.span, { className: styles.valid, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: reduced ? 1 : .8, transition: { duration: motionTokens.duration.instant } }, transition: reduced ? { duration: motionTokens.duration.instant } : motionTokens.spring.snappy, children: _jsx(Check, { size: 16, strokeWidth: 2 }) }, "ok") })] })] }), _jsx(AnimatePresence, { initial: false, children: description && !message && _jsx(MessageRow, { id: hintId, text: description, tone: "hint" }, "hint") }), _jsx(AnimatePresence, { initial: false, children: message && _jsx(MessageRow, { id: errorId, text: message, tone: "error" }, "error") }), name && _jsx("input", { type: "hidden", name: name, value: e164 }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement || (showCheck ? `Valid ${current.name} number` : "") })] });
 });
 PhoneInput.displayName = "PhoneInput";
 export default PhoneInput;

package/components/radio-group/radio-group.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef } from "react";
 import { animate, motion, useReducedMotion } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./radio-group.module.css";
 /** Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it at once. */
 function place(highlight, row, at, glide) {
@@ -33,6 +34,8 @@ export function RadioGroup({ label, options, value, onValueChange, name }) {
     const rows = useRef([]);
     const shown = useRef(null);
     const at = useRef("");
+    // Fluid hover: the nearest row is lit and a click in a gap chooses it. Arrow keys already move the selection, so focus leaves the fill alone.
+    const hover = useFluidHover(listRef, { items: `.${styles.option}`, followFocus: false });
     const selected = options.findIndex(option => option.value === value);
     useLayoutEffect(() => {
         place(highlightRef.current, rows.current[selected], at, shown.current !== null && shown.current !== selected && !reduced);
@@ -48,7 +51,7 @@ export function RadioGroup({ label, options, value, onValueChange, name }) {
         rows.current.forEach(row => row && observer.observe(row));
         return () => observer.disconnect();
     }, [options.length]);
-    return _jsxs("fieldset", { className: styles.group, children: [_jsx("legend", { children: label }), _jsxs("div", { ref: listRef, className: styles.options, children: [_jsx("span", { ref: highlightRef, className: styles.highlight, "aria-hidden": "true" }), options.map((option, index) => {
+    return _jsxs("fieldset", { className: styles.group, children: [_jsx("legend", { children: label }), _jsxs("div", { ref: listRef, className: styles.options, ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.hover }), _jsx("span", { ref: highlightRef, className: styles.highlight, "aria-hidden": "true" }), options.map((option, index) => {
                         const checked = value === option.value;
                         return _jsxs("label", { className: styles.option, ref: node => { rows.current[index] = node; }, children: [_jsx("input", { type: "radio", name: name ?? id, value: option.value, checked: checked, onChange: () => onValueChange(option.value) }), _jsx("span", { className: styles.mark, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.dot, initial: false, animate: checked ? { scale: 1, opacity: 1 } : { scale: .4, opacity: 0 }, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.snappy, opacity: { duration: checked ? motionTokens.duration.fast : motionTokens.duration.instant } } }) }), _jsxs("span", { children: [_jsx("strong", { children: option.label }), option.description && _jsx("small", { children: option.description })] })] }, option.value);
                     })] })] });

package/components/radio-group/radio-group.module.css

@@ -3,10 +3,11 @@
 /* One highlight travels between the rows: above their borders and fills, below their text, so it never crosses a label. */
 .options { position: relative; display: grid; gap: var(--space-related); }
 .highlight { position: absolute; top: 0; right: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid var(--control-on); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--control-on) 5%, transparent); opacity: 0; pointer-events: none; }
+/* The hover fill glides between rows, under their borders, the selection and the text. */
+.hover { border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
 /* Rows answer a press with color only; the mark is what moves. */
 /* The mark sits centered on the left edge of the row, whether or not the option has a description. */
 .option { position: relative; display: flex; align-items: center; gap: var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-group); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
-@media (hover: hover) and (pointer: fine) { .option:hover { background: var(--surface-muted); } }
 .option:active { background: var(--surface-muted); }
 /* Until the highlight is placed (server paint or no script), the checked row carries the same look itself. */
 .options:not([data-ready]) .option:has(input:checked) { border-color: var(--control-on); background: color-mix(in oklab, var(--control-on) 5%, transparent); }
@@ -20,7 +21,7 @@
 .mark::after { content: ""; opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
 .option:active:not(:has(input:checked)) .mark::after { opacity: .22; }
 /* The mark alone answers a press: a quick dip, then a spring back. */
-.option:active .mark { transform: scale(.88); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); }
+.option:active .mark { transform: scale(.88); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
 .option:has(input:checked) .mark { border-color: var(--control-on); background: var(--control-on); }
 .option:has(input:checked) .dot { background: var(--control-glyph); }
 .option strong, .option small { display: block; }

package/components/rich-text-editor/rich-text-editor.js

@@ -686,10 +686,10 @@ const MORPH = physical(spring.morph.visualDuration, .12), GLIDE = physical(.3, .
 const TRAVEL = 18;
 const faceVariants = {
     hidden: (direction) => ({ opacity: 0, x: direction * TRAVEL, filter: `blur(${blur.subtle}px)` }),
-    shown: { opacity: 1, x: 0, filter: "blur(0px)", transition: { x: MORPH, opacity: { duration: .2, ease: enter, delay: .03 }, filter: { duration: .2, ease: enter, delay: .03 } } },
-    gone: (direction) => ({ opacity: 0, x: direction * -TRAVEL, filter: `blur(${blur.subtle}px)`, transition: { x: MORPH, opacity: { duration: .12, ease: standard }, filter: { duration: .12, ease: standard } } }),
+    shown: { opacity: 1, x: 0, filter: "blur(0px)", transition: { x: MORPH, opacity: { duration: motionTokens.duration.exit, ease: enter, delay: motionTokens.stagger.char }, filter: { duration: motionTokens.duration.exit, ease: enter, delay: motionTokens.stagger.char } } },
+    gone: (direction) => ({ opacity: 0, x: direction * -TRAVEL, filter: `blur(${blur.subtle}px)`, transition: { x: MORPH, opacity: { duration: motionTokens.duration.instant, ease: standard }, filter: { duration: motionTokens.duration.instant, ease: standard } } }),
 };
-const fadeVariants = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .14 } }, gone: { opacity: 0, transition: { duration: .1 } } };
+const fadeVariants = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.fast } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 /** A toolbar face reports its natural size while current, so the shared surface can spring to it. */
 function Face({ direction, reduced, onSize, children }) {
     const ref = useRef(null);

package/components/segmented-control/segmented-control.js

@@ -3,11 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef } from "react";
 import { LayoutGroup, motion, useReducedMotion } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./segmented-control.module.css";
 export default function SegmentedControl({ options, value, onValueChange, label, onOptionIntent, size = "sm", className }) {
     const id = useId();
     const reduced = useReducedMotion();
     const track = useRef(null);
+    // Fluid hover: the nearest option is lit and a click in a gap picks it. Focus already moves the selection, so it leaves the fill alone.
+    const hover = useFluidHover(track, { items: "[data-value]", axis: "x", followFocus: false });
     // When the options are wider than the container, the track scrolls inside itself. Edges fade only on the side with more to see.
     useLayoutEffect(() => {
         const node = track.current;
@@ -52,5 +55,5 @@ export default function SegmentedControl({ options, value, onValueChange, label,
         onValueChange(options[target].value);
         track.current?.querySelector(`[data-value="${CSS.escape(options[target].value)}"]`)?.focus({ preventScroll: true });
     };
-    return _jsx("div", { className: `${styles.root} ${className ?? ""}`, role: "group", "aria-label": label, "data-size": size, children: _jsx(LayoutGroup, { id: id, children: _jsx(motion.div, { ref: track, layoutScroll: true, className: styles.track, children: options.map((option, index) => _jsxs("button", { id: `${id}-${option.value}`, className: styles.button, type: "button", "data-value": option.value, "aria-pressed": value === option.value, tabIndex: index === selectedIndex ? 0 : -1, onClick: () => onValueChange(option.value), onKeyDown: onKeyDown, onPointerEnter: onOptionIntent ? () => onOptionIntent(option.value) : undefined, onFocus: onOptionIntent ? () => onOptionIntent(option.value) : undefined, children: [value === option.value && _jsx(motion.span, { className: styles.selection, layoutId: "selection", layoutDependency: value, transition: reduced ? { duration: 0 } : motionTokens.spring.morph, "aria-hidden": "true" }), _jsxs("span", { className: styles.label, children: [option.label, option.accessory] })] }, option.value)) }) }) });
+    return _jsx("div", { className: `${styles.root} ${className ?? ""}`, role: "group", "aria-label": label, "data-size": size, children: _jsx(LayoutGroup, { id: id, children: _jsxs(motion.div, { ref: track, layoutScroll: true, className: styles.track, ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.hover }), options.map((option, index) => _jsxs("button", { id: `${id}-${option.value}`, className: styles.button, type: "button", "data-value": option.value, "aria-pressed": value === option.value, tabIndex: index === selectedIndex ? 0 : -1, onClick: () => onValueChange(option.value), onKeyDown: onKeyDown, onPointerEnter: onOptionIntent ? () => onOptionIntent(option.value) : undefined, onFocus: onOptionIntent ? () => onOptionIntent(option.value) : undefined, children: [value === option.value && _jsx(motion.span, { className: styles.selection, layoutId: "selection", layoutDependency: value, transition: reduced ? { duration: 0 } : motionTokens.spring.morph, "aria-hidden": "true" }), _jsxs("span", { className: styles.label, children: [option.label, option.accessory] })] }, option.value))] }) }) });
 }

package/components/segmented-control/segmented-control.module.css

@@ -1,7 +1,7 @@
 /* The frame can shrink below its content inside flex and grid parents; the track then scrolls inside it. */
 .root { display: inline-flex; min-width: 0; max-width: 100%; flex-shrink: 1; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
 /* The track owns the stacking context so the gliding highlight passes under every label, not over earlier ones. */
-.track { --fade-start: 0px; --fade-end: 0px; isolation: isolate; display: flex; min-width: 0; gap: var(--space-hair); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-tight); border-radius: inherit; corner-shape: inherit; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
+.track { --fade-start: 0px; --fade-end: 0px; position: relative; isolation: isolate; display: flex; min-width: 0; gap: var(--space-hair); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-tight); border-radius: inherit; corner-shape: inherit; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
 .track::-webkit-scrollbar { display: none; }
 .track[data-fade-start] { --fade-start: 20px; }
 .track[data-fade-end] { --fade-end: 20px; }
@@ -9,6 +9,8 @@
 .button { position: relative; flex: 0 0 auto; min-height: var(--control-height-sm); border: 0; border-radius: calc(var(--radius-control) - var(--space-tight)); padding: 0 var(--space-group); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .button:hover { color: var(--foreground); } }
 .button:active, .button[aria-pressed="true"] { color: var(--foreground); }
+/* The hover fill glides under the options and under the selection, so the selected option never changes on hover. */
+.hover { z-index: -1; border-radius: calc(var(--radius-control) - var(--space-tight)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
 .selection { position: absolute; z-index: -1; inset: 0; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; background: var(--surface); box-shadow: var(--shadow-resting); }
 .label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-related); }
 /* Compact: 24px segments in a thinner track, at the small type step. */

package/components/shortcut-recorder/shortcut-recorder.js

@@ -185,10 +185,10 @@ const RESERVED = [
 ];
 const chip = {
     enter: { opacity: 0, scale: .72, y: 4, filter: `blur(${motionTokens.blur.subtle}px)` },
-    rest: (index) => ({ opacity: 1, scale: 1, y: 0, filter: "blur(0px)", transition: { ...motionTokens.spring.snappy, delay: index * motionTokens.stagger.item, opacity: { duration: .14, delay: index * motionTokens.stagger.item }, filter: { duration: .16, delay: index * motionTokens.stagger.item } } }),
-    exit: { opacity: 0, scale: .8, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: .1 } },
+    rest: (index) => ({ opacity: 1, scale: 1, y: 0, filter: "blur(0px)", transition: { ...motionTokens.spring.snappy, delay: index * motionTokens.stagger.item, opacity: { duration: motionTokens.duration.fast, delay: index * motionTokens.stagger.item }, filter: { duration: motionTokens.duration.fast, delay: index * motionTokens.stagger.item } } }),
+    exit: { opacity: 0, scale: .8, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant } },
 };
-const chipFade = { enter: { opacity: 0 }, rest: { opacity: 1, scale: 1, y: 0, filter: "none", transition: { duration: .1 } }, exit: { opacity: 0, transition: { duration: .06 } } };
+const chipFade = { enter: { opacity: 0 }, rest: { opacity: 1, scale: 1, y: 0, filter: "none", transition: { duration: motionTokens.duration.instant } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 /**
  * A field that records a keyboard shortcut. Press it, then press the combination: held modifiers light up as caps while you
  * build the chord, the finished shortcut settles into place, and a combination that is already taken asks before it is used.
@@ -339,7 +339,7 @@ export function ShortcutRecorder({ label, hideLabel = false, value, defaultValue
                         } start(); }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: () => { if (recording) {
                             stop();
                             setNudge(null);
-                        } }, children: [_jsx("span", { className: styles.srOnly, children: recording ? "Recording" : shown ? spoken(shown) : placeholder }), _jsxs("span", { className: styles.row, "aria-hidden": "true", children: [recording && _jsx("span", { className: styles.dot, "data-reduced": reduced || undefined }), _jsxs(AnimatePresence, { initial: false, mode: "popLayout", children: [tokens.map((token, index) => _jsx(motion.span, { layout: reduced ? false : "position", custom: recording ? 0 : index, variants: reduced ? chipFade : chip, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: 0 } : { layout: motionTokens.spring.snappy }, className: styles.chipSlot, children: _jsx(ShortcutKbd, { pressed: recording || (settled > 0 && !pending), "data-tone": pending ? "warning" : undefined, children: token.label }) }, `${token.id}`)), tokens.length === 0 && _jsx(motion.span, { className: styles.placeholder, "data-recording": recording || undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .08 } }, transition: reduced ? { duration: .1 } : { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, children: recording ? "Press keys" : placeholder }, recording ? "prompt" : "placeholder")] })] })] }), _jsx("span", { className: styles.actions, children: _jsxs(AnimatePresence, { initial: false, children: [canReset && _jsx(motion.button, { type: "button", className: styles.action, "aria-label": `Reset to ${restoreTo ? formatShortcut(restoreTo, platform).spoken : "none"}`, onClick: () => { commit(restoreTo ?? null); buttonRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(RotateCcw, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "reset"), canClear && _jsx(motion.button, { type: "button", className: styles.action, "aria-label": "Clear shortcut", onClick: () => { commit(null); buttonRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear")] }) })] }), _jsx(AnimatePresence, { initial: false, children: message && _jsx(motion.div, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: messageHeight ?? "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: .1 } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx("div", { ref: measureMessage, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsxs(motion.div, { id: messageId, className: styles.message, "data-tone": message.tone, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { duration: reduced ? .1 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: [_jsx("span", { className: styles.messageText, children: message.body }), pending && _jsxs("span", { className: styles.messageActions, children: [_jsx("button", { type: "button", className: styles.link, onClick: () => { const taken = pending; commit(taken.shortcut, taken.reserved ? undefined : taken.conflict); buttonRef.current?.focus(); }, children: "Use anyway" }), _jsx("button", { type: "button", className: styles.link, "data-quiet": "", onClick: () => { setPending(null); setAnnouncement("Kept the previous shortcut"); buttonRef.current?.focus(); }, children: "Cancel" })] })] }, message.key) }) }) }, "slot") }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+                        } }, children: [_jsx("span", { className: styles.srOnly, children: recording ? "Recording" : shown ? spoken(shown) : placeholder }), _jsxs("span", { className: styles.row, "aria-hidden": "true", children: [recording && _jsx("span", { className: styles.dot, "data-reduced": reduced || undefined }), _jsxs(AnimatePresence, { initial: false, mode: "popLayout", children: [tokens.map((token, index) => _jsx(motion.span, { layout: reduced ? false : "position", custom: recording ? 0 : index, variants: reduced ? chipFade : chip, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: 0 } : { layout: motionTokens.spring.snappy }, className: styles.chipSlot, children: _jsx(ShortcutKbd, { pressed: recording || (settled > 0 && !pending), "data-tone": pending ? "warning" : undefined, children: token.label }) }, `${token.id}`)), tokens.length === 0 && _jsx(motion.span, { className: styles.placeholder, "data-recording": recording || undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, children: recording ? "Press keys" : placeholder }, recording ? "prompt" : "placeholder")] })] })] }), _jsx("span", { className: styles.actions, children: _jsxs(AnimatePresence, { initial: false, children: [canReset && _jsx(motion.button, { type: "button", className: styles.action, "aria-label": `Reset to ${restoreTo ? formatShortcut(restoreTo, platform).spoken : "none"}`, onClick: () => { commit(restoreTo ?? null); buttonRef.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 } : motionTokens.spring.snappy, children: _jsx(RotateCcw, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "reset"), canClear && _jsx(motion.button, { type: "button", className: styles.action, "aria-label": "Clear shortcut", onClick: () => { commit(null); buttonRef.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 } : motionTokens.spring.snappy, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear")] }) })] }), _jsx(AnimatePresence, { initial: false, children: message && _jsx(motion.div, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: messageHeight ?? "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx("div", { ref: measureMessage, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsxs(motion.div, { id: messageId, className: styles.message, "data-tone": message.tone, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { duration: reduced ? .1 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: [_jsx("span", { className: styles.messageText, children: message.body }), pending && _jsxs("span", { className: styles.messageActions, children: [_jsx("button", { type: "button", className: styles.link, onClick: () => { const taken = pending; commit(taken.shortcut, taken.reserved ? undefined : taken.conflict); buttonRef.current?.focus(); }, children: "Use anyway" }), _jsx("button", { type: "button", className: styles.link, "data-quiet": "", onClick: () => { setPending(null); setAnnouncement("Kept the previous shortcut"); buttonRef.current?.focus(); }, children: "Cancel" })] })] }, message.key) }) }) }, "slot") }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
 }
 /**
  * A searchable, grouped cheatsheet. Holding a modifier lights that cap in every row and fades rows that do not use it, so people
@@ -369,7 +369,7 @@ export function ShortcutList({ groups, label = "Keyboard shortcuts", searchable
     return _jsxs("section", { className: [styles.list, className].filter(Boolean).join(" "), "aria-label": label, children: [searchable && _jsxs("div", { className: styles.searchRow, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: searchRef, className: styles.search, type: "search", placeholder: searchPlaceholder, value: query, "aria-label": searchPlaceholder, onChange: event => setQuery(event.target.value), onKeyDown: event => { if (event.key === "Escape" && query) {
                             event.preventDefault();
                             setQuery("");
-                        } }, autoComplete: "off", spellCheck: false }), _jsx("span", { className: styles.count, "aria-live": "polite", children: query ? `${total} ${total === 1 ? "match" : "matches"}` : "" }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onClick: () => { setQuery(""); searchRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsxs("div", { className: styles.groups, children: [_jsx(AnimatePresence, { initial: false, children: filtered.map(group => _jsxs(motion.section, { className: styles.group, "aria-label": group.label, initial: reduced ? { opacity: 0 } : { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: reduced ? { opacity: 0 } : { opacity: 0, height: 0 }, transition: rowTransition, children: [_jsx("h4", { className: styles.groupLabel, children: group.label }), _jsx("ul", { className: styles.rows, children: _jsx(AnimatePresence, { initial: false, children: group.items.map(item => {
+                        } }, autoComplete: "off", spellCheck: false }), _jsx("span", { className: styles.count, "aria-live": "polite", children: query ? `${total} ${total === 1 ? "match" : "matches"}` : "" }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onClick: () => { setQuery(""); searchRef.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 } : motionTokens.spring.snappy, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsxs("div", { className: styles.groups, children: [_jsx(AnimatePresence, { initial: false, children: filtered.map(group => _jsxs(motion.section, { className: styles.group, "aria-label": group.label, initial: reduced ? { opacity: 0 } : { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: reduced ? { opacity: 0 } : { opacity: 0, height: 0 }, transition: rowTransition, children: [_jsx("h4", { className: styles.groupLabel, children: group.label }), _jsx("ul", { className: styles.rows, children: _jsx(AnimatePresence, { initial: false, children: group.items.map(item => {
                                             const tokens = shortcutTokens(item.shortcut, platform);
                                             const ids = tokens.map(token => token.id);
                                             const match = held.size > 0 && ids.every(key => held.has(key));

package/components/shortcut-recorder/shortcut-recorder.module.css

@@ -3,7 +3,7 @@
 /* A key cap: a one pixel edge with a slightly heavier bottom, so it reads as a key without a shadow. Held, it drops a pixel and takes the accent. */
 .kbd { display: inline-grid; min-width: 26px; height: 26px; box-sizing: border-box; place-items: center; padding: 0 var(--space-related) 1px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform var(--duration-spring) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-bottom-width var(--duration-fast) var(--ease-standard); }
 .kbd[data-size="sm"] { min-width: 22px; height: 22px; padding: 0 var(--space-tight) 1px; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); font-size: var(--text-xs); }
-.kbd[data-pressed] { transform: translateY(1px); border-color: color-mix(in oklab, var(--accent) 55%, var(--border-strong)); border-bottom-width: 1px; background: var(--accent-subtle); color: var(--accent-strong); transition-duration: 90ms; }
+.kbd[data-pressed] { transform: translateY(1px); border-color: color-mix(in oklab, var(--accent) 55%, var(--border-strong)); border-bottom-width: 1px; background: var(--accent-subtle); color: var(--accent-strong); transition-duration: var(--duration-fast); }
 .kbd[data-tone="warning"] { border-color: color-mix(in oklab, var(--warning) 55%, var(--border-strong)); background: color-mix(in oklab, var(--warning) 12%, var(--surface-raised)); color: var(--foreground); }
 .keys { display: inline-flex; flex: none; align-items: center; gap: var(--space-tight); }
 

package/components/slot-text/slot-text.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, useTransform, useVelocity } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./slot-text.module.css";
 const DIGITS = "0123456789";
 const LOWER = "abcdefghijklmnopqrstuvwxyz";
@@ -94,7 +95,7 @@ function Reel({ char, order, entering, rising, duration, stagger, spins, reduced
             safeToRemove();
             return;
         }
-        const exit = animate(width, 0, { type: "spring", visualDuration: .35, bounce: 0, onComplete: safeToRemove });
+        const exit = animate(width, 0, { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, onComplete: safeToRemove });
         return () => exit.stop();
     }, [isPresent, safeToRemove, width, reduced]);
     return _jsxs(motion.span, { className: styles.slot, style: { width }, "data-exiting": isPresent ? undefined : "", children: [_jsx("span", { ref: sizer, className: styles.sizer, children: char === " " ? "\u00a0" : char }), _jsx("span", { className: styles.window, children: _jsx(motion.span, { className: styles.strip, style: { transform: y, filter: blur }, children: reel.strip.map((cell, i) => _jsx("span", { className: styles.cell, children: cell === " " ? "\u00a0" : cell }, i)) }) })] });

package/components/sparkline/sparkline.js

@@ -10,7 +10,7 @@ const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opaci
 const amountIn = (text) => Number(text.replace(/,/g, "").replace(/−/g, "-").match(/-?\d+(?:\.\d+)?/)?.[0] ?? NaN);
 const grouped = new Intl.NumberFormat("en-US");
 /** The first draw: one smooth stroke, slow at both ends like a pen. */
-const draw = { duration: motionTokens.duration.considered * 1.75, ease: [...motionTokens.ease.inOut] };
+const draw = { duration: motionTokens.duration.expressive * 1.75, ease: [...motionTokens.ease.inOut] };
 const quick = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
 /** A number keeps its unchanged digits still, keyed by place from the right. Words key on everything up to them, so only the first changed word and what follows it roll. */
 function chunksOf(text, whole) {

package/components/split-button/split-button.module.css

@@ -35,7 +35,7 @@
   .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
 }
 /* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
-.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: menu-exit var(--duration-instant) linear both; pointer-events: none; }
 .highlight { position: absolute; top: 0; right: var(--space-tight); left: var(--space-tight); border-radius: calc(var(--radius-container) - var(--space-related)); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
 /* One highlight glides between items for the pointer and jumps instantly for the keyboard (lib/menu-highlight). */

package/components/swipe-actions/swipe-actions.js

@@ -281,9 +281,9 @@ export function SwipeActionsRow({ label, leading = [], trailing = [], fullSwipe
         returnHome(); }, [present]);
     const menuItems = [...leading.map((action, index) => ({ action, side: "leading", index })), ...trailing.map((action, index) => ({ action, side: "trailing", index }))];
     const collapse = reduced
-        ? { opacity: 0, transition: { duration: .15 } }
+        ? { opacity: 0, transition: { duration: motionTokens.duration.fast } }
         : { height: 0, opacity: 0, transition: { height: { ...motionTokens.spring.smooth, delay: .12 }, opacity: { duration: motionTokens.duration.instant, delay: .34 } } };
-    return _jsxs(motion.li, { ref: rowRef, className: [styles.row, className].filter(Boolean).join(" "), style: { "--swipe-action-width": `${ACTION}px` }, initial: reduced ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: collapse, transition: reduced ? { duration: .15 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, children: [["leading", "trailing"].map(side => actionsOf(side).map((action, index) => {
+    return _jsxs(motion.li, { ref: rowRef, className: [styles.row, className].filter(Boolean).join(" "), style: { "--swipe-action-width": `${ACTION}px` }, initial: reduced ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: collapse, transition: reduced ? { duration: motionTokens.duration.fast } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, children: [["leading", "trailing"].map(side => actionsOf(side).map((action, index) => {
                 const count = actionsOf(side).length;
                 const rank = side === "leading" ? count - 1 - index : index;
                 const coverRank = covering?.side === side ? (side === "leading" ? count - 1 - covering.index : covering.index) : null;

package/components/switch/switch.js

@@ -11,7 +11,7 @@ const travel = 18;
 /** How far the thumb widens toward the other side while pressed. */
 const stretch = 5;
 /** Critically damped: the thumb lands on its end without overshooting the state it reports. */
-const glide = { type: "spring", visualDuration: 0.3, bounce: 0 };
+const glide = { type: "spring", visualDuration: motionTokens.spring.fast.visualDuration, bounce: 0 };
 export const Switch = forwardRef(function Switch({ label, className, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, ...props }, ref) {
     const reduceMotion = useReducedMotion();
     const [internal, setInternal] = useState(defaultChecked ?? false);
@@ -29,7 +29,7 @@ export const Switch = forwardRef(function Switch({ label, className, checked, de
         const fromPress = performance.now() - releasedAt.current < 250;
         if (reduceMotion || fromPress)
             return;
-        const controls = animate(scaleX, [1, 1.16, 1], { duration: 0.34, times: [0, 0.4, 1], ease: ["easeOut", "easeInOut"] });
+        const controls = animate(scaleX, [1, 1.16, 1], { duration: motionTokens.duration.standard, times: [0, 0.4, 1], ease: ["easeOut", "easeInOut"] });
         return () => controls.stop();
     }, [on, reduceMotion, scaleX]);
     const extra = pressed && !reduceMotion && !props.disabled ? stretch : 0;

package/components/tabs/tabs.js

@@ -6,6 +6,7 @@ import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef,
 import { ChevronLeft as NavArrowLeft, ChevronRight as NavArrowRight } from "lucide-react";
 import { AnimatePresence, LayoutGroup, animate, motion, useReducedMotion } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./tabs.module.css";
 /** `direction` is +1 when the new tab sits after the old one; `panelHeightRef` holds the visible panel height so the next panel can morph from it; `leavingRectRef` pins the outgoing panel where it was on screen. */
 const TabsContext = createContext({ active: "", layoutId: "tabs", direction: 1, panelHeightRef: { current: null }, leavingRectRef: { current: null } });
@@ -37,6 +38,9 @@ export function TabsList({ className, ...props }) {
     const viewport = useRef(null);
     const list = useRef(null);
     const [edges, setEdges] = useState({ overflow: false, left: false, right: false });
+    // Fluid hover: the nearest tab is lit, gaps included. Radix selects on mouse-down, so a gap click stays inert, and focus
+    // already shows the selection, so the keyboard leaves the hover fill alone.
+    const hover = useFluidHover(list, { items: '[role="tab"]', axis: "x", gapClick: false, followFocus: false });
     const update = useCallback(() => {
         const frame = shell.current;
         const scroll = viewport.current;
@@ -75,8 +79,8 @@ export function TabsList({ className, ...props }) {
     }, [update]);
     useLayoutEffect(() => { reveal(list.current?.querySelector('[role="tab"][data-state="active"]') ?? null); }, [active, reveal]);
     const scrollTabs = (direction) => viewport.current?.scrollBy({ left: direction * (viewport.current?.clientWidth ?? 0) * .75, behavior: reduced ? "instant" : "smooth" });
-    return _jsxs("div", { ref: shell, className: styles.listShell, "data-overflow": edges.overflow, "data-left": edges.left, "data-right": edges.right, children: [edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollLeft}`, "aria-label": "Scroll tabs left", disabled: !edges.left, onClick: () => scrollTabs(-1), children: _jsx(NavArrowLeft, { width: 17, height: 17, "aria-hidden": "true" }) }), _jsx(motion.div, { ref: viewport, layoutScroll: true, className: styles.viewport, onFocusCapture: event => { if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab")
-                    reveal(event.target); }, children: _jsx(TabsPrimitive.List, { ...props, ref: list, className: [styles.list, className].filter(Boolean).join(" ") }) }), edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollRight}`, "aria-label": "Scroll tabs right", disabled: !edges.right, onClick: () => scrollTabs(1), children: _jsx(NavArrowRight, { width: 17, height: 17, "aria-hidden": "true" }) })] });
+    return _jsxs("div", { ref: shell, className: styles.listShell, "data-overflow": edges.overflow, "data-left": edges.left, "data-right": edges.right, children: [edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollLeft}`, "aria-label": "Scroll tabs left", disabled: !edges.left, onClick: () => scrollTabs(-1), children: _jsx(NavArrowLeft, { width: 17, height: 17, "aria-hidden": "true" }) }), _jsx(motion.div, { ref: viewport, layoutScroll: true, className: styles.viewport, ...hover.handlers, onFocusCapture: event => { if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab")
+                    reveal(event.target); }, children: _jsxs(TabsPrimitive.List, { ...props, ref: list, className: [styles.list, className].filter(Boolean).join(" "), children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.hover }), props.children] }) }), edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollRight}`, "aria-label": "Scroll tabs right", disabled: !edges.right, onClick: () => scrollTabs(1), children: _jsx(NavArrowRight, { width: 17, height: 17, "aria-hidden": "true" }) })] });
 }
 export function TabsTrigger({ className, children, value, icon, ...props }) {
     const { active } = useContext(TabsContext);
@@ -95,7 +99,7 @@ const panelMotion = {
 const panelFade = {
     enter: { opacity: 0, x: 0 },
     center: { opacity: 1, x: 0, transition: { duration: motionTokens.duration.instant } },
-    exit: { opacity: 0, x: 0, transition: { duration: .1 } },
+    exit: { opacity: 0, x: 0, transition: { duration: motionTokens.duration.instant } },
 };
 export function TabsContent({ className, value, forceMount, children, ...props }) {
     const { active, direction, panelHeightRef, leavingRectRef } = useContext(TabsContext);

package/components/tabs/tabs.module.css

@@ -7,7 +7,7 @@
 .listShell[data-right="true"] .viewport { mask-image: linear-gradient(to right, black, black calc(100% - 35px), transparent); }
 .listShell[data-left="true"][data-right="true"] .viewport { mask-image: linear-gradient(to right, transparent, black 35px, black calc(100% - 35px), transparent); }
 /* The list owns the stacking context so the gliding highlight passes under every label, not over earlier ones. */
-.list { isolation: isolate; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); padding: var(--space-tight); }
+.list { position: relative; isolation: isolate; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); padding: var(--space-tight); }
 .scrollButton { position: absolute; z-index: 2; top: 0; bottom: 0; display: grid; width: 33px; place-items: center; border: 0; background: var(--surface-muted); color: var(--foreground); }
 .scrollLeft { left: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); }
 .scrollRight { right: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
@@ -16,6 +16,8 @@
 .trigger { position: relative; -webkit-tap-highlight-color: transparent; display: inline-grid; min-width: 5.5rem; place-items: center; flex: 0 0 auto; min-height: var(--control-height-sm); border: 0; border-radius: calc(var(--radius-control) - var(--space-tight)); padding: 0 var(--space-group); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .trigger:hover { color: var(--foreground); } }
 .trigger:active { color: var(--foreground); }.trigger[data-state="active"] { color: var(--accent-strong); }
+/* The hover fill glides under the tabs and under the selection, so the selected tab never changes on hover. */
+.hover { z-index: -1; border-radius: calc(var(--radius-control) - var(--space-tight)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
 .selection { position: absolute; z-index: -1; inset: 0; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; background: var(--surface); box-shadow: var(--shadow-resting); will-change: transform; }
 .triggerLabel { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-related); }
 /* An icon before the label: one size for every tab set, coloured with the label so it follows hover and selection. */

package/components/text-reveal/text-reveal.js

@@ -4,7 +4,7 @@ import { Fragment } from "react";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./text-reveal.module.css";
 /** Total stagger stays under this many seconds, however long the text is. */
-const MAX_STAGGER = motionTokens.duration.considered;
+const MAX_STAGGER = motionTokens.duration.expressive;
 export function TextReveal({ text, as = "h2", className, id, delay = 0 }) {
     const Tag = as;
     const lines = text.split("\n").map(line => line.split(" ").filter(Boolean));