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

package/utils/global.css

@@ -26,13 +26,20 @@
     margin: 0;
   }
 
+  /*
+   * The page's scrollbar gutter is always reserved [D201], so the content
+   * never moves sideways when the scrollbar comes or goes: a popup's scroll
+   * lock hiding it, a popup or a filter changing the page's height. With
+   * overlay scrollbars nothing is reserved.
+   */
   :where(html) {
+    scrollbar-gutter: stable;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
     block-size: 100%;
     color: var(--primary12);
     background-color: var(--role-ground);
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-size: 100%;
     line-height: var(--font-lineheight-3);
     tab-size: 2;
@@ -111,7 +118,7 @@
     color: inherit;
     text-decoration-line: underline;
     text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-decoration-thickness: var(--border-size-1-5);
     text-underline-offset: 0.15em;
   }
 
@@ -140,10 +147,13 @@
   }
 }
 /*
- * Tokens (§1.5): Open Props non-color primitives, used as shipped, plus every
- * --ds- system extension. --ds- never holds a color [D112]. Units [D123]:
- * text rem, tracking em, leading unitless; spacing, strokes, radii and sizes
- * px; measure ch; print pt and mm (print values: print.css).
+ * Tokens (§1.5): Open Props non-color primitives, used as shipped, plus the
+ * system's own [D193]. A step between two Open Props steps joins its scale,
+ * named by its position to the nearest quarter: --size-px-2-5 (12 px) sits
+ * halfway between --size-px-2 (8 px) and --size-px-3 (16 px). Every other
+ * FairGarden-only token takes --fgd-, and none holds a color [D112].
+ * Units [D123]: text rem, tracking em, leading unitless; spacing, strokes,
+ * radii and sizes px; measure ch; print pt and mm (print values: print.css).
  */
 @layer tokens{
 :where(html){--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch}
@@ -165,270 +175,337 @@
 }
 @layer tokens {
   :root {
-    /* Spacing (§1.5.10): Open Props --size-px-* plus the system steps. */
-    --ds-space-12: 12px;
-    --ds-space-40: 40px;
-    --ds-space-56: 56px;
-    --ds-space-stack: 36px; /* named exception: H2 baseline → chapter hairline */
-    --ds-space-eyebrow-rule: 14px; /* named exception [D100] */
-    --ds-space-eyebrow-content: 19px; /* named exception [D100] */
-    --ds-space-halo: var(--size-px-2);
-    --ds-space-section: var(--ds-space-56);
-    --ds-space-margin: var(--size-px-3);
-
-    /* Strokes (§1.5.7): with --border-size-1 and --border-size-2. */
-    --ds-stroke-0-75: 0.75px;
-    --ds-stroke-1-25: 1.25px;
-    --ds-stroke-1-5: 1.5px;
-    --ds-stroke-3: 3px;
-    --ds-stroke-4: 4px;
-    --ds-stroke-8: 8px;
+    /* Spacing (§1.5.10): Open Props --size-px-* plus the in-between steps. */
+    --size-px-2-5: 12px;
+    --size-px-7-5: 40px;
+    --size-px-8-5: 56px;
+    --fgd-space-stack: 36px; /* named exception: H2 baseline → chapter hairline */
+    --fgd-space-eyebrow-rule: 14px; /* named exception [D100] */
+    --fgd-space-eyebrow-content: 19px; /* named exception [D100] */
+    --fgd-space-halo: var(--size-px-2);
+    --fgd-space-section: var(--size-px-8-5);
+    --fgd-space-margin: var(--size-px-3);
+
+    /* Strokes and borders (§1.5.7): Open Props --border-size-* plus the in-between steps. */
+    --border-size-0-75: 0.75px;
+    --border-size-1-25: 1.25px;
+    --border-size-1-5: 1.5px;
+    --border-size-2-25: 3px;
+    --border-size-2-75: 4px;
+    --border-size-3-5: 8px;
 
     /* Line geometry (§1.5.8, §4.6–§4.8). */
-    --ds-dot-fine: 1px;
-    --ds-dot-fine-pitch: 3px;
-    --ds-dot: 2px;
-    --ds-dot-pitch: 5px;
-    --ds-dot-bold: 4px;
-    --ds-dot-bold-pitch: 9px;
-    --ds-dash-fine: 4px;
-    --ds-dash-fine-gap: 3px;
-    --ds-dash: 5px;
-    --ds-dash-gap: 4px;
-    --ds-double-gap: 4px;
-    --ds-double-hair-gap: 3px;
+    --fgd-dot-fine: 1px;
+    --fgd-dot-fine-pitch: 3px;
+    --fgd-dot: 2px;
+    --fgd-dot-pitch: 5px;
+    --fgd-dot-bold: 4px;
+    --fgd-dot-bold-pitch: 9px;
+    --fgd-dash-fine: 4px;
+    --fgd-dash-fine-gap: 3px;
+    --fgd-dash: 5px;
+    --fgd-dash-gap: 4px;
+    --fgd-double-gap: 4px;
+    --fgd-double-hair-gap: 3px;
 
     /* Pattern geometry (§1.5.9). */
-    --ds-speckle-grid: 16px;
-    --ds-speckle-dot: 2px;
-    --ds-sunburst-dot: 2.5px;
-    --ds-sunburst-radius: 290px;
-    --ds-sunburst-pitch: 6.5px;
-    --ds-awning-stripe: 24px;
-    --ds-dotgrid-dot: 1.5px;
-    --ds-dotgrid-pitch: 16px;
-    --ds-dotgrid-fine-dot: 1px;
-    --ds-dotgrid-fine-pitch: 8px;
-    --ds-graph-pitch: 16px;
-    --ds-ruled-pitch: 27px;
-    --ds-hatch-pitch: 6px;
-    --ds-hatch-tile: 8px;
-    --ds-dotscreen-dot: 1.25px;
-    --ds-dotscreen-dot-heavy: 2px;
-    --ds-dotscreen-pitch-1: 6px;
-    --ds-dotscreen-pitch-2: 5px;
-    --ds-dotscreen-pitch-3: 4px;
+    --fgd-speckle-grid: 16px;
+    --fgd-speckle-dot: 2px;
+    --fgd-sunburst-dot: 2.5px;
+    --fgd-sunburst-radius: 290px;
+    --fgd-sunburst-pitch: 6.5px;
+    --fgd-awning-stripe: 24px;
+    --fgd-dotgrid-dot: 1.5px;
+    --fgd-dotgrid-pitch: 16px;
+    --fgd-dotgrid-fine-dot: 1px;
+    --fgd-dotgrid-fine-pitch: 8px;
+    --fgd-graph-pitch: 16px;
+    --fgd-ruled-pitch: 27px;
+    --fgd-hatch-pitch: 6px;
+    --fgd-hatch-tile: 8px;
+    --fgd-dotscreen-dot: 1.25px;
+    --fgd-dotscreen-dot-heavy: 2px;
+    --fgd-dotscreen-pitch-1: 6px;
+    --fgd-dotscreen-pitch-2: 5px;
+    --fgd-dotscreen-pitch-3: 4px;
 
     /* Ornaments, terminals and markers (§1.5.16). */
-    --ds-ornament-dot: 5px;
-    --ds-ornament-dot-gap: 10px;
-    --ds-ornament-star: 9px;
-    --ds-zigzag-amplitude: 6px;
-    --ds-zigzag-period: 12px;
-    --ds-fringe-tick: 6px;
-    --ds-fringe-pitch: 4px;
+    --fgd-ornament-dot: 5px;
+    --fgd-ornament-dot-gap: 10px;
+    --fgd-ornament-star: 9px;
+    --fgd-zigzag-amplitude: 6px;
+    --fgd-zigzag-period: 12px;
+    --fgd-fringe-tick: 6px;
+    --fgd-fringe-pitch: 4px;
     /*
      * The hill [D189]: amplitude 4.6% of the band's width, clamped between
      * these (the max is reached at about 1391 px); crest at 0.667 × width,
      * the right end falling 30% of the rise; no horizon rule on screen.
      */
-    --ds-edge-hill-min: 12px;
-    --ds-edge-hill-max: var(--size-px-9); /* 64 px */
-    --ds-arrow-head: 6px;
-    --ds-arrow-tick: 8px;
-    --ds-mark-arm: 12px;
-    --ds-mark-overhang: 6px;
-    --ds-marker-trail: 5px;
-    --ds-marker-timeline: 8px;
-    --ds-marker-waypoint: 9px;
-    --ds-marker-current: 10px;
-
-    /* Radii (§1.5.11): with --radius-1 (2 px) and --radius-round. */
-    --ds-radius-none: 0;
-    --ds-radius-8: 8px;
-    --ds-radius-20: 20px;
+    --fgd-edge-hill-min: 12px;
+    --fgd-edge-hill-max: var(--size-px-9); /* 64 px */
+    --fgd-arrow-head: 6px;
+    --fgd-arrow-tick: 8px;
+    --fgd-mark-arm: 12px;
+    --fgd-mark-overhang: 6px;
+    --fgd-marker-trail: 5px;
+    --fgd-marker-timeline: 8px;
+    --fgd-marker-waypoint: 9px;
+    --fgd-marker-current: 10px;
+
+    /* Radii (§1.5.11): Open Props --radius-1 (2 px) and --radius-round plus these steps. */
+    --radius-0: 0;
+    --radius-2-25: 8px;
+    /* File Tabs' folder tabs, shaped as paper tabs (the source's 12 px tab radius); frames keep --radius-2-25. */
+    --radius-2-75: 12px;
+    --radius-3-25: 20px;
     /* ≈ 1/7 of the frame's width, max 64 px; the frame's parent is its container. */
-    --ds-radius-feature: min(calc(100cqi / 7), var(--size-px-9));
-    /* Conditional radii [D171]: full radius while narrower than the viewport, 0 when full-bleed. */
-    --ds-radius-conditional-8: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-8));
-    --ds-radius-conditional-20: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-20));
-
-    /* Type families (§1.5.5) [D159]; --ds-font-fine is set per mode (theme.css). */
-    --ds-font-display: 'Fraunces Variable', 'Source Serif 4 Variable', var(--font-old-style);
-    --ds-font-text: 'Source Serif 4 Variable', var(--font-transitional);
-    --ds-font-ui: 'Figtree Variable', var(--font-geometric-humanist);
-    --ds-font-mono: 'IBM Plex Mono', var(--font-mono);
-    --ds-font-display-settings: 'SOFT' 0, 'WONK' 0;
-    --ds-font-accent-settings: 'SOFT' 100, 'WONK' 1;
+    --fgd-radius-feature: min(calc(100cqi / 7), var(--size-px-9));
+    /* Conditional radii [D171], Open Props' --radius-conditional-* pattern: full radius while narrower than the viewport, 0 when full-bleed. */
+    --radius-conditional-2-25: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2-25));
+    --radius-conditional-3-25: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3-25));
+
+    /* Type families (§1.5.5) [D159]; --fgd-font-fine is set per mode (theme.css). Each webfont's metric-matched fallback follows it (utils/font-fallbacks.css) [D201]. */
+    --fgd-font-display: 'Fraunces Variable', 'Fraunces Fallback', 'Source Serif 4 Variable', var(--font-old-style);
+    --fgd-font-text: 'Source Serif 4 Variable', 'Source Serif 4 Fallback', var(--font-transitional);
+    --fgd-font-ui: 'Figtree Variable', 'Figtree Fallback', var(--font-geometric-humanist);
+    --fgd-font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', var(--font-mono);
+    --fgd-font-display-settings: 'SOFT' 0, 'WONK' 0;
+    --fgd-font-accent-settings: 'SOFT' 100, 'WONK' 1;
 
     /* Type sizes (§1.5.6): rem, fluid from 360 px to 1024 px. */
