@cloudgrid-io/ui 0.40.0 → 0.42.0

package/dist/tokens/base.json

@@ -297,6 +297,16 @@
         }
       }
     },
+    "tertiary-dark": {
+      "$value": "#45cdd4",
+      "$type": "color",
+      "$description": "Figma \"Tertiary Dark\" (CloudGrid-2026; the header menus' \"+ New\", node 11324:90629).\n\nTeal text links (\"+ New\", \"Explore All\", \"Open\", \"Dismiss\") and the line of the rail's scroll button.\n\nMeasures 1.92:1 on white and 1.70:1 on the page ground: under AA, used knowingly as a design decision (Gilad, 2026-11-01). Every link drawn in it also carries an accessible name.\n\nNot --cg-tertiary-press (#4dd8e0), which is the cta's pressed fill.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-tertiary-dark"
+        }
+      }
+    },
     "accent-press": {
       "$value": "#0052da",
       "$type": "color",
@@ -2002,9 +2012,9 @@
   "kind": {
     "$description": "kind: what an entity IS, as a ground for its 20px badge (#196).\n\nDeclared at :root ONLY, like the identity tile and unlike everything else in\nthis file. The badge sits on a screenshot, and a picture does not flip: half of\na mark flipping is a light disc with a white glyph on the ink surface, which\nrenders perfectly and shows nothing. --cg-text-on-accent is the glyph on all\nthree, and it measures 12.74:1, 14.65:1 and 10.24:1 on them.",
     "kind-inspiration": {
-      "$value": "#fae4b3",
+      "$value": "#f0f8e1",
       "$type": "color",
-      "$description": "SOURCE: the founder's draft, the Inspiration badge.",
+      "$description": "SOURCE: the 2026 Figma (CloudGrid-2026, the Tile's Inspiration badge, node I11324:91033), paint style \"Secondary 20\" (#382). It was #fae4b3, the founder's 2025 draft; the Gilad-approved 2026 frames put the lightbulb on lime. Ink on it measures 14.56:1.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-kind-inspiration"
@@ -2044,5 +2054,35 @@
         }
       }
     }
