@cloudgrid-io/ui 0.28.0 → 0.29.1

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/tab-bar.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+declare function TabBar({ label, className, children, onKeyDown, ...props }: Omit<React.ComponentProps<"nav">, "ref"> & {
+    /**
+     * Names the landmark. Required, not optional: a page with two `<nav>`s and no
+     * names gives a screen-reader user two identical "navigation" entries and no
+     * way to tell the app's bar from the site's header.
+     */
+    label: string;
+}): React.JSX.Element;
+declare function TabBarItem({ label, icon, count, active, render, className, onKeyDown, ...props }: Omit<useRender.ComponentProps<"button">, "children"> & {
+    label: React.ReactNode;
+    /**
+     * 22px in the frames. Sized by the caller, as every mark in this library is:
+     * the glyph box below is 22px and the mark fills what it is given.
+     *
+     * The label is what gets announced, so the glyph carries no name.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The count pill, on `SideNavItem`'s terms: it renders as text inside the
+     * item, so the accessible name becomes "Feedback 2" — the same two pieces of
+     * information a sighted reader gets. A caller who needs "Feedback, 2 unread"
+     * passes that as `label`, because only the caller knows what is counted.
+     *
+     * It sits beside the label rather than as a badge over the glyph, which makes
+     * an item wider. Four items with a count each do not fit a phone; three do.
+     */
+    count?: number;
+    active?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { TabBar, TabBarItem };
+//# sourceMappingURL=tab-bar.d.ts.map

package/dist/blocks/tab-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/tab-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAqGrD,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,qBA2CA;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,0EAsEA;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/tab-bar.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The bottom navigation a phone gets instead of a sidebar: three to five items
+ * pinned to the bottom of the viewport, each a glyph over a label, one of which
+ * is the page you are on.
+ *
+ * Read from the Console's founder-approved mobile frames (ui#256, Figma
+ * `5ouhISIL0mwYGHurvCGoEO`, `App / 01 Overview / Mobile` 8670:4808 and
+ * `App / 06 Versions / Mobile` 8670:4954). The same four destinations the
+ * `SideNav` column carries on a desktop — Overview, Insights, Build & run,
+ * Manage — reduced to a bar, because a 14-row column does not fit a phone and a
+ * hamburger hides the one thing a phone reader navigates with.
+ *
+ * ## It draws and it behaves. It does not know where anything is
+ *
+ * `SideNav`'s line, and the reason `render` exists here too. This block builds
+ * no `href`, matches no route and gates no role. The consumer decides which
+ * items a reader may see, which one is `active`, and what element an item
+ * actually is. Anything else would put the Console's URL helpers and its role
+ * model inside the design system, where neither can be right for long.
+ *
+ * ## Two parts
+ *
+ * `TabBar`      the `<nav>` landmark, the fixed strip, the safe area and the
+ *               keyboard.
+ * `TabBarItem`  one destination: a glyph, a label, an optional count, and
+ *               whether it is the page you are on.
+ *
+ * ## The keyboard
+ *
+ * Every item is a real tab stop, so Tab walks the bar in DOM order.
+ * ArrowRight and ArrowLeft are laid over that rather than replacing it: they
+ * move focus between items and wrap at the ends.
+ *
+ * As in `SideNav`, this is deliberately NOT a roving-tabindex tablist. A
+ * tablist owns one tab stop because its tabs are one control; these items are
+ * links to separate pages, and making three of four unreachable by Tab to
+ * satisfy a pattern they are not an instance of is a worse nav, not a more
+ * correct one.
+ *
+ * Horizontal keys only. The bar is a row, so ArrowUp and ArrowDown mean
+ * nothing in it — and a fixed strip at the bottom of a phone screen that ate
+ * them would take the one gesture that scrolls the page above it.
+ *
+ * Space is synthesised only where the browser does not already activate. A
+ * `<button>` fires on Enter and Space already; an `<a href>` fires on Enter and
+ * SCROLLS THE PAGE on Space. Since an item is normally an anchor — that is what
+ * `render={<Link />}` makes it — the bar synthesises the click for Space on
+ * anything that is not a button. Doing it unconditionally would fire a button
+ * twice.
+ *
+ * ## The active item reads the accent TEXT role, not the brand colour
+ *
+ * The frames paint the active glyph and label in the brand purple, and
+ * `text-brand` is the obvious reach. It is `--cg-primary`, declared at `:root`
+ * only, and the active item here has no ground of its own to carry — unlike
+ * `SideNavItem`, whose active row is a tinted chip and can therefore keep one
+ * pair of values on every surface (see that block's note for the measured
+ * argument).
+ *
+ * So this reads `var(--cg-text-accent)`, which is the accent role for TEXT and
+ * is declared in all three scopes: the brand purple on the page, white on the
+ * purple panel, lime on ink. On the surface the frames actually draw — a white
+ * bar on a white page — it resolves to exactly the purple they specify.
+ *
+ * Colour is never the only channel, so the active item also carries
+ * `aria-current="page"`.
+ *
+ * ## The label is 13px and the frame says 11
+ *
+ * `--cg-caption` is the smallest rung this brand ships. There is no 11px token,
+ * `component-source.spec.ts` bans `text-[11px]` along with every other
+ * arbitrary size, and adding a rung to the bottom of the type ramp is a brand
+ * decision with its own evidence bar (ui#248). Recorded in `docs/backlog.md`
+ * rather than decided here.
+ *
+ * ## Fixed, and what that means for a container
+ *
+ * The strip is `fixed inset-x-0 bottom-0`, because that is what a bottom
+ * navigation is, and a consumer who has to position it themselves has been
+ * handed half a component. To draw it inside a box instead — a phone frame in a
+ * gallery, a preview pane — give that box a transform (`[transform:translate(0)]`),
+ * which makes it the containing block for its fixed descendants.
+ *
+ * Nothing here reserves space for the bar in the page above it. That is the
+ * page's job and it needs the bar's height plus the safe area, which only the
+ * page knows how to spend.
+ */
+/** The items a key press can reach. */
+const ITEM_SELECTOR = '[data-slot="tab-bar-item"]';
+function reachableItems(root) {
+    return Array.from(root.querySelectorAll(ITEM_SELECTOR)).filter((el) => el.getClientRects().length > 0 && !el.hasAttribute("disabled"));
+}
+function TabBar({ label, className, children, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        if (step === 0)
+            return;
+        const items = reachableItems(event.currentTarget);
+        const from = items.indexOf(document.activeElement);
+        // Not -1 only when focus is already on an item. A key press while focus is
+        // anywhere else should do what it does anywhere else.
+        if (from === -1 || items.length === 0)
+            return;
+        event.preventDefault();
+        items[(from + step + items.length) % items.length]?.focus();
+    }
+    return (_jsx("nav", { "data-slot": "tab-bar", "aria-label": label, onKeyDown: handleKeyDown, className: cn("fixed inset-x-0 bottom-0 z-40 border-t border-hairline bg-card", 
+        // env(safe-area-inset-bottom) is 0 everywhere it does not apply, so
+        // this is not a phone-only branch: it is the home-indicator gutter on
+        // the hardware that has one and nothing on the hardware that does not.
+        // A class rather than an inline style, so it is assertable from markup.
+        "pb-[env(safe-area-inset-bottom)]", 
+        // text-ink because text does not flip by inheritance (rule 3): without
+        // it every label inside a panel would inherit the page's dark ink and
+        // stay dark on purple.
+        "text-ink", className), ...props, children: _jsx("div", { "data-slot": "tab-bar-items", className: "flex items-stretch", children: children }) }));
+}
+function TabBarItem({ label, icon, count, active, render, className, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        // See the module note: Space on an anchor scrolls. Synthesised only for the
+        // elements the browser does not already activate, or a button fires twice.
+        if (event.key !== " ")
+            return;
+        const el = event.currentTarget;
+        if (el.tagName === "BUTTON")
+            return;
+        event.preventDefault();
+        el.click();
+    }
+    return useRender({
+        render,
+        defaultTagName: "button",
+        props: {
+            "data-slot": "tab-bar-item",
+            "data-active": active ? "" : undefined,
+            // aria-current is what says "this is the page you are on". The accent says
+            // it to a reader who can see it, and colour is never the only channel.
+            "aria-current": active ? "page" : undefined,
+            // Only when this really is a <button>. `type` on an anchor is invalid, and
+            // `render={<Link />}` is the common case.
+            ...(render ? {} : { type: "button" }),
+            onKeyDown: handleKeyDown,
+            className: cn("flex flex-1 basis-0 flex-col items-center justify-center gap-1 px-1 pt-2 pb-1.5 text-caption no-underline", "transition-colors focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", active
+                ? // The accent TEXT role, not `text-brand`. See the module note: it is
+                    // the brand purple the frames draw at :root, and it is the only
+                    // accent name declared on the panel and on ink as well.
+                    "font-medium text-(--cg-text-accent)"
+                : "text-body hover:text-ink", className),
+            // Composed from the three slots rather than taken as `children`, which is
+            // why `children` is omitted from the props type: a caller who could pass
+            // both would have two ways to fill one item and no rule about which wins.
+            children: (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "data-slot": "tab-bar-icon", className: "flex size-[22px] shrink-0 items-center justify-center", children: icon })) : null, _jsxs("span", { "data-slot": "tab-bar-label", className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: label }), count === undefined ? null : (_jsx("span", { "data-slot": "tab-bar-count", 
+                                // The wash, for `SideNavItem`'s reason: a pale grey pill named
+                                // `bg-raised` is neutral-50 at :root only, so it would be a
+                                // near-white pill on the purple panel. --cg-hover is the one
+                                // ground token declared in all three scopes.
+                                className: "shrink-0 rounded-pill bg-(--cg-hover) px-1.5 text-caption text-body", children: count }))] })] })),
+            ...props,
+        },
+    });
+}
+export { TabBar, TabBarItem };
+//# sourceMappingURL=tab-bar.js.map

