@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/utils/tokens.d.ts

@@ -1,15 +1,21 @@
-/** The anchored-panel offset from its trigger: `--ds-popup-offset` (8 px, §9.1, §10.1). */
+/** The anchored-panel offset from its trigger: `--fgd-popup-offset` (8 px, §9.1, §10.1). */
 export declare const POPUP_OFFSET_PX = 8;
 /**
- * Viewport clearance before a panel flips or shifts: `--ds-popup-clearance`
- * (16 px, the base `--ds-space-margin`, §10.1).
+ * Viewport clearance before a panel flips or shifts: `--fgd-popup-clearance`
+ * (16 px, the base `--fgd-space-margin`, §10.1).
  */
 export declare const POPUP_CLEARANCE_PX = 16;
-/** The tooltip open delay: `--ds-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+/** The tooltip open delay: `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
 export declare const TOOLTIP_DELAY_MS = 500;
+/**
+ * `--fgd-duration-disclosure` (200 ms, §1.5.15), for motion JavaScript runs:
+ * a chart's opt-in entry animation [D167]. Recharts takes a number, and the
+ * chart passes it only when `animate` is set and motion is allowed.
+ */
+export declare const DISCLOSURE_DURATION_MS = 200;
 /**
  * Desktop Navigation Menu hover intent [D182], for Base UI's Root `delay`
- * and `closeDelay`: `--ds-delay-nav-open` (150 ms) and `--ds-delay-nav-close`
+ * and `closeDelay`: `--fgd-delay-nav-open` (150 ms) and `--fgd-delay-nav-close`
  * (300 ms). Every input still opens a panel by click, Enter, Space or
  * ArrowDown; the delays apply to a fine pointer only.
  */
@@ -17,11 +23,48 @@ export declare const NAV_DELAY_MS: {
     readonly open: 150;
     readonly close: 300;
 };
