@cloudgrid-io/ui 0.39.0 → 0.40.0

package/dist/blocks/plugged-dialog.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "../ui/dialog.js";
+import { EntityCard } from "./entity-card.js";
+/**
+ * The success popup after a plug (#370), from the CloudGrid 2026 Figma, node
+ * 11324:93350 on frame "Home". The Console opens it after a drop
+ * (cloudgrid-console#949).
+ *
+ * ```
+ *  .--------------------------------------------.
+ *  |                  PLUGGED                   |
+ *  |      This app is plugged to Design grid    |
+ *  |            .------------------.            |
+ *  |            |  [picture]  [App]|            |
+ *  |            |  orbit-deck  *   |            |
+ *  |            '------------------'            |
+ *  |            [      Share       ]            |
+ *  |                                  [ Close ] |
+ *  '--------------------------------------------'
+ * ```
+ *
+ * ## The headline
+ *
+ * "Plugged", not the frame's "Published" with its mark. "Publish" is a never-say verb in the
+ * canon (#366 took it out of the Shelf), and the canon bans the exclamation mark
+ * too (product rule 23; Nataly's review on #375). The caller can pass its own
+ * through `title`.
+ *
+ * The frame sets it at Tanker 46 / 1.2 / -1%. The display ramp has no 46 rung;
+ * this uses the nearest one, `display-48`, with the 1.2 heading leading and the
+ * title tracking (0). A 46 rung is a tokens change, which is the design owner's
+ * call, not this block's.
+ *
+ * ## The line
+ *
+ * "This app is plugged to **Design** grid". The block owns the shape (the grid
+ * name in semibold) and the caller owns the words around it, because they
+ * differ by kind: `lineBefore` / `lineAfter`. A caller with a different shape
+ * passes `description`, which replaces the whole line.
+ *
+ * ## The tile
+ *
+ * `EntityCard`, the frame's "Tile", given the caller's props as they are: the
+ * picture, the name, the live dot, the count, the kind badge, and its building
+ * state and fallback picture for an app that is not live yet. Nothing about the
+ * card is re-drawn here.
+ *
+ * ## The buttons
+ *
+ * Share is `cta` (the filled tertiary) with its hairline drawn in the tertiary;
+ * Close is `tertiary-soft`. Share calls `onShare` and nothing else: no network,
+ * no `navigator.share`, and it does not close the popup. The Console decides
+ * what sharing means (the share sheet where there is one, the clipboard where
+ * there is not).
+ *
+ * ## Closing
+ *
+ * Controlled. Close, Escape and a click on the scrim all reach `onOpenChange`
+ * with `false`, through Base UI. Focus moves to the popup itself on open, so a
+ * reader hears the title and no button draws its ring before the keyboard
+ * reaches it; it returns to what had it, the trigger, on close.
+ *
+ * The card is white on every page because it portals to the document root,
+ * outside any panel or ink scope. Those scopes DO redeclare `--cg-surface-card`
+ * (transparent on the panel, a 4% white wash on ink; tokens.css), so the card is
+ * white only while it renders at the root, which is Base UI's default portal.
+ *
+ * On a short window (a phone on its side, 812x375) the card is taller than the
+ * viewport. It is capped at the window's height less 2rem and scrolls inside, so
+ * the headline and Close stay reachable.
+ */
+/** The default copy. Every string passes the canon. */
+export const PLUGGED_DIALOG_DEFAULTS = {
+    title: "Plugged",
+    lineBefore: "This app is plugged to",
+    lineAfter: "grid",
+    shareLabel: "Share",
+    closeLabel: "Close",
+};
+/** The 330px column the frame gives the tile and Share. */
+const COLUMN = "w-full max-w-82.5";
+/** The frame's two buttons: 48 tall at least, radius 16, 14/32, the UI face, Bold 15. */
+const ACTION = "h-auto min-h-12 rounded-xl px-8 py-3.5 font-ui text-body-sm font-bold";
+function PluggedDialog({ open, onOpenChange, onShare, grid, entity, title = PLUGGED_DIALOG_DEFAULTS.title, lineBefore = PLUGGED_DIALOG_DEFAULTS.lineBefore, lineAfter = PLUGGED_DIALOG_DEFAULTS.lineAfter, description, shareLabel = PLUGGED_DIALOG_DEFAULTS.shareLabel, closeLabel = PLUGGED_DIALOG_DEFAULTS.closeLabel, className, }) {
+    const popup = React.useRef(null);
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => onOpenChange(next), children: _jsxs(DialogContent, { ref: popup, "data-slot": "plugged-dialog", initialFocus: popup, showCloseButton: false, className: cn("max-h-[calc(100svh-2rem)] w-full gap-6 overflow-y-auto rounded-2xl border border-hairline bg-card px-8 py-6 text-ink ring-0 sm:max-w-158", className), children: [_jsx(DialogTitle, { className: "m-0 text-center font-display font-heavy text-display-48 leading-heading tracking-title text-balance text-brand", children: title }), _jsxs("div", { className: "grid justify-items-center gap-5", children: [_jsx(DialogDescription, { className: "m-0 text-center text-body-sm leading-body text-ink", children: description ?? (_jsxs(_Fragment, { children: [lineBefore, " ", _jsx("strong", { className: "font-semibold", children: grid }), " ", lineAfter] })) }), _jsx("div", { "data-slot": "plugged-dialog-tile", className: COLUMN, children: _jsx(EntityCard, { ...entity }) }), _jsx(Button, { type: "button", variant: "cta", "data-slot": "plugged-dialog-share", className: cn(COLUMN, ACTION, "border-cyan"), onClick: () => onShare(), children: shareLabel })] }), _jsx("div", { className: "flex justify-end", children: _jsx(DialogClose, { "data-slot": "plugged-dialog-close", render: _jsx(Button, { type: "button", variant: "tertiary-soft", className: ACTION }), children: closeLabel }) })] }) }));
+}
+export { PluggedDialog };
+//# sourceMappingURL=plugged-dialog.js.map