package/dist/blocks/tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/blocks/tab-bar.tsx"],"names":[],"mappings":"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"}

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/index.d.ts

@@ -55,6 +55,7 @@ export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
+export * from "./blocks/tab-bar.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.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,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,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -72,6 +72,7 @@ export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
+export * from "./blocks/tab-bar.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.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,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,qBAAqB,CAAA;AACnC,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-3xl", "display-2xl", "display-xl", "display-lg", "display-md", "display-sm", "title-lg", "title-md", "title-sm", "heading-lg", "heading-md", "heading-sm", "body-xl", "body-lg", "body-md", "body-sm", "caption", "mono", "label", "eyebrow"];
+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,kQAqBnB,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

@@ -65,23 +65,33 @@ 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,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,UAAU;IACV,UAAU;IACV,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;IACP,SAAS;CACD,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

@@ -289,6 +289,20 @@
   --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);
@@ -306,9 +320,21 @@
   --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);
@@ -324,10 +350,20 @@
   --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);
@@ -344,6 +380,14 @@
   --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

package/dist/tokens/base.json

@@ -926,7 +926,7 @@
     }
   },
   "h1-display-ramp": {
-    "$description": "H1 display ramp: uppercase, condensed, Primary or white\n\nStepped down one notch 2026-08-06 (operator: main headings read too\ndominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32.",
+    "$description": "H1 display ramp: uppercase, condensed, Primary or white\n\nStepped down one notch 2026-08-06 (operator: main headings read too\ndominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32.\n\n2026-09-19 (#248): display-64 and display-48 added, named by pixel value — see\ndisplay-64's note. With the eight \"SET FONT TO TANKER\" placeholder nodes\nexcluded, ALL 68 remaining runs at 56 across all six frames are explicit\nleading-none with zero tracking, as are all of 48, 36 and 32. #248's comment\nreports 56 carrying two ratios and two trackings; that was one un-converted Anton\nnode (home 8216:1762) and three of its runs. This does NOT reopen the proposal to\nmove --cg-display-line and --cg-display-tracking: 26 (77 runs) genuinely carries\n1.0, 1.1 and Auto, so no single library default is right for it, and\n--cg-display-line-tight already covers the cases that want 1. Both shipped values\nstay exactly as they are.",
     "display-3xl": {
       "$value": "120px",
       "$type": "dimension",
@@ -947,6 +947,16 @@
         }
       }
     },
+    "display-64": {
+      "$value": "64px",
+      "$type": "dimension",
+      "$description": "SOURCE: home 8204:3110 (\"WHERE DOES IT LIVE?\"), thegrid 8364:4363 (\"Say what it\nneeds\"). Two nodes, two frames, Tanker, no tracking. The widest hole in the ramp:\n36px separate --cg-display-xl 56 from --cg-display-2xl 92, and both consumers\nwere clamping their own value into it.\n\nNAMED BY PIXEL VALUE, 2026-09-19 (#248). Every size added in this round falls\nSTRICTLY BETWEEN two shipped rungs, which is the second consecutive census to\nhit that wall — the tanker-title-ramp note records the first. A t-shirt suffix\nencodes ORDER, and order is what an insertion breaks; renaming a shipped rung is\nbreaking for two published consumers, and a third Tanker ramp would carry the\nsame face, leading and roles as the two that exist and therefore no information.\nSo the ramp prefix still means (face, leading, role) and the suffix becomes the\nsize. A px-named rung cannot be made wrong by a later insertion.\n\nSIZE ONLY, AND DELIBERATELY.\n\nA rung gets a --text-* utility only where the frames settled on a leading. Where\nthey did not, it ships as a custom property alone: theme.css's own rule is that\n\"a companion that invents a value is worse than an absent one\", and\ntokens.test.mjs requires every --text-* to carry a --line-height, so a utility\nhere could only exist by inventing one.\n\nThe two nodes do not agree on a leading and only one of them expresses an\nopinion: thegrid sets 70px (ratio 1.094) and home leaves lineHeightUnit at\nINTRINSIC_%, i.e. Figma's Auto, which is Tanker's own 1.35 default and not a\ndesign decision at all. A leading shipped here would be wrong for one of its two\nusers. The same reasoning is why 96px (thegrid 8364:3957, lh 56 — a ratio of\n0.583, 96px type in a 56px line box) is recorded and still has no rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-64"
+        }
+      }
+    },
     "display-xl": {
       "$value": "56px",
       "$type": "dimension",
@@ -956,6 +966,16 @@
         }
       }
     },