+/**
+ * The expanding box's View Transitions morph, and the outline morph's Web
+ * Animations (foundations/outline-morph): open `--fgd-duration-expand`
+ * (333 ms), close `--fgd-duration-collapse` (200 ms, an alias of
+ * `--fgd-duration-disclosure`). Both are instant under reduced motion, where
+ * neither morph runs at all. The outline morph reads the CSS tokens at each
+ * open and close; these are its fallback when a value can't be parsed.
+ */
+export declare const EXPAND_DURATION_MS: {
+    readonly open: 333;
+    readonly close: 200;
+};
+/**
+ * The outline morph on modal surfaces (Dialog, Alert Dialog, the drawer's
+ * side and full sheets) [D206]: open `--fgd-duration-expand-surface`
+ * (400 ms), close `--fgd-duration-collapse-surface` (240 ms), on the same
+ * `--fgd-ease-expand`. Instant under reduced motion. The engine reads the
+ * CSS tokens at each open and close; these are its fallback.
+ */
+export declare const SURFACE_DURATION_MS: {
+    readonly open: 400;
+    readonly close: 240;
+};
+/**
+ * The open easing, `--fgd-ease-expand`: a critically damped spring sampled
+ * as `linear()` stops, its undershoot clipped to 0, so it never leaves
+ * [0, 1] (for Web Animations: the outline morph runs both ways on it).
+ */
+export declare const EXPAND_EASE = "linear(0, 0, 0.294, 0.401, 0.58, 0.706, 0.75, 0.825, 0.878, 0.896, 0.927, 0.949, 0.957, 0.97, 0.979, 0.982, 0.987, 0.991, 0.992, 0.995, 0.996, 0.998, 0.999, 0.999, 1)";
+/**
+ * The code block's variant and JS/TS swap, `--fgd-duration-swap` (350 ms):
+ * useCode's `transformDelay` and `variantSwapDelay`, which must equal the CSS
+ * duration of the line grow and shrink. Pass 0 for both under reduced motion,
+ * where the CSS duration is instant too. The swap's scroll-anchor window is
+ * twice this.
+ */
+export declare const SWAP_DURATION_MS = 350;
 /**
  * The marker and trail geometry (§1.5.16, §4.7), for SVG viewBoxes, which
- * take numbers: `--ds-marker-trail` (5 px), `--ds-marker-timeline` (8 px),
- * `--ds-marker-waypoint` (9 px), `--ds-marker-current` (10 px),
- * `--ds-arrow-head` (6 px), the markers' `--ds-stroke-1-5` stroke, and the
+ * take numbers: `--fgd-marker-trail` (5 px), `--fgd-marker-timeline` (8 px),
+ * `--fgd-marker-waypoint` (9 px), `--fgd-marker-current` (10 px),
+ * `--fgd-arrow-head` (6 px), the markers' `--border-size-1-5` stroke, and the
  * `--size-px-1` (4 px) gap where a dash stops short of a marker.
  */
 export declare const MARKER_PX: {

package/utils/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAMA,2FAA2F;AAC3F,eAAO,MAAM,eAAe,IAAI,CAAA;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAA;AAEpC,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;CAAqC,CAAA;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;CAQZ,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAMA,4FAA4F;AAC5F,eAAO,MAAM,eAAe,IAAI,CAAA;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAA;AAEpC,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAEnC;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;CAAqC,CAAA;AAE9D;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;CAAqC,CAAA;AAEpE;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAAqC,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,WAAW,2KACkJ,CAAA;AAE1K;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;CAQZ,CAAA"}

package/utils/tokens.js

@@ -1,29 +1,66 @@
 /*
- * JavaScript mirrors of the --ds- tokens that Base UI takes as numbers
+ * JavaScript mirrors of the tokens that Base UI takes as numbers
  * (positioner offsets, open and close delays). Each value restates one token
  * in tokens.css; change both together.
  */
-/** The anchored-panel offset from its trigger: `--ds-popup-offset` (8 px, §9.1, §10.1). */
+/** The anchored-panel offset from its trigger: `--fgd-popup-offset` (8 px, §9.1, §10.1). */
 export const POPUP_OFFSET_PX = 8;
 /**
- * Viewport clearance before a panel flips or shifts: `--ds-popup-clearance`
- * (16 px, the base `--ds-space-margin`, §10.1).
+ * Viewport clearance before a panel flips or shifts: `--fgd-popup-clearance`
+ * (16 px, the base `--fgd-space-margin`, §10.1).
  */
 export const POPUP_CLEARANCE_PX = 16;
-/** The tooltip open delay: `--ds-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+/** The tooltip open delay: `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
 export const TOOLTIP_DELAY_MS = 500;
+/**
+ * `--fgd-duration-disclosure` (200 ms, §1.5.15), for motion JavaScript runs:
+ * a chart's opt-in entry animation [D167]. Recharts takes a number, and the
+ * chart passes it only when `animate` is set and motion is allowed.
+ */
+export const DISCLOSURE_DURATION_MS = 200;
 /**
  * Desktop Navigation Menu hover intent [D182], for Base UI's Root `delay`
- * and `closeDelay`: `--ds-delay-nav-open` (150 ms) and `--ds-delay-nav-close`
+ * and `closeDelay`: `--fgd-delay-nav-open` (150 ms) and `--fgd-delay-nav-close`
  * (300 ms). Every input still opens a panel by click, Enter, Space or
  * ArrowDown; the delays apply to a fine pointer only.
  */
 export const NAV_DELAY_MS = { open: 150, close: 300 };
+/**
+ * The expanding box's View Transitions morph, and the outline morph's Web
+ * Animations (foundations/outline-morph): open `--fgd-duration-expand`
+ * (333 ms), close `--fgd-duration-collapse` (200 ms, an alias of
+ * `--fgd-duration-disclosure`). Both are instant under reduced motion, where
+ * neither morph runs at all. The outline morph reads the CSS tokens at each
+ * open and close; these are its fallback when a value can't be parsed.
+ */
+export const EXPAND_DURATION_MS = { open: 333, close: 200 };
+/**
+ * The outline morph on modal surfaces (Dialog, Alert Dialog, the drawer's
+ * side and full sheets) [D206]: open `--fgd-duration-expand-surface`
+ * (400 ms), close `--fgd-duration-collapse-surface` (240 ms), on the same
+ * `--fgd-ease-expand`. Instant under reduced motion. The engine reads the
+ * CSS tokens at each open and close; these are its fallback.
+ */
+export const SURFACE_DURATION_MS = { open: 400, close: 240 };
+/**
+ * The open easing, `--fgd-ease-expand`: a critically damped spring sampled
+ * as `linear()` stops, its undershoot clipped to 0, so it never leaves
+ * [0, 1] (for Web Animations: the outline morph runs both ways on it).
+ */
+export const EXPAND_EASE = 'linear(0, 0, 0.294, 0.401, 0.58, 0.706, 0.75, 0.825, 0.878, 0.896, 0.927, 0.949, 0.957, 0.97, 0.979, 0.982, 0.987, 0.991, 0.992, 0.995, 0.996, 0.998, 0.999, 0.999, 1)';
+/**
+ * The code block's variant and JS/TS swap, `--fgd-duration-swap` (350 ms):
+ * useCode's `transformDelay` and `variantSwapDelay`, which must equal the CSS
+ * duration of the line grow and shrink. Pass 0 for both under reduced motion,
+ * where the CSS duration is instant too. The swap's scroll-anchor window is
+ * twice this.
+ */
+export const SWAP_DURATION_MS = 350;
 /**
  * The marker and trail geometry (§1.5.16, §4.7), for SVG viewBoxes, which
- * take numbers: `--ds-marker-trail` (5 px), `--ds-marker-timeline` (8 px),
- * `--ds-marker-waypoint` (9 px), `--ds-marker-current` (10 px),
- * `--ds-arrow-head` (6 px), the markers' `--ds-stroke-1-5` stroke, and the
+ * take numbers: `--fgd-marker-trail` (5 px), `--fgd-marker-timeline` (8 px),
+ * `--fgd-marker-waypoint` (9 px), `--fgd-marker-current` (10 px),
+ * `--fgd-arrow-head` (6 px), the markers' `--border-size-1-5` stroke, and the
  * `--size-px-1` (4 px) gap where a dash stops short of a marker.
  */
 export const MARKER_PX = {

package/utils/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,2FAA2F;AAC3F,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,6EAA6E;AAC7E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAEnC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAA;AAE9D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,CAAC;CACE,CAAA"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,4FAA4F;AAC5F,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,8EAA8E;AAC9E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;AAEzC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAA;AAE9D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAA;AAEpE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAA;AAErE;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GACtB,wKAAwK,CAAA;AAE1K;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAEnC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,CAAC;CACE,CAAA"}

package/utils/type.module.css

@@ -4,7 +4,7 @@
  *   .label { composes: typeButton from '../../utils/type.module.css'; }
  * Sizes are rem tokens (fluid 360 → 1024 px); leading unitless; tracking em.
  * Every role publishes --type-weight and --type-weight-floor so typeMuted
- * can step muted text down by --ds-muted-weight-step on dark scopes without
+ * can step muted text down by --fgd-muted-weight-step on dark scopes without
  * the component knowing the mode [D170, D175].
  * Print sizes come from the print remap of the size tokens (print.css).
  */
@@ -12,32 +12,32 @@
   .typeDisplayXl {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-display-xl);
-    line-height: var(--ds-leading-display);
-    letter-spacing: var(--ds-tracking-tight);
+    font-size: var(--fgd-font-size-display-xl);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: var(--font-letterspacing-0-5);
   }
 
   .typeDisplay {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-display);