-    --ds-font-size-display-xl: clamp(2.5625rem, calc(2.5625rem + 1.125 * (100vw - 22.5rem) / 41.5), 3.6875rem); /* 41 → 59 px */
-    --ds-font-size-display: clamp(2.125rem, calc(2.125rem + 0.9375 * (100vw - 22.5rem) / 41.5), 3.0625rem); /* 34 → 49 px */
-    --ds-font-size-h2: clamp(1.75rem, calc(1.75rem + 0.375 * (100vw - 22.5rem) / 41.5), 2.125rem); /* 28 → 34 px */
-    --ds-font-size-itemhead: clamp(1.375rem, calc(1.375rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-4)); /* 22 → 24 px */
-    --ds-font-size-kicker: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-3)); /* 18 → 20 px */
-    --ds-font-size-subhead: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.1875rem); /* 18 → 19 px */
-    --ds-font-size-lead: clamp(var(--font-size-3), calc(1.25rem + 0.125 * (100vw - 22.5rem) / 41.5), 1.375rem); /* 20 → 22 px */
-    --ds-font-size-quote: clamp(var(--font-size-4), calc(1.5rem + 0.5 * (100vw - 22.5rem) / 41.5), var(--font-size-5)); /* 24 → 32 px */
-    --ds-font-size-body: clamp(1.0625rem, calc(1.0625rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.125rem); /* 17 → 18 px */
-    --ds-font-size-body-ui: clamp(var(--font-size-1), calc(1rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.0625rem); /* 16 → 17 px */
-    --ds-font-size-marquee: clamp(1.375rem, calc(1.375rem + 0.25 * (100vw - 22.5rem) / 41.5), 1.625rem); /* 22 → 26 px */
-    --ds-font-size-button-lg: 1.0625rem; /* 17 px */
-    --ds-font-size-button: clamp(0.875rem, calc(0.875rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.9375rem); /* 14 → 15 px */
-    --ds-font-size-footnote: 0.9375rem; /* 15 px */
-    --ds-font-size-caption: 0.875rem; /* 14 px */
-    --ds-font-size-eyebrow: clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.875rem); /* 13 → 14 px */
-    --ds-font-size-label: 0.8125rem; /* 13 px */
-    --ds-font-size-url: 8pt; /* print only */
+    --fgd-font-size-display-xl: clamp(2.5625rem, calc(2.5625rem + 1.125 * (100vw - 22.5rem) / 41.5), 3.6875rem); /* 41 → 59 px */
+    --fgd-font-size-display: clamp(2.125rem, calc(2.125rem + 0.9375 * (100vw - 22.5rem) / 41.5), 3.0625rem); /* 34 → 49 px */
+    --fgd-font-size-h2: clamp(1.75rem, calc(1.75rem + 0.375 * (100vw - 22.5rem) / 41.5), 2.125rem); /* 28 → 34 px */
+    --fgd-font-size-itemhead: clamp(1.375rem, calc(1.375rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-4)); /* 22 → 24 px */
+    --fgd-font-size-kicker: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-3)); /* 18 → 20 px */
+    --fgd-font-size-subhead: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.1875rem); /* 18 → 19 px */
+    --fgd-font-size-lead: clamp(var(--font-size-3), calc(1.25rem + 0.125 * (100vw - 22.5rem) / 41.5), 1.375rem); /* 20 → 22 px */
+    --fgd-font-size-quote: clamp(var(--font-size-4), calc(1.5rem + 0.5 * (100vw - 22.5rem) / 41.5), var(--font-size-5)); /* 24 → 32 px */
+    --fgd-font-size-body: clamp(1.0625rem, calc(1.0625rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.125rem); /* 17 → 18 px */
+    --fgd-font-size-body-ui: clamp(var(--font-size-1), calc(1rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.0625rem); /* 16 → 17 px */
+    --fgd-font-size-marquee: clamp(1.375rem, calc(1.375rem + 0.25 * (100vw - 22.5rem) / 41.5), 1.625rem); /* 22 → 26 px */
+    --fgd-font-size-button-lg: 1.0625rem; /* 17 px */
+    --fgd-font-size-button: clamp(0.875rem, calc(0.875rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.9375rem); /* 14 → 15 px */
+    --fgd-font-size-footnote: 0.9375rem; /* 15 px */
+    --fgd-font-size-caption: 0.875rem; /* 14 px */
+    --fgd-font-size-eyebrow: clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.875rem); /* 13 → 14 px */
+    --fgd-font-size-label: 0.8125rem; /* 13 px */
+    --fgd-font-size-url: 8pt; /* print only */
     /* type-stat: display-xl on screen, 24 pt in print (§1.5.6, §8.8), where display-xl prints 26 pt (print.css). */
-    --ds-font-size-stat: var(--ds-font-size-display-xl);
-    --ds-lockup-accent-factor: 1.45; /* provisional: compute from font metrics [D64] */
+    --fgd-font-size-stat: var(--fgd-font-size-display-xl);
+    --fgd-lockup-accent-factor: 1.45; /* provisional: compute from font metrics [D64] */
 
     /* Leading, tracking, numerals, measure (§1.5.6). */
-    --ds-leading-display: 1;
-    --ds-leading-compact: 1.4;
-    --ds-leading-reading: 1.6;
-    --ds-tracking-tight: -0.01em;
-    --ds-numerals-prose: oldstyle-nums proportional-nums;
-    --ds-numerals-data: lining-nums tabular-nums;
-    --ds-measure-reading: 66ch;
-    --ds-measure-print: 66ch;
+    --fgd-leading-display: 1;
+    --fgd-leading-compact: 1.4;
+    --fgd-leading-reading: 1.6;
+    --font-letterspacing-0-5: -0.01em; /* between Open Props' --font-letterspacing-0 (-0.05em) and --font-letterspacing-1 (0.025em) */
+    --fgd-numerals-prose: oldstyle-nums proportional-nums;
+    --fgd-numerals-data: lining-nums tabular-nums;
+    --fgd-measure-reading: 66ch;
+    --fgd-measure-print: 66ch;
 
     /* Sizing and hit targets (§1.5.12). */
-    --ds-size-control-md: 40px;
-    --ds-size-control-xl: 56px;
-    --ds-size-hit: 44px;
-    --ds-size-icon-block: 36px;
+    --fgd-size-control-md: 40px;
+    --fgd-size-control-xl: 56px;
+    --fgd-size-hit: 44px;
+    /* The room a hanging File Tabs control (the code block's ⋮) needs past its host's edge: its 20 px ear and clearance; hosts leave it free and unclipped (§9.13). */
+    --fgd-size-file-tabs-control: var(--size-px-5);
+    --fgd-size-icon-block: 36px;
     /* The logo mark in a lockup, a prominent mark sized to the header bar: 40 px, 48 px from --lg-n-above, 32 px below --xs-n-below (§1.5.12). */
-    --ds-size-logo: var(--ds-size-control-md);
-    --ds-size-bar-utility: 36px;
-    --ds-size-art-s: 152px;
-    --ds-size-art-l: 312px;
-    --ds-size-art-plate-wide: 640px;
-    --ds-size-thumb: 72px;
-    --ds-size-avatar-xl: 128px;
-    --ds-size-tick-minor: 6px; /* slider minor tick */
-    --ds-size-pager-dot: 10px; /* step pager position dot, outlined (§9.9) */
-    --ds-size-pager-dot-current: 12px; /* the current dot, solid (§9.9) */
+    --fgd-size-logo: var(--fgd-size-control-md);
+    --fgd-size-bar-utility: 36px;
+    --fgd-size-art-s: 152px;
+    --fgd-size-art-l: 312px;
+    --fgd-size-art-plate-wide: 640px;
+    --fgd-size-thumb: 72px;
+    --fgd-size-avatar-xl: 128px;
+    --fgd-size-tick-minor: 6px; /* slider minor tick */
+    --fgd-size-pager-dot: 10px; /* step pager position dot, outlined (§9.9) */
+    --fgd-size-pager-dot-current: 12px; /* the current dot, solid (§9.9) */
 
     /* Overlay panels (§10.1, §9.7, §10.16). JS mirrors: utils/tokens.ts. */
-    --ds-size-tooltip: 280px; /* tooltip max width */
-    --ds-size-overlay-max: 360px; /* anchored panel max width (popover, preview card, select list) */
-    --ds-size-menu-min: 200px; /* menu min width */
-    --ds-popup-offset: var(--size-px-2); /* 8 px, panel to trigger */
-    --ds-popup-clearance: var(--size-px-3); /* 16 px, panel to viewport edge (base --ds-space-margin) */
+    --fgd-size-tooltip: 280px; /* tooltip max width */
+    --fgd-size-overlay-max: 360px; /* anchored panel max width (popover, preview card, select list) */
+    --fgd-size-menu-min: 200px; /* menu min width */
+    --fgd-popup-offset: var(--size-px-2); /* 8 px, panel to trigger */
+    --fgd-popup-clearance: var(--size-px-3); /* 16 px, panel to viewport edge (base --fgd-space-margin) */
 
     /*
      * Table density (§8.2, §1.5.16) [D83, D169]: cell padding, the minimum
      * row pitch and the row-rule switch, so a Ground's data-density reaches
-     * every Table inside it (the density sets below). --ds-table-row-rule is
+     * every Table inside it (the density sets below). --fgd-table-row-rule is
      * the width of the --role-rule row rule that replaces the --role-hairline
-     * one: 0 while padding holds --ds-space-12, --border-size-1 when compact.
+     * one: 0 while padding holds --size-px-2-5, --border-size-1 when compact.
      */
-    --ds-table-pad-block: var(--ds-space-12);
-    --ds-table-pad-inline: var(--size-px-3);
-    --ds-table-row-min: 0px;
-    --ds-table-row-rule: 0px;
+    --fgd-table-pad-block: var(--size-px-2-5);
+    --fgd-table-pad-inline: var(--size-px-3);
+    --fgd-table-row-min: 0px;
+    --fgd-table-row-rule: 0px;
 
     /* Containers (§1.5.13): with --size-sm (480 px) and --size-content-2. */
-    --ds-container-content: 1120px;
-    --ds-container-wide: 1360px;
+    --fgd-container-content: 1120px;
+    --fgd-container-wide: 1360px;
 
     /* Focus (§1.5.14): 2 px ring at a 2 px offset, color --primary12. */
-    --ds-focus-width: var(--border-size-2);
-    --ds-focus-offset: var(--border-size-2);
+    --fgd-focus-width: var(--border-size-2);
+    --fgd-focus-offset: var(--border-size-2);
 
     /* Motion (§1.5.15): with --ease-out-3. */
-    --ds-duration-instant: 0ms;
-    --ds-duration-quick: 120ms;
-    --ds-duration-disclosure: 200ms;
-    --ds-delay-tooltip: 500ms;
-    --ds-duration-toast: 6s;
+    --fgd-duration-instant: 0ms;
+    --fgd-duration-quick: 120ms;
+    --fgd-duration-disclosure: 200ms;
+    --fgd-delay-tooltip: 500ms;
+    --fgd-duration-toast: 6s;
+    /*
+     * The expanding box's View Transitions morph (a field-like trigger into
+     * its dialog). Open runs --fgd-duration-expand on --fgd-ease-expand;
+     * close runs --fgd-duration-disclosure, so it stays the faster. The ease
+     * is a critically damped spring (stiffness 0.3, damping 1) sampled as
+     * linear() stops, its one undershoot stop clipped to 0 so the curve
+     * never leaves [0, 1]: no overshoot. JS mirror: utils/tokens.ts.
+     */
+    --fgd-duration-expand: 333ms;
+    /*
+     * The anchored morph's close (the outline morph, §9.17) [D204]: an alias
+     * of --fgd-duration-disclosure (200 ms), so the Morph tier owns its own
+     * name and a close is never slower than its open. The outline morph reads
+     * it, --fgd-duration-expand and --fgd-ease-expand from the trigger at each
+     * open and close; 0ms turns the morph off. JS mirror: utils/tokens.ts.
+     */
+    --fgd-duration-collapse: var(--fgd-duration-disclosure);
+    /*
+     * The modal morph (the outline morph on Dialog, Alert Dialog and the
+     * drawer's sheets, §9.17) [D206]: the same curve, stretched for the
+     * longer travel from a trigger to a panel or a full sheet; the close is
+     * 0.6 × the open, the ratio of 333 to 200. 0ms turns that morph off.
+     * JS mirror: SURFACE_DURATION_MS in utils/tokens.ts.
+     */
+    --fgd-duration-expand-surface: 400ms;
+    --fgd-duration-collapse-surface: 240ms;
+    --fgd-ease-expand: 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: the rendered code swaps after
+     * this delay while its changed lines grow or shrink over it. JS mirror
+     * (useCode's transformDelay / variantSwapDelay): utils/tokens.ts.
+     */
+    --fgd-duration-swap: 350ms;
     /* Desktop Navigation Menu hover intent [D182]; JS mirror: utils/tokens.ts. */
-    --ds-delay-nav-open: 150ms;
-    --ds-delay-nav-close: 300ms;
+    --fgd-delay-nav-open: 150ms;
+    --fgd-delay-nav-close: 300ms;
 
-    /* Media (§1.5.16): with --ratio-widescreen, --ratio-portrait, --ratio-square. */
-    --ds-ratio-photo: 3 / 2;
+    /* Media (§1.5.16): joins Open Props' --ratio-widescreen, --ratio-portrait and --ratio-square. */
+    --ratio-photo: 3 / 2;
 
     /* Print (§1.5.13, §1.5.16). */
-    --ds-print-margin-inline: 18mm;
-    --ds-print-margin-block: 20mm;
-    --ds-print-live-width: 174mm;
-    --ds-print-figure-max: 100mm;
-    --ds-print-hero-max: 60mm;
-    --ds-print-qr: 22mm;
+    --fgd-print-margin-inline: 18mm;
+    --fgd-print-margin-block: 20mm;
+    --fgd-print-live-width: 174mm;
+    --fgd-print-figure-max: 100mm;
+    --fgd-print-hero-max: 60mm;
+    --fgd-print-qr: 22mm;
     /* The trail and timeline spines in print: 0.75 pt, 3 pt dash, 2.5 pt gap (§1.5.8, §4.7.1) [D142]. */
-    --ds-print-trail-stroke: 0.75pt;
-    --ds-print-trail-dash: 3pt;
-    --ds-print-trail-gap: 2.5pt;
+    --fgd-print-trail-stroke: 0.75pt;
+    --fgd-print-trail-dash: 3pt;
+    --fgd-print-trail-gap: 2.5pt;
   }
 
   @media (min-width: 480px) {
     :root {
-      --ds-space-margin: var(--size-px-5);
+      --fgd-space-margin: var(--size-px-5);
     }
   }
 
   @media (min-width: 768px) {
     :root {
-      --ds-space-margin: var(--size-px-7);
+      --fgd-space-margin: var(--size-px-7);
     }
   }
 
   @media (max-width: 359.98px) {
     :root {
-      --ds-size-logo: var(--size-px-7);
+      --fgd-size-logo: var(--size-px-7);
     }
   }
 
   @media (min-width: 1024px) {
     :root {
-      --ds-size-logo: var(--size-px-8);
-      --ds-space-margin: var(--ds-space-40);
-      --ds-space-section: var(--size-px-10);
-      --ds-ruled-pitch: 29px;
+      --fgd-size-logo: var(--size-px-8);
+      --fgd-space-margin: var(--size-px-7-5);
+      --fgd-space-section: var(--size-px-10);
+      --fgd-ruled-pitch: 29px;
     }
   }
 
   /* Reduced motion: every duration is instant (§1.5.15). */
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --ds-duration-quick: var(--ds-duration-instant);
-      --ds-duration-disclosure: var(--ds-duration-instant);
+      --fgd-duration-quick: var(--fgd-duration-instant);
+      --fgd-duration-disclosure: var(--fgd-duration-instant);
+      --fgd-duration-expand: var(--fgd-duration-instant);
+      --fgd-duration-expand-surface: var(--fgd-duration-instant);
+      --fgd-duration-collapse-surface: var(--fgd-duration-instant);
+      --fgd-duration-swap: var(--fgd-duration-instant);
     }
   }
 
   /* Density sets (§1.5.16), set per module, never by breakpoint (§5.8). */
   [data-density='spacious'] {
-    --ds-space-section: var(--size-px-10);
+    --fgd-space-section: var(--size-px-10);
   }
 
   /* Default and spacious keep the default table; restated so a nested module resets a compact parent. */
   [data-density='default'],
   [data-density='spacious'] {
-    --ds-table-pad-block: var(--ds-space-12);
-    --ds-table-pad-inline: var(--size-px-3);
-    --ds-table-row-min: 0px;
-    --ds-table-row-rule: 0px;
+    --fgd-table-pad-block: var(--size-px-2-5);
+    --fgd-table-pad-inline: var(--size-px-3);
+    --fgd-table-row-min: 0px;
+    --fgd-table-row-rule: 0px;
   }
 