+    "display-48": {
+      "$value": "48px",
+      "$type": "dimension",
+      "$description": "SOURCE: home 8216:1868, the \"Copy this command INTO your aI tool to Plug in\"\nstatement. Tanker, explicit leading-none (lineHeightUnit FONT_SIZE_% at 100), no\ntracking.\n\nONE NODE ON ONE FRAME, stated plainly because the count in #248 reads as four:\nthe node carries four per-character colour runs and a run census counts each of\nthem. One node is not disqualifying here — --cg-display-3xl 120 is also a single\nnode on a single frame and 0.28.0 shipped it — but the evidence is one headline,\nnot four.\n\nNamed by pixel value; --cg-display-64's note has the reasoning (#248).\n\nIt carries display-line-tight and title-tracking rather than --cg-display-line\nand --cg-display-tracking, the same as --cg-display-2xl and --cg-display-3xl:\nthe node is explicitly 1.0 / 0, and the two legacy values were tuned for a\ncondensed face this package no longer ships (#240).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-48"
+        }
+      }
+    },
     "display-lg": {
       "$value": "44px",
       "$type": "dimension",
@@ -1013,7 +1033,7 @@
     }
   },
   "tanker-title-ramp": {
-    "$description": "The display face at CARD scale, 2026-09-18.\n\nFour rungs the canonical frames use constantly and this package could spell\nnone of. They are separated from h1-display-ramp rather than wedged into it\nbecause the two ramps disagree everywhere they overlap, and the disagreement is\nnot resolvable by addition:\n\n  frames   120  96  92  64  56  40  38  32  30  26  20\n  package                      56  44  38      30\n\n56, 38 and 30 coincide. 44 is used by nothing in any of the six frames. Every\nother size the frames ask for falls BETWEEN two shipped rungs — 40 between 44\nand 38, 26 between 30 and heading-lg's 22 — so there is no name left on the\nt-shirt ramp that is both free and in the right place, and renaming a shipped\nrung is a breaking change for two published consumers.\n\nThey are also not headings. --cg-heading-* is the Manrope ramp at 1.2 leading;\nthis is the display FACE at leading-none, and --cg-title-sm and\n--cg-heading-md are both 20px precisely because a face and a leading are what\nseparate them, not a size.\n\nSIZES, with where they were read:\n  40  home 8204:2589, enterprise 7038:1244, pricing 7785:9809, thegrid 8364:4382\n  26  teams 7297:8606, builders 6916:8648, enterprise 7038:1192,\n      pricing 7788:10264, thegrid 8364:3882\n  20  teams 7172:7760, builders 6919:8783, thegrid petal labels\n\npricing 7785:10059 draws one 32px Tanker number and thegrid draws 15px Tanker\neyebrows. Single-frame, so recorded and not given a rung.",
+    "$description": "The display face at CARD scale, 2026-09-18.\n\nFour rungs the canonical frames use constantly and this package could spell\nnone of. They are separated from h1-display-ramp rather than wedged into it\nbecause the two ramps disagree everywhere they overlap, and the disagreement is\nnot resolvable by addition:\n\n  frames   120  96  92  64  56  40  38  32  30  26  20\n  package                      56  44  38      30\n\n56, 38 and 30 coincide. 44 is used by nothing in any of the six frames. Every\nother size the frames ask for falls BETWEEN two shipped rungs — 40 between 44\nand 38, 26 between 30 and heading-lg's 22 — so there is no name left on the\nt-shirt ramp that is both free and in the right place, and renaming a shipped\nrung is a breaking change for two published consumers.\n\nThey are also not headings. --cg-heading-* is the Manrope ramp at 1.2 leading;\nthis is the display FACE at leading-none, and --cg-title-sm and\n--cg-heading-md are both 20px precisely because a face and a leading are what\nseparate them, not a size.\n\nSIZES, with where they were read:\n  40  home 8204:2589, enterprise 7038:1244, pricing 7785:9809, thegrid 8364:4382\n  26  teams 7297:8606, builders 6916:8648, enterprise 7038:1192,\n      pricing 7788:10264, thegrid 8364:3882\n  20  teams 7172:7760, builders 6919:8783, thegrid petal labels\n\npricing 7785:10059 draws one 32px Tanker number and thegrid draws 15px Tanker\neyebrows. Single-frame, so recorded and not given a rung.\n\n---\n\n2026-09-19 (#248). Three more rungs — title-36, title-32, title-24 — and the\nt-shirt suffix stops here. See --cg-display-64's note for why they are named by\npixel value and the group note above for why this ramp is separate from\nh1-display-ramp in the first place.\n\nRECORDED AND DELIBERATELY NOT GIVEN A RUNG:\n\n  28px. #248 proposes it on two home nodes. Both are placeholders the designer\n  has not converted: 8204:3066 \"lead - SET FONT TO TANKER\" (lineHeight 92.6%,\n  letterSpacing 0.24) and 8216:1784 \"txt:RIGHT HERE - SET FONT TO TANKER\"\n  (106%, 0.42). They keep the previous face's metrics — a third node in the same\n  set, 8216:1762, is still literally set in Anton — so there is no settled 28px\n  anything in the six frames. Six home nodes and two thegrid nodes carry that\n  \"SET FONT TO TANKER\" marker; every Tanker node in the frames that emits a\n  letter-spacing is one of them.\n\n  32px on Inter (builders 7172:8458, the \"$ grid plug\" pill). Off-system in the\n  design itself; #243 recorded it.\n\nON AUTO LEADING. Figma's lineHeightUnit distinguishes a decision from an\nabsence: FONT_SIZE_% and PIXELS mean the designer set a leading, INTRINSIC_%\nmeans Auto and the number in the file is the FACE's default, which for Tanker is\n1.35. Every 1.35 in a Tanker census is INTRINSIC_%. A rung built on one would\nencode Tanker's metrics as a brand decision.",
     "title-lg": {
       "$value": "40px",
       "$type": "dimension",
@@ -1024,6 +1044,26 @@
         }
       }
     },
+    "title-36": {
+      "$value": "36px",
+      "$type": "dimension",
+      "$description": "SOURCE: enterprise 7039:5124, 7039:5119, 7039:5129 — the three audience column\nheadings (\"Platform and security teams\", \"Innovation Leaders\", \"Business\nfunctions\"). Three nodes, one frame, all explicit leading-none, no tracking.\n\nOne frame, and 2px from --cg-display-md 38. It is a rung rather than an\napproximation of 38 because it is the card/column role, not the section-heading\nrole, and because rounding a measured 36 onto 38 is the kind of \"close enough\"\nthat #243 had to unpick when ui#239's table called this ramp's 26 a \"24px card\ntitle\".\n\nNamed by pixel value; --cg-display-64's note has the reasoning (#248).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-title-36"
+        }
+      }
+    },
+    "title-32": {
+      "$value": "32px",
+      "$type": "dimension",
+      "$description": "SOURCE: home 8204:2590 (\"Learn how the grid can help you\"), pricing 7785:10059 /\n10068 / 10073 / 10076 / 10081 / 10084 (the six plan prices). Seven nodes, two\nframes, all explicit leading-none, no tracking.\n\nTHE DISPLAY FACE HALF OF 32. The frames also draw 32 on the UI face, ten times,\nand that is --cg-stat-size on the Manrope ramp, not this. Two rungs at one size\nis the ramp rule working as intended, exactly as --cg-title-sm and\n--cg-heading-md are both 20px: a rung is a face, a leading and a role, not a\nnumber.\n\n#243 recorded pricing's 32 as \"one 32px Tanker number, single-frame, so recorded\nand not given a rung\". The rebuilt extract finds seven nodes on two frames.\n\nNamed by pixel value; --cg-display-64's note has the reasoning (#248).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-title-32"
+        }
+      }
+    },
     "title-md": {
       "$value": "26px",
       "$type": "dimension",
@@ -1034,6 +1074,16 @@
         }
       }
     },