+    font-size: var(--fgd-font-size-display);
     line-height: var(--font-lineheight-0);
-    letter-spacing: var(--ds-tracking-tight);
+    letter-spacing: var(--font-letterspacing-0-5);
   }
 
   .typeH2 {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-h2);
+    font-size: var(--fgd-font-size-h2);
     line-height: var(--font-lineheight-0);
     letter-spacing: 0;
   }
@@ -45,10 +45,10 @@
   .typeItemhead {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-itemhead);
+    font-size: var(--fgd-font-size-itemhead);
     line-height: var(--font-lineheight-0);
     letter-spacing: 0;
   }
@@ -56,10 +56,10 @@
   .typeKicker {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-kicker);
+    font-size: var(--fgd-font-size-kicker);
     line-height: var(--font-lineheight-0);
     letter-spacing: 0;
   }
@@ -67,9 +67,9 @@
   .typeSubhead {
     --type-weight: var(--font-weight-6);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-subhead);
+    font-size: var(--fgd-font-size-subhead);
     line-height: var(--font-lineheight-1);
     letter-spacing: 0;
   }
@@ -77,9 +77,9 @@
   .typeLead {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-lead);
+    font-size: var(--fgd-font-size-lead);
     line-height: var(--font-lineheight-3);
     letter-spacing: 0;
   }
