@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

package/components/command-palette/command-palette.module.css

@@ -13,8 +13,8 @@
   display: flex;
   min-height: 54px;
   align-items: center;
-  gap: 10px;
-  padding: 8px 14px;
+  gap: var(--space-group);
+  padding: var(--space-related) var(--space-inset);
   border-bottom: 1px solid var(--border-subtle);
   transition: background var(--duration-fast) var(--ease-standard);
 }
@@ -42,51 +42,51 @@
   font-variant-numeric: tabular-nums;
 }
 
-.commandKey { min-width: 38px; height: 24px; padding: 0 6px; gap: 2px; }
+.commandKey { min-width: 38px; height: 24px; padding: 0 var(--space-related); gap: var(--space-hair); }
 .clearButton { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .clearButton:hover, .closeButton:hover { background: var(--surface); color: var(--foreground); } }
 .clearButton:active, .closeButton:active { background: var(--surface); color: var(--foreground); }
-.closeButton { display: grid; min-width: 27px; height: 24px; flex: none; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-detail); background: transparent; color: var(--text-muted); padding: 0 6px; font: inherit; font-size: var(--text-xs); font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.closeButton { display: grid; min-width: 27px; height: 24px; flex: none; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-detail); background: transparent; color: var(--text-muted); padding: 0 var(--space-related); font: inherit; font-size: var(--text-xs); font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 
 /* The frame animates to the list height; the list keeps its own scroll. */
 .resultsFrame { overflow: hidden; }
-.results { position: relative; max-height: 342px; overflow: auto; padding: 6px 8px; }
-.highlight { position: absolute; top: 0; right: 8px; left: 8px; border-radius: var(--radius-detail); background: var(--surface-muted); opacity: 0; pointer-events: none; }
+.results { position: relative; max-height: 342px; overflow: auto; padding: var(--space-related) var(--space-related); }
+.highlight { position: absolute; top: 0; right: var(--space-related); left: var(--space-related); border-radius: var(--radius-detail); background: var(--surface-muted); opacity: 0; pointer-events: none; }
 /* Groups are positioned so a row that pops out of the flow is placed against the same box it was measured in, even mid-glide. */
 .group { position: relative; }