package/dist/blocks/plugged-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugged-dialog.js","sourceRoot":"","sources":["../../src/blocks/plugged-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,WAAW,GACZ,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,uDAAuD;AACvD,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,wBAAwB;IACpC,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,OAAO;CACX,CAAA;AAEV,2DAA2D;AAC3D,MAAM,MAAM,GAAG,mBAAmB,CAAA;AAElC,yFAAyF;AACzF,MAAM,MAAM,GAAG,uEAAuE,CAAA;AAwBtF,SAAS,aAAa,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,GAAG,uBAAuB,CAAC,KAAK,EACrC,UAAU,GAAG,uBAAuB,CAAC,UAAU,EAC/C,SAAS,GAAG,uBAAuB,CAAC,SAAS,EAC7C,WAAW,EACX,UAAU,GAAG,uBAAuB,CAAC,UAAU,EAC/C,UAAU,GAAG,uBAAuB,CAAC,UAAU,EAC/C,SAAS,GACU;IACnB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,YAC5D,MAAC,aAAa,IACZ,GAAG,EAAE,KAAK,eACA,gBAAgB,EAC1B,YAAY,EAAE,KAAK,EACnB,eAAe,EAAE,KAAK,EACtB,SAAS,EAAE,EAAE,CACX,0IAA0I,EAC1I,SAAS,CACV,aAED,KAAC,WAAW,IAAC,SAAS,EAAC,gHAAgH,YACpI,KAAK,GACM,EAEd,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,iBAAiB,IAAC,SAAS,EAAC,oDAAoD,YAC9E,WAAW,IAAI,CACd,8BACG,UAAU,OAAE,iBAAQ,SAAS,EAAC,eAAe,YAAE,IAAI,GAAU,OAAE,SAAS,IACxE,CACJ,GACiB,EAEpB,2BAAe,qBAAqB,EAAC,SAAS,EAAE,MAAM,YACpD,KAAC,UAAU,OAAK,MAAM,GAAI,GACtB,EAEN,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,KAAK,eACH,sBAAsB,EAChC,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,YAEvB,UAAU,GACJ,IACL,EAEN,cAAK,SAAS,EAAC,kBAAkB,YAC/B,KAAC,WAAW,iBACA,sBAAsB,EAChC,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAE,MAAM,GAAI,YAE1E,UAAU,GACC,GACV,IACQ,GACT,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/blocks/side-nav.d.ts