+    "title-24": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$description": "SOURCE: home 8204:2813, 8204:2753 / 2758 / 2763; enterprise 7039:5084, 7039:5088,\n7039:5093, 7039:5097, 7395:666. Twelve nodes, two frames. Nine set an explicit\nleading-none; two leave lineHeightUnit at INTRINSIC_% (Figma's Auto, no\ndecision); one, home 8216:1908, sets 30px. No node carries tracking.\n\nTWO PIXELS FROM --cg-title-md 26, AND BOTH ARE REAL. 26 is 77 runs on six frames\nand 24 is 12 on two; they coexist in the same design and in some cases in the\nsame section. Note that #239's type table called the 26 rung \"24px card title\"\nfrom a consumer's approximation — this rung is the actual 24, measured, and does\nnot retroactively make that table right.\n\nNamed by pixel value; --cg-display-64's note has the reasoning (#248).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-title-24"
+        }
+      }
+    },
     "title-sm": {
       "$value": "20px",
       "$type": "dimension",
@@ -1124,6 +1174,16 @@
         }
       }
     },
+    "body-18": {
+      "$value": "18px",
+      "$type": "dimension",
+      "$description": "SOURCE: pricing 7785:9832 / 9858 / 9872, the three plan names — Space Grotesk\nBold 18 at line-height 1.46, which is --cg-body-line exactly. Also thegrid\n8364:4352 / 4355 / 4358 and 8364:4385, Manrope 18 at 1.5.\n\nA BODY RUNG, NOT A HEADING ONE. #248 asks which ramp 18 belongs on, since it\nsits between --cg-heading-sm 17 and --cg-heading-md 20. Every node at 18 that\nexpresses a leading at all reads 1.46 or 1.5; nothing is near\n--cg-heading-line's 1.2. home 8204:3090 and 8204:3105 draw Tanker at 18 and both\nare INTRINSIC_% (Auto), so they express no opinion and do not make this a\ndisplay rung either.\n\n#243 recorded pricing's 18 as \"one 18px bold plan name. Single node, one frame,\n1px off --cg-body-lg\". It is three nodes, and the 1px is the point: a consumer\notherwise rounds it onto --cg-body-lg 19 and the plan-name row drifts by a pixel\nagainst the Figma it is being checked against.\n\nNamed by pixel value; --cg-display-64's note has the reasoning (#248).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-body-18"
+        }
+      }
+    },
     "body-md": {
       "$value": "16px",
       "$type": "dimension",
@@ -1144,6 +1204,16 @@
         }
       }
     },
+    "body-14": {
+      "$value": "14px",
+      "$type": "dimension",
+      "$description": "SOURCE: home 8216:1768, 8216:1769, 8216:1771 — the three lines of the prompt-and-\nreply mock. Manrope Regular 14. Three runs, one frame.\n\nREAD THIS BEFORE TREATING 14 AS A GAP. #248 counts nineteen 14px runs on four\nframes and calls it one of its two strongest cases. SIXTEEN OF THE NINETEEN ARE\nTHE EYEBROW — Manrope 600, leading 1.2, tracking 1.4px, uppercase — which 0.28.0\nalready ships whole as --cg-eyebrow-size / -line / -tracking / -weight, and\nthree of the nodes the issue cites (teams 7172:8463, builders 6916:8053,\nenterprise 7038:1184) are the very nodes in that token's own docblock. 14 was\nalready closed; the four frames are the eyebrow's four frames.\n\nSo this rung exists for the residue, and the residue is thin. It ships anyway\nbecause without it the only 14 in the package is --cg-eyebrow-size, and a\nconsumer who wants plain 14px text will reach for it and sooner or later reach\nfor text-eyebrow with it, inheriting a weight and a tracking nobody asked for.\n--cg-mono-size is also 14 and is the mono face.\n\nSIZE ONLY.\n\nA rung gets a --text-* utility only where the frames settled on a leading. Where\nthey did not, it ships as a custom property alone: theme.css's own rule is that\n\"a companion that invents a value is worse than an absent one\", and\ntokens.test.mjs requires every --text-* to carry a --line-height, so a utility\nhere could only exist by inventing one. The three runs read 1.295 and 1.55; there is nothing\nto ship.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-body-14"
+        }
+      }
+    },
     "caption": {
       "$value": "13px",
       "$type": "dimension",
@@ -1244,6 +1314,35 @@
           "css": "--cg-eyebrow-weight"
         }
       }