+  },
+  "avatar": {
+    "$description": "The grid avatar grounds, raw hex in the CloudGrid-2026 frames (11323:8600, 11324:90635, 11324:90641). Letters are --cg-ink: 12.02:1, 10.74:1 and 11.43:1. An identity colour, so it does not flip on the panel or ink surfaces.",
+    "avatar-pastel-1": {
+      "$value": "#dce4bc",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-avatar-pastel-1"
+        }
+      }
+    },
+    "avatar-pastel-2": {
+      "$value": "#bcd9e4",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-avatar-pastel-2"
+        }
+      }
+    },
+    "avatar-pastel-3": {
+      "$value": "#bce4ca",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-avatar-pastel-3"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -389,6 +389,15 @@
   --cg-primary-tint: #eeecfe;
   --cg-secondary-press: #a6cf57;
   --cg-tertiary-press: #4dd8e0;
+  /*
+     Figma "Tertiary Dark" (CloudGrid-2026; the header menus' "+ New", node 11324:90629).
+
+     Teal text links ("+ New", "Explore All", "Open", "Dismiss") and the line of the rail's scroll button.
+
+     Measures 1.92:1 on white and 1.70:1 on the page ground: under AA, used knowingly as a design decision (Gilad, 2026-11-01). Every link drawn in it also carries an accessible name.
+
+     Not --cg-tertiary-press (#4dd8e0), which is the cta's pressed fill. */
+  --cg-tertiary-dark: #45cdd4;
   /*
      The pressed and hovered rung of the accent, and --cg-link-hover.
 
@@ -1606,8 +1615,9 @@
      a mark flipping is a light disc with a white glyph on the ink surface, which
      renders perfectly and shows nothing. --cg-text-on-accent is the glyph on all
      three, and it measures 12.74:1, 14.65:1 and 10.24:1 on them. */
-  /* SOURCE: the founder's draft, the Inspiration badge. */
-  --cg-kind-inspiration: #fae4b3;
+  /*
+     SOURCE: the 2026 Figma (CloudGrid-2026, the Tile's Inspiration badge, node I11324:91033), paint style "Secondary 20" (#382). It was #fae4b3, the founder's 2025 draft; the Gilad-approved 2026 frames put the lightbulb on lime. Ink on it measures 14.56:1. */
+  --cg-kind-inspiration: #f0f8e1;
   /* SOURCE: the founder's draft, the App badge. */
   --cg-kind-app: #dffbfc;
   /*
@@ -1640,6 +1650,12 @@
      0.22. Inside the panel and ink scopes it is the brand cyan itself, which already clears
      (4.01:1 on #5a47f0, 10.92:1 on #222222). A data colour, never text. */
   --cg-data-cyan: #0a959b;
+
+  /* ---- avatar ----
+     The grid avatar grounds, raw hex in the CloudGrid-2026 frames (11323:8600, 11324:90635, 11324:90641). Letters are --cg-ink: 12.02:1, 10.74:1 and 11.43:1. An identity colour, so it does not flip on the panel or ink surfaces. */
+  --cg-avatar-pastel-1: #dce4bc;
+  --cg-avatar-pastel-2: #bcd9e4;
+  --cg-avatar-pastel-3: #bce4ca;
 }
 
 [data-cg-surface='panel'] {

package/dist/tokens.json

@@ -33,6 +33,7 @@
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
+      "--cg-tertiary-dark": "#45cdd4",
       "--cg-accent-press": "#0052da",
       "--cg-neutral-0": "#ffffff",
       "--cg-neutral-25": "#f1f1f6",
@@ -210,10 +211,13 @@
       "--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",
+      "--cg-kind-inspiration": "#f0f8e1",
       "--cg-kind-app": "#dffbfc",
       "--cg-kind-agent": "#d1c9ff",
-      "--cg-data-cyan": "#0a959b"
+      "--cg-data-cyan": "#0a959b",
+      "--cg-avatar-pastel-1": "#dce4bc",
+      "--cg-avatar-pastel-2": "#bcd9e4",
+      "--cg-avatar-pastel-3": "#bce4ca"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",

package/dist/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | "tinted" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;8EAqBlB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,8FAevE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;8EAyClB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,8FAevE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/badge.js

@@ -11,6 +11,25 @@ const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-cent
             outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
             ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
             link: "text-primary underline-offset-4 hover:underline",
+            // The two pills of the 2026 Figma list (#383; Users table, node
+            // 7406:5146): height 20, padding 0/8, radius 32, Regular 13 ink,
+            // leading none. A 32 corner on a 20px pill is a full semicircle, so
+            // the corner is `rounded-full`: `rounded-3xl` is not 32 in a shadcn
+            // app, whose theme redefines it as a multiple of --radius, and
+            // tailwind-merge knows `rounded-full` replaces the base's
+            // `rounded-4xl` (it does not know `rounded-pill` does).
+            //
+            // Written as overrides of the shared base, which tailwind-merge
+            // resolves, so the six variants above render byte for byte what they
+            // did (test/ui-badge-pills.test.mjs).
+            //
+            // `tinted` is on --cg-violet-150. The frame's fill, #E1E3FE, is bound
+            // to no variable; violet-150 (#E3E0FD) is within 3/255 per channel.
+            tinted: "rounded-full bg-brand-150 py-0 font-normal leading-none text-ink",
+            // `outlined` is white with the N2 hairline ("N2 New", #E6E8EA, which
+            // is --cg-border-hairline). Not `outline`: that one is shadcn's,
+            // transparent with the shadcn border and medium weight, and unchanged.
+            outlined: "rounded-full border-hairline bg-card py-0 font-normal leading-none text-ink",
         },
     },
     defaultVariants: {

package/dist/ui/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,MAAM,aAAa,GAAG,GAAG,CACvB,8eAA8e,EAC9e;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,SAAS,EACP,kEAAkE;YACpE,WAAW,EACT,gKAAgK;YAClK,OAAO,EACL,kFAAkF;YACpF,KAAK,EACH,mEAAmE;YACrE,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AAED,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,GAAG,KAAK,EAC8D;IACtE,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,MAAM;QACtB,KAAK,EAAE,UAAU,CACf;YACE,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC;SACrD,EACD,KAAK,CACN;QACD,MAAM;QACN,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO;SACR;KACF,CAAC,CAAA;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,MAAM,aAAa,GAAG,GAAG,CACvB,8eAA8e,EAC9e;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,SAAS,EACP,kEAAkE;YACpE,WAAW,EACT,gKAAgK;YAClK,OAAO,EACL,kFAAkF;YACpF,KAAK,EACH,mEAAmE;YACrE,IAAI,EAAE,iDAAiD;YACvD,gEAAgE;YAChE,iEAAiE;YACjE,oEAAoE;YACpE,oEAAoE;YACpE,+DAA+D;YAC/D,0DAA0D;YAC1D,wDAAwD;YACxD,EAAE;YACF,gEAAgE;YAChE,qEAAqE;YACrE,sCAAsC;YACtC,EAAE;YACF,sEAAsE;YACtE,oEAAoE;YACpE,MAAM,EAAE,kEAAkE;YAC1E,qEAAqE;YACrE,iEAAiE;YACjE,uEAAuE;YACvE,QAAQ,EACN,6EAA6E;SAChF;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AAED,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,GAAG,KAAK,EAC8D;IACtE,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,MAAM;QACtB,KAAK,EAAE,UAAU,CACf;YACE,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC;SACrD,EACD,KAAK,CACN;QACD,MAAM;QACN,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO;SACR;KACF,CAAC,CAAA;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/button.d.ts

@@ -1,9 +1,11 @@
 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" | "tertiary-soft" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+declare const buttonCva: (props?: ({
+    variant?: "link" | "ghost" | "default" | "secondary" | "destructive" | "outline" | "cta" | "tertiary-soft" | "primary" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | "2xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonCvaProps = Parameters<typeof buttonCva>[0];
+declare function buttonVariants(props?: ButtonCvaProps): string;
 declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

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;;;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"}
+{"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;AA8BjE,QAAA,MAAM,SAAS;;;8EA0Fd,CAAA;AAyBD,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;AAErD,iBAAS,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,CAStD;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"}

package/dist/ui/button.js

@@ -2,76 +2,140 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cloudgrid-cn.js";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-body-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+/**
+ * The Style Guide button (#376): the one button every frame in the CloudGrid
+ * 2026 Figma draws ("New Grid", node 7414:5979; "Create Item" and "Cancel",
+ * node 7537:8484). The --cg-tertiary ground, the --cg-text-on-accent ink label,
+ * Manrope Bold 15 at leading-none, radius 16 (--cg-radius-xl). Its sizes live in
+ * the compound variants below, because they are this family's and not shadcn's.
+ *
+ * It does NOT flip on the dark surfaces, and that is the design rather than an
+ * omission (#236). --cg-tertiary, --cg-tertiary-press and --cg-text-on-accent
+ * are declared at :root and redeclared on neither [data-cg-surface='panel'] nor
+ * [data-cg-surface='ink'], so the label pair measures 10.92:1 in all three
+ * scopes by construction. A filled control carries its own ground (#225). The
+ * teal measures 4.01:1 against the panel and 10.92:1 against ink, both better
+ * than the 1.46:1 it gets on the white the frames draw it on.
+ *
+ * Hover is the opaque press token, not an alpha wash: a wash composites lighter
+ * on white and darker on ink, so the same class would mean two opposite things;
+ * --cg-tertiary-press is one value everywhere. Its pair is 9.25:1. Both numbers
+ * are pinned in contrast-guardrail.test.mjs.
+ */
+const STYLE_GUIDE = "rounded-xl bg-cyan font-ui font-bold leading-none text-on-accent hover:bg-cyan-press aria-expanded:bg-cyan-press";
+/** The variants that wear the Style Guide metrics (sizes below). */
+const STYLE_GUIDE_FAMILY = ["default", "cta", "tertiary-soft"];
+const buttonCva = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-body-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/80",
-            /* The frames' primary call to action (#236): the brand teal with the ink
-               on top. Open app, Save, Share, Add secret, Copy command, Verify domain.
-               `default` stays the brand purple; this is the one the app page reaches
-               for, and it is the reason the Console no longer paints its own black.
+            /* The Style Guide button (#376), what `<Button>` renders. Save, Create,
+               Open app, Continue: the frames' primary action, everywhere. */
+            default: STYLE_GUIDE,
+            /* An alias of `default`, kept so `variant="cta"` (#236: the Console's
+               primary action, EmptyCreations' Add, InvitePopup's Copy, the Plugged
+               popup's Share) keeps compiling and rendering. Same string, same
+               compound sizes: the two cannot drift, and button-styleguide.test.mjs
+               compares their rendered classes size by size. New code writes
+               nothing (the default) rather than `cta`.
     
                Named `cta` and not `accent` because "accent" is already spent twice
-               here on two different colours: --cg-accent is the brand BLUE (#197,
-               utility `azure`), and --cg-text-on-accent is the ink this very button
-               puts on the teal. A third meaning would make the call site unreadable.
-               The other variants are roles too, not colours.
+               here: --cg-accent is the brand BLUE (#197, utility `azure`), and
+               --cg-text-on-accent is the ink this button puts on the teal. */
+            cta: STYLE_GUIDE,
+            /* The Style Guide's secondary (#370, #376): the --cg-cyan-200 ground
+               ("Teriary 20" in Figma) inside a drawn --cg-tertiary hairline, ink
+               label, the default's type and sizes. "Cancel" beside "Create Item",
+               the Plugged popup's Close, the pricing and thegrid footers'
+               secondary buttons.
     
-               It does NOT flip on the dark surfaces, and that is the whole design
-               rather than an omission. --cg-tertiary, --cg-tertiary-press and
-               --cg-text-on-accent are declared at :root and redeclared on neither
-               [data-cg-surface='panel'] nor [data-cg-surface='ink'], so the label
-               pair measures 10.92:1 in all three scopes by construction. A filled
-               control carries its own ground (#225). Compare `default`, which needed
-               a per-scope --primary in shadcn.css only because --cg-primary IS the
-               panel surface (#41); the teal has no such collision, and measures
-               4.01:1 against the panel and 10.92:1 against ink, both better than the
-               1.46:1 it gets on the white the frames draw.
-    
-               Hover is the opaque press token, not `/80` the way `default` washes.
-               An alpha wash composites lighter on white and darker on ink, so the
-               same class would mean two opposite things; --cg-tertiary-press is one
-               value everywhere and moves with the hue on a retune. Its pair is
-               9.25:1. Both numbers are pinned in contrast-guardrail.test.mjs. */
-            cta: "bg-cyan text-on-accent hover:bg-cyan-press aria-expanded:bg-cyan-press",
-            /* The soft tertiary (#370): the --cg-cyan-200 ground ("Teriary 20" in
-               Figma) inside a drawn --cg-tertiary hairline, ink label. The Plugged
-               popup's Close, and the pricing and thegrid footers' secondary buttons.
-    
-               The FILLED tertiary is `cta` above, already: same ground, same press
-               token, same ink. A second name for it would be two variants that must
-               never drift apart, so there is none; a caller that wants the hairline
-               drawn on the filled one adds `border-cyan`.
-    
-               Like `cta`, it does not flip per surface: the tint, the tertiary and
-               the ink are declared at :root only, so the pair is the same in all
-               three scopes. Hover deepens to the full tertiary ground with the press
-               token on the hairline, both opaque, for the reason `cta` gives. Focus
-               keeps the base's ring; the base's `focus-visible:border-ring` repaints
-               the hairline while focused. */
-            "tertiary-soft": "border-cyan bg-cyan-tint text-on-accent hover:border-cyan-press hover:bg-cyan aria-expanded:bg-cyan",
+               Like the default, it does not flip per surface: the tint, the
+               tertiary and the ink are declared at :root only, so the pair is the
+               same in all three scopes. Hover deepens to the full tertiary ground
+               with the press token on the hairline, both opaque. Focus keeps the
+               base's ring; the base's `focus-visible:border-ring` repaints the
+               hairline while focused. */
+            "tertiary-soft": "rounded-xl border-cyan bg-cyan-tint font-ui font-bold leading-none text-on-accent hover:border-cyan-press hover:bg-cyan aria-expanded:bg-cyan",
+            /* The brand purple filled button: until #376 this was `default`, and it
+               renders byte for byte what `default` rendered then, at every size
+               (shadcn metrics, Space Grotesk medium, 14px corners). Kept for a
+               caller that wants the purple on purpose, and as the one-word
+               migration for a consumer who relied on the old default
+               (`variant="primary"`). ConfirmDeleteDialog's submit uses it for its
+               metrics only; its colours are its own. --primary flips per surface in
+               shadcn.css (#41), because --cg-primary IS the panel ground. */
+            primary: "bg-primary text-primary-foreground hover:bg-primary/80",
             outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
             ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
             destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
             link: "text-primary underline-offset-4 hover:underline",
         },
+        /* The shadcn sizes, which every variant outside the Style Guide family
+           still renders unchanged. For the family, `default`, `lg` and `icon-lg`
+           resolve to #389's `xl`, `2xl` and `icon-2xl` (see `buttonVariants`
+           below), and `icon` is 40 square; `sm`, `xs`, `icon-sm` and `icon-xs`
+           keep these compact metrics (and their own corners) in every variant. */
         size: {
             default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
             xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-caption in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
             sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-caption in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
             lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            /* The 2026 Button component (Figma 4919:688) has two sizes, S and M, and
+               Home draws both (#382): Invite is S, Add is M. Named `xl` and `2xl`
+               rather than `s` and `m` because `sm` already exists and means 28.
+               Radius 16, gap 12, the UI face at Bold 15, a 20px glyph. The frame's
+               10 and 14 of vertical padding are the centring inside the height,
+               not a value to set; the 1px transparent border is inside it too. */
+            xl: "h-10 gap-3 rounded-xl px-5 font-ui font-bold leading-none [&_svg:not([class*='size-'])]:size-5",
+            "2xl": "h-12 gap-3 rounded-xl px-8 font-ui font-bold leading-none [&_svg:not([class*='size-'])]:size-5",
             icon: "size-8",
             "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
             "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
             "icon-lg": "size-9",
+            /* The icon-only M: the scroll rail's arrow, 48 square at radius 16 (#382). */
+            "icon-2xl": "size-12 rounded-xl [&_svg:not([class*='size-'])]:size-5",
         },
     },
+    /* The family's `icon` is 40 square, the height of the row it sits in
+       (`default`, which resolves to `xl`). #389 has no 40 icon rung; its
+       `icon-2xl` (48) is what the family's `icon-lg` resolves to. */
+    compoundVariants: [{ variant: [...STYLE_GUIDE_FAMILY], size: "icon", class: "size-10" }],
     defaultVariants: {
         variant: "default",
         size: "default",
     },
 });