@@ -30,10 +30,20 @@ declare function SideNavGroup({ label, icon, collapsible, open, defaultOpen, onO
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
 }): React.JSX.Element;
-declare function SideNavItem({ label, icon, count, active, render, className, onKeyDown, ...props }: Omit<useRender.ComponentProps<"button">, "children"> & {
+declare function SideNavItem({ label, icon, activeIcon, count, active, render, className, onKeyDown, ...props }: Omit<useRender.ComponentProps<"button">, "children"> & {
     label: React.ReactNode;
-    /** 14 to 16px. The row's label is what gets announced, so the glyph carries no name. */
+    /**
+     * The row's glyph, drawn at 20px. The label is what gets announced, so the
+     * glyph carries no name.
+     */
     icon?: React.ReactNode;
+    /**
+     * The same glyph, filled, for when this row is the page you are on (#377).
+     * Pass the pair once, `icon={<PeopleIcon />} activeIcon={<PeopleFilledIcon />}`,
+     * and the row draws the right one for its state. Without it the row draws
+     * `icon` in both states.
+     */
+    activeIcon?: React.ReactNode;
     /**
      * The trailing pill. The frame's Feedback row wears a `0`.
      *

package/dist/blocks/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/blocks/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA0GrD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,OAAO,EACP,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;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,qBAsCA;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBAgGA;AAED,iBAAS,WAAW,CAAC,EACnB,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,wFAAwF;IACxF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,0EAmEA;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/blocks/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA2IrD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,OAAO,EACP,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;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,qBAsCA;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBAkGA;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,UAAU,EACV,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;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,0EA4EA;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/side-nav.js

@@ -56,18 +56,28 @@ import { cn } from "../lib/cloudgrid-cn.js";
  *
  * ## The active row does not flip, and that is the decision
  *
- * The frame's active row is a pale lavender chip carrying purple text:
- * `--cg-primary-tint` under `--cg-primary`. Both are declared at `:root` only,
- * so the row paints the same two values on the page, on the purple panel and on
- * ink — and that is the point rather than an oversight.
+ * The active row is a pale lavender chip, `--cg-primary-tint`, with the glyph
+ * FILLED in `--cg-primary` and the label in ink (#377, the 2026 Admin menu,
+ * Figma 7414:5979; before that the label was purple too). The tint is primary
+ * at 10% over white to within one unit per channel, so the opaque token is the
+ * frame's ground. The tint, the purple and the label's ink
+ * (`--cg-neutral-900`, read from the ramp, NOT `text-ink`) are all declared at
+ * `:root` only, so the row paints the same three values on the page, on the
+ * purple panel and on ink — and that is the point rather than an oversight.
  *
  * It is the kind badge's rule (#196) applied to a row: the chip brings its own
- * ground, so it does not need the surface's answer for one. The pair measures
- * 5.02:1, which clears AA for its 15px label everywhere, and the chip measures
+ * ground, so it does not need the surface's answer for one. The ink label
+ * measures 13.69:1 on it and the purple glyph 5.02:1, and the chip measures
  * 1.16:1 against the white card, 5.02:1 against the panel and 13.68:1 on ink.
  * `packages/ui/test/contrast-guardrail.test.mjs` holds every one of those
  * numbers, and says why the chip's own floor is not 3:1.
  *
+ * The state is said three ways: the chip, the glyph's SHAPE (filled, when the
+ * caller hands `activeIcon`), and `aria-current`. An inactive row's glyph is
+ * N3 (`--cg-slate-500`, the `steel` utility) on the light page; N3 is a :root
+ * ramp value that measures 1.71:1 on the panel, so on the panel and on ink the
+ * glyph takes that surface's own `--cg-text-muted` instead.
+ *
  * The alternative was a surface-scoped `--cg-primary-tint`, and it fails on the
  * panel for a measured reason the token file already records: a white wash over
  * the brand purple gives white text 4.31:1, under the floor, and white is the
@@ -87,6 +97,24 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * the obvious reach and it is lavender at `:root` only, so a hovered row on the
  * purple panel would have been white text on near-white.
  */
+/**
+ * A row's box, and a collapsible group's header, which sits in the column and
+ * looks like one. Figma 7414:5979 (#377): 12 vertical and 20 horizontal, a 12px
+ * gap, radius 12, Manrope Medium 15; with the 20px glyph that makes a 44px row.
+ *
+ * The frame's `leading-none` stays on the row, but the LABEL span sets a 20px
+ * line box (`leading-5`). It is `truncate`, which is `overflow: hidden`, and a
+ * 15px box clips Manrope's descenders: the g in Billing, the y in Activity
+ * (measured scrollHeight 18 against clientHeight 15 on #380). The Figma text
+ * node does not clip, so its `leading-none` does not carry over to the label.
+ */
+const ROW = cn("flex w-full items-center gap-3 rounded-md px-5 py-3 text-left font-ui text-body-sm leading-none font-medium no-underline", "transition-colors focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none");
+/**
+ * The 20px glyph box. It sizes the caller's svg as well as itself, so a mark
+ * passed with a `size-4` of its own (the Console's, today) still draws at the
+ * frame's 20px rather than sitting small inside a 20px box.
+ */
+const GLYPH = "flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
 /** Rows and group headers, in the order the column draws them. */
 const ROW_SELECTOR = '[data-slot="side-nav-item"],[data-slot="side-nav-group-header"]';
 /**
@@ -123,7 +151,7 @@ function SideNav({ label, context, className, children, onKeyDown, ...props }) {
         // text-ink because text does not flip by inheritance: without it every
         // row inside a panel would inherit the page's dark ink and stay dark on
         // purple.
-        className: cn("flex w-full flex-col gap-6 text-ink", className), ...props, children: [context ? (_jsx("div", { "data-slot": "side-nav-context", className: "px-3 text-caption text-faint", children: context })) : null, children] }));
+        className: cn("flex w-full flex-col gap-6 text-ink", className), ...props, children: [context ? (_jsx("div", { "data-slot": "side-nav-context", className: "px-5 text-caption text-faint", children: context })) : null, children] }));
 }
 function SideNavGroup({ label, icon, collapsible, open, defaultOpen = false, onOpenChange, className, children, ...props }) {
     const panelId = React.useId();
@@ -157,9 +185,9 @@ function SideNavGroup({ label, icon, collapsible, open, defaultOpen = false, onO
                 // step is one edit in eyebrow.tsx. Caps and the caption size are this
                 // frame's treatment of it, which is what `className` is for — see the
                 // eyebrow's own note on not being uppercase by default.
-                _jsx(Eyebrow, { className: "px-3 text-caption uppercase", children: label })) : null, rows] }));
+                _jsx(Eyebrow, { className: "px-5 text-caption uppercase", children: label })) : null, rows] }));
     }
-    return (_jsxs("div", { "data-slot": "side-nav-group", "data-collapsible": "", "data-open": isOpen ? "" : undefined, className: cn("flex flex-col gap-0.5", className), ...props, children: [_jsxs("button", { type: "button", "data-slot": "side-nav-group-header", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-body-sm text-body", "transition-colors hover:bg-(--cg-hover) hover:text-ink", "focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none"), children: [icon ? (_jsx("span", { "data-slot": "side-nav-icon", className: "flex size-4 shrink-0 items-center justify-center", children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronDownIcon
+    return (_jsxs("div", { "data-slot": "side-nav-group", "data-collapsible": "", "data-open": isOpen ? "" : undefined, className: cn("flex flex-col gap-0.5", className), ...props, children: [_jsxs("button", { type: "button", "data-slot": "side-nav-group-header", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cn(ROW, "text-ink hover:bg-(--cg-hover)"), children: [icon ? (_jsx("span", { "data-slot": "side-nav-icon", className: cn(GLYPH, "text-steel in-data-[cg-surface=panel]:text-faint in-data-[cg-surface=ink]:text-faint"), children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate leading-5", children: label }), _jsx(ChevronDownIcon
                     // The caret is the only thing in this block that moves. It rotates
                     // rather than swapping to a second glyph, so the direction it points
                     // is continuous with the panel opening under it.
@@ -169,7 +197,7 @@ function SideNavGroup({ label, icon, collapsible, open, defaultOpen = false, onO
                         // is continuous with the panel opening under it.
                         className: cn("size-4 shrink-0 transition-transform duration-[var(--cg-duration)] ease-out", isOpen ? "rotate-0" : "-rotate-90") })] }), _jsx("div", { id: panelId, hidden: !isOpen, className: isOpen ? "pl-3" : undefined, children: rows })] }));
 }
-function SideNavItem({ label, icon, count, active, render, className, onKeyDown, ...props }) {
+function SideNavItem({ label, icon, activeIcon, count, active, render, className, onKeyDown, ...props }) {
     function handleKeyDown(event) {
         onKeyDown?.(event);
         if (event.defaultPrevented)
@@ -184,6 +212,7 @@ function SideNavItem({ label, icon, count, active, render, className, onKeyDown,
         event.preventDefault();
         el.click();
     }
+    const glyph = active && activeIcon ? activeIcon : icon;
     return useRender({
         render,
         defaultTagName: "button",
@@ -197,16 +226,21 @@ function SideNavItem({ label, icon, count, active, render, className, onKeyDown,
             // and `render={<Link />}` is the common case.
             ...(render ? {} : { type: "button" }),
             onKeyDown: handleKeyDown,
-            className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-body-sm no-underline", "transition-colors focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", active
+            className: cn(ROW, active
                 ? // The self-contained chip. See the module note for the numbers and
-                    // for why it is the same two values on all three surfaces.
-                    "bg-brand-tint font-medium text-brand"
-                : "text-body hover:bg-(--cg-hover) hover:text-ink", className),
+                    // for why it is the same two values on all three surfaces. The
+                    // label is the :root ink, not `text-ink`, which flips to white
+                    // inside a panel while the chip under it does not.
+                    "bg-brand-tint text-(--cg-neutral-900)"
+                : "text-ink hover:bg-(--cg-hover)", className),
             // The row's content is 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 row and no
             // rule about which wins.
-            children: (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "data-slot": "side-nav-icon", className: "flex size-4 shrink-0 items-center justify-center", children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), count === undefined ? null : (_jsx("span", { "data-slot": "side-nav-count", 
+            children: (_jsxs(_Fragment, { children: [glyph ? (_jsx("span", { "data-slot": "side-nav-icon", className: cn(GLYPH, active
+                            ? "text-brand"
+                            : // N3, and the surface's own muted text where N3 vanishes.
+                                "text-steel in-data-[cg-surface=panel]:text-faint in-data-[cg-surface=ink]:text-faint"), children: glyph })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate leading-5", children: label }), count === undefined ? null : (_jsx("span", { "data-slot": "side-nav-count", 
                         // The wash again, for the reason the hover uses it: 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.

package/dist/blocks/side-nav.js.map

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

package/dist/console.css

@@ -1,28 +1,69 @@
 /*
   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.
+  The Console's body type is the UI face, Manrope; its headlines are the
+  display face, Tanker. This file states that in the library, so the Console
+  does not carry a font stack of its own. ui#250, 2026-09-20; revised by ui#371,
+  2026-11-01.
 
-  Two declarations, and deliberately nothing else: no colour, no spacing, no
+  One declaration, 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.
 
+  THE SOURCE. The CloudGrid 2026 Figma (file 5ouhISIL0mwYGHurvCGoEO), its text
+  variables as read on 2026-11-01:
+
+      Body          Manrope Regular  15 / 1.46
+      Body Bold     Manrope SemiBold 15 / 1.46
+      Small         Manrope Regular  13 / 1.46
+      H4            Manrope Medium   22 / 1.2
+      fontHeadline  Tanker           (the Profile name; the Plugged popup's
+                                      headline, node 11324:93350, 46 / 1.2)
+
   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.
+  correct for the marketing site. The Console inherits every family from here
+  (its own @theme font forwards were deleted in console#652), so without this
+  file every Console paragraph renders in Space Grotesk. The marketing default
+  in tokens.css is untouched by this file.
+
+  WHAT CHANGED IN #371, AND WHY. #250 re-declared BOTH faces as Manrope. Its
+  reason for the display half was StatTile: Tanker is an all-caps face, so a
+  value such as `15s` or `Coming soon` rendered as `15S` or `COMING SOON`. The
+  2026 Figma settles the display role the other way: its `fontHeadline` is
+  Tanker, in the Console as on the site. So this preset no longer touches
+  --cg-font-display, and headlines stay Tanker. The StatTile case is now the
+  caller's choice of role, not the preset's: a stat value that must read as
+  typed uses the body or UI face (`text-stat`, Manrope Medium 32), not the
+  display face. Repointing the display role to fix one component would have
+  taken every Console headline off the design with it.
+
+  THE FIVE ROLES, as tokens. A Console page picks a role, not a size. Every
+  role below already has a token and a utility; nothing new was added for them.
+
+      Body       text-body-sm               --cg-body-sm 15, --cg-body-line 1.46,
+                                            on the body face (this file: Manrope)
+      Body Bold  text-body-sm font-bold     the same, at --cg-weight-bold 600
+      Small      text-caption               --cg-caption 13, --cg-body-line 1.46
+      H4         text-heading-lg            --cg-heading-lg 22, --cg-heading-line
+                 font-medium                1.2, at --cg-weight-medium 500, on the
+                                            body face
+      Headline   font-display               the display face, Tanker. The face is
+                                            the role; the size is the page's
+                                            (the title-* and display-* rungs).
+                                            46 has no rung of its own today.
+
+  THE TANKER FILE. tokens.css names Tanker in the display stack, but this
+  package does not ship the font (ITF Free Font Licence, see fonts.css). A
+  consumer that has not declared its own @font-face for Tanker falls through to
+  the Manrope stack behind it. The Console declares Tanker itself.
 
   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
+  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. Where it sits
@@ -50,18 +91,13 @@
   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.
+  WHO IMPORTS IT. The Console first. Any product whose body type is the UI face
+  imports the same file; nothing here is named for the Console except this
+  sentence.
 */
 
 :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

@@ -65,6 +65,7 @@ export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/pager.js";
 export * from "./blocks/phosphor-marks.js";
+export * from "./blocks/plugged-dialog.js";
 export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/prompt-block.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -82,6 +82,7 @@ export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/pager.js";
 export * from "./blocks/phosphor-marks.js";
+export * from "./blocks/plugged-dialog.js";
 export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/prompt-block.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"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,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,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,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AAEjC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/theme.css

@@ -247,6 +247,13 @@
   --color-scrim: var(--cg-scrim);
   --color-scrim-strong: var(--cg-scrim-strong);
 
+  /* ---- the scrim's blur ----
+     Tailwind's --blur-* namespace, so this is `backdrop-blur-scrim` (and
+     `blur-scrim`). The blur alone, for a caller composing its own overlay; a
+     modal backdrop uses `scrim-overlay` below, which carries the wash, the blur,
+     the @supports guard and the reduced-transparency fallback in one class. */
+  --blur-scrim: var(--cg-scrim-blur);
+
   /* ---- type families ----
      --font-sans points at the body face so the stock font-sans utility is
      correct rather than something to remember not to use. */
@@ -528,3 +535,30 @@
   --ease-out: var(--cg-ease-out);
   --ease-in-out: var(--cg-ease-in-out);
 }
+
+/*
+  The popup overlay (ui#368): the Style Guide's purple wash with the page behind
+  it blurred. CloudGrid 2026 Figma, the "Overlay" component (node 11324:93744).
+
+  One class, so no modal backdrop hand-codes the pair: `Dialog` and `Drawer` both
+  draw their scrim with it, and a product's own overlay should too.
+
+  - The wash is --cg-scrim, always.
+  - The blur is --cg-scrim-blur, only where the browser has backdrop-filter, so
+    an old engine keeps the wash and nothing else.
+  - Under prefers-reduced-transparency: reduce the blur goes and the wash stays.
+    Written as an override of the blur rather than a `no-preference` guard,
+    because an engine that does not know the media feature would read
+    `no-preference` as false and drop the blur for everyone.
+*/
+@utility scrim-overlay {
+  background-color: var(--cg-scrim);
+
+  @supports (backdrop-filter: blur(0)) {
+    backdrop-filter: blur(var(--cg-scrim-blur));
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    backdrop-filter: none;
+  }
+}

package/dist/tokens/base.json

@@ -1959,19 +1959,29 @@
       }
     },
     "scrim": {
-      "$value": "rgba(34, 34, 34, 0.4)",
+      "$value": "rgba(46, 30, 172, 0.46)",
       "$type": "color",
-      "$description": "The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the\nConsole's (#16181d) — a scrim sits above content and belongs to the system, not\nto one surface's ink scale.\n\nDoes NOT flip per surface, deliberately: it composites over whatever is beneath\nit, so a panel-scoped override would darken a scrim that is already dark.",
+      "$description": "The wash behind every modal popup: the Style Guide overlay, a light purple wash,\n#2E1EAC at 46% (#2E1EAC75). SOURCE: CloudGrid 2026 Figma, the \"Overlay\"\ncomponent on the Published dialog (node 11324:93744, frame 11324:92589), fill\n#2E1EAC at fill-opacity 0.46 (ui#368). Until then it was the brand ink at 40%,\nrgba(34, 34, 34, 0.4), and Dialog did not read it at all.\n\nIt always travels with --cg-scrim-blur, the page behind it blurred. Apply the\npair with the `scrim-overlay` utility (theme.css), never by hand.\n\nDoes NOT flip per surface, deliberately: it composites over whatever is beneath\nit, so a panel-scoped override would tint a wash that is already tinted.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-scrim"
         }
       }
     },
