@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

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

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

package/components/multi-select/multi-select.module.css

@@ -2,12 +2,12 @@
 .control { position: relative; min-width: 0; }
 .label { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 /* The trigger anchors the menu, so press feedback stays in color; it never scales. */
-.trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 5px 11px 5px 12px; background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-tight) var(--space-group) var(--space-tight) var(--space-group); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
 .trigger:active:not(:disabled), .trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-muted); }
 .trigger:disabled { opacity: .5; cursor: not-allowed; }
 /* The chevron stays pinned to the trailing edge; a selection only reserves room for the clear button beside it, so nothing jumps. */
-.hasClear .chevron { margin-left: 26px; }
+.hasClear .chevron { margin-left: var(--space-section); }
 .value { position: relative; display: flex; min-width: 0; min-height: 26px; flex: 1; align-items: center; overflow: hidden; }
 .placeholder, .description { color: var(--text-muted); }
 /* The placeholder sits outside the flow so the first chip can open its slot from the leading edge. */
@@ -15,21 +15,21 @@
 /* The slot clips while its width springs open or closed; the chip keeps its natural width so the label never re-truncates mid-flight. */
 .slot { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; }
 .slot:has(.more) { flex-shrink: 0; }
-.chip, .more { box-sizing: border-box; flex: 0 0 auto; max-width: 9rem; overflow: hidden; margin-right: 5px; border-radius: var(--radius-full); corner-shape: round; padding: 4px 8px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); transition: background-color var(--duration-fast) var(--ease-standard); }
+.chip, .more { box-sizing: border-box; flex: 0 0 auto; max-width: 9rem; overflow: hidden; margin-right: var(--space-tight); border-radius: var(--radius-full); corner-shape: round; padding: var(--space-tight) var(--space-related); background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); transition: background-color var(--duration-fast) var(--ease-standard); }
 .trigger[aria-expanded="true"] .chip, .trigger[aria-expanded="true"] .more { background: var(--surface); }
 @media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) .chip, .trigger:hover:not(:disabled) .more { background: var(--surface); } }
 .more { display: inline-flex; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
 .count { display: inline-grid; }
 .count > span { grid-area: 1 / 1; }
 .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.clear { position: absolute; top: 0; bottom: 0; right: 36px; display: grid; width: 22px; height: 22px; margin: auto 0; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.clear { position: absolute; top: 0; bottom: 0; right: var(--space-block); display: grid; width: 22px; height: 22px; margin: auto 0; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .clear:hover { background: var(--surface); color: var(--foreground); } }
 .chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
 .trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
 .description { font-size: var(--text-xs); }
-.menu { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: 5px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
+.menu { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: var(--space-tight); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
 /* Arrow keys move the highlight often, so it changes almost instantly. Selection is shown by the check, not by weight, so labels never reflow. */
-.option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: calc(var(--radius-container) - 5px); corner-shape: var(--corner-shape); padding: 0 11px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
+.option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-tight)); corner-shape: var(--corner-shape); padding: 0 var(--space-group); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
 .option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .option[data-active="true"] { background: var(--surface-muted); }
 .option:disabled { opacity: .42; cursor: not-allowed; }

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

@@ -0,0 +1,64 @@
+import type { ReactNode, Ref } from "react";
+/** What NavList's onNavigate receives: the chosen row's href, or none for an action row. */
+export interface NavChoice {
+    href?: string;
+}
+export interface NavListProps {
+    /** Names the navigation for screen readers, such as "Main" or "Settings". */
+    label: string;
+    /** NavItem and NavSection elements, in order. */
+    children: ReactNode;
+    /** Placement only (width, margins, grid area); the rows' look comes from the component. */
+    className?: string;
+    /** The `<nav>` element. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * Called when any row is chosen (click, Enter or Space; link and action rows), before it navigates or acts. A notification,
+     * such as closing a phone sheet: it cannot cancel. Locked rows and modified clicks (a new tab or window) do not call it.
+     */
+    onNavigate?: (choice: NavChoice) => void;
+}
+/**
+ * A sidebar's list of destinations: a `<nav>` with a list of NavItem rows, optionally grouped by NavSection. The row nearest
+ * the pointer is lit (fluid hover), and the current page's marker glides when the page changes.
+ */
+export declare function NavList({ label, children, className, ref, onNavigate }: NavListProps): import("react").JSX.Element;
+export interface NavSectionProps {
+    /** The section's heading, such as "Workspace". */
+    label: string;
+    /** The section's NavItem rows. */
+    children: ReactNode;
+}
+/** A labelled group of NavItem rows inside a NavList. */
+export declare function NavSection({ label, children }: NavSectionProps): import("react").JSX.Element;
+interface NavItemBase {
+    /** The row's label. */
+    children: ReactNode;
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+    /** The current page: sets aria-current="page" and the active marker. */
+    active?: boolean;
+    /** Turns the row off. It stays focusable (aria-disabled) so keyboard users can reach it and hear why. */
+    disabled?: boolean;
+    /** Why the row is off, such as "Pro". Shown as a badge and read as the row's description. Only shown when disabled. */
+    reason?: string;
+    /** Content at the row's end, such as a count or an avatar. Hidden while a reason shows. */
+    trailing?: ReactNode;
+    /**
+     * Called each time the pointer enters the row or it receives focus, before it is chosen: start loading the destination
+     * (prefetch). It can fire more than once, so keep it idempotent. Not called while disabled.
+     */
+    onIntent?: () => void;
+    /** Placement only; the row's look comes from the component. */
+    className?: string;
+}
+export type NavItemProps = NavItemBase & ({
+    href: string;
+    onSelect?: never;
+} | {
+    href?: never; /** An action, such as opening search. */
+    onSelect: () => void;
+});
+/** One row of a NavList: a link by `href`, or an action by `onSelect`. */
+export declare function NavItem({ children, icon, active, disabled, reason, trailing, onIntent, className, href, onSelect }: NavItemProps): import("react").JSX.Element;
+export default NavList;

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

@@ -0,0 +1,96 @@
+"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";
+import styles from "./nav-list.module.css";
+const ITEM = "[data-nav-item]";
+const boxOf = (item) => ({ top: item.offsetTop, height: item.offsetHeight, danger: false });
+/** 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. 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 [active, setActive] = useState(null);
+    // 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; });
+    const setRoot = useCallback((node) => {
+        root.current = node;
+        if (typeof ref === "function")
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // The active marker follows the item with aria-current. It glides only when the page changes, never on first paint.
+    const measureActive = useCallback(() => {
+        const item = root.current?.querySelector(`${ITEM}[aria-current="page"]`);
+        setActive(current => {
+            if (!item)
+                return null;
+            const next = boxOf(item);
+            return current && current.top === next.top && current.height === next.height ? current : { ...next, glide: current !== null };
+        });
+    }, []);
+    useLayoutEffect(() => {
+        measureActive();
+        const node = root.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        // A resize (a late font, a collapsing section) moves the marker at once; only a page change glides.
+        const observer = new ResizeObserver(() => {
+            const item = node.querySelector(`${ITEM}[aria-current="page"]`);
+            setActive(current => {
+                if (!item)
+                    return null;
+                const next = boxOf(item);
+                return current && current.top === next.top && current.height === next.height ? current : { ...next, glide: false };
+            });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [measureActive]);
+    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(" "), ...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 }) {
+    const id = useId();
+    return (_jsxs("li", { className: styles.section, children: [_jsx("div", { id: id, className: styles.sectionLabel, children: label }), _jsx("ul", { className: styles.items, "aria-labelledby": id, children: children })] }));
+}
+/** One row of a NavList: a link by `href`, or an action by `onSelect`. */
+export function NavItem({ children, icon, active = false, disabled = false, reason, trailing, onIntent, className, href, onSelect }) {
+    const nav = useContext(NavContext);
+    const reasonId = useId();
+    const showReason = disabled && reason;
+    useLayoutEffect(() => { nav?.activeChanged(); }, [active, nav]);
+    const content = _jsxs(_Fragment, { children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.label, children: children }), showReason ? _jsx(Badge, { id: reasonId, size: "sm", className: styles.reason, "aria-hidden": "true", children: reason })
+                : trailing ? _jsx("span", { className: styles.trailing, children: trailing }) : null] });
+    const shared = {
+        className: [styles.item, className].filter(Boolean).join(" "),
+        "data-nav-item": "",
+        "aria-current": active ? "page" : undefined,
+        "aria-disabled": disabled || undefined,
+        "aria-describedby": showReason ? reasonId : undefined,
+    };
+    if (disabled) {
+        // No href and no action: it can be focused and read, but not followed.
+        return _jsx("li", { children: _jsx("span", { ...shared, role: href ? "link" : "button", tabIndex: 0, onClick: (event) => event.preventDefault(), children: content }) });
+    }
+    const intent = onIntent ? { onPointerEnter: onIntent, onFocus: onIntent } : {};
+    if (href !== undefined) {
+        // A modified click opens a new tab or window, so this page stays where it is: no choice to report.
+        const onClick = (event) => { if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey)
+            nav?.navigate({ href }); };
+        return _jsx("li", { children: _jsx(SiliconLink, { ...shared, ...intent, href: href, onClick: onClick, children: content }) });
+    }
+    return _jsx("li", { children: _jsx("button", { ...shared, ...intent, type: "button", onClick: () => { nav?.navigate({}); onSelect?.(); }, children: content }) });
+}
+export default NavList;