+/**
+ * The Style Guide sizes (#376) ARE #389's 2026 sizes, by alias, not by copy.
+ *
+ * Figma's Button component (4919:688) has S and M, which #389 shipped as `xl`
+ * (40 tall, 20 aside, radius 16, gap 12, Bold 15, a 20px glyph) and `2xl` (48,
+ * 32 aside), plus the 48 square `icon-2xl`. The Style Guide button's two sizes
+ * are those two. So for the family (`default`, `cta`, `tertiary-soft`) the
+ * size `default` resolves to `xl`, `lg` to `2xl` and `icon-lg` to `icon-2xl`:
+ * `<Button>` and `<Button size="xl">` render the same string, and there is one
+ * definition of each size to retune. Every other variant keeps the shadcn
+ * `default` and `lg` it has always had.
+ *
+ * The issue's "min-height 40, padding 10/20" is `xl`'s fixed `h-10` with 20
+ * aside: the base sets `whitespace-nowrap`, so a label never wraps and a
+ * minimum height would compute the same box; the frame's 10 (14) vertical
+ * padding is the centring inside that height (#389's note).
+ *
+ * Resolved here and not only in `Button`, so a consumer calling
+ * `buttonVariants()` on an anchor (PricingTierCards, the Console's
+ * PrimaryAction) gets the same classes as the component.
+ */
+const STYLE_GUIDE_SIZE = { default: "xl", lg: "2xl", "icon-lg": "icon-2xl" };
+function buttonVariants(props) {
+    const variant = props?.variant === undefined ? "default" : props.variant;
+    const size = props?.size === undefined ? "default" : props.size;
+    const family = STYLE_GUIDE_FAMILY.includes(variant);
+    const resolved = family && size !== null && size in STYLE_GUIDE_SIZE
+        ? STYLE_GUIDE_SIZE[size]
+        : size;
+    return buttonCva({ ...props, size: resolved });
+}
 function Button({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
 }

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,MAAM,cAAc,GAAG,GAAG,CACxB,8lBAA8lB,EAC9lB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE;;;;;;;;;;;;;;;;;;;;;;;;;;iFA0BqE;YACrE,GAAG,EAAE,wEAAwE;YAC7E;;;;;;;;;;;;;;6CAciC;YACjC,eAAe,EACb,qGAAqG;YACvG,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,WAAW,EACT,6NAA6N;YAC/N,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,oNAAoN;YACxN,EAAE,EAAE,wNAAwN;YAC5N,EAAE,EAAE,sFAAsF;YAC1F,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;SACpB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAA;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACoD;IAC5D,OAAO,CACL,KAAC,eAAe,iBACJ,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"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"}

