@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

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/phone-input/phone-input.module.css

@@ -1,6 +1,6 @@
 /* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
 .field { --pi-h: var(--control-height-md); --pi-panel-w: 320px; position: relative; display: grid; min-width: 0; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
-.field[data-open] { z-index: 30; }
+.field[data-open] { z-index: var(--layer-dropdown); }
 .label { justify-self: start; margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 
 /* The shell matches the labeled input: one border, one radius, and a quiet border change on hover and focus. */
@@ -12,7 +12,7 @@
 
 /* The anchor holds the closed button's place and springs to a new width when the calling code changes length. */
 .anchor { position: relative; flex: none; height: 100%; }
-.anchor::after { content: ""; position: absolute; top: 10px; right: 0; bottom: 10px; width: 1px; background: var(--border); transition: opacity var(--duration-fast) var(--ease-standard); }
+.anchor::after { content: ""; position: absolute; top: var(--space-group); right: 0; bottom: var(--space-group); width: 1px; background: var(--border); transition: opacity var(--duration-fast) var(--ease-standard); }
 .field[data-open] .anchor::after { opacity: 0; }
 
 /* One material for both states. Open, it steps out over the shell's own border so the two edges never double up. */
@@ -24,8 +24,8 @@
 
 .lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: calc(var(--pi-h) - 2px); }
 
-.trigger { box-sizing: border-box; display: flex; height: calc(var(--pi-h) - 2px); align-items: center; padding: 0 36px 0 12px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
-.lid .trigger { position: absolute; inset: 3px auto 3px 3px; width: calc(100% - 6px); height: auto; margin: 0; padding: 0 33px 0 9px; border: 0; border-radius: calc(var(--radius-control) - 4px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard); }
+.trigger { box-sizing: border-box; display: flex; height: calc(var(--pi-h) - 2px); align-items: center; padding: 0 var(--space-block) 0 var(--space-group); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
+.lid .trigger { position: absolute; inset: var(--space-tight) auto var(--space-tight) var(--space-tight); width: calc(100% - 6px); height: auto; margin: 0; padding: 0 var(--space-block) 0 var(--space-related); border: 0; border-radius: calc(var(--radius-control) - var(--space-tight)); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .field:not([data-open], [data-disabled]) .lid .trigger:hover { background: var(--surface-muted); } }
 .lid .trigger:active:not(:disabled) { background: var(--surface-muted); }
 .lid .trigger:disabled { cursor: not-allowed; }
@@ -37,14 +37,14 @@
 
 .slot { position: relative; display: block; min-width: 0; height: 100%; flex: 1; }
 .slot[data-hidden] { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
-.layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; }
-.flag { display: inline-grid; width: 20px; flex: none; place-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-body); font-size: 17px; font-weight: 400; line-height: 1; }
+.layer { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); }
+.flag { display: inline-grid; width: 20px; flex: none; place-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-body); font-size: var(--text-lg); font-weight: 400; line-height: 1; }
 .dial { font-variant-numeric: tabular-nums; }
 
-.chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; }
+.chevron { position: absolute; top: 50%; right: var(--space-group); display: grid; width: 16px; height: 16px; margin-top: calc(var(--space-related) * -1); place-items: center; color: var(--text-muted); pointer-events: none; }
 
 /* Search takes the lid's place while the list is open. */
-.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 2px 0 13px; }
+.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 var(--space-hair) 0 var(--space-group); }
 .searchRow[inert] { pointer-events: none; }
 .searchIcon { flex: none; color: var(--text-muted); }
 .search { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: none; }
@@ -58,31 +58,31 @@
 }
 
 /* The list hangs under the lid at its final width, so rows never reflow while the surface springs open. */
-.listFace { position: absolute; top: calc(var(--pi-h) - 2px); left: 0; box-sizing: border-box; width: var(--pi-panel-w); padding: 0 6px 6px; }
-.listFace::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
+.listFace { position: absolute; top: calc(var(--pi-h) - var(--space-hair)); left: 0; box-sizing: border-box; width: var(--pi-panel-w); padding: 0 var(--space-related) var(--space-related); }
+.listFace::before { content: ""; position: absolute; top: 0; right: var(--space-inset); left: var(--space-inset); height: 1px; background: var(--border-subtle); }
 .listFace[inert] { pointer-events: none; }
-.scroll { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
-.options { position: relative; display: grid; gap: 2px; }
+.scroll { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-related); scrollbar-width: thin; }
+.options { position: relative; display: grid; gap: var(--space-hair); }
 .highlight { position: absolute; top: 0; right: 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; }