-.group + .group { margin-top: 6px; }
-.groupHeading { display: block; padding: 6px 8px 3px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+.group + .group { margin-top: var(--space-related); }
+.groupHeading { display: block; padding: var(--space-related) var(--space-related) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
 
 /* One line per result: the title, then its description in muted text, so the list stays short and scannable. */
-.result { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-detail); padding: 0 8px; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.result { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: var(--space-group); border: 0; border-radius: var(--radius-detail); padding: 0 var(--space-related); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
 /* The active row is drawn by the shared highlight; the row itself only tints its icon and arrow. */
 .itemIcon { transition: color var(--duration-fast) var(--ease-standard); }
 .itemIcon { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--text-muted); }
 .itemIcon svg { width: 16px; height: 16px; }
-.resultCopy { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: 8px; }
+.resultCopy { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: var(--space-related); }
 .resultCopy strong, .resultCopy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .resultCopy strong { flex: none; max-width: 100%; }
 .resultCopy small { min-width: 0; }
 .resultCopy strong { font-size: var(--text-sm); font-weight: 500; }
 .resultCopy small { color: var(--text-muted); font-size: var(--text-xs); }
-.shortcut { min-width: 18px; height: 18px; padding: 0 4px; border-color: transparent; border-radius: var(--radius-detail); font-size: 11px; }
+.shortcut { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-color: transparent; border-radius: var(--radius-detail); font-size: var(--text-xs); }
 .activeResult .itemIcon { color: var(--foreground); }
-.empty { display: grid; justify-items: center; gap: 4px; padding: 26px 12px 28px; text-align: center; }
-.empty > span { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 5px; color: var(--text-muted); }
+.empty { display: grid; justify-items: center; gap: var(--space-tight); padding: var(--space-section) var(--space-group) var(--space-block); text-align: center; }
+.empty > span { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: var(--space-tight); color: var(--text-muted); }
 .empty strong { font-size: var(--text-sm); font-weight: 500; }
 .empty small { color: var(--text-muted); font-size: var(--text-xs); }
 .visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 @media (max-width: 480px) {
-  .searchRow { gap: 8px; padding: 8px 11px; }
-  .results { padding: 6px; }
-  .highlight { right: 6px; left: 6px; }
-  .result { gap: 8px; }
+  .searchRow { gap: var(--space-related); padding: var(--space-related) var(--space-group); }
+  .results { padding: var(--space-related); }
+  .highlight { right: var(--space-related); left: var(--space-related); }
+  .result { gap: var(--space-related); }
   .shortcut, .commandKey { display: none; }
   }
 
 @media (max-width: 340px) {
-    .result { padding-inline: 6px; }
+    .result { padding-inline: var(--space-related); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/components/comment-thread/comment-thread.module.css

@@ -18,7 +18,7 @@
 
 /* Header */
 .thread { display: grid; }
-.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px 18px; }
+.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); padding: var(--space-group) var(--space-group) var(--space-related) var(--space-comfort); }
 .heading { display: grid; min-width: 0; }
 .title { margin: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
 .subtitle { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
@@ -28,8 +28,8 @@
   height: 32px;
   flex: none;
   align-items: center;
-  gap: 6px;
-  padding: 0 12px 0 10px;
+  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);
@@ -46,32 +46,32 @@
 
 /* Comments */
 .list, .replies { display: grid; margin: 0; padding: 0; list-style: none; }
-.list { padding: 0 8px; }
+.list { padding: 0 var(--space-related); }
 .item { overflow: clip; overflow-clip-margin: 4px; }
 .repliesWrap { overflow: clip; }
 /* Replies hang from a quiet rail under their parent's avatar. */
-.replies { position: relative; margin-left: 24px; padding-left: 12px; }
-.replies::before { content: ""; position: absolute; top: 2px; bottom: 14px; left: 0; width: 1px; background: var(--border); }
+.replies { position: relative; margin-left: var(--space-section); padding-left: var(--space-group); }
+.replies::before { content: ""; position: absolute; top: var(--space-hair); bottom: var(--space-inset); left: 0; width: 1px; background: var(--border); }
 
-.comment { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
+.comment { display: flex; gap: var(--space-group); padding: var(--space-group); border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
 .avatar { display: inline-grid; flex: none; place-items: center; overflow: hidden; border-radius: 50%; corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; object-fit: cover; }
 .deletedDot { width: 28px; height: 28px; flex: none; border: 1px dashed var(--border-strong); border-radius: 50%; corner-shape: round; }
-.main { display: grid; min-width: 0; flex: 1; gap: 2px; }
-.meta { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
+.main { display: grid; min-width: 0; flex: 1; gap: var(--space-hair); }
+.meta { display: flex; min-width: 0; align-items: baseline; gap: var(--space-related); }
 .name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
 .time { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
 .body { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; text-wrap: pretty; }
 .mention { color: var(--accent-strong); font-weight: 500; }
-.deleted { margin: 4px 0 0; color: var(--text-muted); font-style: italic; }
+.deleted { margin: var(--space-tight) 0 0; color: var(--text-muted); font-style: italic; }
 
-.footer { display: flex; min-height: 30px; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
-.reactions { display: flex; flex-wrap: wrap; gap: 4px; }
+.footer { display: flex; min-height: 30px; flex-wrap: wrap; align-items: center; gap: var(--space-tight) var(--space-related); margin-top: var(--space-tight); }
+.reactions { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
 .reaction {
   display: inline-flex;
   height: 26px;
   align-items: center;
-  gap: 5px;
-  padding: 0 9px 0 7px;
+  gap: var(--space-tight);
+  padding: 0 var(--space-related) 0 var(--space-related);
   border: 1px solid var(--border);
   border-radius: var(--radius-full); corner-shape: round;
   background: var(--surface);
@@ -88,14 +88,14 @@
 .count > span { grid-area: 1 / 1; }
 
 /* Actions sit quietly after the reactions and come forward on hover or focus; touch screens always show them. */
-.actions { display: flex; min-height: 28px; flex-wrap: wrap; align-items: center; gap: 2px; transition: opacity var(--duration-fast) var(--ease-standard); }
+.actions { display: flex; min-height: 28px; flex-wrap: wrap; align-items: center; gap: var(--space-hair); transition: opacity var(--duration-fast) var(--ease-standard); }
 .action,
 .iconAction {
   display: inline-flex;
   height: 28px;
   align-items: center;
   justify-content: center;
-  padding: 0 8px;
+  padding: 0 var(--space-related);
   border: 0;
   border-radius: var(--radius-full); corner-shape: round;
   background: transparent;
@@ -109,34 +109,34 @@
 }
 .iconAction { width: 28px; padding: 0; }
 .action[data-tone="danger"] { color: var(--danger); }
-.prompt { margin-right: 4px; color: var(--foreground); font-size: var(--text-xs); }
+.prompt { margin-right: var(--space-tight); color: var(--foreground); font-size: var(--text-xs); }
 .emoji { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; cursor: pointer; font-size: var(--text-base); line-height: 1; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .emoji[aria-pressed="true"] { background: var(--accent-subtle); }
 .emoji:active { transform: scale(.88); }
 
-.toggle { display: inline-flex; width: fit-content; height: 28px; align-items: center; gap: 6px; margin: 2px 0 0 -6px; padding: 0 8px 0 6px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard); }
+.toggle { display: inline-flex; width: fit-content; height: 28px; align-items: center; gap: var(--space-related); margin: var(--space-hair) 0 0 calc(var(--space-related) * -1); padding: 0 var(--space-related) 0 var(--space-related); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard); }
 .toggleIcon { display: grid; place-items: center; color: var(--text-muted); }
-.stack { display: inline-flex; flex: none; padding-left: 4px; }
-.stack > * { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }
+.stack { display: inline-flex; flex: none; padding-left: var(--space-tight); }
+.stack > * { margin-left: calc(var(--space-tight) * -1); box-shadow: 0 0 0 2px var(--surface); }
 
-.empty { margin: 0; padding: 8px 18px 16px; color: var(--text-muted); }
+.empty { margin: 0; padding: var(--space-related) var(--space-comfort) var(--space-inset); color: var(--text-muted); }
 
 /* Composer */
-.composerArea { display: grid; margin-top: 4px; padding: 10px 12px 12px; border-top: 1px solid var(--border-subtle); }
+.composerArea { display: grid; margin-top: var(--space-tight); padding: var(--space-group) var(--space-group) var(--space-group); border-top: 1px solid var(--border-subtle); }
 .replying { overflow: clip; }
-.replyingInner { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px 38px; color: var(--text-secondary); font-size: var(--text-xs); }
-.replyingInner .iconAction { width: 22px; height: 22px; margin-left: 2px; }
+.replyingInner { display: flex; align-items: center; gap: var(--space-related); padding: 0 var(--space-hair) var(--space-related) var(--space-block); color: var(--text-secondary); font-size: var(--text-xs); }
+.replyingInner .iconAction { width: 22px; height: 22px; margin-left: var(--space-hair); }
 .replyingName { color: var(--foreground); font-weight: 500; }
 
-.composer { display: grid; align-items: start; gap: 8px 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
-.composer > .avatar { margin-top: 5px; }
-.composer[data-compact] { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
+.composer { display: grid; align-items: start; gap: var(--space-related) var(--space-group); grid-template-columns: auto minmax(0, 1fr) auto; }
+.composer > .avatar { margin-top: var(--space-tight); }
+.composer[data-compact] { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-tight); }
 .fieldWrap { display: grid; min-width: 0; }
 .field {
   width: 100%;
   min-height: 38px;
   max-height: 160px;
-  padding: 8px 12px;
+  padding: var(--space-related) var(--space-group);
   border: 1px solid var(--border);
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   background: var(--surface);
@@ -148,22 +148,22 @@
 }
 .field::placeholder { color: var(--text-muted); }
 .field:focus { border-color: var(--border-strong); }
-.composerActions { display: flex; align-items: center; gap: 4px; }
+.composerActions { display: flex; align-items: center; gap: var(--space-tight); }
 .composer[data-compact] .composerActions { justify-content: flex-end; }
 .send,
-.ghost { height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; font: inherit; font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.ghost { height: 38px; padding: 0 var(--space-inset); border: 0; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; font: inherit; font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .composer[data-compact] :is(.send, .ghost) { height: 32px; font-size: var(--text-xs); }
 .send { background: var(--foreground); color: var(--background); }
 .send:disabled { opacity: .35; cursor: default; }
 .send:active:not(:disabled), .ghost:active { transform: scale(.97); }
 .ghost { background: transparent; color: var(--text-secondary); }
 
-.suggestions { display: grid; margin: 6px 0 0; padding: 4px; overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); list-style: none; }
-.suggestion { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); cursor: pointer; }
+.suggestions { display: grid; margin: var(--space-related) 0 0; padding: var(--space-tight); overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); list-style: none; }
+.suggestion { display: flex; align-items: center; gap: var(--space-related); min-height: 32px; padding: 0 var(--space-related); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); cursor: pointer; }
 .suggestion[aria-selected="true"] { background: var(--surface-muted); }
 
 /* Resolved chip */
-.resolved { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; }
+.resolved { display: flex; align-items: center; gap: var(--space-group); padding: var(--space-group) var(--space-group) var(--space-group) var(--space-inset); }
 .resolvedIcon { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; corner-shape: round; background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
 .resolvedText { display: grid; min-width: 0; flex: 1; }
 .resolvedTitle { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
@@ -186,8 +186,8 @@
 @media (max-width: 420px) {
   .composer { grid-template-columns: minmax(0, 1fr) auto; }
   .composer > .avatar { display: none; }
-  .replyingInner { padding-left: 2px; }
-  .replies { margin-left: 12px; }
+  .replyingInner { padding-left: var(--space-hair); }
+  .replies { margin-left: var(--space-group); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/components/confirm-morph/confirm-morph.js

@@ -34,9 +34,9 @@ const faceVariants = {
 };
 const partVariants = {
     hidden: { opacity: 0, filter: `blur(${blur.soft}px)` },
-    shown: { opacity: 1, filter: "blur(0px)", transition: { duration: .26, ease: enter } },
+    shown: { opacity: 1, filter: "blur(0px)", transition: { duration: motionTokens.duration.exit, ease: enter } },
 };
-const reducedFace = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .14 } }, gone: { opacity: 0, transition: { duration: .1 } } };
+const reducedFace = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.fast } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 const reducedPart = { hidden: { opacity: 1 }, shown: { opacity: 1 } };
 function Face({ id, reduced, onSize, children, labelledBy }) {
     const ref = useRef(null);
@@ -61,7 +61,7 @@ function Part({ reduced, className, children }) {
 }
 /** A success disc that pops in with a tick drawing across it, the moment the action lands. */
 function Check({ reduced }) {
-    return _jsxs("svg", { className: styles.check, viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx(motion.circle, { className: styles.checkDisc, cx: "9", cy: "9", r: "8", style: { transformOrigin: "9px 9px" }, initial: reduced ? false : { scale: .5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { scale: physical(motionTokens.spring.snappy), opacity: { duration: .12 } } }), _jsx(motion.path, { className: styles.checkTick, d: "M5.6 9.3 7.8 11.4 12.4 6.7", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: reduced ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: .3, ease: enter, delay: .14 } })] });
+    return _jsxs("svg", { className: styles.check, viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx(motion.circle, { className: styles.checkDisc, cx: "9", cy: "9", r: "8", style: { transformOrigin: "9px 9px" }, initial: reduced ? false : { scale: .5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { scale: physical(motionTokens.spring.snappy), opacity: { duration: motionTokens.duration.instant } } }), _jsx(motion.path, { className: styles.checkTick, d: "M5.6 9.3 7.8 11.4 12.4 6.7", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: reduced ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: .3, ease: enter, delay: .14 } })] });
 }
 /** A ring that drains with the countdown. */
 function Ring({ progress }) {
@@ -69,7 +69,7 @@ function Ring({ progress }) {
 }
 /** Seconds that swap in place: the old digit fades up and out, the new one rises in, on tabular figures so the width holds. */
 function Seconds({ value, reduced }) {
-    return _jsx("span", { className: styles.seconds, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.digit, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -6, filter: `blur(${blur.subtle}px)` }, transition: { duration: .22, ease: enter }, children: value }, value) }) });
+    return _jsx("span", { className: styles.seconds, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.digit, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -6, filter: `blur(${blur.subtle}px)` }, transition: { duration: motionTokens.duration.exit, ease: enter }, children: value }, value) }) });
 }
 export function ConfirmMorph({ label, icon, prompt, confirmLabel = "Delete", cancelLabel = "Cancel", pendingLabel = "Deleting", doneLabel = "Deleted", errorLabel = "Couldn’t finish", retryLabel = "Retry", undoLabel = "Undo", undoingLabel = "Restoring", tone = "danger", confirmMode = "press", holdDuration = 1000, countdown = 3, countdownLabel, onConfirm, onUndo, onCancel, state: stateProp, defaultState = "idle", onStateChange, confirmTimeout = 6000, resultTimeout = 5000, cancelOnOutsidePress = true, disabled = false, className, ref, }) {
     const reduced = useReducedFlag();
@@ -252,7 +252,7 @@ export function ConfirmMorph({ label, icon, prompt, confirmLabel = "Delete", can
         holding.current = null;
         control.stop();
         if (hold.get() < 1) {
-            animate(hold, 0, reduced ? { duration: 0 } : { type: "spring", visualDuration: .3, bounce: 0 });
+            animate(hold, 0, reduced ? { duration: 0 } : { type: "spring", visualDuration: motionTokens.spring.fast.visualDuration, bounce: 0 });
             setAnnouncement(`Keep holding to ${confirmLabel.toLowerCase()}`);
         }
     };

package/components/confirm-morph/confirm-morph.module.css

@@ -34,7 +34,7 @@
 .root[data-disabled][data-state="idle"] .surface { box-shadow: none; }
 .root[data-disabled][data-state="idle"] .surface::after { border-color: var(--border-subtle); }
 
-.face { display: flex; flex: none; height: 100%; align-items: center; gap: 2px; padding: 0 4px; white-space: nowrap; }
+.face { display: flex; flex: none; height: 100%; align-items: center; gap: var(--space-hair); padding: 0 var(--space-tight); white-space: nowrap; }
 .face[data-face="idle"] { padding: 0; }
 /* A leaving face steps out of the flow, exactly where it was, and fades while the pill springs to the next one. */
 .face[inert] { position: absolute; top: 0; inset-inline-start: 0; pointer-events: none; }
@@ -44,8 +44,8 @@
   display: inline-flex;
   height: 100%;
   align-items: center;
-  gap: 8px;
-  padding: 0 16px 0 14px;
+  gap: var(--space-related);
+  padding: 0 var(--space-inset) 0 var(--space-inset);
   border: 0;
   border-radius: var(--radius-full); corner-shape: round;
   background: transparent;
@@ -62,7 +62,7 @@
 .trigger:disabled .icon { color: inherit; }
 .icon > svg { width: 16px; height: 16px; }
 
-.prompt { max-width: 16rem; overflow: hidden; padding: 0 8px 0 12px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
+.prompt { max-width: 16rem; overflow: hidden; padding: 0 var(--space-related) 0 var(--space-group); color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
 .prompt > span { overflow: hidden; text-overflow: ellipsis; }
 
 .secondary,
@@ -73,7 +73,7 @@
   height: calc(var(--control-height-sm) - 8px);
   align-items: center;
   justify-content: center;
-  padding: 0 12px;
+  padding: 0 var(--space-group);
   border: 0;
   border-radius: var(--radius-full); corner-shape: round;
   cursor: pointer;
@@ -97,12 +97,12 @@
 .fill { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: var(--background); pointer-events: none; }
 .root[data-tone="neutral"] .fill { background: var(--accent-strong); color: var(--accent-foreground); }
 
-.status { gap: 8px; padding: 0 10px 0 12px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
+.status { gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-group); color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
 .status > svg { flex: none; }
 .statusText { display: inline-flex; align-items: baseline; gap: .25em; }
-.face[data-face="pending"] .status { padding-inline: 12px 16px; color: var(--text-secondary); }
-.face[data-face="done"]:not(:has(.secondary)) .status { padding-right: 14px; }
-.face[data-face="counting"] .status { padding-right: 6px; color: var(--text-secondary); }
+.face[data-face="pending"] .status { padding-inline: var(--space-group) var(--space-inset); color: var(--text-secondary); }
+.face[data-face="done"]:not(:has(.secondary)) .status { padding-right: var(--space-inset); }
+.face[data-face="counting"] .status { padding-right: var(--space-related); color: var(--text-secondary); }
 .alert { color: var(--danger); }
 .check { width: 18px; height: 18px; }
 .checkDisc { fill: var(--success); }

package/components/context-menu/context-menu.js

@@ -5,6 +5,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { Check, Copy, MoreHorizontal, Trash2 } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
 import styles from "./context-menu.module.css";
 const MENU_WIDTH = 208;
 // Keeps the menu 8px inside the viewport. Rows are 34px with 5px padding and a 1px border; the real size is measured before paint.
@@ -22,11 +23,10 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
     // Each open gets its own key, so reopening at a new point fades the old menu out in place
     // and grows a fresh one from the pointer instead of teleporting the visible menu.
     const [point, setPoint] = useState({ x: 0, y: 0, originX: 0, originY: 0, key: 0 });
-    const [highlight, setHighlight] = useState(null);
+    // Fluid hover: the nearest row is lit, gaps and padding included, and a click in a gap picks it.
+    const { highlight, reset, contentProps } = useMenuHighlight();
     const menuRef = useRef(null);
     const targetRef = useRef(null);
-    const pointer = useRef(false);
-    const clearTimer = useRef(0);
     // A primary press on the target while the menu is open closes it; the click that follows must not reopen it.
     const pressedWhileOpen = useRef(false);
     // An exiting menu keeps its last props, so its handlers check this before moving focus or selecting.
@@ -41,7 +41,6 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
         const next = clampTo(anchor.current.x, anchor.current.y, node.offsetWidth, node.offsetHeight);
         setPoint(current => (current.x === next.x && current.y === next.y && current.originX === next.originX && current.originY === next.originY ? current : { ...next, key: current.key }));
     }, [open, point.key]);
-    useEffect(() => () => window.clearTimeout(clearTimer.current), []);
     useEffect(() => {
         if (!open)
             return;
@@ -68,9 +67,7 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
         anchor.current = { x, y };
         const estimate = clampTo(x, y, MENU_WIDTH, Math.min(300, items.length * 34 + 12));
         setPoint(current => ({ ...estimate, key: current.key + 1 }));
-        window.clearTimeout(clearTimer.current);
-        pointer.current = false;
-        setHighlight(null);
+        reset();
         setPortal(true);
         setOpen(true);
     }
@@ -114,30 +111,15 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
             targetRef.current?.focus();
         }
     }
-    function place(item, glide) {
-        window.clearTimeout(clearTimer.current);
-        const next = { index: Number(item.dataset.index), top: item.offsetTop, height: item.offsetHeight, danger: item.dataset.tone === "danger" };
-        setHighlight(current => ({ ...next, glide: glide && current !== null }));
-    }
-    // Keyboard focus places the highlight instantly; the pointer makes it glide between rows.
+    // Keyboard focus lights its row at once. A pointer-opened menu focuses its first row without lighting it, like a native menu.
     function onMenuFocus(event) {
-        const item = event.target instanceof HTMLElement ? event.target.closest('[role="menuitem"]') : null;
-        if (item) {
-            // A pointer-opened menu focuses its first row without showing a highlight, like a native menu.
-            if (!pointer.current && item.matches(":focus-visible"))
-                place(item, false);
-            return;
-        }
-        // A short grace period keeps the highlight gliding across the gap between rows.
-        window.clearTimeout(clearTimer.current);
-        clearTimer.current = window.setTimeout(() => setHighlight(null), pointer.current ? 70 : 0);
+        if (event.target instanceof HTMLElement && event.target.matches(":focus-visible"))
+            contentProps.onFocus(event);
     }
     return _jsxs(_Fragment, { children: [_jsx("div", { ref: targetRef, className: styles.target, tabIndex: 0, onPointerDown: event => { pressedWhileOpen.current = open && event.button === 0; }, onClick: onTargetClick, onContextMenu: event => { event.preventDefault(); showMenu(event.clientX, event.clientY); }, onKeyDown: onTargetKeyDown, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, children: children }), portal ? createPortal(_jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: node => { if (node)
-                        menuRef.current = node; }, className: styles.menu, role: "menu", "aria-label": label, tabIndex: -1, style: { left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }, onKeyDown: onMenuKeyDown, onFocus: onMenuFocus, onPointerMoveCapture: () => { pointer.current = true; }, onKeyDownCapture: () => { pointer.current = false; }, onPointerLeave: event => { if (live.current)
-                        event.currentTarget.focus({ preventScroll: true }); }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.danger ? "danger" : undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: highlight?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 }, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.map((item, index) => _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, "data-index": index, "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), onPointerMove: event => { if (!live.current)
-                                return; window.clearTimeout(clearTimer.current); if (document.activeElement !== event.currentTarget)
-                                event.currentTarget.focus({ preventScroll: true }); if (highlight?.index !== index)
-                                place(event.currentTarget, true); }, onPointerLeave: () => { if (live.current)
+                        menuRef.current = node; }, className: styles.menu, role: "menu", "aria-label": label, tabIndex: -1, style: { left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }, onKeyDown: onMenuKeyDown, ...contentProps, onFocus: onMenuFocus, onPointerLeave: event => { if (live.current)
+                        event.currentTarget.focus({ preventScroll: true }); }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), items.map((item, index) => _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, "data-index": index, "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), onPointerMove: event => { if (live.current && document.activeElement !== event.currentTarget)
+                                event.currentTarget.focus({ preventScroll: true }); }, onPointerLeave: () => { if (live.current)
                                 menuRef.current?.focus({ preventScroll: true }); }, onClick: () => { if (!live.current)
                                 return; live.current = false; item.onSelect?.(); setOpen(false); targetRef.current?.focus(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon ?? (item.checked ? _jsx(Check, { size: 15 }) : _jsx(MoreHorizontal, { size: 15 })) }), _jsx("span", { children: item.label })] }, item.id))] }, point.key) }), document.body) : null] });
 }