-  /* Compact: cells --size-px-2 × --ds-space-12, rows ≥ 32 px, --role-rule row rules [D83]. */
+  /* Compact: cells --size-px-2 × --size-px-2-5, rows ≥ 32 px, --role-rule row rules [D83]. */
   [data-density='compact'] {
-    --ds-space-section: var(--size-px-7);
-    --ds-table-pad-block: var(--size-px-2);
-    --ds-table-pad-inline: var(--ds-space-12);
-    --ds-table-row-min: var(--size-px-7);
-    --ds-table-row-rule: var(--border-size-1);
+    --fgd-space-section: var(--size-px-7);
+    --fgd-table-pad-block: var(--size-px-2);
+    --fgd-table-pad-inline: var(--size-px-2-5);
+    --fgd-table-row-min: var(--size-px-7);
+    --fgd-table-row-rule: var(--border-size-1);
   }
 
   @media (min-width: 1024px) {
     [data-density='spacious'] {
-      --ds-space-section: var(--size-px-11);
+      --fgd-space-section: var(--size-px-11);
     }
 
     [data-density='compact'] {
-      --ds-space-section: var(--ds-space-40);
+      --fgd-space-section: var(--size-px-7-5);
     }
   }
 }
@@ -444,31 +521,31 @@
      * every other scope, and on the night band wherever its --role-seam turns
      * visible (dark mode), so the band shows its straight seam rule instead.
      */
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
 
     /*
      * Hover underline switches [D181], `none` or `underline`, set per scope
-     * by the role maps (roles.css), like --ds-edge-shaped:
-     * - --ds-link-hover-line: `underline` where --role-link-hover is
+     * by the role maps (roles.css), like --fgd-edge-shaped:
+     * - --fgd-link-hover-line: `underline` where --role-link-hover is
      *   --primary12 (saturated fields, royal, brick, dark rose and heather),
      *   so a hover that would change only an ink also underlines;
-     * - --ds-soft-hover-line: `underline` where soft fills drop (the
+     * - --fgd-soft-hover-line: `underline` where soft fills drop (the
      *   pastels, forest, the solid fields), so the outline Button's hover
      *   takes the bare-text underline instead of its --primary3 fill.
      */
