@cloudgrid-io/ui 0.27.1 → 0.28.0

package/dist/ui/drawer.js

@@ -0,0 +1,265 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cloudgrid-cn.js";
+import { Button } from "./button.js";
+import { CloseIcon } from "../blocks/icons.js";
+/**
+ * The sheet that slides in from an edge (#214).
+ *
+ * `Dialog` is centred. Nothing in this library came in from the side, so the
+ * console hand-composes the same panel eight times: five shipped surfaces on its
+ * local `Overlay` primitive (`UserDetailsDrawer`, `FeedbackDetailDrawer`,
+ * `VaultGrantsDrawer`, `ConnectorAuditDrawer`, `PerEntityCapDrawer`) and three
+ * more drawn in the app page facelift (the Secrets update panel, the Database
+ * record details panel, the Domains setup wizard). Each copy guesses its own
+ * width, lays out its own title row and picks its own close-button size.
+ *
+ * `Overlay.taxonomy.md` in the console has carried the line "a future Drawer
+ * slides from the right" since that primitive was written. This is it.
+ *
+ * ## Why this is a positioned Dialog and not Base UI's own Drawer
+ *
+ * Base UI 1.7.0 ships `Drawer`, and its usage guidelines answer the question
+ * directly: "Drawer extends Dialog: it adds gesture support, snap points, and
+ * indent effects. If you don't need these, use Dialog instead. A panel that
+ * slides in from the edge of the screen and doesn't need gesture support is a
+ * positioned Dialog."
+ *
+ * None of the eight consumers swipes. They are desktop side panels opened from a
+ * table row or a button, and the one phone surface (`PlugSheet`) dismisses with
+ * its close glyph and the scrim. `Drawer` would also bring `Drawer.Viewport` and
+ * a swipe layer this repo has no way to test in Playwright, in exchange for
+ * behaviour nobody asked for. If a consumer ever needs swipe-to-dismiss, that is
+ * Base UI's `Drawer` and its own issue, not a prop here.
+ *
+ * ## The size rungs, and where they come from
+ *
+ * `size` is a named rung rather than a Tailwind class handed in by the caller,
+ * which is the whole point of #214: five files currently decide independently how
+ * wide a drawer is.
+ *
+ *     md   448px   max-w-md
+ *     lg   512px   max-w-lg
+ *
+ * Both were measured off the founder's frames rather than chosen. The three app
+ * page frames export at 1024px against a 1600px design, so the scale is 1.5625:
+ *
+ *     Secrets, "Update secret"      287px exported   448px   -> md
+ *     Database, "Record details"    287px exported   448px   -> md
+ *     Domains, "Set up chimp.me"    325px exported   508px   -> lg
+ *
+ * They land on the two rungs the console already writes by hand: `max-w-md` on
+ * three of the five shipped drawers, `max-w-lg` on the newest. #694's own frame
+ * is 525 of 1600, which is `lg` to the nearest rung.
+ *
+ * There is deliberately no third rung. Two values cover every frame and every
+ * shipped copy, and a wider one with nothing behind it would be a worker
+ * inventing a brand decision.
+ *
+ * `size` is the INLINE width and applies to `left` and `right` only. A bottom
+ * sheet is full width, which is what `PlugSheet` already does.
+ *
+ * ## Full width at the narrow end, without opting in
+ *
+ * The popup is `w-full` under a `max-w-*` rung, so below 448px it simply fills
+ * the screen. No breakpoint prop, no phone variant, nothing for a caller to
+ * remember. #214 asks for exactly this.
+ *
+ * ## Ground: opaque on every surface
+ *
+ * The trap `Popover` fell into and #230 records. `bg-popover` resolves to
+ * `--cg-surface-card`, which is `transparent` inside `[data-cg-surface='panel']`
+ * and a 4% white wash inside `[data-cg-surface='ink']`, because a CARD on a dark
+ * brand surface is meant to let it through. An overlay is the one thing that
+ * cannot: it is drawn over arbitrary content, and a see-through drawer renders
+ * its words and the page's in the same pixels.
+ *
+ * So the ground is opaque in all three scopes, out of values this system already
+ * has: the card ground on the page, `--cg-surface-panel` on the panel,
+ * `--cg-surface-code` on ink. No new token and no new colour. Guarded by an alpha
+ * assertion on all three grounds in `registry/e2e/drawer.spec.ts`, the same check
+ * `popover.test.mjs` and that spec added for #228.
+ *
+ * ## `container`, and the surface a portal leaves behind
+ *
+ * Base UI portals to `<body>`, which is outside every `data-cg-surface` scope, and
+ * every `--cg-*` value here is inherited. A drawer opened from inside an ink
+ * header would render with the page's tokens and look entirely correct.
+ * `container` forwards to `Dialog.Portal`'s own prop, exactly as `PopoverContent`
+ * does, so a consumer can keep the portal inside the surface it belongs to.
+ *
+ * It changes the token scope, not the geometry: the popup is `fixed`, so it is
+ * anchored to the viewport edge wherever the portal lives. That is what all five
+ * console drawers do today. The frames draw the drawer inside the page box
+ * because on that page the box fills the window.
+ *
+ * It was worth checking that a mid-page portal does not cost a MODAL its focus
+ * trap, since Base UI's focus guards are siblings of the portal node rather than
+ * of `<body>` and a popover is not modal, so #228 never had to care. It does not:
+ * eighteen Tab and Shift+Tab presses inside a contained drawer never reach a
+ * control outside it, asserted in `registry/e2e/drawer.spec.ts`. An earlier
+ * throwaway probe appeared to show a leak and was wrong: it tabbed within a few
+ * milliseconds of the popup appearing, before Base UI had armed the trap, which
+ * is a race in the probe rather than a property of the component.
+ *
+ * ## Stacking, which is the bug that forced this issue
+ *
+ * console#694: the drawer's Remove opens the existing confirm modal, both listen
+ * for Escape on the document, and one keystroke dismissed the confirm AND the
+ * drawer behind it. The console guards it by making the drawer's `onClose` inert
+ * while the confirm is open, which every caller has to remember.
+ *
+ * Base UI makes the topmost dialog the only one that hears Escape, as long as the
+ * nested `Drawer`/`Dialog` root is rendered INSIDE the parent's popup. Nothing
+ * here implements that, so the spec proves it rather than the docblock claiming
+ * it.
+ *
+ * What this library DOES have to implement is the layering. Base UI suppresses a
+ * nested dialog's backdrop by default, so the first version of this left the
+ * drawer at full brightness under an open confirm: two bright surfaces, reading as
+ * one broken one rather than as a dialog on top of a sheet. Both overlays here and
+ * in `dialog.tsx` therefore pass `forceRender`, so whatever is on top brings its
+ * own scrim and everything under it dims, the drawer included.
+ *
+ * Stacking order needs no z-index of its own. A nested dialog always OPENS after
+ * its parent, so its portal is appended later and paints above at the same `z-50`.
+ */
+/**
+ * The positioning container, and the edge the sheet is pinned to.
+ *
+ * `fixed inset-0` with one flex alignment per side, which is precisely the shape
+ * the console writes as `scrimClassName="flex justify-end"` five times over. It
+ * is Base UI's `Dialog.Viewport`, so it carries the open and nested data
+ * attributes and Base UI treats a press on it as an outside press.
+ */
+const drawerViewportVariants = cva("fixed inset-0 z-50 flex", {
+    variants: {
+        side: {
+            right: "justify-end",
+            left: "justify-start",
+            bottom: "flex-col justify-end",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+/**
+ * The sheet itself.
+ *
+ * `flex flex-col` with `overflow-hidden` is what lets `DrawerBody` scroll while
+ * the header and footer hold their place: the body is the only child that grows,
+ * and the popup never scrolls as a whole.
+ */
+const drawerPopupVariants = cva([
+    "relative isolate z-50 flex w-full flex-col overflow-hidden text-body-sm text-popover-foreground shadow-raised outline-none",
+    // The ground, opaque per scope. See the docblock: `bg-popover` alone is #230.
+    "bg-popover in-data-[cg-surface=panel]:bg-panel in-data-[cg-surface=ink]:bg-code",
+    "duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+], {
+    variants: {
+        side: {
+            right: "h-full border-l border-line data-open:slide-in-from-right data-closed:slide-out-to-right",
+            left: "h-full border-r border-line data-open:slide-in-from-left data-closed:slide-out-to-left",
+            // 85svh, not 85vh: on a phone `vh` is measured against the largest
+            // viewport, so the sheet sits partly under the browser chrome while the
+            // URL bar is showing. `PlugSheet` has the same 85% and the older unit.
+            bottom: "max-h-[85svh] rounded-t-xl border-t border-line data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
+        },
+        size: {
+            md: "max-w-md",
+            lg: "max-w-lg",
+        },
+    },
+    compoundVariants: [
+        // A bottom sheet is full width. The rungs are the inline axis, and on this
+        // edge the inline axis is the whole screen.
+        { side: "bottom", size: "md", class: "max-w-none" },
+        { side: "bottom", size: "lg", class: "max-w-none" },
+    ],
+    defaultVariants: {
+        side: "right",
+        size: "md",
+    },
+});
+function Drawer({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+/**
+ * The scrim.
+ *
+ * `bg-scrim` is `--cg-scrim`, the token the console's `Overlay` already reads
+ * inline and the one this system declares for exactly this job. It is deliberately
+ * declared at `:root` only and does not flip: a scrim composites over whatever is
+ * behind it, so it has no surface of its own.
+ *
+ * `forceRender` because Base UI does not render a nested dialog's backdrop by
+ * default. See the stacking note in the component docblock.
+ */
+function DrawerOverlay({ className, forceRender = true, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "drawer-overlay", forceRender: forceRender, className: cn("fixed inset-0 isolate z-50 bg-scrim duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+}
+function DrawerContent({ side = "right", size = "md", container, className, children, ...props }) {
+    return (_jsxs(DrawerPortal, { container: container, children: [_jsx(DrawerOverlay, {}), _jsx(DialogPrimitive.Viewport, { className: drawerViewportVariants({ side }), children: _jsx(DialogPrimitive.Popup, { "data-slot": "drawer-content", "data-side": side, "data-size": size, className: cn(drawerPopupVariants({ side, size }), className), ...props, children: children }) })] }));
+}
+/**
+ * The title row, with the close affordance built in.
+ *
+ * The part of #214 that is not geometry. All eight copies lay this row out
+ * themselves and the newest had to pick its own close-button size, so the header
+ * owns the arrangement: the title on the left, the close glyph top right at the
+ * library's own icon rung, an optional description under it, and `children` for
+ * the identity row the frames draw in that slot (the secret's key, the record's
+ * collection and status chip, the wizard's step strip).
+ *
+ * `aria-labelledby` needs no wiring: `DrawerTitle` is Base UI's `Dialog.Title`,
+ * which registers its own id on the popup. Passing `title` rather than leaving it
+ * to the caller is what guarantees every drawer has one.
+ */
+function DrawerHeader({ title, description, closeLabel = "Close", showCloseButton = true, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-2 px-6 pt-5 pb-4", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx(DrawerTitle, { children: title }), showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "drawer-close", render: _jsx(Button, { variant: "ghost", size: "icon-sm", className: "-mt-1 -mr-1.5" }), children: [_jsx(CloseIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] }), description ? _jsx(DrawerDescription, { children: description }) : null, children] }));
+}
+/**
+ * The scrolling half.
+ *
+ * `min-h-0` is load-bearing and invisible: a flex child's default `min-height` is
+ * `auto`, so without it the body refuses to shrink below its content and the
+ * whole sheet grows past the viewport instead of scrolling inside itself. The
+ * footer then leaves the screen, which is the one thing a pinned footer must not
+ * do.
+ */
+function DrawerBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-body", className: cn("min-h-0 flex-1 overflow-y-auto px-6 pb-5", className), ...props }));
+}
+/**
+ * The pinned half.
+ *
+ * `shrink-0` keeps it out of the scroll. It carries a hairline where the header
+ * does not: the frames draw neither, but the header sits above content that
+ * starts at the top of the sheet while the footer sits above content that has
+ * been scrolled under it, and a pinned bar with nothing between it and moving
+ * text reads as part of the text.
+ */
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-hairline px-6 py-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-heading text-body-lg leading-none font-medium", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-caption text-body", className), ...props }));
+}
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawerPopupVariants, drawerViewportVariants, };
+//# sourceMappingURL=drawer.js.map

package/dist/ui/drawer.js.map

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

package/dist/ui/popover.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+/**
+ * An anchored panel: a button, and a container that opens against it (#228).
+ *
+ * The third overlay in this library and the first one that is neither centred
+ * nor a menu. `Dialog` is modal and sits in the middle of the viewport, which is
+ * wrong for an editor attached to the control that opened it. `DropdownMenu` is
+ * a menu: its children are `role="menuitem"`, arrow keys move between them, and
+ * typing jumps to a label. A panel holding two radio groups, a checkbox list and
+ * two buttons is not a menu, and announcing it as one tells a screen reader user
+ * that Escape and the arrow keys mean something they do not.
+ *
+ * The console hand-rolls exactly this in `HeaderVisibilityPopover.tsx` — its own
+ * portal, its own outside-click listener, its own Escape handler, its own focus
+ * return. All four are Base UI defaults here, which is the whole reason this is a
+ * library primitive rather than a copy of that file.
+ *
+ * ## What comes from Base UI, and is therefore asserted rather than written
+ *
+ * `role="dialog"` on the popup, `aria-labelledby` pointing at `PopoverTitle`
+ * whenever one is rendered and absent when one is not, Escape and outside-press
+ * dismiss, focus moving to the first tabbable element on open, and focus
+ * returning to the trigger on close. None of it is reimplemented here. All of it
+ * is covered in `registry/e2e/radio-group-popover.spec.ts`, because "the library
+ * gives us this" is a claim and this repo measures claims.
+ *
+ * It is NOT modal by default. Page scroll stays live and the rest of the document
+ * stays interactive, which is right for an editor anchored to a header button.
+ * Pass `modal` through to `Popover` for the other behaviour.
+ *
+ * ## `container`, and the surface it exists for
+ *
+ * Base UI portals the popup to `<body>`. Every `--cg-*` value in this system is
+ * inherited, and `data-cg-surface` is a container attribute, so a popup portaled
+ * to the body escapes its surface scope entirely: a popover opened from a button
+ * inside an ink header renders with the page's tokens, and looks completely
+ * correct in the only place anyone checks.
+ *
+ * `container` forwards to `Popover.Portal`'s own prop, so a consumer can anchor
+ * the portal inside the surface. The gallery uses it to render this component on
+ * the panel and on ink for real; without it the three frames would be three
+ * copies of the page one wearing different borders.
+ *
+ * ## Tokens, and the one thing an overlay cannot inherit
+ *
+ * Card ground, control border, raised shadow, per #228. `bg-popover` resolves to
+ * `--cg-surface-card` and `--popover` is declared once per surface scope, so the
+ * ground flips with the surface (rule 2).
+ *
+ * On the two dark surfaces that card ground is `transparent` (panel) and a 4%
+ * white wash (ink), because a CARD on a purple panel is meant to let the purple
+ * through — `shadcn.css` says so in as many words. An OVERLAY is the one thing
+ * that cannot: it is drawn over arbitrary content, and a transparent panel over a
+ * list renders both sets of words on top of each other. Measured, not assumed:
+ * the first version of this component was completely illegible on both dark
+ * frames in the gallery and completely correct on white, which is the only place
+ * anyone would have looked.
+ *
+ * So the ground is opaque in every scope, out of values this system already has:
+ * the card ground on the page, and each dark surface's OWN ground on the dark
+ * surfaces. No new token and no new colour — `bg-panel` is `--cg-surface-panel`
+ * and `bg-code` is `--cg-surface-code`. The panel is then told apart from what is
+ * behind it by the border and the shadow rather than by a tint, which is what
+ * both of those are for.
+ *
+ * KNOWN, and not fixed here: `Dialog`, `DropdownMenu`, `Select` and `Combobox`
+ * are all authored with `bg-popover` and have the same hole on the same two
+ * surfaces. The one-line fix is `--popover` per scope in `shadcn.css`, beside the
+ * four backgrounds that already get that treatment, and it changes what four
+ * shipped components render on dark grounds — which is a design-system decision
+ * rather than a line in a PR about two primitives.
+ */
+declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
+declare function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props): React.JSX.Element;
+declare function PopoverClose({ ...props }: PopoverPrimitive.Close.Props): React.JSX.Element;
+declare function PopoverContent({ align, alignOffset, side, sideOffset, container, className, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<PopoverPrimitive.Portal.Props, "container">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
+declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverPortal, PopoverTitle, PopoverTrigger, };
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAEH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,qBAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAE/D;AAED,iBAAS,cAAc,CAAC,EACtB,KAAe,EACf,WAAe,EACf,IAAe,EACf,UAAc,EACd,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,GACD,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,qBA2BjD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAW1E;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQpC;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,OAAO,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,YAAY,EACZ,cAAc,GACf,CAAA"}

package/dist/ui/popover.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * An anchored panel: a button, and a container that opens against it (#228).
+ *
+ * The third overlay in this library and the first one that is neither centred
+ * nor a menu. `Dialog` is modal and sits in the middle of the viewport, which is
+ * wrong for an editor attached to the control that opened it. `DropdownMenu` is
+ * a menu: its children are `role="menuitem"`, arrow keys move between them, and
+ * typing jumps to a label. A panel holding two radio groups, a checkbox list and
+ * two buttons is not a menu, and announcing it as one tells a screen reader user
+ * that Escape and the arrow keys mean something they do not.
+ *
+ * The console hand-rolls exactly this in `HeaderVisibilityPopover.tsx` — its own
+ * portal, its own outside-click listener, its own Escape handler, its own focus
+ * return. All four are Base UI defaults here, which is the whole reason this is a
+ * library primitive rather than a copy of that file.
+ *
+ * ## What comes from Base UI, and is therefore asserted rather than written
+ *
+ * `role="dialog"` on the popup, `aria-labelledby` pointing at `PopoverTitle`
+ * whenever one is rendered and absent when one is not, Escape and outside-press
+ * dismiss, focus moving to the first tabbable element on open, and focus
+ * returning to the trigger on close. None of it is reimplemented here. All of it
+ * is covered in `registry/e2e/radio-group-popover.spec.ts`, because "the library
+ * gives us this" is a claim and this repo measures claims.
+ *
+ * It is NOT modal by default. Page scroll stays live and the rest of the document
+ * stays interactive, which is right for an editor anchored to a header button.
+ * Pass `modal` through to `Popover` for the other behaviour.
+ *
+ * ## `container`, and the surface it exists for
+ *
+ * Base UI portals the popup to `<body>`. Every `--cg-*` value in this system is
+ * inherited, and `data-cg-surface` is a container attribute, so a popup portaled
+ * to the body escapes its surface scope entirely: a popover opened from a button
+ * inside an ink header renders with the page's tokens, and looks completely
+ * correct in the only place anyone checks.
+ *
+ * `container` forwards to `Popover.Portal`'s own prop, so a consumer can anchor
+ * the portal inside the surface. The gallery uses it to render this component on
+ * the panel and on ink for real; without it the three frames would be three
+ * copies of the page one wearing different borders.
+ *
+ * ## Tokens, and the one thing an overlay cannot inherit
+ *
+ * Card ground, control border, raised shadow, per #228. `bg-popover` resolves to
+ * `--cg-surface-card` and `--popover` is declared once per surface scope, so the
+ * ground flips with the surface (rule 2).
+ *
+ * On the two dark surfaces that card ground is `transparent` (panel) and a 4%
+ * white wash (ink), because a CARD on a purple panel is meant to let the purple
+ * through — `shadcn.css` says so in as many words. An OVERLAY is the one thing
+ * that cannot: it is drawn over arbitrary content, and a transparent panel over a
+ * list renders both sets of words on top of each other. Measured, not assumed:
+ * the first version of this component was completely illegible on both dark
+ * frames in the gallery and completely correct on white, which is the only place
+ * anyone would have looked.
+ *
+ * So the ground is opaque in every scope, out of values this system already has:
+ * the card ground on the page, and each dark surface's OWN ground on the dark
+ * surfaces. No new token and no new colour — `bg-panel` is `--cg-surface-panel`
+ * and `bg-code` is `--cg-surface-code`. The panel is then told apart from what is
+ * behind it by the border and the shadow rather than by a tint, which is what
+ * both of those are for.
+ *
+ * KNOWN, and not fixed here: `Dialog`, `DropdownMenu`, `Select` and `Combobox`
+ * are all authored with `bg-popover` and have the same hole on the same two
+ * surfaces. The one-line fix is `--popover` per scope in `shadcn.css`, beside the
+ * four backgrounds that already get that treatment, and it changes what four
+ * shipped components render on dark grounds — which is a design-system decision
+ * rather than a line in a PR about two primitives.
+ */
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverPortal({ ...props }) {
+    return _jsx(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+}
+function PopoverClose({ ...props }) {
+    return _jsx(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, container, className, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(PopoverPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("grid max-h-(--available-height) w-80 max-w-[calc(100vw-2rem)] origin-(--transform-origin) gap-3 overflow-y-auto rounded-xl border border-line bg-popover p-4 text-body-sm text-popover-foreground shadow-raised duration-100 outline-none in-data-[cg-surface=ink]:bg-code in-data-[cg-surface=panel]:bg-panel data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 }) }) }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn("font-heading text-body-md leading-none font-medium", className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn("text-caption text-body", className), ...props }));
+}
+function PopoverFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-footer", className: cn("flex flex-wrap justify-end gap-2 pt-1", className), ...props }));
+}
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverPortal, PopoverTitle, PopoverTrigger, };
+//# sourceMappingURL=popover.js.map

package/dist/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAEH,SAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAA+B;IACxD,OAAO,KAAC,gBAAgB,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAC7C,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAkC;IAClE,OAAO,KAAC,gBAAgB,CAAC,OAAO,iBAAW,iBAAiB,KAAK,KAAK,GAAI,CAAA;AAC5E,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAiC;IAChE,OAAO,KAAC,gBAAgB,CAAC,MAAM,iBAAW,gBAAgB,KAAK,KAAK,GAAI,CAAA;AAC1E,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAgC;IAC9D,OAAO,KAAC,gBAAgB,CAAC,KAAK,iBAAW,eAAe,KAAK,KAAK,GAAI,CAAA;AACxE,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,KAAK,GAAG,OAAO,EACf,WAAW,GAAG,CAAC,EACf,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,CAAC,EACd,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EAMwC;IAChD,OAAO,CACL,KAAC,gBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YAC3C,KAAC,gBAAgB,CAAC,UAAU,IAC1B,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,YAQtB,KAAC,gBAAgB,CAAC,KAAK,iBACX,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,ilBAAilB,EACjlB,SAAS,CACV,KACG,KAAK,GACT,GAC0B,GACN,CAC3B,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IACzE,OAAO,CACL,KAAC,gBAAgB,CAAC,KAAK,iBACX,eAAe,EACzB,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EAC2B;IACnC,OAAO,CACL,KAAC,gBAAgB,CAAC,WAAW,iBACjB,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACzE,OAAO,CACL,2BACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,KAC7D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,YAAY,EACZ,cAAc,GACf,CAAA"}

package/dist/ui/radio-group.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+declare function RadioGroup({ className, value, defaultValue, onValueChange, ...props }: RadioGroupPrimitive.Props): React.JSX.Element;
+declare function Radio({ className, ...props }: RadioPrimitive.Root.Props): React.JSX.Element;
+declare function RadioOption({ value, label, description, disabled, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "children"> & {
+    /** What the group reports when this row is picked. */
+    value: unknown;
+    /** The row's accessible name. One line. */
+    label: React.ReactNode;
+    /** A line under the label, wired as a description rather than part of the name. */
+    description?: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * The indented slot, rendered ONLY while this option is selected. The
+     * visibility editor puts its space checkboxes here.
+     */
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export { Radio, RadioGroup, RadioOption };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/ui/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAwE9E,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,KAAK,qBAsB3B;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAgBhE;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,sDAAsD;IACtD,KAAK,EAAE,OAAO,CAAA;IACd,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBA+DA;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/radio-group.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * One of a set. `RadioGroup` is the set, `Radio` is the control, and
+ * `RadioOption` is the row the visibility editor is built out of: control,
+ * label, one line of description, and a slot that appears only while that
+ * option is the selected one (#226).
+ *
+ * ## Why this is Base UI's radio and not a styled input
+ *
+ * A radio group has ONE tab stop and roving focus: arrows move the selection,
+ * Space selects, Tab leaves the group. A column of `<input type="radio">`
+ * elements with the same `name` gets that from the browser; a column of styled
+ * divs does not, and the difference is invisible in a screenshot and in review.
+ * `OnboardingQuestion` (#119) already made this argument for its `single` mode
+ * and reached for the same primitive.
+ *
+ * ## The option row, and the name it must NOT have
+ *
+ * `RadioOption` wraps the control and both lines of text in a `<label>`, which
+ * is what makes the whole row clickable rather than the 16px circle.
+ *
+ * It then passes `aria-labelledby` and `aria-describedby` EXPLICITLY, and that
+ * is the load-bearing part. Base UI names a `role="radio"` span by looking for
+ * an associated `<label>` and using its id, which is right for its own demo
+ * where the label holds one word. Here the label holds the description too, so
+ * the fallback would announce "These spaces. Members of the spaces you choose."
+ * as the option's NAME on every row. The name is the label, the description is a
+ * description, and nothing goes red if they are collapsed into one.
+ *
+ * ## The child slot is a sibling, so the group has to carry its value
+ *
+ * The nested space list in the frame sits UNDER its option, indented, not inside
+ * the control. So neither `Radio.Root`'s state-function `className` nor its
+ * `render` prop can reach it, and Base UI does not export the group's context.
+ *
+ * `RadioGroup` mirrors the selected value into a context of its own for that one
+ * question: is this option the selected one. The Base UI group stays the source
+ * of truth in both directions — pass `value` for a controlled group,
+ * `defaultValue` for an uncontrolled one — so the mirror never becomes a second
+ * place the answer lives. Same shape `OnboardingQuestion` uses for its Continue
+ * button.
+ *
+ * The slot is not rendered at all when the option is unselected, rather than
+ * rendered and hidden. A hidden slot keeps its checkboxes in the tab order,
+ * which is a set of controls a keyboard can reach and a reader cannot see.
+ *
+ * ## Tokens, and the one utility this deliberately does not copy
+ *
+ * `checkbox.tsx` grows its hit area with `after:-inset-x-3 after:-inset-y-2`.
+ * That is right for a checkbox sitting on its own and wrong here: the rows in
+ * this frame are about 37px apart, so a 32px invisible overlay per control
+ * overlaps its neighbour and a click near the boundary selects the wrong option.
+ * The row is the target instead, and it is wider and taller than any overlay.
+ *
+ * Colour comes from `--primary` through the shadcn bridge, which is declared per
+ * surface scope, so the selected ring and dot are brand purple on the page and
+ * brand lime on both dark grounds. Selection is never colour alone: the dot is a
+ * shape that is either there or not.
+ */
+/**
+ * The selected value, for `RadioOption`'s slot and nothing else.
+ *
+ * `undefined` means "no RadioGroup above me", which is also what "nothing
+ * selected" looks like. Both answer `false` to every option, which is the
+ * correct behaviour for a `Radio` used outside a group.
+ */
+const RadioGroupValueContext = React.createContext(undefined);
+function RadioGroup({ className, value, defaultValue, onValueChange, ...props }) {
+    // The mirror. Initialised from `defaultValue` and updated on every change, so
+    // an uncontrolled group can still answer the slot's question. A controlled
+    // group ignores it entirely: `value` is read first.
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const selected = value !== undefined ? value : uncontrolled;
+    return (_jsx(RadioGroupValueContext.Provider, { value: selected, children: _jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid gap-3", className), value: value, defaultValue: defaultValue, onValueChange: (next, details) => {
+                setUncontrolled(next);
+                onValueChange?.(next, details);
+            }, ...props }) }));
+}
+function Radio({ className, ...props }) {
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio", className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-pill border border-input p-0 transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:text-primary data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(RadioPrimitive.Indicator, { "data-slot": "radio-indicator", className: "size-2 shrink-0 rounded-pill bg-current" }) }));
+}
+function RadioOption({ value, label, description, disabled, className, children, ...props }) {
+    const selected = React.useContext(RadioGroupValueContext);
+    const checked = selected === value;
+    const id = React.useId();
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    return (_jsxs("div", { "data-slot": "radio-option", "data-checked": checked ? "" : undefined, "data-disabled": disabled ? "" : undefined, className: cn("grid gap-1.5", className), ...props, children: [_jsxs("label", { className: cn("flex cursor-pointer items-start gap-2.5 select-none", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(Radio, { value: value, disabled: disabled, "aria-labelledby": labelId, "aria-describedby": description ? descriptionId : undefined, 
+                        // Optically centred on the label's first line rather than its box.
+                        className: "mt-0.5" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { id: labelId, "data-slot": "radio-option-label", className: "text-body-sm text-ink", children: label }), description ? (_jsx("span", { id: descriptionId, "data-slot": "radio-option-description", className: "text-caption text-faint", children: description })) : null] })] }), children && checked ? (_jsx("div", { "data-slot": "radio-option-detail", 
+                // Indented to the label's edge: the control is 16px and the gap is
+                // 10px, so the text column starts at 26px.
+                className: "grid gap-2 ps-[26px]", children: children })) : null] }));
+}
+export { Radio, RadioGroup, RadioOption };
+//# sourceMappingURL=radio-group.js.map

package/dist/ui/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAAU,SAAS,CAAC,CAAA;AAEtE,SAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAG,KAAK,EACkB;IAC1B,8EAA8E;IAC9E,2EAA2E;IAC3E,oDAAoD;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,YAAY,CAAC,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAA;IAE3D,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC9C,KAAC,mBAAmB,iBACR,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;gBAC/B,eAAe,CAAC,IAAI,CAAC,CAAA;gBACrB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;YAChC,CAAC,KACG,KAAK,GACT,GAC8B,CACnC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B;IAC/D,OAAO,CACL,KAAC,cAAc,CAAC,IAAI,iBACR,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,2dAA2d,EAC3d,SAAS,CACV,KACG,KAAK,YAET,KAAC,cAAc,CAAC,SAAS,iBACb,iBAAiB,EAC3B,SAAS,EAAC,yCAAyC,GACnD,GACkB,CACvB,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAcT;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAA;IACzD,MAAM,OAAO,GAAG,QAAQ,KAAK,KAAK,CAAA;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAA;IAC7B,MAAM,aAAa,GAAG,GAAG,EAAE,cAAc,CAAA;IAEzC,OAAO,CACL,4BACY,cAAc,kBAGV,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACvB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,KACpC,KAAK,aAET,iBACE,SAAS,EAAE,EAAE,CACX,qDAAqD,EACrD,QAAQ,IAAI,+BAA+B,CAC5C,aAED,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,qBACD,OAAO,sBACN,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;wBACzD,mEAAmE;wBACnE,SAAS,EAAC,QAAQ,GAClB,EACF,gBAAM,SAAS,EAAC,cAAc,aAC5B,eACE,EAAE,EAAE,OAAO,eACD,oBAAoB,EAC9B,SAAS,EAAC,uBAAuB,YAEhC,KAAK,GACD,EACN,WAAW,CAAC,CAAC,CAAC,CACb,eACE,EAAE,EAAE,aAAa,eACP,0BAA0B,EACpC,SAAS,EAAC,yBAAyB,YAElC,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,IACH,IACD,EAEP,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CACrB,2BACY,qBAAqB;gBAC/B,mEAAmE;gBACnE,2CAA2C;gBAC3C,SAAS,EAAC,sBAAsB,YAE/B,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -32,6 +32,7 @@
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/manrope": "^5.3.0",
+    "@fontsource-variable/space-grotesk": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "sonner": "^2.0.8",