package/components/context-menu/context-menu.module.css

@@ -1,9 +1,9 @@
 .target { display: block; outline: none; }
 /* Motion scales the menu from the pointer (transform-origin is set inline) and fades it out faster than it arrives. */
-.menu { position: fixed; z-index: 100; min-width: min(13rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: min(300px, calc(100vh - 16px)); overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); outline: none; }
-.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.menu { position: fixed; z-index: var(--layer-dropdown); min-width: min(13rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: min(300px, calc(100vh - 16px)); overflow-y: auto; padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); outline: none; }
+.highlight { position: absolute; top: 0; right: var(--space-tight); left: var(--space-tight); border-radius: calc(var(--radius-container) - var(--space-related)); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
-.item { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: 9px; padding: 0 11px; border: 0; border-radius: calc(var(--radius-container) - 6px); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; cursor: pointer; outline: none; transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-fast) var(--ease-standard); animation: context-item-in var(--duration-standard) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }
+.item { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: var(--space-related); padding: 0 var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-related)); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; cursor: pointer; outline: none; transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-fast) var(--ease-standard); animation: context-item-in var(--duration-standard) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }
 /* The gliding highlight is the focus indicator, as in the dropdown menu. */
 .item:focus-visible { outline: none; }
 /* Rows press with a tint, not a scale. */