-    --ds-link-hover-line: none;
-    --ds-soft-hover-line: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
 
     /*
      * Chart sequential-cell switches (§8.7) [D125, D167], `display` values
-     * set per scope by the role maps (roles.css), like --ds-edge-shaped: a
+     * set per scope by the role maps (roles.css), like --fgd-edge-shaped: a
      * light base ground (and a `white` plate) shows the flat screen fills
-     * (--ds-series-fill: inline); every other ground shows the one-ink
-     * patterns on screen (--ds-series-pattern: inline). The odd-slot ink is
+     * (--fgd-series-fill: inline); every other ground shows the one-ink
+     * patterns on screen (--fgd-series-pattern: inline). The odd-slot ink is
      * the --role-series-odd alias.
      */
-    --ds-series-fill: inline;
-    --ds-series-pattern: none;
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
   }
 }
 /* Generated by scripts/build-colors.js. Do not edit. */
@@ -2922,21 +2999,21 @@
   :root,
   [data-theme='light'] {
     color-scheme: light;
-    --ds-font-fine: var(--ds-font-text);
-    --ds-muted-weight-step: 0;
+    --fgd-font-fine: var(--fgd-font-text);
+    --fgd-muted-weight-step: 0;
   }
 
   [data-theme='dark'] {
     color-scheme: dark;
-    --ds-font-fine: var(--ds-font-ui);
-    --ds-muted-weight-step: 100;
+    --fgd-font-fine: var(--fgd-font-ui);
+    --fgd-muted-weight-step: 100;
   }
 
   @media only screen and (prefers-color-scheme: dark) {
     :root:not([data-theme='light']) {
       color-scheme: dark;
-      --ds-font-fine: var(--ds-font-ui);
-      --ds-muted-weight-step: 100;
+      --fgd-font-fine: var(--fgd-font-ui);
+      --fgd-muted-weight-step: 100;
     }
   }
 }
