@teamofsilicons/silicon-ui 0.2.0 → 0.4.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/animated-counter/animated-counter.js

@@ -7,7 +7,7 @@ import styles from "./animated-counter.module.css";
 const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const rise = { hidden: { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } } };
 const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
-const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.expressive };
 /** Split a formatted number into columns keyed by place value, so 999 → 1,000 keeps the ones column the ones column. */
 function partsFor(value, decimals, locale) {
     const parts = new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, numberingSystem: "latn" }).formatToParts(value);

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.js

@@ -8,7 +8,7 @@ const { spring, duration, ease, blur, stagger } = motionTokens;
 /** Motion drops inherited velocity on time-defined springs, so values that retarget mid-flight run the same springs written as stiffness and damping. */
 const physical = ({ visualDuration, bounce }, restDelta = .01) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta, restSpeed: restDelta * 2 }; };
 const settle = physical(spring.smooth);
-const grow = physical(spring.morph);
+const grow = physical(spring.expressive);
 const glide = physical(spring.snappy);
 /** The zoom runs in fractions of the plot, so it rests far below a pixel. */
 const zoom = physical(spring.smooth, .00001);

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.js

@@ -7,7 +7,7 @@ import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./billing-toggle.module.css";
 const { duration, ease, blur } = motionTokens;
 /** Critically damped: the thumb glides and lands without overshoot. */
-const glide = { type: "spring", visualDuration: 0.34, bounce: 0 };
+const glide = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0 };
 const DEFAULT_OPTIONS = [
     { value: "monthly", label: "Monthly" },
     { value: "yearly", label: "Yearly", badge: "Save 20%" },
@@ -66,7 +66,7 @@ export function BillingToggle({ value, onValueChange, options = DEFAULT_OPTIONS,
                 return (_jsxs("button", { ref: node => { refs.current[index] = node; }, type: "button", role: "radio", "aria-checked": selected, tabIndex: selected ? 0 : -1, className: styles.option, "data-selected": selected || undefined, onClick: () => onValueChange(option.value), onKeyDown: event => onKeyDown(event, index), children: [selected && !thumb ? _jsx("span", { className: styles.thumbStatic, "aria-hidden": "true" }) : null, _jsxs("span", { className: styles.content, children: [_jsx("span", { className: styles.label, children: option.label }), badgeText ? (_jsx("span", { className: styles.badge, "data-active": selected || undefined, children: _jsx(StableSwap, { text: badgeText, candidates: candidates, reduced: reduced }) })) : null] })] }, option.value));
             })] }));
 }
-const clip = { type: "spring", visualDuration: 0.36, bounce: 0 };
+const clip = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0 };
 /** A price that rolls to its new amount. The old price and the period ease their width, so nothing beside them jumps. */
 export function BillingPrice({ amount, currency = "$", period, was, decimals = 0, className }) {
     const reduced = !!useReducedMotion();

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.js

@@ -22,7 +22,7 @@ const STRETCH = 120;
 const LOW_DIM = .78;
 const settle = motionTokens.spring.smooth;
 /** Leaving is shorter than arriving; a flick keeps its velocity through the same spring. */
-const leave = { ...motionTokens.spring.smooth, visualDuration: .3 };
+const leave = { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const fade = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
 /** iOS-style resistance: follows the finger at first, then approaches STRETCH. */
 const rubber = (distance) => (1 - 1 / (distance * .55 / STRETCH + 1)) * STRETCH;

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; } }