@teamofsilicons/silicon-ui 0.2.0 → 0.3.0

package/README.md

@@ -40,8 +40,9 @@ components you use. Theme, accent and corners are set on `<html>`:
 `data-theme` is `light` or `dark`. `data-accent` is `neutral`, `violet`, `blue`, `green`, `amber`, `orange`,
 `coral` or `rose`. `data-corners` is `squircle` or `round`.
 
-Fonts: the tokens use `--font-geist` and `--font-inter` when set (for example by `next/font`), and fall back to
-Geist Variable, Inter Variable, then sans-serif.
+Fonts: the tokens use `--font-geist` and `--font-hanken-grotesk` when set (for example by `next/font`), and fall back
+to Geist Variable, Hanken Grotesk Variable (the names `@fontsource-variable/geist` and
+`@fontsource-variable/hanken-grotesk` register), then sans-serif. Load the fonts in the app.
 
 ## Links and images
 
@@ -71,7 +72,7 @@ export default [...yourConfig, ...siliconUi()];
 ```
 
 ```sh
-npx silicon-ui-check                    # raw spacing, radius, colour or font size in CSS modules fails
+npx silicon-ui-check                    # raw spacing, radius, colour, font size or z-index in CSS modules fails
 npx silicon-ui-check --update-baseline  # tolerate today's legacy values; only new drift fails
 ```
 

package/check.mjs

@@ -2,15 +2,18 @@
 /**
  * silicon-ui-check: keeps an app's CSS on Silicon UI's tokens.
  *
- * Fails a CSS file that sets spacing, a corner radius, a colour or a font size with a raw value instead of a token:
+ * Fails a CSS file that sets spacing, a corner radius, a colour, a font size or a stacking layer with a raw value
+ * instead of a token:
  *
  *   spacing    padding, margin, gap, inset, top/right/bottom/left, scroll-margin/padding → var(--space-*)
  *   radius     border-radius and its corners                                           → var(--radius-*)
  *   color      hex, rgb(), hsl(), oklch(), oklab(), lab(), lch(), color()              → var(--…)
  *   font-size  px or rem                                                                → var(--text-*)
+ *   z-index    10 and above (or -10 and below)                                          → var(--layer-*)
  *
  * Allowed everywhere: 0, auto, inherit and other keywords, anything inside var() (including fallbacks), and
- * font-relative or layout-relative units (em, %, ch, vw, vh, cq*). Custom property definitions (--x: …) are not
+ * font-relative or layout-relative units (em, %, ch, vw, vh, cq*). 1px and -1px are allowed in spacing: they are
+ * hairline alignments against a border, not space. z-index from -9 to 9 is a local order inside a component. Mask properties are not colours (only their alpha is used). Custom property definitions (--x: …) are not
  * checked: tokens are defined that way, in the files you list under `ignore`. The visually hidden block (.srOnly,
  * .visuallyHidden, .sr-only) and @keyframes are skipped.
  *
@@ -43,10 +46,11 @@ const LENGTH = /(?<![\w.#-])(-?(?:\d*\.)?\d+)(px|rem)\b/g;
 const COLOR = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\(/i;
 const HIDDEN = /\.(?:srOnly|visuallyHidden|sr-only|visually-hidden)\b/;
 const FIX = {
-  spacing: "use a spacing token: var(--space-tight|related|group|inset|comfort|section|block|page|stage|screen)",
+  spacing: "use a spacing token: var(--space-hair|tight|related|group|inset|comfort|section|block|page|stage|screen)",
   radius: "use a radius token: var(--radius-detail|control|container|overlay|full)",
   color: "use a colour token: var(--foreground), var(--text-secondary), var(--border), var(--accent) …",
   "font-size": "use a type token: var(--text-xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)",
+  layer: "use a layer token: var(--layer-raised|sticky|overlay|dialog|popover|dropdown|toast|tooltip); -9 to 9 is fine for order inside a component",
 };
 
 /** Removes every var(...) (with nested parentheses), so tokens and their fallbacks are never flagged. */
@@ -102,10 +106,15 @@ export function checkCss(css) {
     const bare = withoutVars(value);
     for (const [rule, pattern] of Object.entries(RULES)) {
       if (!pattern.test(property)) continue;
-      const raw = [...bare.matchAll(LENGTH)].filter(match => Number(match[1]) !== 0).map(match => match[0]);
+      const hairline = match => rule === "spacing" && match[2] === "px" && Math.abs(Number(match[1])) === 1;
+      const raw = [...bare.matchAll(LENGTH)].filter(match => Number(match[1]) !== 0 && !hairline(match)).map(match => match[0]);
       if (raw.length) problems.push({ rule, line, property, value, raw: raw.join(", ") });
     }
-    const color = bare.match(COLOR);
+    if (property === "z-index") {
+      const raw = [...bare.matchAll(/(?<![\w.-])-?\d+(?![\w.])/g)].map(match => match[0]).filter(number => Math.abs(Number(number)) >= 10);
+      if (raw.length) problems.push({ rule: "layer", line, property, value, raw: raw.join(", ") });
+    }
+    const color = /^(?:-webkit-)?mask/.test(property) ? null : bare.match(COLOR);
     if (color) problems.push({ rule: "color", line, property, value, raw: color[0] });
   }
   return problems;

package/components/activity-heatmap/activity-heatmap.module.css

@@ -13,13 +13,13 @@
 .rise { position: relative; display: inline-flex; }
 
 /* The scroller starts at its right edge on narrow screens (the most recent weeks) without script, through its writing direction. */
-.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: -6px; padding: 6px; overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
+.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: calc(var(--space-related) * -1); padding: var(--space-related); overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
 .canvas { --gap: 3px; --label: 30px; --cell: clamp(9px, calc((100cqi - var(--label) - var(--gap) * 53) / 53), 15px); --step: calc(var(--cell) + var(--gap)); direction: ltr; display: grid; width: max-content; grid-template-columns: var(--label) auto; grid-template-rows: auto auto; column-gap: var(--gap); row-gap: var(--space-related); }
 .months { position: relative; grid-row: 1; grid-column: 2; height: 1rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1rem; }
 /* Month labels glide to their new week when a range starts on a different weekday. */
 .month { position: absolute; top: 0; left: 0; white-space: nowrap; transform: translateX(calc(var(--col) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring); }
 /* Weekday labels stay pinned while a narrow grid scrolls under them. Set --heatmap-surface when the heatmap sits on another surface. */
-.weekdays { position: sticky; z-index: 1; left: -6px; display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 -6px; padding: 0 var(--gap) 0 6px; background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
+.weekdays { position: sticky; z-index: 1; left: calc(var(--space-related) * -1); display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 calc(var(--space-related) * -1); padding: 0 var(--gap) 0 var(--space-related); background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
 .weekday { display: flex; height: var(--cell); align-items: center; white-space: nowrap; line-height: 1; }
 .plot { position: relative; grid-row: 2; grid-column: 2; }
 .grid { display: grid; gap: var(--gap); outline: none; }
@@ -42,7 +42,7 @@
 @media (hover: hover) and (pointer: fine) { .cell:not([data-empty]):hover { outline-color: color-mix(in oklab, var(--foreground) 45%, transparent); } }
 
 /* The selection ring glides between days, and follows its day when the range changes. */
-.ring { position: absolute; top: -3px; left: -3px; width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + 3px); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.ring { position: absolute; top: calc(var(--space-tight) * -1); left: calc(var(--space-tight) * -1); width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + var(--space-tight)); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
 .ring[data-shown] { opacity: 1; }
 
 .legend { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); }
@@ -65,7 +65,7 @@
 
 /* One bubble for the whole grid. The outer layer glides between cells; the bubble fades and scales from its tail. */
 .tip { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
-.bubble { position: absolute; bottom: 8px; left: 0; display: block; padding: 7px 12px 8px; border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
+.bubble { position: absolute; bottom: var(--space-related); left: 0; display: block; padding: var(--space-related) var(--space-group) var(--space-related); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
 .tipBody { position: relative; display: block; overflow: clip; overflow-clip-margin: 8px; }
 .tipMeasure { position: absolute; top: 0; left: 0; display: grid; width: max-content; visibility: hidden; }
 .tipLines { display: grid; width: max-content; }

package/components/alert/alert.module.css

@@ -9,7 +9,7 @@
 .line { display: block; }
 .description { position: relative; margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
 .info .icon { color: var(--accent); } .success .icon { color: var(--success); } .warning .icon { color: var(--warning); } .danger .icon { color: var(--danger); }
-.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: -5px -6px -5px 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: calc(var(--space-tight) * -1) calc(var(--space-related) * -1) calc(var(--space-tight) * -1) 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 .dismiss:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .dismiss:hover { background: var(--surface-muted); color: var(--foreground); } }
 @media (prefers-reduced-motion: reduce) { .dismiss { transition: none; } .dismiss:active { transform: none; } }

package/components/announcement-bar/announcement-bar.module.css

@@ -2,7 +2,7 @@
 .collapse { overflow: hidden; container-type: inline-size; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* The side column mirrors the controls, so the message stays centered on the page rather than in the leftover space. */
-.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
+.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
 .bar[data-tone="inverted"] { --muted: color-mix(in oklab, var(--background) 66%, transparent); border-bottom-color: transparent; background: var(--foreground); color: var(--background); }
 
 .side { min-width: 0; }
@@ -10,11 +10,11 @@
 
 /* Faces overlap in place; the entering one reports its height and the viewport springs to it. */
 .face { position: absolute; top: 0; right: 0; left: 0; display: flex; min-height: 32px; align-items: center; justify-content: center; }
-.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; padding: 6px 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
+.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-hair) var(--space-group); margin: 0; padding: var(--space-related) 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
 .text { min-width: 0; }
 
 /* The countdown is one run of text: every cell shares the line box, so digits, colons, and the day mark sit on the message baseline. */
-.countdown { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); white-space: nowrap; }
+.countdown { display: inline-flex; align-items: baseline; gap: var(--space-related); color: var(--muted); white-space: nowrap; }
 .countdownLabel { color: inherit; }
 .time { display: inline-flex; align-items: baseline; color: var(--foreground); font-variant-numeric: tabular-nums; font-weight: 500; line-height: inherit; }
 .time[data-pending] { opacity: 0; }
@@ -28,7 +28,7 @@
 .sep { display: inline-block; padding-inline: 1px; color: var(--muted); font-feature-settings: "case"; font-weight: 400; }
 .gap { display: inline-block; width: .4em; }
 
-.cta { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
+.cta { display: inline-flex; align-items: center; gap: var(--space-tight); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
 .cta svg { transition: transform var(--duration-fast) var(--ease-standard); }
 
 .controls { display: flex; align-items: center; gap: var(--control-gap); }
@@ -50,9 +50,9 @@
 
 /* Narrow bars drop the mirror column and read from the start edge. */
 @container (max-width: 560px) {
-  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: 14px; }
+  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: var(--space-inset); }
   .face { justify-content: flex-start; }
-  .message { justify-content: flex-start; column-gap: 10px; text-align: left; }
+  .message { justify-content: flex-start; column-gap: var(--space-group); text-align: left; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/components/avatar/avatar.d.ts

@@ -1,8 +1,8 @@
 import { type HTMLAttributes } from "react";
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     name: string;
-    src?: string;
-    size?: "sm" | "md" | "lg" | "xl";
+    src?: string; /** `xs` (20px) is for dense lists such as space icons in a tree; `sm` 28, `md` 36, `lg` 48, `xl` 88. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     status?: "online" | "offline";
 }
 export declare function Avatar({ name, src, size, status, className, ...props }: AvatarProps): import("react").JSX.Element;

package/components/avatar/avatar.js

@@ -14,5 +14,5 @@ export function Avatar({ name, src, size = "md", status, className, ...props })
     useLayoutEffect(() => { const node = image.current; if (node && !node.complete)
         node.dataset.loading = ""; }, [src]);
     const showImage = src && failedSrc !== src;
-    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : "28px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
+    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : size === "sm" ? "28px" : "20px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
 }

package/components/avatar/avatar.module.css

@@ -28,7 +28,9 @@
 
 .fallback { animation: avatar-fallback-in var(--duration-standard) var(--ease-enter) both; }
 
-.sm { width: 28px; height: 28px; font-size: 10px; }
+/* Initials below the smallest type step, so two letters fit 20px. */
+.xs { width: 20px; height: 20px; font-size: calc(var(--text-xs) * .8); }
+.sm { width: 28px; height: 28px; font-size: var(--text-xs); }
 .md { width: 36px; height: 36px; }
 .lg { width: 48px; height: 48px; font-size: var(--text-sm); }
 .xl { width: 88px; height: 88px; font-size: var(--text-xl); }
@@ -45,9 +47,10 @@
   box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
 }
 
+.xs .status { width: 6px; height: 6px; border-width: 1px; }
 .sm .status { width: 8px; height: 8px; border-width: 1.5px; }
 .lg .status { width: 12px; height: 12px; }
-.xl .status { width: 14px; height: 14px; right: 4px; bottom: 4px; }
+.xl .status { width: 14px; height: 14px; right: var(--space-tight); bottom: var(--space-tight); }
 .online { background: var(--success); }
 .offline { background: var(--text-muted); }
 

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

@@ -1,18 +1,18 @@
-.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: 6px; }
+.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: var(--space-related); }
 .group.sm { --avatar-size: 28px; }
 .group.lg { --avatar-size: 48px; }
 /* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. */
 .slot { position: relative; display: inline-flex; flex: 0 0 auto; height: var(--avatar-size); align-items: center; }
 /* One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
-.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: -6px; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: calc(var(--space-related) * -1); border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
 .avatar, .overflow { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--duration-fast) var(--ease-standard); }
 .overflow { position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
 .count { display: inline-block; }
-.overflow.sm { width: 28px; height: 28px; font-size: 10px; }
+.overflow.sm { width: 28px; height: 28px; font-size: var(--text-xs); }
 .overflow.md { width: 36px; height: 36px; }
 .overflow.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
 /* The name floats above the stack, outside the layout, so showing it never moves anything. */
-.tip { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
+.tip { position: absolute; z-index: 2; bottom: calc(100% + var(--space-related)); left: 50%; padding: var(--space-tight) var(--space-related); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
 /* Pointing at the stack loosens its overlap from the center; the person under the pointer lifts with a crisp ring and names themselves, and their neighbors ease aside. */
 @media (hover: hover) and (pointer: fine) {
   .group:hover .lift { --fan: calc((var(--index) - (var(--count) - 1) / 2) * 4px); }

package/components/badge/badge.module.css

@@ -4,7 +4,7 @@
   align-items: center;
   border: 1px solid var(--badge-border, var(--border));
   border-radius: var(--radius-full); corner-shape: round;
-  padding: 0 10px;
+  padding: 0 var(--space-group);
   color: var(--badge-foreground, var(--foreground));
   background: var(--badge-background, var(--surface));
   font-size: var(--text-xs);
@@ -20,12 +20,12 @@
 @media (hover: hover) and (pointer: fine) {
   .badge:hover { border-color: color-mix(in oklab, var(--badge-color, var(--foreground)) 32%, var(--border)); background: color-mix(in oklab, var(--badge-color, var(--foreground)) 10%, var(--surface)); }
 }
-.sm { min-height: 22px; padding: 0 8px; font-size: 11px; }
+.sm { min-height: 22px; padding: 0 var(--space-related); font-size: var(--text-xs); }
 .md { font-size: var(--text-xs); }
 
 .body { display: block; }
-.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
-.sm .content { gap: 4px; }
+.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); }
+.sm .content { gap: var(--space-tight); }
 .label, .glyph { position: relative; display: inline-flex; align-items: center; }
 .text { display: block; }
 

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

@@ -1,11 +1,11 @@
 .figure { display: grid; min-width: 0; gap: var(--space-comfort); margin: 0; color: var(--foreground); }
 
 /* The headline is the readout: the average at rest, the scrubbed bar while exploring. Each line keeps its height, so swaps never move the plot. */
-.header { display: grid; min-width: 0; gap: 2px; }
+.header { display: grid; min-width: 0; gap: var(--space-hair); }
 .kind, .when { display: block; min-height: calc(1em * var(--leading-body)); font-size: var(--text-sm); line-height: var(--leading-body); }
 .kind { color: var(--text-secondary); }
 .when { color: var(--text-muted); }
-.value { display: flex; min-width: 0; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-variant-numeric: tabular-nums; }
+.value { display: flex; min-width: 0; align-items: baseline; gap: var(--space-related); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-variant-numeric: tabular-nums; }
 .unit { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; letter-spacing: var(--tracking-body); }
 .swap { position: relative; display: block; min-width: 0; }
 .swapText { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -33,12 +33,12 @@
 .chart .bar[data-active] { fill: var(--accent); }
 
 .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
-.tick, .meanLabel { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
+.tick, .meanLabel { position: absolute; top: 0; left: var(--space-group); display: block; height: 0; white-space: nowrap; pointer-events: none; }
 .tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
 .meanLabel .tickText { color: var(--foreground); font-weight: 500; }
 
 .axis { position: relative; grid-area: 2 / 1; min-width: 0; overflow: hidden; }
-.axisLabel { position: absolute; top: 8px; left: 0; 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); left: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 /* The scrubber covers the plot and its axes. Horizontal drags scrub, vertical swipes still scroll the page. */
 .scrubber { position: absolute; inset: 0; border-radius: calc(var(--radius-control) / 2); outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

package/components/billing-toggle/billing-toggle.module.css

@@ -26,14 +26,14 @@
   z-index: -1;
   border-radius: var(--radius-full); corner-shape: round;
   background: var(--surface-raised);
-  box-shadow: 0 0 0 1px var(--border-subtle), 0 1px 2px oklch(0% 0 0 / .06), 0 2px 6px oklch(0% 0 0 / .04);
+  box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-thumb);
   pointer-events: none;
 }
 .thumb { top: var(--_pad); bottom: var(--_pad); left: 0; will-change: transform, width; }
 .thumbStatic { inset: 0; }
 :global(:root[data-theme="dark"]) .thumb,
 :global(:root[data-theme="dark"]) .thumbStatic {
-  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 oklch(100% 0 0 / .05), 0 1px 2px oklch(0% 0 0 / .3);
+  box-shadow: 0 0 0 1px var(--border), var(--shadow-thumb);
 }
 
 .option {
@@ -42,7 +42,7 @@
   min-width: 0;
   height: var(--_h);
   align-items: center;
-  padding: 0 14px;
+  padding: 0 var(--space-inset);
   border: 0;
   border-radius: var(--radius-full); corner-shape: round;
   background: transparent;
@@ -55,9 +55,9 @@
   -webkit-tap-highlight-color: transparent;
 }
 .option[data-selected] { color: var(--foreground); cursor: default; }
-.option:has(.badge) { padding-right: 5px; }
-.root[data-size="lg"] .option { padding-inline: 18px; }
-.root[data-size="lg"] .option:has(.badge) { padding-right: 6px; }
+.option:has(.badge) { padding-right: var(--space-tight); }
+.root[data-size="lg"] .option { padding-inline: var(--space-comfort); }
+.root[data-size="lg"] .option:has(.badge) { padding-right: var(--space-related); }
 
 @media (hover: hover) and (pointer: fine) {
   .option:not([data-selected]):hover { color: var(--text-secondary); }
@@ -67,7 +67,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-related);
   transition: transform var(--duration-fast) var(--ease-standard);
 }
 .option:not([data-selected]):active .content { transform: scale(.97); }
@@ -79,7 +79,7 @@
   display: inline-flex;
   height: calc(var(--_h) - 10px);
   align-items: center;
-  padding: 0 8px;
+  padding: 0 var(--space-related);
   border-radius: var(--radius-full); corner-shape: round;
   background: color-mix(in oklab, var(--foreground) 6%, transparent);
   color: var(--text-secondary);
@@ -108,7 +108,7 @@
 
 /* ------------------------------------------------------------------------ Price */
 
-.price { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
+.price { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: var(--space-tight) var(--space-group); }
 .amount {
   display: inline-flex;
   align-items: flex-start;
@@ -133,7 +133,7 @@
   white-space: nowrap;
 }
 .wasSlot { display: inline-block; overflow-x: clip; }
-.was { display: inline-block; padding-right: 6px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
+.was { display: inline-block; padding-right: var(--space-related); color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
 .period { position: relative; display: inline-block; overflow-x: clip; overflow-clip-margin: 2px; }
 .periodSizer { display: inline-block; visibility: hidden; }
 .periodText { position: absolute; top: 0; left: 0; display: inline-block; }

package/components/bottom-sheet/bottom-sheet.module.css

@@ -1,6 +1,5 @@
 /* The dim follows the sheet's position in JS; only its color lives here. */
-.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(16% 0 0 / .34); }
-:global(:root[data-theme="dark"]) .overlay { background: oklch(0% 0 0 / .52); }
+.overlay { position: fixed; inset: 0; z-index: var(--layer-overlay); background: var(--scrim); }
 /* While it leaves, nothing underneath is blocked and the sheet cannot be grabbed again.
    Radix sets pointer-events: auto inline on the overlay, so only !important lets a click reach the trigger and reverse the exit. */
 .overlay[data-state="closed"], .sheet[data-state="closed"] { pointer-events: none !important; }
@@ -8,7 +7,7 @@
 /* The sheet is as tall as its largest detent plus a hidden extension below the fold; detents are translateY offsets from there. */
 .sheet {
   position: fixed;
-  z-index: 51;
+  z-index: var(--layer-dialog);
   right: 0;
   bottom: calc(var(--sheet-extension) * -1);
   left: 0;
@@ -47,9 +46,9 @@
 .headRow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-inset); }
 .headText { min-width: 0; }
 .title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
-.description { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.description { margin: var(--space-hair) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
 
-.close { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; margin-top: -2px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.close { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; margin-top: calc(var(--space-hair) * -1); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .close:hover { color: var(--foreground); border-color: var(--border-strong); } }
 .close:active { color: var(--foreground); }
 

package/components/breadcrumb/breadcrumb.d.ts

@@ -6,8 +6,14 @@ export interface BreadcrumbItem {
     onClick?: (event: MouseEvent<HTMLElement>) => void;
 }
 export interface BreadcrumbProps {
+    /** The path from the top level to the current page, which is the last item. */
     items: BreadcrumbItem[];
+    /** The navigation landmark's name (default "Breadcrumb"). */
     ariaLabel?: string;
+    /** Experimental. The most crumbs to show, at least 2. A longer path shows the first crumb, a "…" menu of the levels
+     *  between, and the last `maxItems - 1` crumbs. By default the path never collapses. */
+    maxItems?: number;
 }
-/** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */
-export declare function Breadcrumb({ items, ariaLabel }: BreadcrumbProps): import("react").JSX.Element;
+/** Crumbs present on first render stay still; crumbs added later slide in from the path before them.
+ *  With maxItems, the levels a long path hides move into a "…" menu, where they stay links. */
+export declare function Breadcrumb({ items, ariaLabel, maxItems }: BreadcrumbProps): import("react").JSX.Element;

package/components/breadcrumb/breadcrumb.js

@@ -1,19 +1,31 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight as NavArrowRight } from "lucide-react";
+import { Ellipsis, ChevronRight as NavArrowRight } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
 import { SiliconLink } from "../../lib/silicon-provider.js";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./breadcrumb.module.css";
-/** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */
-export function Breadcrumb({ items, ariaLabel = "Breadcrumb" }) {
+/** Crumbs present on first render stay still; crumbs added later slide in from the path before them.
+ *  With maxItems, the levels a long path hides move into a "…" menu, where they stay links. */
+export function Breadcrumb({ items, ariaLabel = "Breadcrumb", maxItems }) {
     const reduced = useReducedMotion() ?? false;
     const still = { duration: 0 };
     const path = items.map(item => item.label).join("/");
-    return _jsx("nav", { "aria-label": ariaLabel, children: _jsx("ol", { className: styles.list, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: items.map((item, index) => {
-                    const current = index === items.length - 1;
-                    return _jsxs(motion.li, { layout: reduced ? false : "position", layoutDependency: path, initial: reduced ? false : { opacity: 0, x: -8, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, x: -4, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], layout: motionTokens.spring.smooth }, children: [index > 0 && _jsx(NavArrowRight, { width: 14, height: 14, "aria-hidden": "true" }), !current && item.href ? _jsx(SiliconLink, { href: item.href, "data-label": item.label, onClick: item.onClick, children: item.label })
-                                : !current && item.onClick ? _jsx("button", { type: "button", "data-label": item.label, onClick: item.onClick, children: item.label })
-                                    : _jsx("span", { "aria-current": current ? "page" : undefined, "data-label": item.label, children: item.label })] }, `${item.label}-${index}`);
-                }) }) }) });
+    // The first crumb and the current page always show. Crumbs keep their index in `items` as their key, so the ones
+    // that stay visible never remount when the path collapses or grows.
+    const shown = Math.max(2, Math.floor(maxItems ?? Infinity));
+    const hidden = items.length > shown ? items.slice(1, items.length - shown + 1) : [];
+    const crumb = (key, first, children) => _jsxs(motion.li, { layout: reduced ? false : "position", layoutDependency: path, initial: reduced ? false : { opacity: 0, x: -8, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, x: -4, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], layout: motionTokens.spring.smooth }, children: [!first && _jsx(NavArrowRight, { width: 14, height: 14, "aria-hidden": "true" }), children] }, key);
+    const crumbs = items.map((item, index) => {
+        const current = index === items.length - 1;
+        return crumb(`${item.label}-${index}`, index === 0, !current && item.href ? _jsx(SiliconLink, { href: item.href, "data-label": item.label, onClick: item.onClick, children: item.label })
+            : !current && item.onClick ? _jsx("button", { type: "button", "data-label": item.label, onClick: item.onClick, children: item.label })
+                : _jsx("span", { "aria-current": current ? "page" : undefined, "data-label": item.label, children: item.label }));
+    });
+    if (hidden.length)
+        crumbs.splice(1, hidden.length, crumb("more", false, _jsxs(DropdownMenuRoot, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: styles.more, "aria-label": `Show ${hidden.length} more ${hidden.length === 1 ? "level" : "levels"}`, children: _jsx(Ellipsis, { width: 16, height: 16, "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "start", children: hidden.map((item, index) => item.href
+                        ? _jsx(DropdownMenuItem, { asChild: true, onClick: item.onClick, children: _jsx(SiliconLink, { href: item.href, children: item.label }) }, `${item.label}-${index + 1}`)
+                        : _jsx(DropdownMenuItem, { disabled: !item.onClick, onClick: item.onClick, children: item.label }, `${item.label}-${index + 1}`)) })] })));
+    return _jsx("nav", { "aria-label": ariaLabel, children: _jsx("ol", { className: styles.list, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: crumbs }) }) });
 }

package/components/breadcrumb/breadcrumb.module.css

@@ -1,12 +1,16 @@
 /* The gap between crumbs matches the gap inside one, so every chevron sits centered between its two labels. */
-.list { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
-.list li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); white-space: nowrap; }
+.list { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-hair) var(--space-related); margin: 0; padding: 0; list-style: none; }
+.list li { display: inline-flex; align-items: center; gap: var(--space-related); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); white-space: nowrap; }
 .list li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--border-strong); stroke-width: 1.75; }
 /* Each crumb reserves the width of its medium weight label, so becoming the current page never shifts the path. */
-.list a, .list li > span, .list li > button { display: inline-flex; flex-direction: column; border-radius: var(--radius-detail); padding: 4px 2px; }
+.list a, .list li > span, .list li > button { display: inline-flex; flex-direction: column; border-radius: var(--radius-detail); padding: var(--space-tight) var(--space-hair); }
 .list a::after, .list li > span::after, .list li > button::after { height: 0; overflow: hidden; content: attr(data-label); font-weight: 500; visibility: hidden; user-select: none; pointer-events: none; }
 .list li > button { border: 0; margin: 0; background: none; font: inherit; line-height: inherit; text-align: start; cursor: pointer; }
 .list a, .list li > button { color: var(--text-secondary); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
 .list [aria-current="page"] { color: var(--accent-strong); font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); }
+/* The "…" of a collapsed path: a 24px square target, accented while its menu of hidden levels is open. */
+.list .more { padding: var(--space-tight); }
+.list .more svg { width: 16px; height: 16px; stroke-width: 1.75; }
+.list .more[data-state="open"] { color: var(--accent-strong); }
 @media (hover: hover) and (pointer: fine) { .list a:hover, .list li > button:hover { color: var(--accent-strong); text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); } }
 @media (prefers-reduced-motion: reduce) { .list a, .list li > button, .list [aria-current="page"] { transition: none; } }

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;