@@ -2998,7 +3075,7 @@
  *
  * Charts [D125]: --role-series-odd is the odd series slots' ink,
  * --secondary11 on light base grounds (and a `white` plate) and --primary12
- * elsewhere (§8.7); the --ds-series-fill / --ds-series-pattern switches
+ * elsewhere (§8.7); the --fgd-series-fill / --fgd-series-pattern switches
  * (tokens.css) pick the sequential cells' screen fill or one-ink pattern.
  */
 @layer roles {
@@ -3114,11 +3191,11 @@
     --role-danger-hover: var(--danger12);
     --role-danger-text: var(--danger11);
     /* Switches (tokens.css): shaped edges only on the night band in light mode [D179]. */
-    --ds-edge-shaped: none;
-    --ds-link-hover-line: none;
-    --ds-soft-hover-line: none;
-    --ds-series-fill: none;
-    --ds-series-pattern: inline;
+    --fgd-edge-shaped: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
+    --fgd-series-fill: none;
+    --fgd-series-pattern: inline;
   }
 
   /* Tone-resolved aliases [D155, D141]. */
@@ -3128,8 +3205,8 @@
     --role-status-fill: var(--secondary4);
     /* Two-ink charts: odd slots --secondary11 and the sequential screen fills, in both modes (§8.7). */
     --role-series-odd: var(--secondary11);