package/components/copy-button/copy-button.js

@@ -8,9 +8,9 @@ import { useCopyFeedback } from "../../lib/use-copy-feedback.js";
 import styles from "./copy-button.module.css";
 /** Copy feedback is deliberately unhurried: a slow, almost critically damped spring and long, soft crossfades read as calm, never busy.
  *  The same motion plays in reverse when the confirmation hands back to idle, so nothing ever snaps. */
-const settle = { type: "spring", visualDuration: .5, bounce: .06 };
-const enter = { duration: .36, ease: [...motionTokens.ease.enter] };
-const leave = { duration: .2, ease: [...motionTokens.ease.standard] };
+const settle = { type: "spring", visualDuration: motionTokens.spring.slow.visualDuration, bounce: .06 };
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const leave = { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] };
 const instant = { duration: motionTokens.duration.instant };
 const soft = `blur(${motionTokens.blur.soft}px)`;
 const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
@@ -18,7 +18,7 @@ const fadeIn = { ...rest, opacity: 0 };
 const fadeOut = { opacity: 0, transition: instant };
 /** Icons trade places in one soft breath: the old glyph shrinks into a blur while the new one grows out of it on the slow spring. */
 const iconIn = { opacity: 0, scale: .6, filter: soft };
-const iconOut = { opacity: 0, scale: .6, filter: soft, transition: { duration: .24, ease: [...motionTokens.ease.standard] } };
+const iconOut = { opacity: 0, scale: .6, filter: soft, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] } };
 const iconEnter = { scale: settle, opacity: { ...enter, delay: .03 }, filter: { ...enter, delay: .03 } };
 /** Letters rise about .3em out of a soft blur; the outgoing ones lift away a little faster. */
 const glyphIn = { opacity: 0, y: 4, filter: soft };