@@ -87,10 +87,10 @@
   .typeQuote {
     --type-weight: var(--font-weight-5);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
+    font-family: var(--fgd-font-display);
     font-style: italic;
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-quote);
+    font-size: var(--fgd-font-size-quote);
     line-height: var(--font-lineheight-1);
     letter-spacing: 0;
   }
@@ -98,32 +98,32 @@
   .typeBody {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-text);
+    font-family: var(--fgd-font-text);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-body);
-    line-height: var(--ds-leading-reading);
+    font-size: var(--fgd-font-size-body);
+    line-height: var(--fgd-leading-reading);
     letter-spacing: 0;
-    font-variant-numeric: var(--ds-numerals-prose);
+    font-variant-numeric: var(--fgd-numerals-prose);
   }
 
   .typeBodyUi {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-body-ui);
+    font-size: var(--fgd-font-size-body-ui);
     line-height: var(--font-lineheight-3);
     letter-spacing: 0;
   }
 
-  /* Serif in light scopes, UI sans in dark scopes via --ds-font-fine [D152]. */
+  /* Serif in light scopes, UI sans in dark scopes via --fgd-font-fine [D152]. */
   .typeSecondaryName {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-fine);
+    font-family: var(--fgd-font-fine);
     font-style: italic;
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-body-ui);
+    font-size: var(--fgd-font-size-body-ui);
     line-height: var(--font-lineheight-2);
     letter-spacing: 0;
   }
@@ -131,22 +131,22 @@
   .typeFootnote {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-fine);
+    font-family: var(--fgd-font-fine);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-footnote);
+    font-size: var(--fgd-font-size-footnote);
     line-height: var(--font-lineheight-3);
     letter-spacing: 0;
-    font-variant-numeric: var(--ds-numerals-prose);
+    font-variant-numeric: var(--fgd-numerals-prose);
   }
 
   /* Button labels: title case, authored; no tracking, no caps [D160]. */
   .typeButtonLg {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-button-lg);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-button-lg);
+    line-height: var(--fgd-leading-display);
     letter-spacing: 0;
     text-transform: none;
   }
@@ -154,10 +154,10 @@
   .typeButton {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-button);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-button);
+    line-height: var(--fgd-leading-display);
     letter-spacing: 0;
     text-transform: none;
   }
@@ -165,10 +165,10 @@
   .typeButtonSm {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-label);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-label);
+    line-height: var(--fgd-leading-display);
     letter-spacing: 0;
     text-transform: none;
   }
@@ -176,9 +176,9 @@
   .typeFieldLabel {
     --type-weight: var(--font-weight-6);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-button);
+    font-size: var(--fgd-font-size-button);
     line-height: var(--font-lineheight-1);
     letter-spacing: 0;
     text-transform: none;
@@ -188,9 +188,9 @@
   .typeLabel {
     --type-weight: var(--font-weight-6);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-label);
+    font-size: var(--fgd-font-size-label);
     line-height: var(--font-lineheight-1);
     letter-spacing: var(--font-letterspacing-3);
     text-transform: uppercase;