-    --ds-series-fill: inline;
-    --ds-series-pattern: none;
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
   }
 
   [data-tone='tinted'] {
@@ -3148,7 +3225,7 @@
   [data-tone='solid-dark'] {
     --role-soft-hover: var(--role-ground);
     --role-soft-hover-face: var(--role-halo);
-    --ds-soft-hover-line: underline;
+    --fgd-soft-hover-line: underline;
   }
 
   /* Dark fixed scopes: a pill fill that reaches 3:1 is its own edge. */
@@ -3169,7 +3246,7 @@
     /* One ink [D14]: link hover is that ink plus the underline; selection hovers the inverse pair [D181]. */
     --role-link-hover: var(--primary12);
     --role-select-hover: var(--primary11);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
     /* The ink pill. */
     --role-pill: var(--primary12);
     --role-pill-label: var(--role-inverse);
@@ -3240,7 +3317,7 @@
     --role-grain-light: var(--primary4);
     --role-grain-dark: var(--primary1);
     /* The one seam tone separates (from a light page ground): the shaped edge may sit here [D179]. */
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 
   [data-ground='forest'] {
@@ -3262,7 +3339,7 @@
     --role-grain-light: var(--primary8);
     --role-grain-dark: var(--primary6);
     --role-disabled-edge: var(--primary12); /* one text ink [D85, D115] */
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='leaf'] {
@@ -3281,7 +3358,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='amber'] {
@@ -3300,7 +3377,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary6);
     --role-grain-dark: var(--secondary8);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='clay'] {
@@ -3319,7 +3396,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='pink'] {
@@ -3337,7 +3414,7 @@
     --role-action-label: var(--primary1);
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='royal'] {
@@ -3355,7 +3432,7 @@
     --role-action-label: var(--secondary-contrast);
     --role-action-edge: var(--secondary9);
     --role-grain-dark: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='brick'] {
@@ -3376,7 +3453,7 @@
     --role-status-text: var(--secondary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary6);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   /*
@@ -3425,7 +3502,7 @@
    */
   [data-theme='dark']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--primary12);