-.group { display: grid; gap: 2px; }
-.group + .group { margin-top: 4px; }
-.groupLabel { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); }
-.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.group { display: grid; gap: var(--space-hair); }
+.group + .group { margin-top: var(--space-tight); }
+.groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); }
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
 .name { min-width: 0; flex: 1; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
 .meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 .check[data-on] { opacity: 1; transform: none; }
-.empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }
+.empty { margin: 0; padding: var(--space-group) var(--space-group) var(--space-inset); color: var(--text-muted); font-size: var(--text-sm); }
 
 /* The number and its guide share one box. The guide paints the typed part invisibly, then the rest of the example faintly after it. */
 .numberWrap { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; }
-.number, .guide { box-sizing: border-box; padding: 0 36px 0 12px; font-family: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.number, .guide { box-sizing: border-box; padding: 0 var(--space-block) 0 var(--space-group); font-family: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
 .number { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); outline: none; }
 .number:disabled { cursor: not-allowed; }
 .guide { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; color: color-mix(in oklab, var(--text-muted) 72%, transparent); pointer-events: none; white-space: pre; }
 .guideTyped { visibility: hidden; }
-.valid { position: absolute; z-index: 1; top: 50%; right: 12px; display: grid; width: 18px; height: 18px; margin-top: -9px; place-items: center; color: var(--success); pointer-events: none; }
+.valid { position: absolute; z-index: 1; top: 50%; right: var(--space-group); display: grid; width: 18px; height: 18px; margin-top: calc(var(--space-related) * -1); place-items: center; color: var(--success); pointer-events: none; }
 
 /* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
 .messageSlot { position: relative; display: block; overflow: hidden; }

package/components/popover/popover.module.css

@@ -3,10 +3,10 @@
 .content {
   --popover-x: 0px;
   --popover-y: -5px;
-  z-index: 80;
+  z-index: var(--layer-popover);
   min-width: 12rem;
   max-width: min(22rem, calc(100vw - 20px));
-  padding: 1rem;
+  padding: var(--space-inset);
   border: 1px solid var(--border);
   border-radius: var(--radius-container);
   background: var(--surface-raised);

package/components/progress/progress.module.css

@@ -1 +1 @@
-.progress { width: 100%; color: var(--text-secondary); font-size: var(--text-sm); } .meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; line-height: var(--leading-body); } .label { position: relative; min-width: 0; } .line { display: block; } .value { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .count { display: inline-grid; justify-items: end; } /* A hidden "100%" row reserves the widest count, so the check never shifts as the number gains a digit. */ .count::before { content: "100%"; height: 0; overflow: hidden; visibility: hidden; } .done { display: grid; place-items: center; color: var(--success); } .track { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); } .fill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); transition: background-color var(--duration-standard) var(--ease-standard); } .progress[data-complete] .fill { background: var(--success); transition-delay: 200ms; } @media (prefers-reduced-motion: reduce) { .fill, .progress[data-complete] .fill { transition: none; } }
+.progress { width: 100%; color: var(--text-secondary); font-size: var(--text-sm); } .meta { display: flex; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-related); line-height: var(--leading-body); } .label { position: relative; min-width: 0; } .line { display: block; } .value { display: inline-flex; flex: none; align-items: center; gap: var(--space-tight); color: var(--text-muted); font-variant-numeric: tabular-nums; } .count { display: inline-grid; justify-items: end; } /* A hidden "100%" row reserves the widest count, so the check never shifts as the number gains a digit. */ .count::before { content: "100%"; height: 0; overflow: hidden; visibility: hidden; } .done { display: grid; place-items: center; color: var(--success); } .track { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); } .fill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); transition: background-color var(--duration-standard) var(--ease-standard); } .progress[data-complete] .fill { background: var(--success); transition-delay: 200ms; } @media (prefers-reduced-motion: reduce) { .fill, .progress[data-complete] .fill { transition: none; } }

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

@@ -1,7 +1,7 @@
 .root {
   position: relative;
   display: grid;
-  gap: 10px;
+  gap: var(--space-group);
   color: var(--foreground);
   font-family: var(--font-body);
   font-size: var(--text-sm);
@@ -10,7 +10,7 @@
 }
 .root *, .root *::before, .root *::after { box-sizing: border-box; }
 .root[data-layout="grid"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min-column, 180px)), 1fr)); }