package/components/nav-list/nav-list.module.css

@@ -0,0 +1,25 @@
+/* The list is the positioning box for both markers, so rows measure their offsetTop against it. Place it on --background or
+   --surface; on a --surface-muted panel the hover fill has nothing to show against. */
+.list { position: relative; display: block; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+.items { display: grid; gap: var(--space-hair); margin: 0; padding: 0; list-style: none; }
+.section + .section, .items > li + .section { margin-top: var(--space-group); }
+.sectionLabel { padding: var(--space-tight) var(--space-related); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+
+/* Two markers under the rows: the current page (stronger), and the pointer's hover, which glides between rows. */
+.active, .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); pointer-events: none; }
+.active { background: var(--surface-pressed); }
+.highlight { background: var(--surface-muted); }
+
+.item { position: relative; display: flex; box-sizing: border-box; width: 100%; min-height: 2rem; align-items: center; gap: var(--space-related); margin: 0; padding: 0 var(--space-related); border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
+.item:hover, .item:focus-visible, .item[aria-current="page"] { color: var(--foreground); }
+.item[aria-current="page"] { font-weight: 500; }
+.item[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
+.icon { display: inline-flex; flex: none; color: var(--text-secondary); }
+.icon svg { width: 16px; height: 16px; }
+.item[aria-current="page"] .icon, .item:hover .icon { color: var(--foreground); }
+.item[aria-disabled="true"] .icon { color: var(--text-muted); }
+.label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trailing { display: inline-flex; flex: none; align-items: center; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.reason { flex: none; }
+
+@media (prefers-reduced-motion: reduce) { .item { transition: none; } }

package/components/notification-center/notification-center.module.css

@@ -2,8 +2,8 @@
 .trigger[data-state="open"], .trigger:active { border-color: var(--border-strong); background: var(--surface-muted); }
 @media (hover: hover) and (pointer: fine) { .trigger:hover { border-color: var(--border-strong); background: var(--surface-muted); } }
 .trigger > span:first-child { display: grid; place-items: center; }
-.badge { position: absolute; top: -6px; right: -6px; display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
-.panel { z-index: 90; display: flex; flex-direction: column; width: min(424px, calc(100vw - 24px)); max-height: min(590px, calc(100vh - 24px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); }
+.badge { position: absolute; top: calc(var(--space-related) * -1); right: calc(var(--space-related) * -1); display: grid; min-width: 20px; height: 20px; padding: 0 var(--space-tight); place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
+.panel { z-index: var(--layer-popover); display: flex; flex-direction: column; width: min(424px, calc(100vw - 24px)); max-height: min(590px, calc(100vh - 24px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); }
 /* The panel grows out of the bell: it starts a few pixels toward the trigger on whichever side Radix placed it, and leaves faster than it arrives. */
 .panel { --panel-x: 0px; --panel-y: -6px; }
 .panel[data-side="top"] { --panel-y: 6px; }
@@ -11,61 +11,61 @@
 .panel[data-side="right"] { --panel-x: -6px; --panel-y: 0px; }
 .panel[data-state="open"] { animation: panel-open var(--duration-standard) var(--ease-enter) both; }
 .panel[data-state="closed"] { animation: panel-close var(--duration-instant) var(--ease-standard) both; }
-.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 23px 24px 18px; }
+.header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-group); padding: var(--space-section) var(--space-section) var(--space-comfort); }
 .heading { display: flex; align-items: center; gap: var(--space-related); }
 .heading h2 { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.2; }
-.count { display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
-.header p { position: relative; margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
+.count { display: grid; min-width: 21px; height: 21px; padding: 0 var(--space-tight); place-items: center; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
+.header p { position: relative; margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
 .close { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
 .close:active { transform: scale(.96); }
-.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 17px 13px 20px; border-bottom: 1px solid var(--border-subtle); }
-.viewSwitch { display: inline-flex; align-items: center; gap: 3px; }
-.viewSwitch button { position: relative; isolation: isolate; min-width: 61px; height: 31px; padding: 0 10px; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
+.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); min-height: 52px; padding: 0 var(--space-inset) var(--space-group) var(--space-comfort); border-bottom: 1px solid var(--border-subtle); }
+.viewSwitch { display: inline-flex; align-items: center; gap: var(--space-tight); }
+.viewSwitch button { position: relative; isolation: isolate; min-width: 61px; height: 31px; padding: 0 var(--space-group); border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
 .viewSwitch .viewActive { color: var(--foreground); }
 .viewSwitch button > span:last-child { position: relative; z-index: 1; }
 .viewHighlight { position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); }
-.markAll { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.markAll { display: inline-flex; align-items: center; gap: var(--space-related); padding: var(--space-related) 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
 .markAll:active { transform: scale(.97); }
-.list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 11px 10px; scrollbar-width: none; }
+.list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-related) var(--space-group) var(--space-group); scrollbar-width: none; }
 .list::-webkit-scrollbar { display: none; }
 .row { overflow: hidden; }
 /* Rows settle in with a short cascade when the panel opens or a view adds them. */
-.item { position: relative; padding: 10px; border-radius: calc(var(--radius-container) - 12px); corner-shape: var(--corner-shape); transition: background var(--duration-fast) var(--ease-standard); animation: item-in var(--duration-standard) var(--ease-enter) calc(var(--index, 0) * 35ms) both; }
+.item { position: relative; padding: var(--space-group); border-radius: calc(var(--radius-container) - var(--space-group)); corner-shape: var(--corner-shape); transition: background var(--duration-fast) var(--ease-standard); animation: item-in var(--duration-standard) var(--ease-enter) calc(var(--index, 0) * 35ms) both; }
 .itemExpanded { background: var(--surface-muted); }
 .itemRead .itemTitle strong { color: var(--text-secondary); }
-.itemMain { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
+.itemMain { display: flex; align-items: flex-start; gap: var(--space-group); min-width: 0; }
 .eventIcon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--accent); }
 .eventIcon.success { color: var(--success); }
 .eventIcon.warning { color: var(--warning); }
-.itemToggle { display: grid; min-width: 0; flex: 1; gap: 4px; padding: 2px 0 0; border: 0; background: transparent; color: var(--foreground); text-align: left; font: inherit; cursor: pointer; }
-.itemTitle { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; }
+.itemToggle { display: grid; min-width: 0; flex: 1; gap: var(--space-tight); padding: var(--space-hair) 0 0; border: 0; background: transparent; color: var(--foreground); text-align: left; font: inherit; cursor: pointer; }
+.itemTitle { display: flex; align-items: center; gap: var(--space-related); min-width: 0; min-height: 20px; }
 .itemTitle strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
 .unreadDot { display: block; width: 6px; height: 6px; flex: none; border-radius: 50%; corner-shape: round; background: var(--foreground); }
 .itemPreview { overflow: hidden; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
-.time { flex: none; padding-top: 4px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.details { overflow: hidden; padding-left: 47px; }
-.details p { margin: 12px 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
-.itemActions { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 5px; }
-.itemActions button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
+.time { flex: none; padding-top: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.details { overflow: hidden; padding-left: var(--space-page); }
+.details p { margin: var(--space-group) 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
+.itemActions { display: flex; flex-wrap: wrap; gap: var(--space-related); padding-bottom: var(--space-tight); }
+.itemActions button { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-group); overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
 .itemActions button:active { transform: scale(.97); }
 /* Quick press, spring release: the resting transition above carries the spring back. */
 .close:active, .markAll:active, .itemActions button:active, .footer button:active { transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
 .morph { display: inline-flex; align-items: center; }
-.morphContent { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
+.morphContent { position: relative; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); }
 .actionIcon, .actionGlyph { position: relative; display: grid; place-items: center; }
 .swap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
 .swapLine { display: block; }
 .roll { position: relative; display: inline-grid; vertical-align: top; }
 .rollValue { display: block; }
 .emptyFrame { overflow: hidden; }
-.empty { display: grid; justify-items: center; align-content: center; min-height: 190px; padding: 22px 12px; text-align: center; }
-.empty > svg { margin-bottom: 13px; color: var(--text-muted); }
+.empty { display: grid; justify-items: center; align-content: center; min-height: 190px; padding: var(--space-section) var(--space-group); text-align: center; }
+.empty > svg { margin-bottom: var(--space-group); color: var(--text-muted); }
 .empty strong { font-size: var(--text-sm); font-weight: 500; }
-.empty p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
-.empty button { margin-top: 16px; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.empty p { margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
+.empty button { margin-top: var(--space-inset); padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
 .footerFrame { flex: none; overflow: hidden; }
-.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 22px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-xs); }
-.footer button { padding: 4px 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); min-height: 46px; padding: var(--space-related) var(--space-section); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-xs); }
+.footer button { padding: var(--space-tight) 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
 .footer button:active { transform: scale(.97); }
 @media (hover: hover) and (pointer: fine) {
   .close:hover, .item:hover { background: var(--surface-muted); }
@@ -75,5 +75,5 @@
 @keyframes panel-open { from { opacity: 0; transform: translate(var(--panel-x), var(--panel-y)) scale(.97); } }
 @keyframes panel-close { to { opacity: 0; transform: translate(calc(var(--panel-x) / 2), calc(var(--panel-y) / 2)) scale(.98); } }
 @keyframes item-in { from { opacity: 0; transform: translateY(4px); } }
-@media (max-width: 380px) { .header { padding: 20px 16px 16px; } .heading h2 { font-size: var(--text-lg); } .toolbar { align-items: flex-start; padding: 0 12px 12px; } .list { padding: 8px 5px; } .item { padding-inline: 7px; } .itemMain { gap: 7px; } .details { padding-left: 43px; } .itemActions { gap: 5px; } .itemActions button { padding-inline: 7px; } .markAll span { display: none; } .footer { padding-inline: 16px; } }
+@media (max-width: 380px) { .header { padding: var(--space-comfort) var(--space-inset) var(--space-inset); } .heading h2 { font-size: var(--text-lg); } .toolbar { align-items: flex-start; padding: 0 var(--space-group) var(--space-group); } .list { padding: var(--space-related) var(--space-tight); } .item { padding-inline: var(--space-related); } .itemMain { gap: var(--space-related); } .details { padding-left: var(--space-page); } .itemActions { gap: var(--space-tight); } .itemActions button { padding-inline: var(--space-related); } .markAll span { display: none; } .footer { padding-inline: var(--space-inset); } }
 @media (prefers-reduced-motion: reduce) { .panel[data-state], .trigger, .close, .viewSwitch button, .markAll, .item, .itemActions button, .footer button { animation: none; transition-duration: 0ms; } .close:active, .markAll:active, .itemActions button:active, .footer button:active { transform: none; } }

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

@@ -12,7 +12,7 @@
 .label[data-scrub] { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
 /* A hairline shell. Focus darkens the border only (the library draws no rings); a typed value past a limit tints it with the warning
    role instead, calm rather than alarming. Set --number-field-width to resize the shell. */
-.control { display: flex; align-items: center; width: min(100%, var(--nf-width)); min-height: var(--nf-height); gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--nf-inset); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+.control { display: flex; align-items: center; width: min(100%, var(--nf-width)); min-height: var(--nf-height); gap: var(--space-hair); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--nf-inset); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .control:hover, .field:has(.label[data-scrub]:hover) .control { border-color: var(--border-strong); } }
 .control[data-scrubbing] { border-color: var(--foreground); }
 .control:has(input:focus) { border-color: var(--foreground); }
@@ -20,13 +20,13 @@
 .control[data-warn]:has(input:focus) { border-color: color-mix(in oklab, var(--warning) 80%, var(--border)); }
 .control[data-disabled] { opacity: .5; background: var(--surface-muted); }
 /* Radius steps in by the shell's inset, so the pressed fill sits concentric with the shell. */
-.step { display: grid; width: var(--nf-step); height: var(--nf-step); flex: 0 0 var(--nf-step); place-items: center; border: 0; border-radius: calc(var(--radius-control) - var(--nf-inset) - 1px); padding: 0; background: transparent; color: var(--text-secondary); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard); }
+.step { display: grid; width: var(--nf-step); height: var(--nf-step); flex: 0 0 var(--nf-step); place-items: center; border: 0; border-radius: calc(var(--radius-control) - var(--nf-inset) - var(--space-hair)); padding: 0; background: transparent; color: var(--text-secondary); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard); }
 .icon { display: grid; place-items: center; }
 .icon svg { transition: transform var(--duration-spring) var(--ease-spring); }
 @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/otp-input/otp-input.module.css

@@ -1,7 +1,7 @@
 /* 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 { display: grid; min-width: 0; }
-.label { margin-bottom: 8px; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
-.inputs { position: relative; display: flex; width: fit-content; max-width: 100%; gap: 8px; }
+.label { margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.inputs { position: relative; display: flex; width: fit-content; max-width: 100%; gap: var(--space-related); }
 .slot { position: relative; display: grid; width: 42px; height: 48px; min-width: 0; flex: 0 1 42px; }
 /* The native text is transparent (caret stays visible); .glyph draws the digit so it can rise in. */
 .input { width: 100%; height: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: transparent; caret-color: var(--accent); font: inherit; font-size: var(--text-lg); font-variant-numeric: tabular-nums; text-align: center; outline: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
@@ -17,12 +17,12 @@
 .inputs[data-invalid="true"] .ring { border-color: var(--danger); }
 /* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
 .messageSlot { display: block; overflow: hidden; }
-.description, .error { display: block; padding-top: 8px; font-size: var(--text-xs); line-height: var(--leading-body); }
+.description, .error { display: block; padding-top: var(--space-related); font-size: var(--text-xs); line-height: var(--leading-body); }
 .description { color: var(--text-muted); }.error { color: var(--danger); }
 /* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */
 .words { position: relative; display: block; }
 .word { display: inline-block; white-space: pre; }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-@media (max-width: 360px) { .inputs { gap: 6px; }.slot { height: 44px; } }
+@media (max-width: 360px) { .inputs { gap: var(--space-related); }.slot { height: 44px; } }
 @media (forced-colors: active) { .ring { display: none; } .input:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } .input { color: CanvasText; } .glyph { display: none; } }
 @media (prefers-reduced-motion: reduce) { .input, .ring { transition: none; } }

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

@@ -2,7 +2,7 @@
 .field { display: grid; min-width: 0; }
 .field label { margin-bottom: var(--space-related); font-size: var(--text-sm); font-weight: 500; }
 /* Focus shows as a darker border only; the shell never changes size. The toggle sits with an even inset on top, bottom and right. */
-.shell { display: flex; min-height: var(--control-height-md); align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 0 calc((var(--control-height-md) - 2px - 30px) / 2) 0 var(--space-group); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+.shell { display: flex; min-height: var(--control-height-md); align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 0 calc((var(--control-height-md) - var(--space-hair) - var(--space-block)) / 2) 0 var(--space-group); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .shell:hover:not(:focus-within) { border-color: var(--foreground); } }
 .shell:focus-within { border-color: var(--foreground); }
 .shell:has(.input[aria-invalid="true"]) { border-color: var(--danger); }
@@ -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

@@ -5,7 +5,7 @@
 .field[data-level="3"], .field[data-level="4"] { --tone: var(--success); }
 .label { margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 /* The shell only transitions color; its sideways shake is a spring on transform, so the two never fight. */
-.shell { display: flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-tight); padding: 0 5px 0 var(--space-inset); border: 1px solid var(--border-strong); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+.shell { display: flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-tight); padding: 0 var(--space-tight) 0 var(--space-inset); border: 1px solid var(--border-strong); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .shell:hover:not(:focus-within) { border-color: var(--text-muted); } }
 .shell:focus-within { border-color: var(--foreground); }
 .shell:has(.input[aria-invalid="true"]) { border-color: var(--danger); }
@@ -18,31 +18,31 @@
 .input[data-reveal="hidden"] { animation: resolve-hidden var(--duration-standard) var(--ease-enter); }
 @keyframes resolve-shown { from { opacity: .35; filter: blur(2px); } }
 @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) - 5px); 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); }
+.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; }
 .error { position: relative; display: block; padding-top: var(--space-related); color: var(--danger); font-size: var(--text-xs); line-height: var(--leading-body); }
 .errorText { display: block; }
 .meterRow { display: flex; align-items: center; gap: var(--space-group); margin-top: var(--space-group); }
-.meter { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
+.meter { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-tight); }
 /* Each fill slides in from the left inside its clipped track, so the rounded ends keep their shape at every frame. */
 .segment { position: relative; height: 4px; overflow: hidden; isolation: isolate; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 .fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--tone); transition: background-color var(--duration-standard) var(--ease-standard); }
 /* A fixed slot: the meter never resizes when the word changes, and the word stays flush with the field's edge. */
 .word { position: relative; display: block; flex: 0 0 4.5rem; height: 1.4em; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-align: right; white-space: nowrap; }
 .wordText { display: inline-block; }
-.rules { display: grid; gap: 6px; margin: var(--space-inset) 0 0; padding: 0; list-style: none; }
-.rule { display: flex; min-height: 1.25rem; align-items: center; gap: 10px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); transition: color var(--duration-standard) var(--ease-standard); }
+.rules { display: grid; gap: var(--space-related); margin: var(--space-inset) 0 0; padding: 0; list-style: none; }
+.rule { display: flex; min-height: 1.25rem; align-items: center; gap: var(--space-group); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); transition: color var(--duration-standard) var(--ease-standard); }
 .rule[data-met] { color: var(--foreground); }
 .ruleLabel { min-width: 0; }
 /* The outline hands over to a faint tint while the tick draws on top; most of the color sits on the tick. */
 .mark { position: relative; display: block; width: 16px; height: 16px; flex: 0 0 16px; border: 1.25px solid var(--border-strong); border-radius: var(--radius-full); corner-shape: round; color: var(--success); transition: border-color var(--duration-fast) var(--ease-standard); }
 .rule[data-met] .mark { border-color: transparent; }
-.markFill { position: absolute; inset: -1.25px; border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--success) 16%, transparent); }
-.tick { position: absolute; inset: -1.25px; width: 16px; height: 16px; }
+.markFill { position: absolute; inset: calc(var(--space-hair) * -1); border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--success) 16%, transparent); }
+.tick { position: absolute; inset: calc(var(--space-hair) * -1); width: 16px; height: 16px; }
 .remaining { position: relative; display: block; margin-left: auto; padding-left: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .remainingText { display: inline-flex; align-items: baseline; gap: .28em; }
 .number { display: inline-flex; font-variant-numeric: tabular-nums; }