+    "scrim-blur": {
+      "$value": "6.8px",
+      "$type": "dimension",
+      "$description": "The blur of the page behind a modal popup, the other half of --cg-scrim. SOURCE:\nthe same Figma \"Overlay\" (node 11324:93744): a background blur of radius 13.59,\nwhich is CSS backdrop-filter: blur(6.8px), since Figma's radius is twice the CSS\nstandard deviation (ui#368).\n\nApplied through the `scrim-overlay` utility, which guards it with\n@supports (backdrop-filter) and drops it under prefers-reduced-transparency:\nreduce, keeping the wash. `backdrop-blur-scrim` is the blur alone.\n\nDeclared at :root only, like --cg-scrim.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-scrim-blur"
+        }
+      }
+    },
     "scrim-strong": {
       "$value": "rgba(34, 34, 34, 0.82)",
       "$type": "color",
-      "$description": "The wash under TEXT laid over a picture, e.g. the entity card's hover reveal.\n\nA second scrim rather than a heavier --cg-scrim, because the two carry different\nobligations. --cg-scrim sits behind a modal and only has to separate two layers,\nso 0.4 is a mood. This one has words on it, and the picture underneath is an\narbitrary screenshot: the worst case is a white capture, where the composite is\nthe lightest this token ever gets and every foreground on it is at its least\nreadable.\n\nMEASURED against that worst case, over --cg-neutral-0: 8.89:1 for the ink\nsurface's own #ffffff and 6.18:1 for its rgba(255,255,255,0.78) secondary, both\nclear of the 4.5:1 AA floor for normal text. At 0.6 the white would measure\n4.26:1 and fail, which is why this is not a rounder number. Asserted in\ntest/contrast-guardrail.test.mjs, so lightening it goes red rather than shipping\na caption nobody can read.\n\nDoes NOT flip per surface, for the same reason --cg-scrim does not: it\ncomposites over whatever is beneath it, and what is beneath it is a picture that\ndoes not flip either.",
+      "$description": "The wash under TEXT laid over a picture, e.g. the entity card's hover reveal.\n\nA second scrim rather than a heavier --cg-scrim, because the two carry different\nobligations. --cg-scrim is the purple wash behind a modal popup (#2E1EAC at 0.46,\nui#368): it only has to separate two layers, and the blur behind it does half\nof that, so its weight is the Style Guide's call. This one has words on it,\nand the picture underneath is an arbitrary screenshot: the worst case is a\nwhite capture, where the composite is the lightest this token ever gets and\nevery foreground on it is at its least readable.\n\nMEASURED against that worst case, over --cg-neutral-0: 8.89:1 for the ink\nsurface's own #ffffff and 6.18:1 for its rgba(255,255,255,0.78) secondary, both\nclear of the 4.5:1 AA floor for normal text. At 0.6 the white would measure\n4.26:1 and fail, which is why this is not a rounder number. Asserted in\ntest/contrast-guardrail.test.mjs, so lightening it goes red rather than shipping\na caption nobody can read.\n\nDoes NOT flip per surface, for the same reason --cg-scrim does not: it\ncomposites over whatever is beneath it, and what is beneath it is a picture that\ndoes not flip either.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-scrim-strong"

package/dist/tokens.css

@@ -1548,22 +1548,40 @@
      brand mark is not a state and does not flip per surface. */
   --cg-live-halo: color-mix(in srgb, var(--cg-volt) 32%, transparent);
   /*
-     The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the
-     Console's (#16181d) — a scrim sits above content and belongs to the system, not
-     to one surface's ink scale.
+     The wash behind every modal popup: the Style Guide overlay, a light purple wash,
+     #2E1EAC at 46% (#2E1EAC75). SOURCE: CloudGrid 2026 Figma, the "Overlay"
+     component on the Published dialog (node 11324:93744, frame 11324:92589), fill
+     #2E1EAC at fill-opacity 0.46 (ui#368). Until then it was the brand ink at 40%,
+     rgba(34, 34, 34, 0.4), and Dialog did not read it at all.
+
+     It always travels with --cg-scrim-blur, the page behind it blurred. Apply the
+     pair with the `scrim-overlay` utility (theme.css), never by hand.
 
      Does NOT flip per surface, deliberately: it composites over whatever is beneath
-     it, so a panel-scoped override would darken a scrim that is already dark. */
-  --cg-scrim: rgba(34, 34, 34, 0.4);
+     it, so a panel-scoped override would tint a wash that is already tinted. */
+  --cg-scrim: rgba(46, 30, 172, 0.46);
+  /*
+     The blur of the page behind a modal popup, the other half of --cg-scrim. SOURCE:
+     the same Figma "Overlay" (node 11324:93744): a background blur of radius 13.59,
+     which is CSS backdrop-filter: blur(6.8px), since Figma's radius is twice the CSS
+     standard deviation (ui#368).
+
+     Applied through the `scrim-overlay` utility, which guards it with
+     @supports (backdrop-filter) and drops it under prefers-reduced-transparency:
+     reduce, keeping the wash. `backdrop-blur-scrim` is the blur alone.
+
+     Declared at :root only, like --cg-scrim. */
+  --cg-scrim-blur: 6.8px;
   /*
      The wash under TEXT laid over a picture, e.g. the entity card's hover reveal.
 
      A second scrim rather than a heavier --cg-scrim, because the two carry different
-     obligations. --cg-scrim sits behind a modal and only has to separate two layers,
-     so 0.4 is a mood. This one has words on it, and the picture underneath is an
-     arbitrary screenshot: the worst case is a white capture, where the composite is
-     the lightest this token ever gets and every foreground on it is at its least
-     readable.
+     obligations. --cg-scrim is the purple wash behind a modal popup (#2E1EAC at 0.46,
+     ui#368): it only has to separate two layers, and the blur behind it does half
+     of that, so its weight is the Style Guide's call. This one has words on it,
+     and the picture underneath is an arbitrary screenshot: the worst case is a
+     white capture, where the composite is the lightest this token ever gets and
+     every foreground on it is at its least readable.
 
      MEASURED against that worst case, over --cg-neutral-0: 8.89:1 for the ink
      surface's own #ffffff and 6.18:1 for its rgba(255,255,255,0.78) secondary, both

package/dist/tokens.json

@@ -206,7 +206,8 @@
       "--cg-volt": "var(--cg-secondary)",
       "--cg-volt-ink": "#243d00",
       "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
-      "--cg-scrim": "rgba(34, 34, 34, 0.4)",
+      "--cg-scrim": "rgba(46, 30, 172, 0.46)",
+      "--cg-scrim-blur": "6.8px",
       "--cg-scrim-strong": "rgba(34, 34, 34, 0.82)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)",
       "--cg-kind-inspiration": "#fae4b3",

package/dist/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | "cta" | null | undefined;
+    variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | "cta" | "tertiary-soft" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA+DnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAgFnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}