-.root[data-layout="list"] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+.root[data-layout="list"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-related); }
 
 /* The one moving part: a ring that springs from card to card. It sits over the card border so the card itself never changes size. */
 .ring {
@@ -28,8 +28,8 @@
   display: grid;
   min-width: 0;
   align-items: start;
-  gap: 4px 12px;
-  padding: 14px 16px;
+  gap: var(--space-tight) var(--space-group);
+  padding: var(--space-inset) var(--space-inset);
   border: 1px solid var(--border);
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   background: var(--surface);
@@ -40,7 +40,7 @@
 }
 /* The body row takes any spare height, so prices sit on one baseline across a row even when a description wraps. */
 .root[data-layout="grid"] .card { grid-template-areas: "body indicator" "meta meta"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
-.root[data-layout="list"] .card { grid-template-areas: "indicator body meta"; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 13px 16px 13px 14px; }
+.root[data-layout="list"] .card { grid-template-areas: "indicator body meta"; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--space-group) var(--space-inset) var(--space-group) var(--space-inset); }
 .card[data-checked] { background: color-mix(in oklab, var(--control-on) 4%, var(--surface)); }
 .card[aria-disabled="true"] { background: var(--surface-muted); cursor: not-allowed; }
 .card[aria-disabled="true"] :is(.label, .meta) { color: var(--text-muted); }
@@ -61,8 +61,8 @@
 .indicatorDot { width: 6px; height: 6px; border-radius: 50%; corner-shape: round; background: var(--control-glyph); }
 .card[aria-disabled="true"] .indicator { border-color: var(--border); }
 
-.body { display: grid; min-width: 0; gap: 2px; grid-area: body; }
-.label { display: flex; min-width: 0; align-items: center; gap: 8px; font-weight: 500; }
+.body { display: grid; min-width: 0; gap: var(--space-hair); grid-area: body; }
+.label { display: flex; min-width: 0; align-items: center; gap: var(--space-related); font-weight: 500; }
 .labelText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .icon { display: grid; width: 18px; height: 18px; flex: none; place-items: center; color: var(--text-secondary); }
 .icon > svg { width: 18px; height: 18px; }