package/components/countdown/countdown.module.css

@@ -11,21 +11,21 @@
 
 .units { display: inline-flex; align-items: flex-start; white-space: nowrap; }
 .unit { display: inline-flex; align-items: flex-start; }
-.group { display: inline-grid; justify-items: center; gap: 6px; }
+.group { display: inline-grid; justify-items: center; gap: var(--space-related); }
 .number { display: inline-flex; font-variant-numeric: tabular-nums; transition: opacity var(--duration-considered) var(--ease-standard); }
 .countdown[data-pending] .number { opacity: .3; }
 .name { color: var(--text-muted); font-size: var(--text-xs); line-height: 1; }
 .colon { color: var(--text-muted); opacity: .6; }
 
 /* Large: display digits sized to the container, so four groups fit at 320px and breathe on a wide card. */
-.countdown[data-variant="large"] .units { gap: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 12.5cqi, var(--text-5xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; }
+.countdown[data-variant="large"] .units { gap: 0; font-family: var(--font-display); font-size: clamp(var(--text-2xl), 12.5cqi, var(--text-5xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; }
 .countdown[data-variant="large"] .colon { padding-inline: .12em; line-height: 1; transform: translateY(-.06em); }
 /* On a narrow card the unit names outgrow the digits; an even column floor keeps the colons evenly spaced instead of following each name's width. */
 .countdown[data-variant="large"] .group { min-width: min(calc((100cqi - 1.6em) / 4), calc(var(--text-xs) * 4.2)); }
 .countdown[data-variant="large"] .name { font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* Compact: one line, digits then a quiet unit letter. */
-.countdown[data-variant="compact"] .units { gap: 6px; font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
+.countdown[data-variant="compact"] .units { gap: var(--space-related); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
 .countdown[data-variant="compact"] .group { display: inline-flex; align-items: baseline; gap: 1px; }
 .countdown[data-variant="compact"] .name { font-size: var(--text-sm); font-weight: 400; line-height: 1.3; }
 
@@ -36,7 +36,7 @@
 
 /* Finished: the digits give way to the label and a live mark. */
 .done { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
-.countdown[data-variant="large"] .done { font-family: var(--font-display); font-size: clamp(1.75rem, 11cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; }
+.countdown[data-variant="large"] .done { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 11cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; }
 .countdown[data-variant="compact"] .done { color: var(--success); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
 .pulse { position: relative; width: .3em; height: .3em; min-width: 8px; min-height: 8px; flex: none; border-radius: 50%; corner-shape: round; background: var(--success); }
 .pulse::after { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--success); content: ""; animation: pulse 2s var(--ease-standard) infinite; }

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

@@ -13,7 +13,7 @@ const instant = { duration: duration.instant };
 const valueRoll = {
     enter: (direction) => ({ opacity: 0, y: `${direction * 0.35}em`, filter: `blur(${blur.soft}px)` }),
     center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
-    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } }),
+    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: ease.standard } }),
 };
 /** Reduced motion keeps a short crossfade; resting values match the roll so server and client markup agree. */
 const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "blur(0px)", transition: instant }, exit: { opacity: 0, transition: instant } };