package/dist/ui/dialog.d.ts

@@ -27,13 +27,65 @@ declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.J
  * the confirm's backdrop rather than merely beside it.
  */
 declare function DialogOverlay({ className, forceRender, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
+/**
+ * The card: the CloudGrid 2026 Figma popup "New Vault Item" (ui#372, node
+ * 7537:8484, file 5ouhISIL0mwYGHurvCGoEO).
+ *
+ * ```
+ *  .--------------------------------------------- 525 ---.
+ *  |  New Vault Item                                  [x] |   24 top
+ *  |                                                      |   24 gap
+ *  |  (the caller's content: a form, a line, a tile)      |
+ *  |                                                      |
+ *  |                           [ Cancel ] [ Create Item ] |   24 bottom
+ *  '------------------------------------------------------'
+ *     32 each side
+ * ```
+ *
+ * White in a 1px `--cg-border-hairline`, radius 12 (`--cg-radius-md`), padding
+ * 24 top and bottom and 32 left and right, its rows 24 apart. 525 wide from `sm`
+ * up; on a phone it fills the width less a 16px gutter each side.
+ *
+ * The ground is `bg-popover`, the overlay ground (#230), not `bg-card`. The card
+ * portals to the document root, where both are white, but `--cg-surface-card` is
+ * transparent on the panel and a 4% wash on ink; `--popover` stays opaque in
+ * every scope, so the card cannot turn see-through if a page ever puts a dark
+ * scope on the root.
+ *
+ * It is capped at the window's height less 2rem and scrolls inside, because a
+ * centred fixed card with no cap pushes its top above the window on a short
+ * screen (a phone on its side, 812x375), where no scroll reaches it (#375).
+ *
+ * The close X is a 20px Phosphor X at the top right, its glyph level with the
+ * title and its right edge on the 32px content edge, level with the footer
+ * (Figma 7537:8601): `right-6.5` is 26px, and the 32px target centres the glyph
+ * 6px in, so 26 + 6 = 32. Named "Close", reachable by Tab, and a real
+ * `DialogPrimitive.Close`, so it closes exactly as Escape and the scrim do.
+ * `showCloseButton={false}` drops it, as before.
+ *
+ * Blocks override the card through `className` (tailwind-merge resolves the
+ * conflict): `ConfirmDeleteDialog` keeps its 24 padding and 448 width,
+ * `PluggedDialog` its own radius and 632 width.
+ */
 declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
+/** The title and its line. `pr-8` keeps a long title clear of the close X. */
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * The actions row: right-aligned at every width, 8px apart, on the card itself.
+ * No grey band and no top rule (the shadcn footer had both; the Figma popup has
+ * neither).
+ *
+ * Documented use, from the Figma popup: Cancel is `variant="tertiary-soft"`, the
+ * main action is `variant="cta"` (the filled tertiary), both `size="xl"`: 40
+ * tall, radius 16, 20 each side, Manrope Bold 15 on a 15px line (the 2026 Button
+ * S, #382). `showCloseButton` adds a Close in the soft tertiary at that size.
+ */
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
+/** The Figma popup's H4: Manrope Medium 22/1.2, ink. */
 declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
 declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAiBjE,iBAAS,MAAM,CAAC,EAAE,KAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAMrE;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,qBAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,qBAE/D;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAE7D;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAYhC;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAiCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAkBA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAWxE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,qBAWnC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAiBjE,iBAAS,MAAM,CAAC,EAAE,KAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAMrE;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,qBAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,qBAE/D;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAE7D;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAYhC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAiCA;AAED,8EAA8E;AAC9E,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAkBA;AAED,wDAAwD;AACxD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAWxE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,qBAWnC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/ui/dialog.js

@@ -52,21 +52,73 @@ function DialogClose({ ...props }) {
 function DialogOverlay({ className, forceRender = true, ...props }) {
     return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", forceRender: forceRender, className: cn("fixed inset-0 isolate z-50 scrim-overlay duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
 }
+/**
+ * The card: the CloudGrid 2026 Figma popup "New Vault Item" (ui#372, node
+ * 7537:8484, file 5ouhISIL0mwYGHurvCGoEO).
+ *
+ * ```
+ *  .--------------------------------------------- 525 ---.
+ *  |  New Vault Item                                  [x] |   24 top
+ *  |                                                      |   24 gap
+ *  |  (the caller's content: a form, a line, a tile)      |
+ *  |                                                      |
+ *  |                           [ Cancel ] [ Create Item ] |   24 bottom
+ *  '------------------------------------------------------'
+ *     32 each side
+ * ```
+ *
+ * White in a 1px `--cg-border-hairline`, radius 12 (`--cg-radius-md`), padding
+ * 24 top and bottom and 32 left and right, its rows 24 apart. 525 wide from `sm`
+ * up; on a phone it fills the width less a 16px gutter each side.
+ *
+ * The ground is `bg-popover`, the overlay ground (#230), not `bg-card`. The card
+ * portals to the document root, where both are white, but `--cg-surface-card` is
+ * transparent on the panel and a 4% wash on ink; `--popover` stays opaque in
+ * every scope, so the card cannot turn see-through if a page ever puts a dark
+ * scope on the root.
+ *
+ * It is capped at the window's height less 2rem and scrolls inside, because a
+ * centred fixed card with no cap pushes its top above the window on a short
+ * screen (a phone on its side, 812x375), where no scroll reaches it (#375).
+ *
+ * The close X is a 20px Phosphor X at the top right, its glyph level with the
+ * title and its right edge on the 32px content edge, level with the footer
+ * (Figma 7537:8601): `right-6.5` is 26px, and the 32px target centres the glyph
+ * 6px in, so 26 + 6 = 32. Named "Close", reachable by Tab, and a real
+ * `DialogPrimitive.Close`, so it closes exactly as Escape and the scrim do.
+ * `showCloseButton={false}` drops it, as before.
+ *
+ * Blocks override the card through `className` (tailwind-merge resolves the
+ * conflict): `ConfirmDeleteDialog` keeps its 24 padding and 448 width,
+ * `PluggedDialog` its own radius and 632 width.
+ */
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
     const modal = React.useContext(DialogModalContext);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", "aria-modal": modal !== false ? true : undefined, className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-body-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(CloseIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", "aria-modal": modal !== false ? true : undefined, className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100svh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto rounded-md border border-hairline bg-popover px-8 py-6 text-body-sm text-ink duration-100 outline-none sm:max-w-131.25 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-5 right-6.5 text-ink", size: "icon" }), children: [_jsx(CloseIcon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
+/** The title and its line. `pr-8` keeps a long title clear of the close X. */
 function DialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 pr-8", className), ...props }));
 }
+/**
+ * The actions row: right-aligned at every width, 8px apart, on the card itself.
+ * No grey band and no top rule (the shadcn footer had both; the Figma popup has
+ * neither).
+ *
+ * Documented use, from the Figma popup: Cancel is `variant="tertiary-soft"`, the
+ * main action is `variant="cta"` (the filled tertiary), both `size="xl"`: 40
+ * tall, radius 16, 20 each side, Manrope Bold 15 on a 15px line (the 2026 Button
+ * S, #382). `showCloseButton` adds a Close in the soft tertiary at that size.
+ */
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
-    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" }))] }));
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-wrap items-center justify-end gap-2", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "tertiary-soft", size: "xl" }), children: "Close" }))] }));
 }
+/** The Figma popup's H4: Manrope Medium 22/1.2, ink. */
 function DialogTitle({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-heading text-body-md leading-none font-medium", className), ...props }));
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("m-0 font-ui text-heading-lg font-medium text-ink", className), ...props }));
 }
 function DialogDescription({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-body-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("m-0 text-body-sm text-body *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-ink", className), ...props }));
 }
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
 //# sourceMappingURL=dialog.js.map

package/dist/ui/dialog.js.map

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

package/dist/ui/drawer.d.ts

@@ -152,7 +152,7 @@ declare const drawerViewportVariants: (props?: ({
  */
 declare const drawerPopupVariants: (props?: ({
     side?: "bottom" | "left" | "right" | null | undefined;
-    size?: "lg" | "md" | "xl" | null | undefined;
+    size?: "lg" | "xl" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Drawer({ modal, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
 declare function DrawerTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;