@cloudgrid-io/ui 0.27.2 → 0.29.0

package/README.md

@@ -35,6 +35,7 @@ component tree.
 
 @import "@cloudgrid-io/ui/fonts.css";
 @import "@cloudgrid-io/ui/tokens.css";
+@import "@cloudgrid-io/ui/console.css";   /* optional, see below */
 @import "@cloudgrid-io/ui/theme.css";
 @import "@cloudgrid-io/ui/shadcn.css";
 ```
@@ -44,10 +45,15 @@ The order matters, and getting it wrong fails quietly rather than loudly.
 - `theme.css` maps Tailwind utilities onto the tokens. Before `tokens.css` has run there is
   nothing to map, so every utility resolves to nothing and the page renders unstyled
   instead of erroring.
+- `console.css` is a **product preset**, not part of the base. It re-declares the body and
+  display faces as the UI face, Manrope. The CloudGrid Console imports it; so should any
+  product whose type is the UI face rather than the display face. Everyone else leaves the
+  line out and keeps the default. It has to sit after `tokens.css`, which is what it
+  re-declares, and before `theme.css`, which maps the utilities onto the result.
 - `shadcn.css` must come after whatever `:root` your own `shadcn init` wrote, because it
   overrides those values. Put it earlier and the stock grey palette wins.
 
-Not using shadcn: skip the last line. Not using Tailwind: `tokens.css` alone gives you every
+Not using the Console's face: skip the `console.css` line. Not using shadcn: skip the last line. Not using Tailwind: `tokens.css` alone gives you every
 value as a custom property.
 
 ## Point Tailwind at the package
@@ -92,6 +98,7 @@ property of a container, never a page-level theme.
 | | |
 |---|---|
 | `@cloudgrid-io/ui/tokens.css` | every value as a CSS custom property |
+| `@cloudgrid-io/ui/console.css` | product preset: body and display type set to Manrope |
 | `@cloudgrid-io/ui/theme.css` | maps Tailwind utilities onto the tokens |
 | `@cloudgrid-io/ui/shadcn.css` | maps shadcn's variables onto the tokens |
 | `@cloudgrid-io/ui/fonts.css` | the three self-hosted families |

package/dist/blocks/avatar.d.ts

@@ -92,17 +92,23 @@ export type AvatarDiameter = (typeof AVATAR_DIAMETERS)[number];
  * The 0.26 letter names, and what each one was worth in pixels.
  *
  * @deprecated Pass the diameter instead: `18`, `24`, `38`. Kept working through
- * 0.27 so a consumer's 23 call sites do not all have to move on the same bump;
+ * 0.28 so a consumer's 23 call sites do not all have to move on the same bump;
  * the shape is unchanged, so `AVATAR_SIZES[size]` still returns the pixels.
- * Removed in 0.28. There is deliberately no letter for 32: a name added the same
+ * Removed in 0.29. There is deliberately no letter for 32: a name added the same
  * release it was deprecated would be a rung nobody should start using.
+ *
+ * The target moved from 0.28 to 0.29 in #216: 0.28.0 shipped without the
+ * removal because the consumer sweep it is gated on has not happened, and a
+ * published version is immutable, so the date had to move rather than the
+ * promise. The reason is recorded on #216, which stays open until the removal
+ * lands.
  */
 export declare const AVATAR_SIZES: {
     readonly s: 18;
     readonly m: 24;
     readonly l: 38;
 };
-/** @deprecated Use `AvatarDiameter`. Removed in 0.28. */
+/** @deprecated Use `AvatarDiameter`. Removed in 0.29. See #216. */
 export type AvatarSize = keyof typeof AVATAR_SIZES;
 declare function Avatar({ name, seed, src, alt, size, monogram, className, style, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
     /** Whose mark this is. Read for the initials, and for the hue unless `seed` is given. */
@@ -126,7 +132,7 @@ declare function Avatar({ name, seed, src, alt, size, monogram, className, style
      * The diameter: `18`, `24`, `32` or `38`.
      *
      * The 0.26 letters — `'s'`, `'m'`, `'l'` — still resolve to 18, 24 and 38
-     * through 0.27. They are deprecated; see `AVATAR_DIAMETERS`.
+     * through 0.28. They are deprecated; see `AVATAR_DIAMETERS`.
      */
     size?: AvatarDiameter | AvatarSize;
     /** Overrides the derived initials, for a name they read badly from. */

package/dist/blocks/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,gBAAgB,2BAA4B,CAAA;AAEzD,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAA;AAEV,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAA;AAgBlD,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IAClC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BA2DA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,gBAAgB,2BAA4B,CAAA;AAEzD,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAA;AAEV,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAA;AAgBlD,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IAClC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BA2DA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/blocks/avatar.js

@@ -93,10 +93,16 @@ export const AVATAR_DIAMETERS = [18, 24, 32, 38];
  * The 0.26 letter names, and what each one was worth in pixels.
  *
  * @deprecated Pass the diameter instead: `18`, `24`, `38`. Kept working through
- * 0.27 so a consumer's 23 call sites do not all have to move on the same bump;
+ * 0.28 so a consumer's 23 call sites do not all have to move on the same bump;
  * the shape is unchanged, so `AVATAR_SIZES[size]` still returns the pixels.
- * Removed in 0.28. There is deliberately no letter for 32: a name added the same
+ * Removed in 0.29. There is deliberately no letter for 32: a name added the same
  * release it was deprecated would be a rung nobody should start using.
+ *
+ * The target moved from 0.28 to 0.29 in #216: 0.28.0 shipped without the
+ * removal because the consumer sweep it is gated on has not happened, and a
+ * published version is immutable, so the date had to move rather than the
+ * promise. The reason is recorded on #216, which stays open until the removal
+ * lands.
  */
 export const AVATAR_SIZES = {
     s: 18,

package/dist/blocks/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAA;AAKzD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAA;AAKV;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAI,CAAA;AAE3B,SAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EA4BT;IACC,4EAA4E;IAC5E,gEAAgE;IAChE,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;IAEhD,6EAA6E;IAC7E,uEAAuE;IACvE,MAAM,MAAM,GAAG,GAAG,KAAK,SAAS,CAAA;IAEhC,OAAO,CACL,6BACY,QAAQ,eASP,GAAG,eACH,IAAI,CAAC,IAAI,KAChB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAC3E,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CACV,EACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG,EAAE,CAAC,GAAG,EAAE;YACpD,UAAU,EAAE,CAAC;YACb,yEAAyE;YACzE,wEAAwE;YACxE,mEAAmE;YACnE,4CAA4C;YAC5C,UAAU,EAAE,0BAA0B,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,kBAAkB;YAC9E,KAAK,EAAE,2BAA2B;YAClC,GAAG,KAAK;SACT,KACG,KAAK,aAET,4BAAgB,iBAAiB,iBAAa,MAAM,YACjD,OAAO,GACH,EACN,GAAG,CAAC,CAAC,CAAC;YACL,sEAAsE;YACtE,+DAA+D;YAC/D,2BACY,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EACtB,SAAS,EAAC,yCAAyC,GACnD,CACH,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAA;AAKzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAA;AAKV;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAI,CAAA;AAE3B,SAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EA4BT;IACC,4EAA4E;IAC5E,gEAAgE;IAChE,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;IAEhD,6EAA6E;IAC7E,uEAAuE;IACvE,MAAM,MAAM,GAAG,GAAG,KAAK,SAAS,CAAA;IAEhC,OAAO,CACL,6BACY,QAAQ,eASP,GAAG,eACH,IAAI,CAAC,IAAI,KAChB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAC3E,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CACV,EACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG,EAAE,CAAC,GAAG,EAAE;YACpD,UAAU,EAAE,CAAC;YACb,yEAAyE;YACzE,wEAAwE;YACxE,mEAAmE;YACnE,4CAA4C;YAC5C,UAAU,EAAE,0BAA0B,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,kBAAkB;YAC9E,KAAK,EAAE,2BAA2B;YAClC,GAAG,KAAK;SACT,KACG,KAAK,aAET,4BAAgB,iBAAiB,iBAAa,MAAM,YACjD,OAAO,GACH,EACN,GAAG,CAAC,CAAC,CAAC;YACL,sEAAsE;YACtE,+DAA+D;YAC/D,2BACY,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EACtB,SAAS,EAAC,yCAAyC,GACnD,CACH,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/console.css

@@ -0,0 +1,65 @@
+/*
+  A PRODUCT PRESET, not a theme and not a second brand.
+
+  The Console's type is the UI face, Manrope, for body and for display. This
+  file states that in the library, so the Console does not carry a font stack of
+  its own. ui#250, 2026-09-20.
+
+  Two declarations, and deliberately nothing else: no colour, no spacing, no
+  size, no component. A preset that grew a second concern would become a theme,
+  and this package has one brand.
+
+  WHY IT EXISTS. #243 moved --cg-font-body to Space Grotesk and --cg-font-display
+  to Tanker, measured against the six canonical marketing frames, and that is
+  correct for the marketing site. The Console deleted its own @theme font
+  forwards (console#652) and inherits every family from here, so installing
+  0.28.0 changed every face in it at once. The marketing default is untouched by
+  this file; the Console imports it and gets back exactly the two values both
+  tokens held before ef8dc00.
+
+  WHY var(--cg-font-ui) RATHER THAN THE STACK. --cg-font-ui is already the
+  Manrope stack, and its docblock in tokens.css records that its value is
+  --cg-font-body's previous value byte for byte. Aliasing keeps one copy of the
+  fallback chain in the package. A consumer that spelled the stack out instead
+  went stale the moment the library's fallbacks moved — cloudgrid-landing PR
+  #132 did exactly that with the display stack — and a copy one repo further
+  away goes stale the same way.
+
+  IMPORT ORDER. After tokens.css, which is what it re-declares, and before
+  theme.css, which maps the Tailwind utilities onto the result:
+
+      @import "tailwindcss";
+      @import "@cloudgrid-io/ui/fonts.css";
+      @import "@cloudgrid-io/ui/tokens.css";
+      @import "@cloudgrid-io/ui/console.css";   <- here
+      @import "@cloudgrid-io/ui/theme.css";
+      @import "@cloudgrid-io/ui/shadcn.css";
+
+  Import it before tokens.css and tokens.css wins: same specificity, later
+  declaration, and the page renders Space Grotesk with no error anywhere.
+
+  THE SELECTOR LIST IS LOAD-BEARING, for the reason shadcn.css states at length.
+  A custom property that references another is substituted where it is DECLARED,
+  and descendants inherit the already-resolved value. tokens.css declares the
+  font families only at :root today, because a family has no on-purple value, so
+  a :root-only preset would render correctly as things stand. It is repeated on
+  both surface selectors anyway: the day --cg-font-ui gains a per-surface value,
+  a :root-only alias freezes to the root stack and silently stops following it.
+  Three selectors is a cheaper price than that failure, and
+  test/console-preset.test.mjs pins it.
+
+  WHO IMPORTS IT. The Console first. Any product whose type is the UI face
+  rather than the display face imports the same file; nothing here is named for
+  the Console except this sentence.
+
+  SIDE EFFECT WORTH KNOWING. StatTile values read as typed again. Tanker is an
+  all-caps face, so `15s` and `Coming soon` rendered as `15S` and `COMING SOON`
+  under the marketing display token. No component changed to fix that.
+*/
+
+:root,
+[data-cg-surface='panel'],
+[data-cg-surface='ink'] {
+  --cg-font-body: var(--cg-font-ui);
+  --cg-font-display: var(--cg-font-ui);
+}

package/dist/fonts.css

@@ -2,27 +2,56 @@
   Self-hosted webfonts, not a font CDN: a third-party request in the critical
   path is both a latency cost and a privacy one.
 
-  Two faces. Manrope carries everything a reader sees — body, headings and the
-  display rung alike, since the 2026-09-10 re-skin (#197) set the whole system in
-  it — and JetBrains Mono is used only inside prompt and terminal surfaces. Both
-  are VARIABLE faces, so the brand's four weights (400 regular, 500 medium, 600
-  semibold, 700 display) are one file each rather than four.
+  Three faces ship here, and a fourth is named but deliberately absent.
+
+  Space Grotesk carries everything a reader reads. Every body string on all six
+  canonical Figma frames is set in it, at 20/1.46 for a lede and 15/1.46 for card
+  copy and nav, and it arrives as @fontsource-variable/space-grotesk under
+  OFL-1.1, which permits redistribution — the same mechanism Manrope already uses,
+  one more line. cloudgrid-landing#145 has the frame-by-frame evidence.
+
+  Manrope stays, and not as a fallback. The frames keep it for exactly two jobs,
+  the eyebrow above a heading and the label inside a button, and that pair is now
+  --cg-font-ui rather than --cg-font-body. Nothing about how those two render
+  changed; only which token spells them.
+
+  JetBrains Mono is used only inside prompt and terminal surfaces. Worth knowing:
+  NO monospace face appears anywhere in the six frames. What reads as a terminal
+  there is Space Grotesk at 22px (thegrid 8364:4510) or Manrope at 15px (builders
+  6916:8104), so the mono rung is this package's own idea and the design does not
+  contradict it or confirm it.
+
+  All three are VARIABLE faces, so the brand's four weights (400 regular, 500
+  medium, 600 semibold, 700 display) are one file each rather than four.
+
+  TANKER IS THE DISPLAY FACE AND IT CANNOT SHIP HERE. The frames set every
+  headline in it; the ITF Free Font Licence section 02 forbids redistributing the
+  Font Software through "a repository, download service, application or platform",
+  and this package is public on registry.npmjs.org. So tokens.css names the stack
+  and each consumer fetches its own copy from Fontshare, bound by section 03 in
+  its own right. --cg-font-display's note carries the full reasoning; ui#240 is
+  the issue, and its open question — whether naming a display face at all
+  reverses the 2026-09-10 re-skin (#197) — is the founder's, not this file's.
 
   Saira Semi Condensed 800 was here as the self-hosted stand-in for the licensed
   Futura Condensed Extra Bold, and both are gone with the condensed display rung.
-  A consumer that wants a display face back puts it in front of --cg-font-display
-  in its own :root; nothing here has to change.
+  The escape hatch that note described — a consumer putting its own display face
+  in front of --cg-font-display in its own :root — is what cloudgrid-landing PR
+  #132 used, and it is what naming Tanker in the stack retires. A consumer still
+  has to @font-face its own Tanker files; it no longer has to copy this package's
+  fallback chain verbatim to do it, and that copy is what went stale.
 
   The family stacks live in tokens.css.
 
   These are bare package specifiers: Vite (Astro) and Next's css-loader both
-  resolve them. A pipeline that cannot should import the two fontsource packages
+  resolve them. A pipeline that cannot should import the three fontsource packages
   directly.
 
-  Both packages are real dependencies of @cloudgrid-io/ui, so installing this
+  All three are real dependencies of @cloudgrid-io/ui, so installing this
   package is enough. v0 also shipped a '@cloudgrid/ui/fonts' JS entry for
   pipelines that cannot resolve bare CSS specifiers; it was not ported. Add it
   if a consumer turns out to need it rather than on speculation.
 */
+@import '@fontsource-variable/space-grotesk';
 @import '@fontsource-variable/manrope';
 @import '@fontsource-variable/jetbrains-mono';

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./ui/checkbox.js";
 export * from "./ui/code-block.js";
 export * from "./ui/combobox.js";
 export * from "./ui/dialog.js";
+export * from "./ui/drawer.js";
 export * from "./ui/dropdown-menu.js";
 export * from "./ui/input-group.js";
 export * from "./ui/input.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -23,6 +23,7 @@ export * from "./ui/checkbox.js";
 export * from "./ui/code-block.js";
 export * from "./ui/combobox.js";
 export * from "./ui/dialog.js";
+export * from "./ui/drawer.js";
 export * from "./ui/dropdown-menu.js";
 export * from "./ui/input-group.js";
 export * from "./ui/input.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/lib/cloudgrid-cn.d.ts

@@ -60,6 +60,6 @@ import { type ClassValue } from "clsx";
  * to write `font-regular` rediscovers this.
  */
 export declare const BRAND_FONT_WEIGHTS: readonly ["heavy", "regular"];
-export declare const BRAND_FONT_SIZES: readonly ["display-xl", "display-lg", "display-md", "display-sm", "heading-lg", "heading-md", "heading-sm", "body-lg", "body-md", "body-sm", "caption", "mono", "label"];
+export declare const BRAND_FONT_SIZES: readonly ["display-3xl", "display-2xl", "display-xl", "display-48", "display-lg", "display-md", "display-sm", "title-lg", "title-36", "title-32", "title-md", "title-24", "title-sm", "heading-lg", "heading-md", "heading-sm", "body-xl", "body-lg", "body-18", "body-md", "body-sm", "caption", "mono", "label", "eyebrow", "stat"];
 export declare function cn(...inputs: ClassValue[]): string;
 //# sourceMappingURL=cloudgrid-cn.d.ts.map

package/dist/lib/cloudgrid-cn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,0KAcnB,CAAA;AAWV,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,uUA+BnB,CAAA;AAWV,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/cloudgrid-cn.js

@@ -62,19 +62,36 @@ import { extendTailwindMerge } from "tailwind-merge";
  */
 export const BRAND_FONT_WEIGHTS = ["heavy", "regular"];
 export const BRAND_FONT_SIZES = [
+    "display-3xl",
+    "display-2xl",
     "display-xl",
+    // Px-named rungs (#248). They do not match tailwind-merge's t-shirt size
+    // regex either -- `^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$` anchors on a t-shirt
+    // word, and "48" has none -- so they fall through to text-color exactly the
+    // way the role names do, and belong here for the same reason.
+    "display-48",
     "display-lg",
     "display-md",
     "display-sm",
+    "title-lg",
+    "title-36",
+    "title-32",
+    "title-md",
+    "title-24",
+    "title-sm",
     "heading-lg",
     "heading-md",
     "heading-sm",
+    "body-xl",
     "body-lg",
+    "body-18",
     "body-md",
     "body-sm",
     "caption",
     "mono",
     "label",
+    "eyebrow",
+    "stat",
 ];
 const twMerge = extendTailwindMerge({
     extend: {

package/dist/lib/cloudgrid-cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;CACC,CAAA;AAEV,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,CAAC,EAAE,CAAC;YAC9C,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,CAAC;SACnD;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,aAAa;IACb,aAAa;IACb,YAAY;IACZ,yEAAyE;IACzE,0EAA0E;IAC1E,4EAA4E;IAC5E,8DAA8D;IAC9D,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;IACP,SAAS;IACT,MAAM;CACE,CAAA;AAEV,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,CAAC,EAAE,CAAC;YAC9C,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,CAAC;SACnD;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}

package/dist/theme.css

@@ -81,6 +81,10 @@
   --color-ink: var(--cg-text-primary);
   --color-body: var(--cg-text-secondary);
   --color-faint: var(--cg-text-muted);
+  /* The muted rung that clears the 4.5:1 body-text floor on all four grounds
+     (#232). text-faint is large-text-legal only; this is what a caption a reader
+     has to read should use. */
+  --color-faint-strong: var(--cg-text-muted-strong);
   --color-placeholder: var(--cg-text-placeholder);
   --color-inverse: var(--cg-text-inverse);
   --color-on-primary: var(--cg-text-on-primary);
@@ -95,6 +99,50 @@
   --color-lime-press: var(--cg-secondary-press);
   --color-cyan: var(--cg-tertiary);
   --color-cyan-press: var(--cg-tertiary-press);
+
+  /* ---- the hue ramps (#239) ----
+     The rungs the canonical Figma frames spend on chips, badges, avatar strokes,
+     step diagrams and the enterprise button. tokens.css's `hue-ramps` note has
+     the provenance of each value; this block is only about the NAMES.
+
+     Violet takes numbered rungs under `brand`, because brand is already this
+     package's word for the hue and Tailwind ships no `brand` scale to collide
+     with. --color-brand stays the 900, so bg-brand and bg-brand-200 coexist.
+
+     Cyan and lime take SUFFIXED names rather than their Figma rung numbers.
+     --color-cyan-200 and --color-lime-700 would be legal here and would silently
+     repaint every bg-cyan-200 and bg-lime-700 in a consumer's own markup, since
+     Tailwind ships both of those scales. That is rule 4's failure pointed at
+     Tailwind instead of shadcn, and it is worse: shadcn's names arrive with this
+     package, Tailwind's were already there and the consumer never opted in.
+
+     The cool neutral family takes `steel` for the same reason twice over: Figma
+     calls it color/neutral/*, this package's neutral ramp is a different hue
+     family at those numbers, and Tailwind ships `slate`. */
+  --color-brand-100: var(--cg-violet-100);
+  --color-brand-150: var(--cg-violet-150);
+  --color-brand-200: var(--cg-violet-200);
+  --color-brand-300: var(--cg-violet-300);
+  --color-brand-400: var(--cg-violet-400);
+  --color-brand-500: var(--cg-violet-500);
+  --color-brand-600: var(--cg-violet-600);
+  --color-brand-700: var(--cg-violet-700);
+  --color-brand-900: var(--cg-violet-900);
+  --color-cyan-tint: var(--cg-cyan-200);
+  --color-cyan-wash: var(--cg-cyan-300);
+  --color-cyan-fill: var(--cg-cyan-400);
+  --color-lime-tint: var(--cg-lime-200);
+  --color-lime-wash: var(--cg-lime-600);
+  --color-lime-edge: var(--cg-lime-700);
+  /* The design's cool neutrals. `steel` is the quiet-text tone the frames put on
+     every footer link; `steel-strong` is the rung that actually clears 4.5:1 on a
+     light ground, and the one to reach for when the text is content. */
+  --color-steel: var(--cg-slate-500);
+  --color-steel-strong: var(--cg-slate-600);
+  --color-steel-quiet: var(--cg-slate-300);
+  /* Figma's "stone". A warm near-black beside --color-ink's flat #222222. Its
+     role in the design is not yet known; see the token's own note. */
+  --color-stone: var(--cg-stone-800);
   /* The fourth brand hue (#197). NOT `--color-accent`: rule 4 again — shadcn
      owns `accent` and it is a background there, which is the collision that
      once rendered a badge invisible. `azure` is the hue name, alongside brand /
@@ -205,6 +253,9 @@
   --font-sans: var(--cg-font-body);
   --font-body: var(--cg-font-body);
   --font-display: var(--cg-font-display);
+  /* The eyebrow-and-button face (#240). Not a fallback: the frames use Manrope
+     for exactly those two jobs while the body face is Space Grotesk. */
+  --font-ui: var(--cg-font-ui);
   --font-mono: var(--cg-font-mono);
 
   /* ---- type scale ----
@@ -229,9 +280,29 @@
      tracking or weight, so they get none: a companion that invents a value is
      worse than an absent one, since it forces a weight where a component expected
      to inherit. Closes the gap noted in notes.md after #30. */
+  --text-display-3xl: var(--cg-display-3xl);
+  --text-display-3xl--line-height: var(--cg-display-line-tight);
+  --text-display-3xl--letter-spacing: var(--cg-title-tracking);
+  --text-display-2xl: var(--cg-display-2xl);
+  --text-display-2xl--line-height: var(--cg-display-line-tight);
+  --text-display-2xl--letter-spacing: var(--cg-title-tracking);
   --text-display-xl: var(--cg-display-xl);
   --text-display-xl--line-height: var(--cg-display-line);
   --text-display-xl--letter-spacing: var(--cg-display-tracking);
+  /* Like 2xl and 3xl, and unlike the four rungs below it, this one is
+     leading-none with no tracking because its node is (#248). The legacy
+     --cg-display-line 1.06 and --cg-display-tracking 0.012em were tuned for a
+     condensed face this package no longer ships and are kept only for the rungs
+     that already rendered with them. */
+  --text-display-48: var(--cg-display-48);
+  --text-display-48--line-height: var(--cg-display-line-tight);
+  --text-display-48--letter-spacing: var(--cg-title-tracking);
+  /* --cg-display-64 has NO utility here, deliberately. Its two nodes disagree on
+     a leading -- thegrid sets 70px, home leaves Figma's Auto -- and a --text-*
+     entry cannot exist without a --line-height companion, so the utility could
+     only be built by inventing one. Same reasoning as --cg-body-14, and the same
+     reasoning that keeps 96px out of the ramp entirely. Spell it as
+     `[font-size:var(--cg-display-64)]` with the leading the page wants. */
   --text-display-lg: var(--cg-display-lg);
   --text-display-lg--line-height: var(--cg-display-line);
   --text-display-lg--letter-spacing: var(--cg-display-tracking);
@@ -241,18 +312,58 @@
   --text-display-sm: var(--cg-display-sm);
   --text-display-sm--line-height: var(--cg-display-line);
   --text-display-sm--letter-spacing: var(--cg-display-tracking);
+  /* The display face at card scale (#239). A separate ramp from display-*
+     because the two disagree everywhere they overlap; tokens.css's
+     `tanker-title-ramp` note has the table. --text-title-sm and
+     --text-heading-md are both 20px and differ in face and leading, which is
+     the whole reason the ramp is separate. */
+  --text-title-lg: var(--cg-title-lg);
+  --text-title-lg--line-height: var(--cg-title-line);
+  --text-title-lg--letter-spacing: var(--cg-title-tracking);
+  /* Three rungs named by pixel value (#248): every size this round falls
+     strictly between two shipped ones, so there is no free t-shirt name in the
+     right place. tokens.css's --cg-display-64 note has the reasoning. */
+  --text-title-36: var(--cg-title-36);
+  --text-title-36--line-height: var(--cg-title-line);
+  --text-title-36--letter-spacing: var(--cg-title-tracking);
+  --text-title-32: var(--cg-title-32);
+  --text-title-32--line-height: var(--cg-title-line);
+  --text-title-32--letter-spacing: var(--cg-title-tracking);
+  --text-title-md: var(--cg-title-md);
+  --text-title-md--line-height: var(--cg-title-line);
+  --text-title-md--letter-spacing: var(--cg-title-tracking);
+  --text-title-24: var(--cg-title-24);
+  --text-title-24--line-height: var(--cg-title-line);
+  --text-title-24--letter-spacing: var(--cg-title-tracking);
+  --text-title-sm: var(--cg-title-sm);
+  --text-title-sm--line-height: var(--cg-title-line);
+  --text-title-sm--letter-spacing: var(--cg-title-tracking);
   --text-heading-lg: var(--cg-heading-lg);
   --text-heading-lg--line-height: var(--cg-heading-line);
   --text-heading-md: var(--cg-heading-md);
   --text-heading-md--line-height: var(--cg-heading-line);
   --text-heading-sm: var(--cg-heading-sm);
   --text-heading-sm--line-height: var(--cg-heading-line);
+  /* The lede size on all six canonical frames, and the size this ramp could not
+     spell: body-lg is 19 and heading-md is 20 with the wrong leading. */
+  --text-body-xl: var(--cg-body-xl);
+  --text-body-xl--line-height: var(--cg-body-line);
   --text-body-lg: var(--cg-body-lg);
   --text-body-lg--line-height: var(--cg-body-line);
+  /* pricing's three plan names, at --cg-body-line exactly. A body rung and not a
+     heading one: nothing at 18 in six frames is near --cg-heading-line's 1.2
+     (#248). */
+  --text-body-18: var(--cg-body-18);
+  --text-body-18--line-height: var(--cg-body-line);
   --text-body-md: var(--cg-body-md);
   --text-body-md--line-height: var(--cg-body-line);
   --text-body-sm: var(--cg-body-sm);
   --text-body-sm--line-height: var(--cg-body-line);
+  /* --cg-body-14 has NO utility, for the same reason as --cg-display-64: its
+     three non-eyebrow runs read 1.295 and 1.55 and there is no leading to ship.
+     Sixteen of the nineteen 14px runs in the frames are the eyebrow, which is
+     --text-eyebrow below and already carries its own leading, tracking and
+     weight. */
   --text-caption: var(--cg-caption);
   --text-caption--line-height: var(--cg-body-line);
   --text-mono: var(--cg-mono-size);
@@ -260,6 +371,23 @@
   --text-label: var(--cg-label-size);
   --text-label--line-height: var(--cg-body-line);
   --text-label--font-weight: var(--cg-label-weight);
+  /* The eyebrow, as Figma's own bound text variable declares it: 14px, 600,
+     1.2, 0.1em. `uppercase` stays the caller's, the way Eyebrow's docblock
+     already says. Note --cg-eyebrow-weight is 600 and --cg-label-weight is 500;
+     they are different rungs and the one-pixel size difference is not the
+     point. */
+  --text-eyebrow: var(--cg-eyebrow-size);
+  --text-eyebrow--line-height: var(--cg-eyebrow-line);
+  --text-eyebrow--letter-spacing: var(--cg-eyebrow-tracking);
+  --text-eyebrow--font-weight: var(--cg-eyebrow-weight);
+  /* The big figure in a stat block: the UI face at leading-none, which no other
+     rung on this ramp is (heading is 1.2, body is 1.46). Ten nodes on home and
+     enterprise, all Manrope Medium 32 (#248). A role set rather than a bare
+     size, on the eyebrow's pattern, so the leading and the weight cannot drift
+     into a component inline. */
+  --text-stat: var(--cg-stat-size);
+  --text-stat--line-height: var(--cg-stat-line);
+  --text-stat--font-weight: var(--cg-stat-weight);
 
   /* ---- weights ----
      `--font-weight-display` is unreachable and kept only for completeness. Both
@@ -284,11 +412,18 @@
 
   /* ---- leading and tracking ---- */
   --leading-display: var(--cg-display-line);
+  /* leading-none, which is what every Tanker node in every frame actually uses.
+     --leading-display stays 1.06; it was tuned for a condensed face nothing
+     ships any more and retuning it moves text that exists today (#240). */
+  --leading-display-tight: var(--cg-display-line-tight);
+  --leading-title: var(--cg-title-line);
   --leading-heading: var(--cg-heading-line);
   --leading-body: var(--cg-body-line);
   --leading-mono: var(--cg-mono-line);
   --tracking-display: var(--cg-display-tracking);
   --tracking-body: var(--cg-body-tracking);
+  --tracking-title: var(--cg-title-tracking);
+  --tracking-eyebrow: var(--cg-eyebrow-tracking);
 
   /* ---- corners ---- */
   /* The smallest corner in the system, added for the entity card's 20px kind
@@ -299,7 +434,11 @@
   --radius-md: var(--cg-radius-md);
   --radius-lg: var(--cg-radius-lg);
   --radius-xl: var(--cg-radius-xl);
+  /* The container corner. In these frames 16 is what a CONTROL is rounded to and
+     20 is what a CONTAINER is rounded to, consistently, on all six. */
+  --radius-container: var(--cg-radius-container);
   --radius-2xl: var(--cg-radius-2xl);
+  --radius-3xl: var(--cg-radius-3xl);
   --radius-pill: var(--cg-radius-pill);
 
   /* ---- elevation ----