+    },
+    "stat-size": {
+      "$value": "32px",
+      "$type": "dimension",
+      "$description": "The big figure in a stat block: the UI face at leading-none.\n\nSOURCE: home 8204:2769 / 2774 / 2779 / 2784 / 2789 and enterprise 7038:4564 /\n4569 / 4574 / 4579 / 4584 — \"2\", \"184\", \"4\", \"8\", \"$0\". Ten nodes, two frames,\nManrope Medium 32, every one of them explicit leading-none with no tracking.\n\nTHE UI-FACE HALF OF 32; --cg-title-32 is the display-face half. This is a role\nthe Manrope ramp could not spell at all: --cg-heading-* is 1.2 and --cg-body-* is\n1.46, and nothing on this face was at 1.\n\nIt is a role set rather than a bare size, on the --cg-eyebrow-* pattern, for the\nreason that block gives: the figure carries a leading and a weight as well as a\nsize, and spelling two of the three inline is how a component drifts.\n\nKNOWN DIVERGENCE, not fixed here: StatTile renders its value as\n`font-display text-display-sm` — Tanker 30 at --cg-display-line. The frames say\nManrope Medium 32 at leading-none. Repointing it changes what every StatTile\nrenders today, so it is a separate change with its own changeset.\n\nThe same five figures appear again at 18.149px inside scaled product mocks on\nhome, thegrid and enterprise. That is the per-mock scale factor #248 documents,\nnot a second rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stat-size"
+        }
+      }
+    },
+    "stat-line": {
+      "$value": "1",
+      "$type": "number",
+      "$description": "leading-none, from all ten nodes. Spelled as a number rather than aliased onto\n--cg-display-line-tight: that alias exists so a retune of the DISPLAY leading\nreaches the title ramp too, and the stat figure is on the UI face and must not\nmove with it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stat-line"
+        }
+      }
+    },
+    "stat-weight": {
+      "$value": "{weights.weight-medium}",
+      "$description": "500, from all ten nodes. Manrope Medium, not the eyebrow's 600 and not\n--cg-label-weight's 500 by coincidence — aliased onto the weight rung so it\ntracks the brand's Medium.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stat-weight"
+        }
+      }
     }
   },
   "spacing": {

package/dist/tokens.css

@@ -889,7 +889,18 @@
      H1 display ramp: uppercase, condensed, Primary or white
 
      Stepped down one notch 2026-08-06 (operator: main headings read too
-     dominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32. */
+     dominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32.
+
+     2026-09-19 (#248): display-64 and display-48 added, named by pixel value — see
+     display-64's note. With the eight "SET FONT TO TANKER" placeholder nodes
+     excluded, ALL 68 remaining runs at 56 across all six frames are explicit
+     leading-none with zero tracking, as are all of 48, 36 and 32. #248's comment
+     reports 56 carrying two ratios and two trackings; that was one un-converted Anton
+     node (home 8216:1762) and three of its runs. This does NOT reopen the proposal to
+     move --cg-display-line and --cg-display-tracking: 26 (77 runs) genuinely carries
+     1.0, 1.1 and Auto, so no single library default is right for it, and
+     --cg-display-line-tight already covers the cases that want 1. Both shipped values
+     stay exactly as they are. */
   /*
      SOURCE: home 8204:2556, the hero headline, Tanker at leading-none.
 
@@ -909,7 +920,55 @@
      not rungs. A value invented to complete a grid is the thing this file keeps
      refusing to add. */
   --cg-display-2xl: 92px;
+  /*
+     SOURCE: home 8204:3110 ("WHERE DOES IT LIVE?"), thegrid 8364:4363 ("Say what it
+     needs"). Two nodes, two frames, Tanker, no tracking. The widest hole in the ramp:
+     36px separate --cg-display-xl 56 from --cg-display-2xl 92, and both consumers
+     were clamping their own value into it.
+
+     NAMED BY PIXEL VALUE, 2026-09-19 (#248). Every size added in this round falls
+     STRICTLY BETWEEN two shipped rungs, which is the second consecutive census to
+     hit that wall — the tanker-title-ramp note records the first. A t-shirt suffix
+     encodes ORDER, and order is what an insertion breaks; renaming a shipped rung is
+     breaking for two published consumers, and a third Tanker ramp would carry the
+     same face, leading and roles as the two that exist and therefore no information.
+     So the ramp prefix still means (face, leading, role) and the suffix becomes the
+     size. A px-named rung cannot be made wrong by a later insertion.
+
+     SIZE ONLY, AND DELIBERATELY.
+
+     A rung gets a --text-* utility only where the frames settled on a leading. Where
+     they did not, it ships as a custom property alone: theme.css's own rule is that
+     "a companion that invents a value is worse than an absent one", and
+     tokens.test.mjs requires every --text-* to carry a --line-height, so a utility
+     here could only exist by inventing one.
+
+     The two nodes do not agree on a leading and only one of them expresses an
+     opinion: thegrid sets 70px (ratio 1.094) and home leaves lineHeightUnit at
+     INTRINSIC_%, i.e. Figma's Auto, which is Tanker's own 1.35 default and not a
+     design decision at all. A leading shipped here would be wrong for one of its two
+     users. The same reasoning is why 96px (thegrid 8364:3957, lh 56 — a ratio of
+     0.583, 96px type in a 56px line box) is recorded and still has no rung. */
+  --cg-display-64: 64px;
   --cg-display-xl: 56px;
+  /*
+     SOURCE: home 8216:1868, the "Copy this command INTO your aI tool to Plug in"
+     statement. Tanker, explicit leading-none (lineHeightUnit FONT_SIZE_% at 100), no
+     tracking.
+
+     ONE NODE ON ONE FRAME, stated plainly because the count in #248 reads as four:
+     the node carries four per-character colour runs and a run census counts each of
+     them. One node is not disqualifying here — --cg-display-3xl 120 is also a single
+     node on a single frame and 0.28.0 shipped it — but the evidence is one headline,
+     not four.
+
+     Named by pixel value; --cg-display-64's note has the reasoning (#248).
+
+     It carries display-line-tight and title-tracking rather than --cg-display-line
+     and --cg-display-tracking, the same as --cg-display-2xl and --cg-display-3xl:
+     the node is explicitly 1.0 / 0, and the two legacy values were tuned for a
+     condensed face this package no longer ships (#240). */
+  --cg-display-48: 48px;
   --cg-display-lg: 44px;
   /* SOURCE: onboarding H1 (was 42px) */
   --cg-display-md: 38px;
@@ -957,15 +1016,85 @@
        20  teams 7172:7760, builders 6919:8783, thegrid petal labels
 
      pricing 7785:10059 draws one 32px Tanker number and thegrid draws 15px Tanker
-     eyebrows. Single-frame, so recorded and not given a rung. */
+     eyebrows. Single-frame, so recorded and not given a rung.
+
+     ---
+
+     2026-09-19 (#248). Three more rungs — title-36, title-32, title-24 — and the
+     t-shirt suffix stops here. See --cg-display-64's note for why they are named by
+     pixel value and the group note above for why this ramp is separate from
+     h1-display-ramp in the first place.
+
+     RECORDED AND DELIBERATELY NOT GIVEN A RUNG:
+
+       28px. #248 proposes it on two home nodes. Both are placeholders the designer
+       has not converted: 8204:3066 "lead - SET FONT TO TANKER" (lineHeight 92.6%,
+       letterSpacing 0.24) and 8216:1784 "txt:RIGHT HERE - SET FONT TO TANKER"
+       (106%, 0.42). They keep the previous face's metrics — a third node in the same
+       set, 8216:1762, is still literally set in Anton — so there is no settled 28px
+       anything in the six frames. Six home nodes and two thegrid nodes carry that
+       "SET FONT TO TANKER" marker; every Tanker node in the frames that emits a
+       letter-spacing is one of them.
+
+       32px on Inter (builders 7172:8458, the "$ grid plug" pill). Off-system in the
+       design itself; #243 recorded it.
+
+     ON AUTO LEADING. Figma's lineHeightUnit distinguishes a decision from an
+     absence: FONT_SIZE_% and PIXELS mean the designer set a leading, INTRINSIC_%
+     means Auto and the number in the file is the FACE's default, which for Tanker is
+     1.35. Every 1.35 in a Tanker census is INTRINSIC_%. A rung built on one would
+     encode Tanker's metrics as a brand decision. */
   /*
      Four frames. The governance card title, the plan price, the sub-heading under a section statement. */
   --cg-title-lg: 40px;
+  /*
+     SOURCE: enterprise 7039:5124, 7039:5119, 7039:5129 — the three audience column
+     headings ("Platform and security teams", "Innovation Leaders", "Business
+     functions"). Three nodes, one frame, all explicit leading-none, no tracking.
+
+     One frame, and 2px from --cg-display-md 38. It is a rung rather than an
+     approximation of 38 because it is the card/column role, not the section-heading
+     role, and because rounding a measured 36 onto 38 is the kind of "close enough"
+     that #243 had to unpick when ui#239's table called this ramp's 26 a "24px card
+     title".
+
+     Named by pixel value; --cg-display-64's note has the reasoning (#248). */
+  --cg-title-36: 36px;
+  /*
+     SOURCE: home 8204:2590 ("Learn how the grid can help you"), pricing 7785:10059 /
+     10068 / 10073 / 10076 / 10081 / 10084 (the six plan prices). Seven nodes, two
+     frames, all explicit leading-none, no tracking.
+
+     THE DISPLAY FACE HALF OF 32. The frames also draw 32 on the UI face, ten times,
+     and that is --cg-stat-size on the Manrope ramp, not this. Two rungs at one size
+     is the ramp rule working as intended, exactly as --cg-title-sm and
+     --cg-heading-md are both 20px: a rung is a face, a leading and a role, not a
+     number.
+
+     #243 recorded pricing's 32 as "one 32px Tanker number, single-frame, so recorded
+     and not given a rung". The rebuilt extract finds seven nodes on two frames.
+
+     Named by pixel value; --cg-display-64's note has the reasoning (#248). */
+  --cg-title-32: 32px;
   /*
      Five frames. The card title and the FAQ question — the most common display size in the design after the section heading.
 
      ui#239's type table calls this rung "24px card title". Measured on five frames it is 26, not 24, and nothing in any frame is 24. The table was written from a consumer's approximation rather than from the node. */
   --cg-title-md: 26px;
+  /*
+     SOURCE: home 8204:2813, 8204:2753 / 2758 / 2763; enterprise 7039:5084, 7039:5088,
+     7039:5093, 7039:5097, 7395:666. Twelve nodes, two frames. Nine set an explicit
+     leading-none; two leave lineHeightUnit at INTRINSIC_% (Figma's Auto, no
+     decision); one, home 8216:1908, sets 30px. No node carries tracking.
+
+     TWO PIXELS FROM --cg-title-md 26, AND BOTH ARE REAL. 26 is 77 runs on six frames
+     and 24 is 12 on two; they coexist in the same design and in some cases in the
+     same section. Note that #239's type table called the 26 rung "24px card title"
+     from a consumer's approximation — this rung is the actual 24, measured, and does
+     not retroactively make that table right.
+
+     Named by pixel value; --cg-display-64's note has the reasoning (#248). */
+  --cg-title-24: 24px;
   /*
      Three frames. The label inside a step circle or a diagram petal. Same size as --cg-heading-md and a different face and leading; see the group note. */
   --cg-title-sm: 20px;
@@ -1014,10 +1143,56 @@
   --cg-body-xl: 20px;
   /* SOURCE: H1 subline */
   --cg-body-lg: 19px;
+  /*
+     SOURCE: pricing 7785:9832 / 9858 / 9872, the three plan names — Space Grotesk
+     Bold 18 at line-height 1.46, which is --cg-body-line exactly. Also thegrid
+     8364:4352 / 4355 / 4358 and 8364:4385, Manrope 18 at 1.5.
+
+     A BODY RUNG, NOT A HEADING ONE. #248 asks which ramp 18 belongs on, since it
+     sits between --cg-heading-sm 17 and --cg-heading-md 20. Every node at 18 that
+     expresses a leading at all reads 1.46 or 1.5; nothing is near
+     --cg-heading-line's 1.2. home 8204:3090 and 8204:3105 draw Tanker at 18 and both
+     are INTRINSIC_% (Auto), so they express no opinion and do not make this a
+     display rung either.
+
+     #243 recorded pricing's 18 as "one 18px bold plan name. Single node, one frame,
+     1px off --cg-body-lg". It is three nodes, and the 1px is the point: a consumer
+     otherwise rounds it onto --cg-body-lg 19 and the plan-name row drifts by a pixel
+     against the Figma it is being checked against.
+
+     Named by pixel value; --cg-display-64's note has the reasoning (#248). */
+  --cg-body-18: 18px;
   /* SOURCE: default UI text */
   --cg-body-md: 16px;
   /* SOURCE: card body, legal */
   --cg-body-sm: 15px;
+  /*
+     SOURCE: home 8216:1768, 8216:1769, 8216:1771 — the three lines of the prompt-and-
+     reply mock. Manrope Regular 14. Three runs, one frame.
+
+     READ THIS BEFORE TREATING 14 AS A GAP. #248 counts nineteen 14px runs on four
+     frames and calls it one of its two strongest cases. SIXTEEN OF THE NINETEEN ARE
+     THE EYEBROW — Manrope 600, leading 1.2, tracking 1.4px, uppercase — which 0.28.0
+     already ships whole as --cg-eyebrow-size / -line / -tracking / -weight, and
+     three of the nodes the issue cites (teams 7172:8463, builders 6916:8053,
+     enterprise 7038:1184) are the very nodes in that token's own docblock. 14 was
+     already closed; the four frames are the eyebrow's four frames.
+
+     So this rung exists for the residue, and the residue is thin. It ships anyway
+     because without it the only 14 in the package is --cg-eyebrow-size, and a
+     consumer who wants plain 14px text will reach for it and sooner or later reach
+     for text-eyebrow with it, inheriting a weight and a tracking nobody asked for.
+     --cg-mono-size is also 14 and is the mono face.
+
+     SIZE ONLY.
+
+     A rung gets a --text-* utility only where the frames settled on a leading. Where
+     they did not, it ships as a custom property alone: theme.css's own rule is that
+     "a companion that invents a value is worse than an absent one", and
+     tokens.test.mjs requires every --text-* to carry a --line-height, so a utility
+     here could only exist by inventing one. The three runs read 1.295 and 1.55; there is nothing
+     to ship. */
+  --cg-body-14: 14px;
   /* SOURCE: footer, helper */
   --cg-caption: 13px;
   /*
@@ -1069,6 +1244,41 @@
      Note this is NOT --cg-label-weight, which is 500. The eyebrow and the label are
      different rungs; see the group note. */
   --cg-eyebrow-weight: var(--cg-weight-bold);
+  /*
+     The big figure in a stat block: the UI face at leading-none.
+
+     SOURCE: home 8204:2769 / 2774 / 2779 / 2784 / 2789 and enterprise 7038:4564 /
+     4569 / 4574 / 4579 / 4584 — "2", "184", "4", "8", "$0". Ten nodes, two frames,
+     Manrope Medium 32, every one of them explicit leading-none with no tracking.
+
+     THE UI-FACE HALF OF 32; --cg-title-32 is the display-face half. This is a role
+     the Manrope ramp could not spell at all: --cg-heading-* is 1.2 and --cg-body-* is
+     1.46, and nothing on this face was at 1.
+
+     It is a role set rather than a bare size, on the --cg-eyebrow-* pattern, for the
+     reason that block gives: the figure carries a leading and a weight as well as a
+     size, and spelling two of the three inline is how a component drifts.
+
+     KNOWN DIVERGENCE, not fixed here: StatTile renders its value as
+     `font-display text-display-sm` — Tanker 30 at --cg-display-line. The frames say
+     Manrope Medium 32 at leading-none. Repointing it changes what every StatTile
+     renders today, so it is a separate change with its own changeset.
+
+     The same five figures appear again at 18.149px inside scaled product mocks on
+     home, thegrid and enterprise. That is the per-mock scale factor #248 documents,
+     not a second rung. */
+  --cg-stat-size: 32px;
+  /*
+     leading-none, from all ten nodes. Spelled as a number rather than aliased onto
+     --cg-display-line-tight: that alias exists so a retune of the DISPLAY leading
+     reaches the title ramp too, and the stat figure is on the UI face and must not
+     move with it. */
+  --cg-stat-line: 1;
+  /*
+     500, from all ten nodes. Manrope Medium, not the eyebrow's 600 and not
+     --cg-label-weight's 500 by coincidence — aliased onto the weight rung so it
+     tracks the brand's Medium. */
+  --cg-stat-weight: var(--cg-weight-medium);
 
   /* ---- spacing ----
      spacing: 4px base */

package/dist/tokens.json

@@ -101,7 +101,9 @@
       "--cg-weight-display": "700",
       "--cg-display-3xl": "120px",
       "--cg-display-2xl": "92px",
+      "--cg-display-64": "64px",
       "--cg-display-xl": "56px",
+      "--cg-display-48": "48px",
       "--cg-display-lg": "44px",
       "--cg-display-md": "38px",
       "--cg-display-sm": "30px",
@@ -109,7 +111,10 @@
       "--cg-display-tracking": "0.012em",
       "--cg-display-line-tight": "1",
       "--cg-title-lg": "40px",
+      "--cg-title-36": "36px",
+      "--cg-title-32": "32px",
       "--cg-title-md": "26px",
+      "--cg-title-24": "24px",
       "--cg-title-sm": "20px",
       "--cg-title-line": "var(--cg-display-line-tight)",
       "--cg-title-tracking": "0em",
@@ -119,8 +124,10 @@
       "--cg-heading-line": "1.2",
       "--cg-body-xl": "20px",
       "--cg-body-lg": "19px",
+      "--cg-body-18": "18px",
       "--cg-body-md": "16px",
       "--cg-body-sm": "15px",
+      "--cg-body-14": "14px",
       "--cg-caption": "13px",
       "--cg-body-line": "1.46",
       "--cg-body-tracking": "0em",
@@ -132,6 +139,9 @@
       "--cg-eyebrow-line": "1.2",
       "--cg-eyebrow-tracking": "0.1em",
       "--cg-eyebrow-weight": "var(--cg-weight-bold)",
+      "--cg-stat-size": "32px",
+      "--cg-stat-line": "1",
+      "--cg-stat-weight": "var(--cg-weight-medium)",
       "--cg-space-1": "4px",
       "--cg-space-2": "8px",
       "--cg-space-3": "12px",

package/dist/ui/tabs.d.ts

@@ -1,11 +1,52 @@
+import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { type VariantProps } from "class-variance-authority";
-declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+/**
+ * Three list treatments, and `pill` is the one with behaviour.
+ *
+ * `default`  the segmented control: a tinted track with a raised active tab.
+ * `line`     an underline under the active tab, no track at all.
+ * `pill`     a row of rounded-full chips that SCROLLS rather than wraps, for
+ *            choosing a sub-page on a narrow screen (ui#256). Read from the
+ *            Console's mobile frames: Architecture, Versions, Scheduled jobs,
+ *            Logs, Database, Configuration, Connections, seven chips on a
+ *            390px phone.
+ *
+ * Wrapping was the alternative and it is worse on the frame it is for: a
+ * second row of chips pushes the page's own heading below the fold, and the
+ * height of the strip then depends on how many sub-pages a reader's role can
+ * see. A scroller is one row whatever the count.
+ *
+ * The cost of a scroller is that the active chip can start off-screen, which is
+ * the one thing a reader needs to see. `scrollActiveTabIntoView` pays it on
+ * mount.
+ */
+/**
+ * Bring the active chip into view inside its own scroll port, on mount.
+ *
+ * Deliberately NOT `element.scrollIntoView()`. That walks every ancestor scroll
+ * port, including the document, so on a phone it scrolls the whole page to
+ * wherever the chip strip happens to be — which is the page jumping under a
+ * reader who has not touched anything. Setting `scrollLeft` moves the one box
+ * that should move and nothing else.
+ *
+ * `offsetLeft` is read against the list, which is why the `pill` variant is
+ * `relative`: that makes the list its children's `offsetParent`, so the number
+ * is the chip's position inside the strip rather than its position inside
+ * whatever happened to be positioned further up the page.
+ *
+ * Exported because it is the only part of this that can be asserted without a
+ * browser. It reads four numbers and one selector, so the node suite calls it
+ * with a plain object carrying them; the real scroll is measured in
+ * `registry/e2e/tabs-pill.spec.ts`.
+ */
+declare function scrollActiveTabIntoView(list: HTMLElement | null | undefined): void;
+declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
+    variant?: "line" | "default" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
-declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
-declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+declare function TabsList({ className, variant, ref, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): React.JSX.Element;
+declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, scrollActiveTabIntoView };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,+BAY1B;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,+BASlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,+BAcpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,+BAmBtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,QAapE;AAUD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,qBAY1B;AAED,QAAA,MAAM,gBAAgB;;8EAkCrB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,qBA+BlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,qBAqCpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,qBAmBtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/ui/tabs.js

@@ -1,8 +1,70 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * Three list treatments, and `pill` is the one with behaviour.
+ *
+ * `default`  the segmented control: a tinted track with a raised active tab.
+ * `line`     an underline under the active tab, no track at all.
+ * `pill`     a row of rounded-full chips that SCROLLS rather than wraps, for
+ *            choosing a sub-page on a narrow screen (ui#256). Read from the
+ *            Console's mobile frames: Architecture, Versions, Scheduled jobs,
+ *            Logs, Database, Configuration, Connections, seven chips on a
+ *            390px phone.
+ *
+ * Wrapping was the alternative and it is worse on the frame it is for: a
+ * second row of chips pushes the page's own heading below the fold, and the
+ * height of the strip then depends on how many sub-pages a reader's role can
+ * see. A scroller is one row whatever the count.
+ *
+ * The cost of a scroller is that the active chip can start off-screen, which is
+ * the one thing a reader needs to see. `scrollActiveTabIntoView` pays it on
+ * mount.
+ */
+/**
+ * Bring the active chip into view inside its own scroll port, on mount.
+ *
+ * Deliberately NOT `element.scrollIntoView()`. That walks every ancestor scroll
+ * port, including the document, so on a phone it scrolls the whole page to
+ * wherever the chip strip happens to be — which is the page jumping under a
+ * reader who has not touched anything. Setting `scrollLeft` moves the one box
+ * that should move and nothing else.
+ *
+ * `offsetLeft` is read against the list, which is why the `pill` variant is
+ * `relative`: that makes the list its children's `offsetParent`, so the number
+ * is the chip's position inside the strip rather than its position inside
+ * whatever happened to be positioned further up the page.
+ *
+ * Exported because it is the only part of this that can be asserted without a
+ * browser. It reads four numbers and one selector, so the node suite calls it
+ * with a plain object carrying them; the real scroll is measured in
+ * `registry/e2e/tabs-pill.spec.ts`.
+ */
+function scrollActiveTabIntoView(list) {
+    if (!list)
+        return;
+    const active = list.querySelector('[data-slot="tabs-trigger"][data-active]');
+    if (!active)
+        return;
+    const overflow = list.scrollWidth - list.clientWidth;
+    // Nothing to scroll. Without this the clamp below would still land on 0, but
+    // writing scrollLeft on a strip that does not overflow is a mutation with no
+    // meaning, and a test cannot tell it apart from the real thing.
+    if (overflow <= 0)
+        return;
+    const centred = active.offsetLeft - (list.clientWidth - active.offsetWidth) / 2;
+    list.scrollLeft = Math.max(0, Math.min(centred, overflow));
+}
+/**
+ * `useLayoutEffect` on the client so the strip is already scrolled on the first
+ * paint, `useEffect` on the server so React does not warn about a layout effect
+ * in a render that has no layout. Assigned once at module scope rather than
+ * chosen per render, so the hook order never changes.
+ */
+const useIsoLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }));
 }
@@ -11,17 +73,82 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center jus
         variant: {
             default: "bg-muted",
             line: "gap-1 bg-transparent",
+            // No track, no wrap, one row. `relative` is load-bearing rather than
+            // cosmetic: it makes the list the offsetParent of its chips, which is
+            // what `scrollActiveTabIntoView` measures against.
+            //
+            // py-1 is the focus ring's room. `overflow-x: auto` computes overflow-y
+            // to auto as well, so a ring drawn outside the strip's box would either
+            // be clipped or produce a vertical scrollbar; 4px of padding is more
+            // than the 3px ring needs.
+            //
+            // `p-0` before it, and it is not redundant. tailwind-merge's padding
+            // conflicts are one-directional: a later `px-*` does NOT remove an
+            // earlier `p-*`, so the base's `p-[3px]` would have survived into the
+            // strip and left it with a 3px inline gutter that no class in this
+            // string mentions.
+            //
+            // The scrollbar is hidden in both dialects because a always-visible
+            // scrollbar under a 34px chip row is most of a second row's height.
+            // Hiding it is safe here and would not be on a vertical list: the
+            // active chip is scrolled in on mount, arrow keys move between chips,
+            // and a touch reader drags.
+            pill: "relative w-full max-w-full justify-start gap-2 overflow-x-auto rounded-none bg-transparent p-0 py-1 group-data-horizontal/tabs:h-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         },
     },
     defaultVariants: {
         variant: "default",
     },
 });