@@ -199,9 +199,9 @@
   .typeEyebrow {
     --type-weight: var(--font-weight-6);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-eyebrow);
+    font-size: var(--fgd-font-size-eyebrow);
     line-height: var(--font-lineheight-1);
     letter-spacing: var(--font-letterspacing-4);
     text-transform: uppercase;
@@ -210,9 +210,9 @@
   .typeCaption {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-caption);
+    font-size: var(--fgd-font-size-caption);
     line-height: var(--font-lineheight-2);
     letter-spacing: 0;
   }
@@ -220,9 +220,9 @@
   .typeSmall {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-label);
+    font-size: var(--fgd-font-size-label);
     line-height: var(--font-lineheight-2);
     letter-spacing: 0;
   }
@@ -230,32 +230,32 @@
   .typeData {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-mono);
+    font-family: var(--fgd-font-mono);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-caption);
-    line-height: var(--ds-leading-compact);
+    font-size: var(--fgd-font-size-caption);
+    line-height: var(--fgd-leading-compact);
     letter-spacing: 0;
-    font-variant-numeric: var(--ds-numerals-data);
+    font-variant-numeric: var(--fgd-numerals-data);
   }
 
   /* Large mono readout: the Number Field `readout` kind (§10.4), tabular so digits never shift. */
   .typeReadout {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-mono);
+    font-family: var(--fgd-font-mono);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-h2);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-h2);
+    line-height: var(--fgd-leading-display);
     letter-spacing: 0;
-    font-variant-numeric: var(--ds-numerals-data);
+    font-variant-numeric: var(--fgd-numerals-data);
   }
 
   .typeUrl {
     --type-weight: var(--font-weight-4);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-mono);
+    font-family: var(--fgd-font-mono);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-url);
+    font-size: var(--fgd-font-size-url);
     line-height: var(--font-lineheight-1);
     letter-spacing: 0;
     overflow-wrap: anywhere;
@@ -265,42 +265,42 @@
   .typeStat {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-stat);
-    line-height: var(--ds-leading-display);
-    letter-spacing: var(--ds-tracking-tight);
-    font-variant-numeric: var(--ds-numerals-data);
+    font-size: var(--fgd-font-size-stat);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: var(--font-letterspacing-0-5);
+    font-variant-numeric: var(--fgd-numerals-data);
   }
 
   .typeStatCompact {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-display-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-h2);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-h2);
+    line-height: var(--fgd-leading-display);
     letter-spacing: 0;
-    font-variant-numeric: var(--ds-numerals-data);
+    font-variant-numeric: var(--fgd-numerals-data);
   }
 
   /* Bold lead that opens a paragraph; keeps its paragraph's size. */
   .typeRunin {
     --type-weight: var(--font-weight-7);
     --type-weight-floor: 400;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
   }
 
   .typeMarquee {
     --type-weight: var(--font-weight-8);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-marquee);
-    line-height: var(--ds-leading-display);
+    font-size: var(--fgd-font-size-marquee);
+    line-height: var(--fgd-leading-display);
     letter-spacing: var(--font-letterspacing-2);
     text-transform: uppercase;
   }
@@ -308,9 +308,9 @@
   .typeLockupCaps {
     --type-weight: var(--font-weight-9);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-weight: var(--type-weight);
-    font-size: var(--ds-font-size-display);
+    font-size: var(--fgd-font-size-display);
     line-height: var(--font-lineheight-00);
     letter-spacing: 0;
     text-transform: uppercase;
@@ -319,11 +319,11 @@
   .typeLockupAccent {
     --type-weight: var(--font-weight-8);
     --type-weight-floor: 100;
-    font-family: var(--ds-font-display);
-    font-variation-settings: var(--ds-font-accent-settings);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-accent-settings);
     font-style: italic;
     font-weight: var(--type-weight);
-    font-size: calc(var(--ds-font-size-display) * var(--ds-lockup-accent-factor));
+    font-size: calc(var(--fgd-font-size-display) * var(--fgd-lockup-accent-factor));
     line-height: var(--font-lineheight-00);
     letter-spacing: 0;
   }