@@ -21,7 +21,7 @@ const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "
 const statusRise = {
     enter: { opacity: 0, y: "0.3em", filter: `blur(${blur.soft}px)` },
     center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
-    exit: { opacity: 0, y: "-0.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } },
+    exit: { opacity: 0, y: "-0.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: ease.standard } },
 };
 export function DatePicker({ label, value, onChange, description, placeholder = "Select a date", minDate, maxDate, disabledDates, locale = "en-US", format = { month: "short", day: "numeric", year: "numeric" }, showToday, id, className, disabled, ...buttonProps }) {
     const generatedId = useId();
@@ -96,5 +96,5 @@ export function DatePicker({ label, value, onChange, description, placeholder =
     return _jsxs("div", { className: [styles.field, className].filter(Boolean).join(" "), ref: rootRef, onBlur: onBlur, children: [_jsx("label", { className: styles.label, htmlFor: controlId, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { ...buttonProps, ref: triggerRef, id: controlId, type: "button", disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-describedby": hintId, className: styles.trigger, onClick: () => (open ? close() : show()), onKeyDown: onTriggerKeyDown, children: [_jsx(CalendarDays, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.srOnly, children: shown }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: 1, children: value ? _jsx(motion.span, { className: styles.value, custom: 1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: parts.map((part, index) => _jsx(motion.span, { className: styles.part, layout: "position", layoutDependency: time, transition: partMotion, children: part.type === "literal" ? _jsx("span", { className: styles.partValue, children: part.value }) : _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.partValue, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: part.value }, part.value) }) }, `${index}-${part.type}`)) }, "value") : _jsx(motion.span, { className: styles.placeholder, custom: -1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: placeholder }, "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: popoverRef, className: styles.popover, role: "dialog", "aria-label": `${label} calendar`, onKeyDown: (event) => { if (event.key === "Escape") {
                                 event.stopPropagation();
                                 close();
-                            } }, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: .95 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? instant : { ...spring.snappy, opacity: { duration: duration.fast, ease: ease.enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -6, scale: .97 }), transition: { duration: 0.14, ease: ease.standard } }, children: [_jsx(Calendar, { value: value, onChange: selectDate, month: month, onMonthChange: setMonth, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, locale: locale, showToday: showToday }), _jsxs("div", { className: styles.footer, children: [_jsx("button", { type: "button", onClick: () => selectDate(undefined), disabled: !value, children: "Clear" }), _jsx("span", { className: styles.status, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { variants: reduce ? valueFade : statusRise, initial: "enter", animate: "center", exit: "exit", children: value ? `Selected ${formatter.format(value)}` : "Choose a day" }, time ?? "none") }) })] })] }) })] }), description && _jsx("span", { id: hintId, className: styles.description, children: description })] });
+                            } }, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: .95 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? instant : { ...spring.snappy, opacity: { duration: duration.fast, ease: ease.enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -6, scale: .97 }), transition: { duration: motionTokens.duration.fast, ease: ease.standard } }, children: [_jsx(Calendar, { value: value, onChange: selectDate, month: month, onMonthChange: setMonth, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, locale: locale, showToday: showToday }), _jsxs("div", { className: styles.footer, children: [_jsx("button", { type: "button", onClick: () => selectDate(undefined), disabled: !value, children: "Clear" }), _jsx("span", { className: styles.status, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { variants: reduce ? valueFade : statusRise, initial: "enter", animate: "center", exit: "exit", children: value ? `Selected ${formatter.format(value)}` : "Choose a day" }, time ?? "none") }) })] })] }) })] }), description && _jsx("span", { id: hintId, className: styles.description, children: description })] });
 }

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