-function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+function TabsList({ className, variant = "default", ref, ...props }) {
+    const list = React.useRef(null);
+    useIsoLayoutEffect(() => {
+        // Only the variant that scrolls. `default` and `line` are `w-fit` and have
+        // no scroll port, so this would be a measurement of nothing — and running
+        // it anyway is how a variant that was supposed to be untouched acquires
+        // behaviour.
+        if (variant !== "pill")
+            return;
+        scrollActiveTabIntoView(list.current);
+    }, [variant]);
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, 
+        // Merged rather than replaced. Base UI forwards the ref to the real
+        // element, so taking it for the scroll would otherwise silently drop a
+        // consumer's own ref, and a dropped ref fails at THEIR call site.
+        ref: (node) => {
+            list.current = node;
+            if (typeof ref === "function") {
+                const cleanup = ref(node);
+                return typeof cleanup === "function" ? cleanup : undefined;
+            }
+            if (ref)
+                ref.current = node;
+        }, className: cn(tabsListVariants({ variant }), className), ...props }));
 }
 function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-body-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-body-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", 
+        // THE PILL CHIP (ui#256).
+        //
+        // Every rule is scoped to the list's variant rather than added to the
+        // base string, which is what keeps `default` and `line` byte-identical
+        // to what they rendered before. The prefixed selector also carries
+        // higher specificity than the unprefixed base rules it has to beat
+        // (`flex-1`, `rounded-md`, `text-foreground/60`, and the
+        // `data-active:bg-background` line above), which is the same mechanism
+        // `line` already uses. tailwind-merge cannot collapse the two, because a
+        // prefixed utility and a bare one are different groups to it.
+        //
+        // flex-none over the base's flex-1: a chip is as wide as its words. Four
+        // equal chips would compress "Scheduled jobs" and leave "Logs" swimming.
+        "group-data-[variant=pill]/tabs-list:h-auto group-data-[variant=pill]/tabs-list:flex-none group-data-[variant=pill]/tabs-list:shrink-0 group-data-[variant=pill]/tabs-list:rounded-pill group-data-[variant=pill]/tabs-list:border-hairline group-data-[variant=pill]/tabs-list:bg-card group-data-[variant=pill]/tabs-list:px-3 group-data-[variant=pill]/tabs-list:py-1.5 group-data-[variant=pill]/tabs-list:text-caption group-data-[variant=pill]/tabs-list:font-medium group-data-[variant=pill]/tabs-list:text-body", 
+        // The active chip is self-contained: its own ground AND its own text,
+        // which is `SideNavItem`'s decision and its measured numbers. The tint
+        // under the brand purple is one pair of values on the page, on the panel
+        // and on ink, held at 5.02:1 by
+        // `packages/ui/test/contrast-guardrail.test.mjs`. `text-brand` alone
+        // would be purple on purple inside a panel; the tint alone would be
+        // inherited body text on lavender.
+        "group-data-[variant=pill]/tabs-list:data-active:border-brand-200 group-data-[variant=pill]/tabs-list:data-active:bg-brand-tint group-data-[variant=pill]/tabs-list:data-active:text-brand", "group-data-[variant=pill]/tabs-list:hover:text-ink group-data-[variant=pill]/tabs-list:data-active:hover:text-brand", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("flex-1 text-body-sm outline-none", 
@@ -34,5 +161,5 @@ function TabsContent({ className, ...props }) {
         // passes through.
         "focus-visible:ring-3 focus-visible:ring-ring", className), ...props }));
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, scrollActiveTabIntoView };
 //# sourceMappingURL=tabs.js.map

package/dist/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,MAAM,sBACE,WAAW,EAC7B,SAAS,EAAE,EAAE,CACX,gDAAgD,EAChD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,GAAG,CAC1B,yOAAyO,EACzO;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,sBAAsB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AAED,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACyD;IACjE,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,WAAW,kBACP,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA2B;IACnE,OAAO,CACL,KAAC,aAAa,CAAC,GAAG,iBACN,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,81BAA81B,EAC91B,+PAA+P,EAC/P,mJAAmJ,EACnJ,sYAAsY,EACtY,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B;IACrE,OAAO,CACL,KAAC,aAAa,CAAC,KAAK,iBACR,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,kCAAkC;QAClC,wEAAwE;QACxE,uEAAuE;QACvE,sEAAsE;QACtE,uEAAuE;QACvE,oEAAoE;QACpE,qEAAqE;QACrE,kBAAkB;QAClB,8CAA8C,EAC9C,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -21,6 +21,7 @@
       "default": "./dist/index.js"
     },
     "./tokens.css": "./dist/tokens.css",
+    "./console.css": "./dist/console.css",
     "./theme.css": "./dist/theme.css",
     "./shadcn.css": "./dist/shadcn.css",
     "./fonts.css": "./dist/fonts.css",