@@ -336,7 +336,7 @@
     color: var(--role-muted);
     font-weight: max(
       var(--type-weight-floor, 400),
-      calc(var(--type-weight, 400) - var(--ds-muted-weight-step))
+      calc(var(--type-weight, 400) - var(--fgd-muted-weight-step))
     );
   }
 }

package/utils/useReleaseMark.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/** The attribute the element carries for two frames after a press ends. */
+export declare const RELEASED_ATTRIBUTE = "data-released";
+/** Handlers to merge into the control's own `onPointerDown` and `onKeyUp`. */
+export type ReleaseMarkHandlers = {
+    onPointerDown: () => void;
+    onKeyUp: (event: {
+        key: string;
+    }) => void;
+};
+/** Marks `element` `data-released` for two frames whenever a press on it ends. */
+export declare function useReleaseMark(element: React.RefObject<HTMLElement | null>): ReleaseMarkHandlers;
+//# sourceMappingURL=useReleaseMark.d.ts.map

package/utils/useReleaseMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReleaseMark.d.ts","sourceRoot":"","sources":["../src/utils/useReleaseMark.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,kBAAkB,CAAA;AAEjD,8EAA8E;AAC9E,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,mBAAmB,CAyBhG"}

package/utils/useReleaseMark.js

@@ -0,0 +1,44 @@
+'use client';
+import * as React from 'react';
+/*
+ * Internal: the release mark for controls whose press swaps fill and ink as
+ * a pair (the inverse pair) [D205]. A press is `:active`, so its module can
+ * step it; a release lands on `:hover` like a hover-in, which should fade,
+ * so CSS alone can't tell the two apart. The mark can: the element carries
+ * `data-released` for two frames after the press ends (the pointer lifting
+ * anywhere, or Space or Enter coming up), and its module drops the fill and
+ * ink transitions while it's there, so no frame shows the ink over a fill
+ * of its own tone. Not exported from any index.
+ */
+/** The attribute the element carries for two frames after a press ends. */
+export const RELEASED_ATTRIBUTE = 'data-released';
+/** Marks `element` `data-released` for two frames whenever a press on it ends. */
+export function useReleaseMark(element) {
+    return React.useMemo(() => {
+        const mark = () => {
+            const node = element.current;
+            if (!node)
+                return;
+            node.setAttribute(RELEASED_ATTRIBUTE, '');
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => node.removeAttribute(RELEASED_ATTRIBUTE));
+            });
+        };
+        // The pointer may lift outside the control, which still ends `:active`.
+        const onPointerDown = () => {
+            const release = () => {
+                window.removeEventListener('pointerup', release, true);
+                window.removeEventListener('pointercancel', release, true);
+                mark();
+            };
+            window.addEventListener('pointerup', release, true);
+            window.addEventListener('pointercancel', release, true);
+        };
+        const onKeyUp = (event) => {
+            if (event.key === ' ' || event.key === 'Enter')
+                mark();
+        };
+        return { onPointerDown, onKeyUp };
+    }, [element]);
+}
+//# sourceMappingURL=useReleaseMark.js.map

package/utils/useReleaseMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReleaseMark.js","sourceRoot":"","sources":["../src/utils/useReleaseMark.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,CAAA;AAQjD,kFAAkF;AAClF,MAAM,UAAU,cAAc,CAAC,OAA4C;IACzE,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;YAC5B,IAAI,CAAC,IAAI;gBAAE,OAAM;YACjB,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;YACzC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAA;YACvE,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QACD,wEAAwE;QACxE,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,OAAO,GAAG,GAAG,EAAE;gBACnB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;gBACtD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;gBAC1D,IAAI,EAAE,CAAA;YACR,CAAC,CAAA;YACD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;YACnD,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACzD,CAAC,CAAA;QACD,MAAM,OAAO,GAAG,CAAC,KAAsB,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,EAAE,CAAA;QACxD,CAAC,CAAA;QACD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,CAAA;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC"}