@@ -1,8 +1,8 @@
-.field { display: grid; gap: 7px; min-width: 0; }
+.field { display: grid; gap: var(--space-related); min-width: 0; }
 .label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .anchor { position: relative; min-width: 0; }
 /* The trigger anchors the calendar, 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: 9px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 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 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); padding: 0 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 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 { cursor: not-allowed; opacity: .5; }
@@ -17,16 +17,16 @@
 .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); }
 /* Grows out of the trigger's calendar icon and returns there on close. */
-.popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); padding: 16px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: 22px -8px; will-change: transform, opacity; }
+.popover { position: absolute; z-index: var(--layer-popover); top: calc(100% + var(--space-related)); left: 0; width: min(320px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); padding: var(--space-inset); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: 22px -8px; will-change: transform, opacity; }
 /* On phone widths the calendar matches the field instead of running past the screen edge, and a tighter inset keeps the month and its controls on one row. */
-@media (max-width: 360px) { .popover { right: 0; width: auto; padding: 12px; } }
-.footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 11px; color: var(--text-muted); font-size: var(--text-xs); }
+@media (max-width: 360px) { .popover { right: 0; width: auto; padding: var(--space-group); } }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-related); margin-top: var(--space-inset); border-top: 1px solid var(--border-subtle); padding-top: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); }
 /* Old and new status lines share one cell, pinned to the trailing edge so a shorter line never shifts. */
 .status { display: grid; min-width: 0; justify-items: end; }
 .status > span { grid-area: 1 / 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.footer button { border: 0; border-radius: var(--radius-control); padding: 4px 8px; 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), transform var(--duration-spring) var(--ease-spring); }
+.footer button { border: 0; border-radius: var(--radius-control); padding: var(--space-tight) var(--space-related); 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), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .footer button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
-.footer button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.footer button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .footer button:disabled { cursor: not-allowed; opacity: .4; }
 .description { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); transition: opacity var(--duration-fast) var(--ease-standard); }
 /* The open calendar covers the hint; fading it keeps its first letters from peeking past the popover's rounded corner. */