@cloudgrid-io/ui 0.41.0 → 0.42.0

package/dist/lib/cloudgrid-cn.js

@@ -93,8 +93,25 @@ export const BRAND_FONT_SIZES = [
     "eyebrow",
     "stat",
 ];
+/**
+ * Brand radius names that are not t-shirt shaped (#376).
+ *
+ * tailwind-merge's `radius` theme accepts only t-shirt names
+ * (`^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$`), so `2xs`, `2xl` and `3xl` merge on
+ * their own, and these two do not. Unregistered, `cn("rounded-xl rounded-pill")`
+ * keeps BOTH, and the stylesheet's order decides which corner paints: Tailwind
+ * emits `.rounded-lg`, `.rounded-pill`, `.rounded-xl`. While Button's corner was
+ * `rounded-lg` a caller's `rounded-pill` won by that accident; when #376 made the
+ * Style Guide button `rounded-xl`, ExpiryNotice's Keep lost its pill. Registered,
+ * a caller's radius wins over a component's, as every other utility does.
+ * `cn-radius.test.mjs` checks every `--radius-*` in theme.css by behaviour.
+ */
+export const BRAND_RADII = ["pill", "container"];
 const twMerge = extendTailwindMerge({
     extend: {
+        theme: {
+            radius: [...BRAND_RADII],
+        },
         classGroups: {
             "font-size": [{ text: [...BRAND_FONT_SIZES] }],
             "font-weight": [{ font: [...BRAND_FONT_WEIGHTS] }],

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,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"}
+{"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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,WAAW,CAAU,CAAA;AAEzD,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,KAAK,EAAE;YACL,MAAM,EAAE,CAAC,GAAG,WAAW,CAAC;SACzB;QACD,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/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;
+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;;;8EA0FnB,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,60 +2,79 @@ 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",
@@ -77,11 +96,46 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             "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;;;;;kFAKsE;YACtE,EAAE,EAAE,gGAAgG;YACpG,KAAK,EAAE,gGAAgG;YACvG,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;YACnB,8EAA8E;YAC9E,UAAU,EAAE,yDAAyD;SACtE;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":";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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,GACf,kHAAkH,CAAA;AAEpH,oEAAoE;AACpE,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,eAAe,CAAU,CAAA;AAEvE,MAAM,SAAS,GAAG,GAAG,CACnB,8lBAA8lB,EAC9lB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP;6EACiE;YACjE,OAAO,EAAE,WAAW;YACpB;;;;;;;;;8EASkE;YAClE,GAAG,EAAE,WAAW;YAChB;;;;;;;;;;;yCAW6B;YAC7B,eAAe,EACb,+IAA+I;YACjJ;;;;;;;6EAOiE;YACjE,OAAO,EAAE,wDAAwD;YACjE,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,WAAW,EACT,6NAA6N;YAC/N,IAAI,EAAE,iDAAiD;SACxD;QACD;;;;kFAI0E;QAC1E,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,oNAAoN;YACxN,EAAE,EAAE,wNAAwN;YAC5N,EAAE,EAAE,sFAAsF;YAC1F;;;;;kFAKsE;YACtE,EAAE,EAAE,gGAAgG;YACpG,KAAK,EAAE,gGAAgG;YACvG,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;YACnB,8EAA8E;YAC9E,UAAU,EAAE,yDAAyD;SACtE;KACF;IACD;;qEAEiE;IACjE,gBAAgB,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IACxF,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,gBAAgB,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAW,CAAA;AAIrF,SAAS,cAAc,CAAC,KAAsB;IAC5C,MAAM,OAAO,GAAG,KAAK,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAA;IACxE,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAA;IAC/D,MAAM,MAAM,GAAI,kBAAyC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC3E,MAAM,QAAQ,GACZ,MAAM,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,gBAAgB;QACjD,CAAC,CAAC,gBAAgB,CAAC,IAAqC,CAAC;QACzD,CAAC,CAAC,IAAI,CAAA;IACV,OAAO,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAoB,CAAC,CAAA;AAClE,CAAC;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"}

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

@@ -1,4 +1,31 @@
 import * as React from "react";
+/**
+ * The 2026 Figma list (#383): the Users table in the Admin frame, node
+ * 7406:5146. An N3 13px header with no rule under it, then rounded rows 2px
+ * apart, every other one on N1 at half strength, starting with the first.
+ *
+ * ## Rounded zebra rows on a real <table>
+ *
+ * This stays a `<table>`, so a screen reader keeps announcing rows and columns.
+ * Two things a table does not do on its own are done like this:
+ *
+ * - **The 2px between rows** is `border-separate` with `border-spacing: 0 2px`.
+ *   Spacing is the only gap a table can put between rows. It also adds 2px
+ *   above the header and below the last row, at the table's outer edges.
+ * - **The 12px corner** is on the CELLS, not the row: the first cell rounds
+ *   its left corners and the last its right. A `<tr>` cannot clip its own
+ *   background to its cells' corners, so the row paints nothing. Every ground
+ *   (zebra, hover, selected) is painted by the cells, keyed off the row through
+ *   `group/row`, so the corners clip it.
+ *
+ * Horizontal rhythm: the frame's rows are auto-layout with padding 12 and a
+ * 16px gap. Cells get 8px each side (8 + 8 = 16 between neighbours), and the
+ * first and last cell take 12 at the row's two ends.
+ *
+ * Row states, cell grounds over the zebra: hover (and a row whose menu is
+ * open) takes N1 at full strength, `bg-page`; `data-state="selected"` takes
+ * the primary tint, `bg-brand-tint`.
+ */
 declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAapE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAgBpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAapE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAcrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}

package/dist/ui/table.js

@@ -2,26 +2,59 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The 2026 Figma list (#383): the Users table in the Admin frame, node
+ * 7406:5146. An N3 13px header with no rule under it, then rounded rows 2px
+ * apart, every other one on N1 at half strength, starting with the first.
+ *
+ * ## Rounded zebra rows on a real <table>
+ *
+ * This stays a `<table>`, so a screen reader keeps announcing rows and columns.
+ * Two things a table does not do on its own are done like this:
+ *
+ * - **The 2px between rows** is `border-separate` with `border-spacing: 0 2px`.
+ *   Spacing is the only gap a table can put between rows. It also adds 2px
+ *   above the header and below the last row, at the table's outer edges.
+ * - **The 12px corner** is on the CELLS, not the row: the first cell rounds
+ *   its left corners and the last its right. A `<tr>` cannot clip its own
+ *   background to its cells' corners, so the row paints nothing. Every ground
+ *   (zebra, hover, selected) is painted by the cells, keyed off the row through
+ *   `group/row`, so the corners clip it.
+ *
+ * Horizontal rhythm: the frame's rows are auto-layout with padding 12 and a
+ * 16px gap. Cells get 8px each side (8 + 8 = 16 between neighbours), and the
+ * first and last cell take 12 at the row's two ends.
+ *
+ * Row states, cell grounds over the zebra: hover (and a row whose menu is
+ * open) takes N1 at full strength, `bg-page`; `data-state="selected"` takes
+ * the primary tint, `bg-brand-tint`.
+ */
 function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-body-sm", className), ...props }) }));
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom border-separate border-spacing-x-0 border-spacing-y-0.5 text-body-sm text-ink", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
-    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+    return (_jsx("thead", { "data-slot": "table-header", className: className, ...props }));
 }
 function TableBody({ className, ...props }) {
-    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+    return (_jsx("tbody", { "data-slot": "table-body", className: className, ...props }));
 }
 function TableFooter({ className, ...props }) {
     return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 }
 function TableRow({ className, ...props }) {
-    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+    return (_jsx("tr", { "data-slot": "table-row", className: cn(
+        // No ground of its own: see the docblock on Table. The cells read
+        // the row's parity, hover and selection through this group.
+        "group/row", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("px-2 py-2 text-left align-middle text-caption font-normal whitespace-nowrap text-steel first:pl-3 last:pr-3 [&:has([role=checkbox])]:pr-0", className), ...props }));
 }
 function TableCell({ className, ...props }) {
-    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-2 py-2 align-middle whitespace-nowrap transition-colors first:rounded-l-md first:pl-3 last:rounded-r-md last:pr-3 [&:has([role=checkbox])]:pr-0", 
+        // The zebra, then the states over it. Odd first: the first body row
+        // is tinted.
+        "group-odd/row:bg-page/50 group-hover/row:bg-page group-has-aria-expanded/row:bg-page group-data-[state=selected]/row:bg-brand-tint", className), ...props }));
 }
 function TableCaption({ className, ...props }) {
     return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-body-sm text-muted-foreground", className), ...props }));

package/dist/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACnE,OAAO,CACL,2BACY,iBAAiB,EAC3B,SAAS,EAAC,iCAAiC,YAE3C,6BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,KAC1D,KAAK,GACT,GACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KACvC,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACvE,OAAO,CACL,6BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,yDAAyD,EACzD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL,0BACY,WAAW,EACrB,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACL,+BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACnE,OAAO,CACL,2BACY,iBAAiB,EAC3B,SAAS,EAAC,iCAAiC,YAE3C,6BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CACV,KACG,KAAK,GACT,GACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACvE,OAAO,CACL,6BACY,YAAY,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,yDAAyD,EACzD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL,0BACY,WAAW,EACrB,SAAS,EAAE,EAAE;QACX,kEAAkE;QAClE,4DAA4D;QAC5D,WAAW,EACX,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,2IAA2I,EAC3I,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,oJAAoJ;QACpJ,oEAAoE;QACpE,aAAa;QACb,oIAAoI,EACpI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACL,+BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}

package/dist/ui/tabs.d.ts

@@ -49,7 +49,7 @@ import { type VariantProps } from "class-variance-authority";
 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" | "pill" | null | undefined;
+    variant?: "pill" | "line" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 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;