@@ -70,7 +70,7 @@
 .description { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); text-wrap: pretty; }
 
 .meta { grid-area: meta; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.root[data-layout="grid"] .meta { margin-top: 10px; font-size: var(--text-lg); }
+.root[data-layout="grid"] .meta { margin-top: var(--space-group); font-size: var(--text-lg); }
 .root[data-layout="list"] .meta { font-weight: 500; }
 
 @media (hover: hover) and (pointer: fine) {

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,11 +21,11 @@
 .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; }
 .option strong { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; transition: color var(--duration-standard) var(--ease-standard); }
 .option:has(input:checked) strong { color: var(--foreground); }
-.option small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
+.option small { margin-top: var(--space-hair); color: var(--text-muted); font-size: var(--text-xs); }
 @media (prefers-reduced-motion: reduce) { .option, .mark, .mark::after, .option strong { transition: none; } .option:active .mark { transform: none; } }

package/components/resizable-panels/resizable-panels.module.css

@@ -14,7 +14,7 @@
 
 /* The divider is a one pixel line with a 13px grab area, and a grip that forms while it is hovered, focused, or dragged. */
 .handle { position: relative; z-index: 2; flex: 0 0 1px; background: var(--border); cursor: col-resize; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
-.handle::before { position: absolute; inset: 0 -6px; content: ""; }
+.handle::before { position: absolute; inset: 0 calc(var(--space-related) * -1); content: ""; }
 .handle[data-collapsed] { background: transparent; cursor: pointer; }
 .grip { position: absolute; top: 50%; left: 50%; width: 4px; height: 32px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scaleY(.6); transition: opacity var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) {
@@ -28,10 +28,10 @@
 .handle[data-collapsed]:focus-visible .restore { border-color: var(--border-strong); color: var(--foreground); }
 
 /* Once a neighbour is hidden, a tab on the divider points the way it will come back. */
-.restore { position: absolute; top: 50%; display: grid; width: 18px; height: 40px; margin-top: -20px; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); box-shadow: var(--shadow-resting); color: var(--text-secondary); pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
-.restore[data-side="before"] { left: 5px; transform-origin: 0 50%; }
-.restore[data-side="after"] { right: 5px; transform-origin: 100% 50%; }
-.handle[data-collapsed]::before { inset: 0 -30px; }
+.restore { position: absolute; top: 50%; display: grid; width: 18px; height: 40px; margin-top: calc(var(--space-comfort) * -1); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); box-shadow: var(--shadow-resting); color: var(--text-secondary); pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.restore[data-side="before"] { left: var(--space-tight); transform-origin: 0 50%; }
+.restore[data-side="after"] { right: var(--space-tight); transform-origin: 100% 50%; }
+.handle[data-collapsed]::before { inset: 0 calc(var(--space-block) * -1); }
 .handle[data-collapsed="before"]::before { left: 0; }
 .handle[data-collapsed="after"]::before { right: 0; }
 

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/rich-text-editor/rich-text-editor.module.css

@@ -10,7 +10,7 @@
 /* The writing surface. Everything inside is plain semantic HTML, styled here so pasted and typed content look the same. */
 .editor {
   min-height: 8rem;
-  padding: 2px 0;
+  padding: var(--space-hair) 0;
   outline: none;
   color: var(--foreground);
   font-size: var(--text-base);
@@ -48,7 +48,7 @@
   font-size: .86em;
 }
 
-.editor blockquote { padding-left: 14px; border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
+.editor blockquote { padding-left: var(--space-inset); border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
 
 .editor ul,
 .editor ol { margin-block: 0; padding-left: 1.45em; }
@@ -63,7 +63,7 @@
 .editor ol > li::marker { font-variant-numeric: tabular-nums; }
 
 .editor pre {
-  padding: 12px 14px;
+  padding: var(--space-group) var(--space-inset);
   overflow-x: auto;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-control);
@@ -91,7 +91,7 @@
 /* Floating toolbar. One surface whose size springs between its two faces. */
 .toolbar {
   position: absolute;
-  z-index: 40;
+  z-index: var(--layer-popover);
   translate: -50% -100%;
   overflow: hidden;
   border: 1px solid var(--border);
@@ -104,11 +104,11 @@
 .face[inert] { pointer-events: none; }
 
 .row,
-.linkRow { display: flex; align-items: center; gap: 2px; padding: 4px; }
-.blockTools { display: flex; align-items: center; gap: 2px; }
+.linkRow { display: flex; align-items: center; gap: var(--space-hair); padding: var(--space-tight); }
+.blockTools { display: flex; align-items: center; gap: var(--space-hair); }
 /* Narrow editors keep the inline marks; block types stay one slash away. */
 @container (max-width: 330px) { .blockTools { display: none; } }
-.divider { width: 1px; height: 18px; margin: 0 4px; background: var(--border); }
+.divider { width: 1px; height: 18px; margin: 0 var(--space-tight); background: var(--border); }
 
 .tool {
   display: grid;
@@ -134,7 +134,7 @@
   width: min(15rem, 60vw);
   height: 32px;
   min-width: 0;
-  padding: 0 8px;
+  padding: 0 var(--space-related);
   border: 0;
   background: transparent;
   color: var(--foreground);
@@ -163,7 +163,7 @@
 /* Slash menu. */
 .slash {
   position: absolute;
-  z-index: 40;
+  z-index: var(--layer-dropdown);
   width: 240px;
   max-width: calc(100% - 8px);
   overflow-x: hidden;
@@ -176,7 +176,7 @@
   box-shadow: var(--shadow-floating);
 }
 .slash[data-above] { translate: 0 -100%; }
-.slashBody { padding: 6px; }
+.slashBody { padding: var(--space-related); }
 .slashList { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
 .slashHighlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
 .slashOption {
@@ -184,8 +184,8 @@
   display: flex;
   height: 34px;
   align-items: center;
-  gap: 10px;
-  padding: 0 10px;
+  gap: var(--space-group);
+  padding: 0 var(--space-group);
   border-radius: var(--radius-control);
   color: var(--text-secondary);
   cursor: pointer;

package/components/ridgeline/ridgeline.module.css

@@ -35,19 +35,19 @@
 
 .message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
 
-.tooltip { position: absolute; top: 0; left: 0; z-index: 2; display: grid; min-width: 170px; max-width: min(240px, 100%); gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
+.tooltip { position: absolute; top: 0; left: 0; z-index: 2; display: grid; min-width: 170px; max-width: min(240px, 100%); gap: var(--space-hair); padding: var(--space-group) var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
 .plot[data-active] .tooltip { opacity: 1; scale: 1; }
-.tipTitle { margin: 0 0 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
-.tipValue, .tipRow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tipTitle { margin: 0 0 var(--space-hair); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
+.tipValue, .tipRow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-group); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .tipValue { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; }
 .tipRow { color: var(--foreground); font-size: var(--text-xs); line-height: var(--leading-body); }
 .tipKey { color: var(--text-muted); font-weight: 400; }
 .tipValue .tipKey { font-size: var(--text-xs); }
-.tipNote { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
+.tipNote { margin: var(--space-tight) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
 
-.scale { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
-.scaleLabel { margin-right: 4px; color: var(--text-secondary); }
-.steps { display: inline-flex; gap: 2px; }
+.scale { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-related); margin-top: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
+.scaleLabel { margin-right: var(--space-tight); color: var(--text-secondary); }
+.steps { display: inline-flex; gap: var(--space-hair); }
 .step { width: 18px; height: 10px; border-radius: var(--radius-detail); background: var(--ridge); }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/scroll-area/scroll-area.module.css

@@ -40,10 +40,10 @@
   touch-action: none;
   transition: opacity var(--duration-considered) var(--ease-standard);
 }
-.track[data-axis="y"] { top: 3px; right: 1px; bottom: 3px; width: 11px; }
-.track[data-axis="x"] { right: 3px; bottom: 1px; left: 3px; height: 11px; }
-.root[data-orientation="both"] > .track[data-axis="y"] { bottom: 13px; }
-.root[data-orientation="both"] > .track[data-axis="x"] { right: 13px; }
+.track[data-axis="y"] { top: var(--space-tight); right: 1px; bottom: var(--space-tight); width: 11px; }
+.track[data-axis="x"] { right: var(--space-tight); bottom: 1px; left: var(--space-tight); height: 11px; }
+.root[data-orientation="both"] > .track[data-axis="y"] { bottom: var(--space-group); }
+.root[data-orientation="both"] > .track[data-axis="x"] { right: var(--space-group); }
 .track[data-hidden] { display: none; }
 
 .thumb { position: absolute; top: 0; left: 0; will-change: transform; }
@@ -56,8 +56,8 @@
   background: color-mix(in oklab, var(--foreground) 30%, transparent);
   transition: width var(--duration-fast) var(--ease-standard), height var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
 }
-.track[data-axis="y"] .thumb::after { top: 0; right: 3px; bottom: 0; width: 5px; }
-.track[data-axis="x"] .thumb::after { right: 0; bottom: 3px; left: 0; height: 5px; }
+.track[data-axis="y"] .thumb::after { top: 0; right: var(--space-tight); bottom: 0; width: 5px; }
+.track[data-axis="x"] .thumb::after { right: 0; bottom: var(--space-tight); left: 0; height: 5px; }
 
 /* Visible while scrolling, while the pointer is over the area, and always when asked. Appearing is quick; leaving lingers. */
 .root[data-scrolling] > .track,
@@ -69,9 +69,9 @@
   .track:hover .thumb::after,
   .root[data-dragging] .thumb::after { background: color-mix(in oklab, var(--foreground) 46%, transparent); }
   .track[data-axis="y"]:hover .thumb::after,
-  .root[data-dragging="y"] .track[data-axis="y"] .thumb::after { width: 7px; right: 2px; }
+  .root[data-dragging="y"] .track[data-axis="y"] .thumb::after { width: 7px; right: var(--space-hair); }
   .track[data-axis="x"]:hover .thumb::after,
-  .root[data-dragging="x"] .track[data-axis="x"] .thumb::after { height: 7px; bottom: 2px; }
+  .root[data-dragging="x"] .track[data-axis="x"] .thumb::after { height: 7px; bottom: var(--space-hair); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/components/segmented-control/segmented-control.d.ts

@@ -11,6 +11,8 @@ export interface SegmentedControlProps {
     label?: string;
     /** Called when the pointer or focus reaches an option, before it is chosen. Use it to start loading what that option shows. */
     onOptionIntent?: (value: string) => void;
+    /** `sm` (default) or `xs`, a compact 24px control for dense UI such as an Edit/Read toggle in a toolbar. */
+    size?: "sm" | "xs";
     className?: string;
 }
-export default function SegmentedControl({ options, value, onValueChange, label, onOptionIntent, className }: SegmentedControlProps): import("react").JSX.Element;
+export default function SegmentedControl({ options, value, onValueChange, label, onOptionIntent, size, className }: SegmentedControlProps): import("react").JSX.Element;

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, className }) {
+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, 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,15 +1,20 @@
 /* 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: 2px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px; 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; }
 /* Items never scale or change weight; only the highlight travels and the label color follows it. */
-.button { position: relative; flex: 0 0 auto; min-height: var(--control-height-sm); border: 0; border-radius: calc(var(--radius-control) - 4px); padding: 0 12px; 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); }
+.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: 6px; }
-@media (max-width: 380px) { .button { padding: 0 10px; } }
+.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. */
+.root[data-size="xs"] .track { padding: var(--space-hair); }
+.root[data-size="xs"] .button { min-height: var(--control-height-xs); padding: 0 var(--space-related); font-size: var(--text-xs); }
+@media (max-width: 380px) { .button { padding: 0 var(--space-group); } }
 @media (prefers-reduced-motion: reduce) { .button { transition: none; } }