-    --ds-edge-shaped: none;
+    --fgd-edge-shaped: none;
   }
 
   /*
@@ -3456,7 +3533,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary9);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
@@ -3492,14 +3569,14 @@
     --role-select-text-label: var(--role-select-mark);
     --role-select-text-edge: var(--role-select-edge);
     --role-select-text-hover: var(--role-select-hover);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
     /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
     --role-link-hover: var(--primary12);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
   }
 
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
@@ -3561,7 +3638,7 @@
       --role-pill: var(--secondary9);
       --role-pill-label: var(--secondary-contrast);
       --role-pill-edge: var(--secondary9);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
@@ -3596,14 +3673,14 @@
       --role-select-text-label: var(--role-select-mark);
       --role-select-text-edge: var(--role-select-edge);
       --role-select-text-hover: var(--role-select-hover);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
       /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
       --role-link-hover: var(--primary12);
-      --ds-link-hover-line: underline;
+      --fgd-link-hover-line: underline;
     }
 
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
@@ -3620,7 +3697,7 @@
 
     :root:not([data-theme='light']) [data-ground='night'] {
       --role-seam: var(--primary12);
-      --ds-edge-shaped: none;
+      --fgd-edge-shaped: none;
     }
   }
 
@@ -3654,7 +3731,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='white'],
@@ -3693,7 +3770,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='rose'],
@@ -3736,58 +3813,182 @@
    */
   :root [data-theme='light']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--role-ground);
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 }
+/*
+ * View Transitions: the expanding box's morph (foundations/expanding-box),
+ * a field-like trigger growing into its dialog and back. The
+ * `::view-transition-*` pseudo-elements carry no local class, so their rules
+ * cannot live in a CSS Module; they live here, imported once by global.css.
+ *
+ * ExpandingBox sets each piece's view-transition-name per instance (never
+ * in CSS) and gives every piece the class `fgd-xb` plus its kind
+ * (`fgd-xb-corner`, `-edge`, `-face`, `-content`, `-main`, `-end`,
+ * `-extra`, `-focus`), so these rules select by class only.
+ * startExpandingTransition marks the running morph on the root element,
+ * <html data-fgd-expanding="open|close">, and the pieces add `closing`
+ * while it reads `close`.
+ *
+ * Only group geometry animates, never opacity: the pieces' images take no
+ * animation and their old images are hidden, so each piece shows its new
+ * state from the first frame while its group travels; while the flag is
+ * set, no image in the transition (the root snapshot included) crossfades.
+ * Timing: --fgd-duration-expand on --fgd-ease-expand to open,
+ * --fgd-duration-collapse (an alias of --fgd-duration-disclosure) to close,
+ * so the close stays the faster; startExpandingTransition reads the same
+ * tokens on the trigger, and a 0 duration there applies the change at once. The
+ * focus ring's new image is held hidden for --fgd-duration-disclosure (a
+ * discrete visibility hold, not a fade), so the ring shows once the frame
+ * has landed. Under reduced motion the morph never starts.
+ */
+@layer base {
+  /*
+   * Groups: geometry only, stacked as the box paints: the face (and the
+   * ring's piece) lowest, the corners and the four edges over it, the
+   * content on top. Left to document order, the face would paint over the
+   * head corners' straight run.
+   */
+  ::view-transition-group(*.fgd-xb) {
+    z-index: var(--layer-1);
+    animation-duration: var(--fgd-duration-expand);
+    animation-timing-function: var(--fgd-ease-expand);
+  }
+
+  ::view-transition-group(*.fgd-xb-corner),
+  ::view-transition-group(*.fgd-xb-edge) {
+    z-index: var(--layer-2);
+  }
+
+  ::view-transition-group(*.fgd-xb-content),
+  ::view-transition-group(*.fgd-xb-main),
+  ::view-transition-group(*.fgd-xb-end),
+  ::view-transition-group(*.fgd-xb-extra) {
+    z-index: var(--layer-3);
+  }
+
+  ::view-transition-group(*.fgd-xb.closing) {
+    animation-duration: var(--fgd-duration-collapse);
+  }
+
+  /* Images: no crossfade. The old image is hidden; the new one shows at once. */
+  ::view-transition-old(*.fgd-xb),
+  ::view-transition-new(*.fgd-xb) {
+    animation: none;
+  }
+
+  ::view-transition-old(*.fgd-xb) {
+    display: none;
+  }
+
+  /* Content and main keep their proportions and hug the left edge. */
+  ::view-transition-new(*.fgd-xb-content),
+  ::view-transition-new(*.fgd-xb-main) {
+    block-size: 100%;
+    inline-size: fit-content;
+    object-position: left;
+  }
+
+  /* The end piece keeps its size and rides the right edge. */
+  ::view-transition-new(*.fgd-xb-end) {
+    inline-size: fit-content;
+    object-position: right;
+  }
+
+  /* The extra grows from the main piece's foot. */
+  ::view-transition-new(*.fgd-xb-extra) {
+    block-size: 100%;
+    object-position: left;
+  }
+
+  /*
+   * The four edges fill their groups, which change only in length (an edge
+   * strip keeps its thickness), so they stretch along it at a constant
+   * weight; the borderless face fills freely; corners keep their size.
+   */
+  ::view-transition-new(*.fgd-xb-face),
+  ::view-transition-new(*.fgd-xb-edge) {
+    block-size: 100%;
+  }
+
+  /* While the morph runs, nothing else crossfades either: not the root snapshot, not a stray name. */
+  :root[data-fgd-expanding]::view-transition-old(*),
+  :root[data-fgd-expanding]::view-transition-new(*) {
+    animation: none;
+  }
+
+  :root[data-fgd-expanding]::view-transition-old(*) {
+    display: none;
+  }
+
+  /* The root does not move; its group adds no time to the morph. */
+  :root[data-fgd-expanding]::view-transition-group(root) {
+    animation: none;
+  }
+
+  /* The ring hand-off: hidden while the frame travels, then shown (after the rules above, and as specific). */
+  :root[data-fgd-expanding]::view-transition-new(*.fgd-xb-focus) {
+    animation: fgd-xb-hold var(--fgd-duration-disclosure) linear;
+  }
+}
+
+@keyframes fgd-xb-hold {
+  from,
+  to {
+    visibility: hidden;
+  }
+}
+
 /*
  * The print remap (§1.11.6, §1.4.5). Print always renders light, whatever
  * the screen mode, including inside a data-theme="dark" band: steps 1–5 of
- * the role scales go white and 6–12 black; contrast inks and label aliases
- * black; halo, grounds, tints and grain white; the seam black. Browsers drop
- * backgrounds by default, so fills and decorative patterns vanish; borders
- * and inline SVG print. Modules add structural print rules only.
+ * the role scales (danger included) go white and 6–12 black, so the danger
+ * roles print black; contrast inks and label aliases black; halo, grounds,
+ * tints and grain white; the seam black. Browsers drop backgrounds by
+ * default, so fills and decorative patterns vanish; borders and inline SVG
+ * print. Modules add structural print rules only.
  */
 @layer print {
   @media print {
     @page {
-      margin: var(--ds-print-margin-block) var(--ds-print-margin-inline);
+      margin: var(--fgd-print-margin-block) var(--fgd-print-margin-inline);
     }
 
     :root {
       color-scheme: light;
-      --ds-font-fine: var(--ds-font-text);
-      --ds-muted-weight-step: 0;
+      --fgd-font-fine: var(--fgd-font-text);
+      --fgd-muted-weight-step: 0;
 
       /* Print values of the tokens (§1.5). 1 px = 0.75 pt, so most px values already map exactly. */
-      --ds-font-size-display-xl: 26pt;
-      --ds-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
-      --ds-font-size-display: 22pt;
-      --ds-font-size-h2: 17pt;
-      --ds-font-size-itemhead: 13pt;
-      --ds-font-size-kicker: 10.5pt;
-      --ds-font-size-subhead: 11pt;
-      --ds-font-size-lead: 12pt;
-      --ds-font-size-quote: 14pt;
-      --ds-font-size-body: 10.5pt;
-      --ds-font-size-body-ui: 10pt;
-      --ds-font-size-marquee: 11pt;
-      --ds-font-size-button-lg: 10pt;
-      --ds-font-size-button: 9pt;
-      --ds-font-size-footnote: 8.5pt;
-      --ds-font-size-caption: 8.5pt;
-      --ds-font-size-eyebrow: 8pt;
-      --ds-font-size-label: 8pt;
-      --ds-leading-reading: var(--ds-leading-compact);
-      --ds-space-56: 36pt;
-      --ds-space-section: 36pt;
+      --fgd-font-size-display-xl: 26pt;
+      --fgd-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
+      --fgd-font-size-display: 22pt;
+      --fgd-font-size-h2: 17pt;
+      --fgd-font-size-itemhead: 13pt;
+      --fgd-font-size-kicker: 10.5pt;
+      --fgd-font-size-subhead: 11pt;
+      --fgd-font-size-lead: 12pt;
+      --fgd-font-size-quote: 14pt;
+      --fgd-font-size-body: 10.5pt;
+      --fgd-font-size-body-ui: 10pt;
+      --fgd-font-size-marquee: 11pt;
+      --fgd-font-size-button-lg: 10pt;
+      --fgd-font-size-button: 9pt;
+      --fgd-font-size-footnote: 8.5pt;
+      --fgd-font-size-caption: 8.5pt;
+      --fgd-font-size-eyebrow: 8pt;
+      --fgd-font-size-label: 8pt;
+      --fgd-leading-reading: var(--fgd-leading-compact);
+      --size-px-8-5: 36pt;
+      --fgd-space-section: 36pt;
       --size-px-10: 36pt;
       --size-px-11: 48pt;
-      --ds-space-margin: 0;
-      --ds-stroke-0-75: 0.75pt;
-      --ds-stroke-1-25: 1pt;
-      --ds-stroke-1-5: 1.1pt;
-      --ds-stroke-8: 4pt;
-      --ds-measure-reading: var(--ds-measure-print);
+      --fgd-space-margin: 0;
+      --border-size-0-75: 0.75pt;
+      --border-size-1-25: 1pt;
+      --border-size-1-5: 1.1pt;
+      --border-size-3-5: 4pt;
+      --fgd-measure-reading: var(--fgd-measure-print);
     }
 
     :root,
@@ -3828,12 +4029,25 @@
       --action10: #000;
       --action11: #000;
       --action12: #000;
+      --danger1: #fff;
+      --danger2: #fff;
+      --danger3: #fff;
+      --danger4: #fff;
+      --danger5: #fff;
+      --danger6: #000;
+      --danger7: #000;
+      --danger8: #000;
+      --danger9: #000;
+      --danger10: #000;
+      --danger11: #000;
+      --danger12: #000;
       --primary-contrast: #000;
       --secondary-contrast: #000;
       --action-contrast: #000;
       --role-inverse: #000;
       --role-action-label: #000;
       --role-action-pressed-label: #000;
+      --role-danger-label: #000;
       --role-select-mark: #000;
       --role-status-text: #000;
       --role-halo: #fff;