@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

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

@@ -19,8 +19,8 @@
 /* Events: a hairline through the plot, a dot in the second chart series on top, and a label when there is room for it. */
 .eventRule { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; transition: stroke var(--duration-fast) var(--ease-standard); }
 .eventRule[data-active] { stroke: var(--series-2); }
-.event { position: absolute; top: 6px; display: flex; box-sizing: border-box; min-height: 24px; align-items: center; gap: 6px; padding: 0 6px 0 0; margin-left: -12px; border: 0; background: transparent; color: var(--text-secondary); cursor: default; font: inherit; font-size: var(--text-xs); line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
-.event[data-flip] { flex-direction: row-reverse; padding: 0 0 0 6px; margin-left: 0; translate: calc(-100% + 12px) 0; }
+.event { position: absolute; top: var(--space-related); display: flex; box-sizing: border-box; min-height: 24px; align-items: center; gap: var(--space-related); padding: 0 var(--space-related) 0 0; margin-left: calc(var(--space-group) * -1); border: 0; background: transparent; color: var(--text-secondary); cursor: default; font: inherit; font-size: var(--text-xs); line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
+.event[data-flip] { flex-direction: row-reverse; padding: 0 0 0 var(--space-related); margin-left: 0; translate: calc(-100% + 12px) 0; }
 .eventDot { display: grid; width: 24px; height: 24px; flex: none; place-items: center; }
 .eventDot::before { width: 7px; height: 7px; border-radius: 50%; corner-shape: round; background: var(--series-2); box-shadow: 0 0 0 2px var(--surface); content: ""; transition: transform var(--duration-fast) var(--ease-standard); }
 .event[data-active] .eventDot::before { transform: scale(1.3); }
@@ -28,23 +28,23 @@
 .event[data-labelled] .eventLabel { opacity: 1; }
 .event[data-active] .eventLabel { color: var(--foreground); }
 
-.tooltip { position: absolute; top: 0; left: 0; z-index: 2; display: grid; min-width: 132px; max-width: min(220px, 100%); gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); 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: 132px; max-width: min(220px, 100%); gap: var(--space-hair); padding: var(--space-group) var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); 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); }
 .chart[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); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tipTitle { margin: 0 0 var(--space-hair); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
 .tipValue { margin: 0; color: var(--foreground); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
 .tipNote { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
-.tipEvent { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--foreground); font-size: var(--text-xs); line-height: var(--leading-body); }
+.tipEvent { display: flex; align-items: center; gap: var(--space-related); margin: var(--space-tight) 0 0; color: var(--foreground); font-size: var(--text-xs); line-height: var(--leading-body); }
 .tipEventDot { width: 7px; height: 7px; flex: none; border-radius: 50%; corner-shape: round; background: var(--series-2); }
 
 .message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
 
 .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
-.tick { position: absolute; left: 10px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; translate: 0 -50%; pointer-events: none; }
+.tick { position: absolute; left: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; translate: 0 -50%; pointer-events: none; }
 .axis { position: relative; grid-area: 2 / 1; min-width: 0; }
-.axisLabel { position: absolute; top: 9px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.axisLabel { position: absolute; top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 /* Overview: the whole history, with everything outside the window stepped back. */
-.strip { --strip-radius: var(--radius-detail); position: relative; grid-area: 3 / 1; min-width: 0; margin-top: 8px; border-radius: var(--strip-radius); background: color-mix(in oklab, var(--foreground) 2.5%, transparent); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
+.strip { --strip-radius: var(--radius-detail); position: relative; grid-area: 3 / 1; min-width: 0; margin-top: var(--space-related); border-radius: var(--strip-radius); background: color-mix(in oklab, var(--foreground) 2.5%, transparent); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
 /* The overview drawing is clipped to the strip's corners; the handles stay outside the clip so they can overhang the ends. */
 .strip > .svg { clip-path: inset(0 round var(--strip-radius)); }
 .overviewLine { fill: none; stroke: color-mix(in oklab, var(--foreground) 28%, var(--surface)); stroke-width: 1; stroke-linejoin: round; }
@@ -57,7 +57,7 @@
 .shade[data-edge="end"] { border-radius: 0 var(--strip-radius) var(--strip-radius) 0; }
 .window { position: absolute; top: 0; bottom: 0; border-radius: var(--strip-radius); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--series-1) 45%, transparent); cursor: grab; outline: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
 .window:active { cursor: grabbing; }
-.handle { position: absolute; top: 50%; display: grid; width: 28px; height: 44px; place-items: center; margin-left: -14px; translate: 0 -50%; cursor: ew-resize; outline: none; touch-action: none; }
+.handle { position: absolute; top: 50%; display: grid; width: 28px; height: 44px; place-items: center; margin-left: calc(var(--space-inset) * -1); translate: 0 -50%; cursor: ew-resize; outline: none; touch-action: none; }
 .grip { width: 6px; height: 22px; border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 26%, transparent), var(--shadow-resting); transition: transform var(--duration-instant) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 .handle:active .grip { transform: scaleY(1.12); }
 @media (hover: hover) and (pointer: fine) { .handle:hover .grip { transform: scaleY(1.12); } }

package/components/button/button.d.ts

@@ -1,9 +1,14 @@
 import type { ButtonHTMLAttributes } from "react";
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-export type ButtonSize = "sm" | "md" | "lg";
+/** `soft` is filled and borderless, for controls in a bar (experimental). */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "soft";
+/** `xs` (24px) is for dense UI such as tree rows and toolbars, usually icon-only with an aria-label. */
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> {
+    /** The look: `primary` (default) for the main action, `secondary` bordered, `ghost` quiet, `danger` destructive, `soft` filled for bars. */
     variant?: ButtonVariant;
+    /** Height: `xs` 24px, `sm` 36px, `md` 44px (default), `lg` 50px. */
     size?: ButtonSize;
+    /** Shows a spinner in place of the label and sets aria-busy, keeping the button's width. */
     loading?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/button/button.js

@@ -91,7 +91,9 @@ export const Button = forwardRef(function Button({ className, variant = "primary
     const anchorsLayer = (popup !== undefined && popup !== false && popup !== "false") || props.role === "combobox" || props["data-state"] !== undefined;
     const inert = disabled || loading || props["aria-disabled"] === true || props["aria-disabled"] === "true";
     const classes = [styles.button, styles[variant], styles[size], className].filter(Boolean).join(" ");
-    return (_jsxs(motion.button, { ref: setRefs, tabIndex: props.tabIndex ?? 0, className: classes, "data-variant": variant, disabled: disabled, "aria-busy": loading || undefined, custom: buttonRef, variants: pressVariants, whileTap: reduceMotion || anchorsLayer || inert ? undefined : "pressed", transition: motionTokens.spring.snappy, ...props, "aria-disabled": loading || props["aria-disabled"] || undefined, onClick: loading ? event => event.preventDefault() : onClick, children: [_jsx(AnimatePresence, { initial: false, children: loading ? _jsx(motion.span, { className: styles.loader, "aria-hidden": "true", initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: reduceMotion ? fadeOut : { ...iconOut, scale: .8 }, transition: reduceMotion ? { duration: motionTokens.duration.instant } : iconEnter, children: _jsx("span", { className: styles.spinner }) }, "loader") : null }), _jsx(motion.span, { className: [styles.labelSlot, loading ? styles.loadingLabel : ""].filter(Boolean).join(" "), style: { width }, children: _jsx("span", { ref: contentRef, className: styles.labelContent, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(LabelPhase, { icon: !/\S/.test(key.replace(/<[^>]*>/g, "")), reduced: reduceMotion, children: children }, key) }) }) })] }));
+    // An icon with no text: square at the compact size.
+    const iconOnly = !/\S/.test(key.replace(/<[^>]*>/g, ""));
+    return (_jsxs(motion.button, { ref: setRefs, tabIndex: props.tabIndex ?? 0, className: classes, "data-variant": variant, "data-icon-only": iconOnly || undefined, disabled: disabled, "aria-busy": loading || undefined, custom: buttonRef, variants: pressVariants, whileTap: reduceMotion || anchorsLayer || inert ? undefined : "pressed", transition: motionTokens.spring.snappy, ...props, "aria-disabled": loading || props["aria-disabled"] || undefined, onClick: loading ? event => event.preventDefault() : onClick, children: [_jsx(AnimatePresence, { initial: false, children: loading ? _jsx(motion.span, { className: styles.loader, "aria-hidden": "true", initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: reduceMotion ? fadeOut : { ...iconOut, scale: .8 }, transition: reduceMotion ? { duration: motionTokens.duration.instant } : iconEnter, children: _jsx("span", { className: styles.spinner }) }, "loader") : null }), _jsx(motion.span, { className: [styles.labelSlot, loading ? styles.loadingLabel : ""].filter(Boolean).join(" "), style: { width }, children: _jsx("span", { ref: contentRef, className: styles.labelContent, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(LabelPhase, { icon: !/\S/.test(key.replace(/<[^>]*>/g, "")), reduced: reduceMotion, children: children }, key) }) }) })] }));
 });
 Button.displayName = "Button";
 export default Button;

package/components/button/button.module.css

@@ -15,20 +15,29 @@
 .secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }
 .ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
 .danger { color: var(--danger); background: var(--surface); border-color: var(--border); }
+/* Filled and borderless, for controls that live in a bar (a search trigger, a toolbar, a switcher). Place it on --background or
+   --surface; on a --surface-muted panel it has no fill to show. */
+.soft { color: var(--foreground); background: var(--surface-muted); border-color: transparent; }
 /* A disabled outlined button keeps its shape and fades only its label, so it still reads as a button that is off, not as plain text. */
 .secondary:disabled, .danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
 .danger:disabled { color: color-mix(in oklab, var(--danger) 55%, var(--surface-muted)); }
-.ghost:disabled { opacity: 1; color: var(--text-muted); }
+.ghost:disabled, .soft:disabled { opacity: 1; color: var(--text-muted); }
 @media (hover: hover) and (pointer: fine) {
   .primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }
   .secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
   .ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
   .danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
+  .soft:hover:not(:disabled) { background: var(--surface-pressed); }
 }
 /* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */
 .primary:active:not(:disabled) { opacity: .84; }
 .secondary:active:not(:disabled), .ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
 .danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
+.soft:active:not(:disabled) { background: var(--surface-pressed); }
+.xs { min-height: var(--control-height-xs); gap: var(--space-tight); padding-inline: var(--space-related); font-size: var(--text-xs); }
+/* A compact icon-only button is a square, with the icon at its usual 16px. */
+.xs[data-icon-only] { min-width: var(--control-height-xs); padding-inline: 0; }
+.xs svg { width: 16px; height: 16px; }
 .sm { min-height: var(--control-height-sm); padding-inline: var(--space-group); font-size: var(--text-sm); }
 .md { min-height: var(--control-height-md); }
 .lg { min-height: var(--control-height-lg); padding-inline: var(--space-comfort); font-size: var(--text-sm); }

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

@@ -12,7 +12,7 @@
 
 /* The travelling highlight. Motion sets its box to the active segment; the visible shape sits inset so the border stays crisp. */
 .highlight { position: absolute; z-index: 0; top: 0; left: 0; pointer-events: none; }
-.highlight::before { position: absolute; inset: var(--bg-inset); border-radius: calc(var(--bg-radius) - var(--bg-inset) - 1px); corner-shape: var(--corner-shape); background: var(--bg-highlight); content: ""; transition: background-color var(--duration-fast) var(--ease-standard); }
+.highlight::before { position: absolute; inset: var(--bg-inset); border-radius: calc(var(--bg-radius) - var(--bg-inset) - var(--space-hair)); corner-shape: var(--corner-shape); background: var(--bg-highlight); content: ""; transition: background-color var(--duration-fast) var(--ease-standard); }
 .highlight[data-pressed]::before { background: var(--bg-highlight-pressed); transition-duration: var(--duration-instant); }
 
 .segment { position: relative; z-index: 1; display: inline-flex; flex: none; min-width: calc(var(--bg-h) - 2px); height: calc(var(--bg-h) - 2px); align-items: center; justify-content: center; margin: 0; padding: 0 var(--bg-pad-x); border: 0; border-radius: 0; corner-shape: round; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
@@ -29,8 +29,8 @@
 .compact .label[data-collapsible] { display: none; }
 
 /* Hairline dividers sit between segments and fade where the highlight arrives, so it never sits beside a line. */
-.segment + .segment::before { position: absolute; top: var(--bg-divider-inset); bottom: var(--bg-divider-inset); left: -.5px; width: 1px; background: var(--bg-divider); content: ""; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
-.vertical .segment + .segment::before { top: -.5px; right: var(--bg-divider-inset); bottom: auto; left: var(--bg-divider-inset); width: auto; height: 1px; }
+.segment + .segment::before { position: absolute; top: var(--bg-divider-inset); bottom: var(--bg-divider-inset); left: calc(var(--space-hair) * -1); width: 1px; background: var(--bg-divider); content: ""; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
+.vertical .segment + .segment::before { top: calc(var(--space-hair) * -1); right: var(--bg-divider-inset); bottom: auto; left: var(--bg-divider-inset); width: auto; height: 1px; }
 .segment[data-quiet]::before { opacity: 0; }
 
 /* The press answers inside the segment: content dips and springs back, the group and its neighbours stay still. */
@@ -51,7 +51,7 @@
 .phase { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
 .sizer { visibility: hidden; pointer-events: none; }
 .iconBox { display: inline-block; width: 16px; height: 16px; flex: none; }
-.sm .phase { gap: 6px; }
+.sm .phase { gap: var(--space-related); }
 .icon { display: inline-flex; flex: none; }
 .icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
 .value { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
@@ -60,7 +60,7 @@
 
 /* The menu grows from the group's edge: offset toward it, scale from the Radix origin, and leave faster than it arrives.
    Transitions instead of keyframes, so a close that interrupts the open reverses from where the menu is. */
-.menu { --menu-x: 0px; --menu-y: -5px; z-index: 60; min-width: min(13rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; 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); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu { --menu-x: 0px; --menu-y: -5px; z-index: var(--layer-dropdown); min-width: min(13rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: var(--space-tight); 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); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
 .menu[data-side="top"] { --menu-y: 5px; }
 .menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
 .menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
@@ -69,8 +69,8 @@
   .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
 }
 /* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
-.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
-.item { display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: menu-exit var(--duration-instant) linear both; pointer-events: none; }
+.item { display: flex; min-height: 36px; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); color: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
 .item[data-highlighted] { background: var(--surface-muted); }
 .item[data-disabled] { cursor: default; opacity: .45; }
 .itemIcon { display: inline-flex; flex: none; color: var(--text-secondary); }

package/components/calendar/calendar.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { animate, AnimatePresence, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import { useToday } from "../../lib/use-today.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./calendar.module.css";
 const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 const monthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
@@ -29,14 +30,14 @@ const serverSnapshot = () => false;
 export { useToday } from "../../lib/use-today.js";
 const { spring, duration, ease } = motionTokens;
 /** Months sit side by side on one strip. Rapid clicks retarget the same spring, so the strip never queues or stacks panes. */
-const stripSpring = { type: "spring", visualDuration: 0.36, bounce: 0, restDelta: 0.002 };
+const stripSpring = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, restDelta: 0.002 };
 const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
 const fromIndex = (index) => new Date(Math.floor(index / 12), ((index % 12) + 12) % 12, 1);
 /** The title crossfades in place: the old month leaves toward the side the strip travels to while the new one arrives from the other. */
 const titleSlide = {
     enter: (direction) => ({ opacity: 0, x: direction * 12 }),
     center: { opacity: 1, x: 0, transition: { duration: duration.standard, ease: ease.enter } },
-    exit: (direction) => ({ opacity: 0, x: direction * -12, transition: { duration: 0.14, ease: ease.standard } }),
+    exit: (direction) => ({ opacity: 0, x: direction * -12, transition: { duration: motionTokens.duration.fast, ease: ease.standard } }),
 };
 /** Reduced motion swaps the title in place, with no travel and no blank frame. */
 const titleFade = { enter: { opacity: 1, x: 0 }, center: { opacity: 1, x: 0, transition: { duration: 0 } }, exit: { opacity: 0, transition: { duration: 0 } } };
@@ -57,7 +58,7 @@ function SelectionDisc({ cell, reduced }) {
     useLayoutEffect(() => {
         if (!visible) {
             hidden.current = true;
-            const fade = reduced ? { duration: 0 } : { duration: 0.14, ease: ease.standard };
+            const fade = reduced ? { duration: 0 } : { duration: motionTokens.duration.fast, ease: ease.standard };
             const controls = [animate(opacity, 0, fade), animate(scale, 0.6, fade)];
             return () => controls.forEach((control) => control.stop());
         }
@@ -75,6 +76,15 @@ function SelectionDisc({ cell, reduced }) {
     }, [cell, visible, reduced, col, row, opacity, scale]);
     return _jsx(motion.span, { className: styles.highlight, style: { transform, opacity }, "aria-hidden": "true", children: _jsx("span", { className: styles.highlightFill }) });
 }
+/**
+ * Fluid hover for one month's days: one fill glides to the day nearest the pointer, under the selected disc. Unavailable
+ * days light nothing, a gap between days stays inert, and focus keeps its own ring.
+ */
+function MonthDays({ children }) {
+    const box = useRef(null);
+    const hover = useFluidHover(box, { items: `.${styles.day}`, axis: "xy", disabled: "clear", gapClick: false, followFocus: false });
+    return _jsxs("div", { ref: box, className: styles.days, ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.dayHover }), children] });
+}
 /** One month on the strip. Only the month being navigated to is focusable and exposed; the one sliding past is inert. */
 function MonthPane({ index, position, present, children }) {
     const x = useTransform(position, (value) => `calc(${(index - value) * 100}% + ${(index - value) * 16}px)`);
@@ -239,7 +249,7 @@ export function Calendar({ value, onChange, month: controlledMonth, onMonthChang
         const index = Math.round((startOfDay(value).getTime() - first.getTime()) / 864e5);
         return index >= 0 && index < 42 ? index : -1;
     };
-    const renderMonth = (paneMonth, present) => _jsxs(_Fragment, { children: [_jsx(SelectionDisc, { cell: cellOf(paneMonth), reduced: reducedMotion }), _jsx("div", { className: styles.grid, role: "grid", "aria-label": formatter.format(paneMonth), children: makeWeeks(paneMonth).map((week) => _jsx("div", { className: styles.week, role: "row", children: week.map((date) => {
+    const renderMonth = (paneMonth, present) => _jsxs(MonthDays, { children: [_jsx(SelectionDisc, { cell: cellOf(paneMonth), reduced: reducedMotion }), _jsx("div", { className: styles.grid, role: "grid", "aria-label": formatter.format(paneMonth), children: makeWeeks(paneMonth).map((week) => _jsx("div", { className: styles.week, role: "row", children: week.map((date) => {
                         const key = dateKey(date);
                         const selected = sameDay(date, value);
                         const isToday = sameDay(date, today);

package/components/calendar/calendar.module.css

@@ -1,6 +1,6 @@
 .calendar { width: min(100%, 328px); min-width: 0; color: var(--foreground); }
 /* The header is its own size container: below 260px the title takes a full row and the controls sit under it, decided by width alone so a long month name never reflows it. */
-.header { container-type: inline-size; display: grid; min-height: 34px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-bottom: 14px; }
+.header { container-type: inline-size; display: grid; min-height: 34px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-tight) var(--space-group); margin-bottom: var(--space-inset); }
 @container (max-width: 259px) { .heading, .navigation { grid-column: 1 / -1; } .navigation { justify-self: end; } }
 .heading { min-width: 0; margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
 /* The global heading rule forces a tight line-height on h2, so the title row sets its own to center with the controls. */
@@ -9,22 +9,25 @@
 .title > .titleRow { grid-area: 1 / 1; justify-self: start; }
 .titleRow { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.navigation { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-right: -6px; }
+.navigation { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-hair); margin-right: calc(var(--space-related) * -1); }
 /* Quiet header controls: a fill on hover, a short press, and a spring release. */
 .navButton, .todayButton { display: grid; height: 32px; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
 .navButton { width: 32px; }
-.todayButton { padding: 0 11px; font-size: var(--text-sm); font-weight: 500; line-height: 1; }
+.todayButton { padding: 0 var(--space-group); font-size: var(--text-sm); font-weight: 500; line-height: 1; }
 @media (hover: hover) and (pointer: fine) { .navButton:hover:not([aria-disabled]), .todayButton:hover:not([aria-disabled]) { background: var(--surface-muted); color: var(--foreground); } }
-.navButton:active:not([aria-disabled]), .todayButton:active:not([aria-disabled]) { scale: .96; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.navButton:active:not([aria-disabled]), .todayButton:active:not([aria-disabled]) { scale: .96; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .navButton[aria-disabled], .todayButton[aria-disabled] { cursor: default; opacity: .36; }
-.weekdays, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 4px; }
-.weekdays { margin-bottom: 6px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 24px; text-align: center; }
+.weekdays, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--space-tight); }
+.weekdays { margin-bottom: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 24px; text-align: center; }
 .weekdays span { min-width: 0; overflow: hidden; }
 /* Months sit on one strip inside a clipped window. Every pane shares one grid cell and has six weeks, so the height never changes. */
 .monthViewport { position: relative; display: grid; overflow: hidden; contain: paint; }
 .monthBody { position: relative; grid-area: 1 / 1; min-width: 0; will-change: transform; }
 .monthBody[inert] { pointer-events: none; }
-.grid { display: grid; row-gap: 4px; }
+/* One month's days: the hover fill and the selected disc are placed against this box. */
+.days { position: relative; }
+.dayHover { border-radius: 50%; corner-shape: round; background: var(--surface-muted); }
+.grid { display: grid; row-gap: var(--space-tight); }
 .placeholderDay { aspect-ratio: 1; }
 .day { position: relative; display: grid; width: 100%; aspect-ratio: 1; min-width: 0; place-items: center; border: 0; border-radius: 50%; corner-shape: round; padding: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard) var(--number-delay, 0ms); }
 /* The inner circle carries hover and press; the grid cell itself never moves, so the hit area stays put. */
@@ -33,13 +36,13 @@
 /* The selected disc is one element per month, one cell in size, placed by week and weekday under the day buttons. It glides on a transform, so the strip sliding around it never bends its path. Press scales the inner fill so it never fights the glide. */
 .highlight { position: absolute; top: 0; left: 0; width: calc((100% - 24px) / 7); aspect-ratio: 1; pointer-events: none; will-change: transform; }
 .highlightFill { position: absolute; inset: 0; border-radius: 50%; corner-shape: round; background: var(--accent); transition: background-color var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
-@media (hover: hover) and (pointer: fine) { .day:hover:not(:disabled):not(.selected)::before { background: var(--surface-muted); } .monthBody:has(.day.selected:hover) .highlightFill { background: var(--accent-strong); } }
-.day:active:not(:disabled)::before, .day:active:not(:disabled) .dayNumber, .monthBody:has(.day.selected:active:not(:disabled)) .highlightFill { scale: .94; transition-duration: var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .monthBody:has(.day.selected:hover) .highlightFill { background: var(--accent-strong); } }
+.day:active:not(:disabled)::before, .day:active:not(:disabled) .dayNumber, .monthBody:has(.day.selected:active:not(:disabled)) .highlightFill { scale: .94; transition-duration: var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 /* Outside days dim their number, not the button, so a disc gliding onto one keeps its full strength. */
 .day.outside { color: var(--text-muted); }
 .day.outside:not(.selected) .dayNumber { opacity: .8; }
 /* Today is a small dot under the number. It takes the number's color, so it flips with it when the disc arrives. */
-.day.today .dayNumber::after { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; corner-shape: round; background: currentColor; }
+.day.today .dayNumber::after { content: ""; position: absolute; top: calc(100% + var(--space-tight)); left: 50%; width: 4px; height: 4px; margin-left: calc(var(--space-hair) * -1); border-radius: 50%; corner-shape: round; background: currentColor; }
 .day.selected, .day.today { font-weight: 500; }
 .day.selected { color: var(--accent-foreground); }
 .day:disabled { cursor: default; color: var(--text-muted); }

package/components/card/card.js

@@ -8,14 +8,14 @@ import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./card.module.css";
 const { blur, duration, ease, spring, stagger } = motionTokens;
 /** One critically damped spring carries the surface both ways, so it never overshoots and can reverse mid-flight. Closing is a touch quicker. */
-const grow = { ...spring.smooth, visualDuration: .3 };
-const settle = { ...spring.smooth, visualDuration: .26 };
+const grow = { ...spring.smooth, visualDuration: motionTokens.spring.slow.visualDuration };
+const settle = { ...spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const RETURN_MS = 300;
 const fade = { duration: duration.instant };
 /** The photo drifts in slowly while the card is pointed at, and eases back a little faster. */
 const ZOOM = 1.04;
-const zoomIn = { duration: duration.considered * 2, ease: [...ease.standard] };
-const zoomOut = { duration: duration.considered, ease: [...ease.standard] };
+const zoomIn = { duration: duration.expressive * 2, ease: [...ease.standard] };
+const zoomOut = { duration: duration.expressive, ease: [...ease.standard] };
 /** Quick look extras arrive once the surface has mostly grown, so they never ride the stretch. */
 const reveal = { delay: duration.instant, duration: duration.standard, ease: [...ease.enter] };
 const closeIn = { delay: duration.instant, duration: duration.fast, ease: [...ease.enter] };

package/components/card/card.module.css

@@ -29,9 +29,9 @@
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .action { position: relative; z-index: 1; display: flex; flex: none; flex-wrap: wrap; gap: var(--space-group); }
 
-.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(10% 0 0 / .46); backdrop-filter: blur(7px); }
+.overlay { position: fixed; inset: 0; z-index: var(--layer-overlay); background: var(--scrim); backdrop-filter: blur(7px); }
 /* Centered with auto margins, so transform stays free for the morph. */
-.panel { position: fixed; inset: 0; z-index: 51; width: min(calc(100vw - var(--space-block)), 30rem); height: fit-content; max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: hidden auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
+.panel { position: fixed; inset: 0; z-index: var(--layer-dialog); width: min(calc(100vw - var(--space-block)), 30rem); height: fit-content; max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: hidden auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
 .panel:focus { outline: none; }
 /* Closing: the panel takes the card's box and look, so it lands exactly where the card sits and hands back without a seam. */
 .panel[data-returning] { inset: auto; top: var(--landing-top); left: var(--landing-left); width: var(--landing-width); height: var(--landing-height); max-height: none; margin: 0; overflow: hidden; border-color: var(--border); background: var(--surface); box-shadow: none; pointer-events: none; }

package/components/card-stack/card-stack.js

@@ -35,8 +35,8 @@ const unresistY = (shown) => {
 };
 const clampUnit = (value) => Math.min(1, Math.max(0, value));
 const throwSpring = { type: "spring", visualDuration: .5, bounce: 0 };
-const fadeOut = { duration: .22, delay: .12, ease: [...motionTokens.ease.standard] };
-const reducedFade = { duration: .15, ease: "linear" };
+const fadeOut = { duration: motionTokens.duration.exit, delay: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const reducedFade = { duration: motionTokens.duration.fast, ease: "linear" };
 function velocityOf(samples, now) {
     const recent = samples.filter(sample => now - sample.t <= 80);
     const first = recent[0], last = recent[recent.length - 1];

package/components/card-stack/card-stack.module.css

@@ -12,10 +12,9 @@
 .card::before { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; box-shadow: var(--shadow-floating); content: ""; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
 .card[data-dragging]::before, .card[data-flying]::before { opacity: 1; }
 .face { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; background: var(--surface); color: var(--foreground); }
-.shade { position: absolute; inset: 0; background: oklch(0% 0 0 / .035); pointer-events: none; }
-:global(:root[data-theme="dark"]) .shade { background: oklch(0% 0 0 / .22); }
+.shade { position: absolute; inset: 0; background: var(--shade); pointer-events: none; }
 
-.stamp { position: absolute; top: var(--space-inset); display: inline-flex; height: 2rem; align-items: center; gap: 6px; padding: 0 var(--space-group) 0 10px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; pointer-events: none; }
+.stamp { position: absolute; top: var(--space-inset); display: inline-flex; height: 2rem; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; pointer-events: none; }
 .stamp[data-side="right"] { left: var(--space-inset); border-color: color-mix(in oklab, var(--success) 32%, var(--border)); background: color-mix(in oklab, var(--success) 9%, var(--surface-raised)); }
 .stamp[data-side="right"] svg { color: var(--success); }
 .stamp[data-side="left"] { right: var(--space-inset); }

package/components/carousel/carousel.module.css

@@ -13,7 +13,7 @@
 /* Controls line up with the edges of the centered slide. */
 .controls { display: flex; min-width: 0; align-items: center; gap: var(--space-related); padding-inline: calc((100cqw - var(--carousel-slide)) / 2); }
 .tabs { display: flex; min-width: 0; align-items: center; }
-.tab { display: grid; height: var(--control-height-sm); flex: none; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; padding: 0 5px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.tab { display: grid; height: var(--control-height-sm); flex: none; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; padding: 0 var(--space-tight); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* Resting dots use the strong border color; the fill fades in as the pill forms, and the drain covers it from the right while rotation runs. */
 .dot { position: relative; display: block; width: 6px; height: 6px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); transition: background-color var(--duration-fast) var(--ease-standard); }
 .dotFill, .dotDrain { position: absolute; inset: 0; }
@@ -25,7 +25,7 @@
 .arrows { display: flex; flex: none; gap: var(--space-related); margin-left: auto; }
 .control { display: grid; width: var(--control-height-sm); height: var(--control-height-sm); flex: none; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0; background: var(--surface); color: var(--foreground); cursor: pointer; -webkit-tap-highlight-color: transparent; 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); }
 @media (hover: hover) and (pointer: fine) { .control:hover:not([aria-disabled="true"]) { background: var(--surface-muted); } }
-.control:active:not([aria-disabled="true"]) { transform: scale(.97); transition: transform 100ms var(--ease-standard); }
+.control:active:not([aria-disabled="true"]) { transform: scale(.97); transition: transform var(--duration-fast) var(--ease-standard); }
 .control[aria-disabled="true"] { color: var(--text-muted); cursor: default; opacity: .5; }
 .iconSlot { display: grid; width: 16px; height: 16px; place-items: center; }
 .icon { grid-area: 1 / 1; display: grid; place-items: center; }
@@ -33,7 +33,7 @@
 @container (max-width: 340px) {
   .controls { gap: var(--space-tight); padding-inline: max(0px, calc((100cqw - var(--carousel-slide)) / 2 - var(--space-related))); }
   .arrows { gap: var(--space-tight); }
-  .tab { padding: 0 4px; }
+  .tab { padding: 0 var(--space-tight); }
 }
 .visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }