@cloudgrid-io/ui 0.31.6 → 0.32.0

package/dist/ui/dropdown-menu.js

@@ -29,8 +29,27 @@ function DropdownMenuGroup({ ...props }) {
 function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-caption font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
 }
+/**
+ * The item look, shared by the button item and the link item so the two cannot
+ * drift: a menu that mixes "Profile" (a link) with "Sign out" (an action) must
+ * not show two kinds of row.
+ */
+const ITEM_CLASS = "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-body-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive";
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
-    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-body-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn(ITEM_CLASS, className), ...props }));
+}
+/**
+ * A menu row that is a real link (#163). `<a href>` rather than a button that
+ * calls `router.push`, so middle-click, open-in-new-tab and link semantics all
+ * work, and it is still a `menuitem` that arrow keys reach: Base UI's
+ * `Menu.LinkItem` takes part in the menu's roving focus like any other item.
+ *
+ * Same look as `DropdownMenuItem`, without the destructive variant: a link
+ * navigates, it does not destroy. For a framework router pass its link as
+ * `render`, e.g. `render={<Link href="/profile" />}`.
+ */
+function DropdownMenuLinkItem({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.LinkItem, { "data-slot": "dropdown-menu-link-item", "data-inset": inset, "data-variant": "default", className: cn(ITEM_CLASS, "no-underline", className), ...props }));
 }
 function DropdownMenuSub({ ...props }) {
     return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
@@ -56,5 +75,5 @@ function DropdownMenuSeparator({ className, ...props }) {
 function DropdownMenuShortcut({ className, ...props }) {
     return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-caption tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
 }
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/ui/dropdown-menu.js.map

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

package/dist/ui/popover.d.ts

@@ -1,77 +1,6 @@
 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 Popover({ modal, ...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;

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

@@ -1 +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"}
+{"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;AA6FpE,iBAAS,OAAO,CAAC,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAMxE;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,qBAQ/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,qBAkCjD;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

@@ -67,15 +67,30 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * 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.
+ * `Dialog`, `DropdownMenu`, `Select` and `Combobox` are authored with
+ * `bg-popover` and had the same hole on the same two surfaces. #230 closed it at
+ * the bridge: `shadcn.css` now declares `--popover` per scope with these same
+ * two values, so `bg-popover` alone is opaque everywhere. The explicit
+ * `bg-panel` / `bg-code` here are kept; they now agree with the bridge.
  */
-function Popover({ ...props }) {
-    return _jsx(PopoverPrimitive.Root, { ...props });
+/**
+ * `aria-modal`, claimed only when the popover really is modal (#247).
+ *
+ * Base UI traps focus in a popover only when the root is `modal` AND a
+ * `Popover.Close` part is rendered inside the popup (`focusManagerModal` in
+ * `PopoverPopup`). It never sets `aria-modal`, and the popup cannot read either
+ * half from its own state. A popover that does not trap must not announce
+ * itself as modal, so the same two halves are tracked here: the root records
+ * `modal`, and each `PopoverClose` inside `PopoverContent` registers itself.
+ *
+ * A raw `PopoverPrimitive.Close` does not register, so a popover built with one
+ * traps focus without saying `aria-modal`. Use `PopoverClose`.
+ */
+const PopoverModalContext = React.createContext(false);
+const PopoverCloseRegistry = React.createContext(null);
+const useIsoLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
+function Popover({ modal = false, ...props }) {
+    return (_jsx(PopoverModalContext.Provider, { value: modal, children: _jsx(PopoverPrimitive.Root, { modal: modal, ...props }) }));
 }
 function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
@@ -84,10 +99,21 @@ function PopoverPortal({ ...props }) {
     return _jsx(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
 }
 function PopoverClose({ ...props }) {
+    const register = React.useContext(PopoverCloseRegistry);
+    useIsoLayoutEffect(() => {
+        if (!register)
+            return;
+        register(1);
+        return () => register(-1);
+    }, [register]);
     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 }) }) }));
+    const modal = React.useContext(PopoverModalContext);
+    const [closeParts, setCloseParts] = React.useState(0);
+    const register = React.useCallback((delta) => setCloseParts((n) => n + delta), []);
+    const trapsFocus = modal !== false && closeParts > 0;
+    return (_jsx(PopoverCloseRegistry.Provider, { value: register, children: _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", "aria-modal": trapsFocus ? true : undefined, 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 }));

package/dist/ui/popover.js.map

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

package/dist/ui/progress-bar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare function ProgressBar({ label, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "role"> & {
+    /** The accessible name. */
+    label?: string;
+}): React.JSX.Element;
+export { ProgressBar };
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/ui/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/ui/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAyC9B,iBAAS,WAAW,CAAC,EACnB,KAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,qBAkBA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/progress-bar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * An indeterminate progress bar (#164): work is happening and its length is
+ * unknown (a grid provisioning, a build, a plug in flight).
+ *
+ * A segment slides across a track. The track is `--cg-hover`, the wash declared
+ * in all three scopes; the segment is `--cg-text-accent` (purple on the page,
+ * white on the panel, lime on ink), the same pair `Spinner` uses.
+ *
+ * ## Reduced motion keeps a bar, not a blank
+ *
+ * With `prefers-reduced-motion: reduce` the segment stops, parked at the start
+ * of the track, so the bar still reads as "in progress".
+ *
+ * ## The keyframes ship with the component
+ *
+ * Like `ShowcaseScroll`, the stylesheet is a React 19 hoisted `<style>` with an
+ * `href` and `precedence`, so it is emitted once however many bars render and
+ * needs nothing from the consumer's Tailwind config.
+ *
+ * ## It is a progressbar with no value
+ *
+ * `role="progressbar"` and an accessible name (`label`, default "Loading"), and
+ * deliberately no `aria-valuenow`: an indeterminate bar has no value to report.
+ */
+const PROGRESS_BAR_CSS = `
+[data-slot="progress-bar-segment"] {
+  animation: cg-progress-indeterminate 1.4s var(--cg-ease-in-out, ease-in-out) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="progress-bar-segment"] { animation: none; transform: none; }
+}
+@keyframes cg-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+`;
+function ProgressBar({ label = "Loading", className, ...props }) {
+    return (_jsxs("div", { "data-slot": "progress-bar", role: "progressbar", "aria-label": label, className: cn("relative h-1 w-full overflow-hidden rounded-pill bg-(--cg-hover)", className), ...props, children: [_jsx("style", { href: "cg-progress-bar", precedence: "medium", children: PROGRESS_BAR_CSS }), _jsx("div", { "data-slot": "progress-bar-segment", className: "absolute inset-y-0 left-0 w-2/5 rounded-pill bg-(--cg-text-accent)" })] }));
+}
+export { ProgressBar };
+//# sourceMappingURL=progress-bar.js.map

package/dist/ui/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/ui/progress-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,gBAAgB,GAAG;;;;;;;;;;;CAWxB,CAAA;AAED,SAAS,WAAW,CAAC,EACnB,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,GAAG,KAAK,EAIT;IACC,OAAO,CACL,4BACY,cAAc,EACxB,IAAI,EAAC,aAAa,gBACN,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,kEAAkE,EAAE,SAAS,CAAC,KACxF,KAAK,aAET,gBAAO,IAAI,EAAC,iBAAiB,EAAC,UAAU,EAAC,QAAQ,YAC9C,gBAAgB,GACX,EACR,2BACY,sBAAsB,EAChC,SAAS,EAAC,oEAAoE,GAC9E,IACE,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/separator.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import { cn } from "../lib/cloudgrid-cn.js";
 function Separator({ className, orientation = "horizontal", ...props }) {
-    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
+    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className), ...props }));
 }
 export { Separator };
 //# sourceMappingURL=separator.js.map

package/dist/ui/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../src/ui/separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE1E,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,KAAC,kBAAkB,iBACP,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../src/ui/separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE1E,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,KAAC,kBAAkB,iBACP,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACX,sKAAsK,EACtK,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/ui/spinner.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * A loading indicator for work with no known length (#164).
+ *
+ * Every consumer was hand-rolling one: the Console animated its provisioning
+ * rows with an opacity pulse that read as static. This is the library's.
+ *
+ * ## Sizes are Button's glyph sizes
+ *
+ * `xs` 12px, `sm` 14px, `default` 16px, `lg` 20px: the glyph rungs `Button`
+ * already uses at `xs`, `sm` and `default`, so a spinner swapped in for a
+ * button's icon while it works does not move the label.
+ *
+ * ## Colour reads tokens that flip
+ *
+ * The arc is `--cg-text-accent` (the brand purple on the page, white on the
+ * purple panel, lime on ink) and the track is `--cg-border-hairline`. Both are
+ * declared in all three scopes, so the spinner is visible on every surface.
+ * `--cg-primary` would be purple on purple inside a panel.
+ *
+ * ## Reduced motion keeps a glyph, not a blank
+ *
+ * The arc is drawn whether or not it turns: `motion-safe:animate-spin` only
+ * rotates it. With `prefers-reduced-motion: reduce` it is a still quarter-arc on
+ * its track, which still says "working" without moving.
+ *
+ * ## It announces itself
+ *
+ * `role="status"` with an accessible name (`label`, default "Loading"). Inside a
+ * control that already says what is happening (a button labelled "Plugging"),
+ * pass `decorative` and it is hidden from assistive technology instead.
+ */
+declare const spinnerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Spinner({ size, label, decorative, className, ...props }: Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof spinnerVariants> & {
+    /** The accessible name. Ignored when `decorative`. */
+    label?: string;
+    /** Hide it from assistive technology, for a control that already names the work. */
+    decorative?: boolean;
+}): React.JSX.Element;
+export { Spinner, spinnerVariants };
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/ui/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,eAAe;;8EAUnB,CAAA;AAEF,iBAAS,OAAO,CAAC,EACf,IAAgB,EAChB,KAAiB,EACjB,UAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAC/C,YAAY,CAAC,OAAO,eAAe,CAAC,GAAG;IACrC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,qBAkCF;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/spinner.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * A loading indicator for work with no known length (#164).
+ *
+ * Every consumer was hand-rolling one: the Console animated its provisioning
+ * rows with an opacity pulse that read as static. This is the library's.
+ *
+ * ## Sizes are Button's glyph sizes
+ *
+ * `xs` 12px, `sm` 14px, `default` 16px, `lg` 20px: the glyph rungs `Button`
+ * already uses at `xs`, `sm` and `default`, so a spinner swapped in for a
+ * button's icon while it works does not move the label.
+ *
+ * ## Colour reads tokens that flip
+ *
+ * The arc is `--cg-text-accent` (the brand purple on the page, white on the
+ * purple panel, lime on ink) and the track is `--cg-border-hairline`. Both are
+ * declared in all three scopes, so the spinner is visible on every surface.
+ * `--cg-primary` would be purple on purple inside a panel.
+ *
+ * ## Reduced motion keeps a glyph, not a blank
+ *
+ * The arc is drawn whether or not it turns: `motion-safe:animate-spin` only
+ * rotates it. With `prefers-reduced-motion: reduce` it is a still quarter-arc on
+ * its track, which still says "working" without moving.
+ *
+ * ## It announces itself
+ *
+ * `role="status"` with an accessible name (`label`, default "Loading"). Inside a
+ * control that already says what is happening (a button labelled "Plugging"),
+ * pass `decorative` and it is hidden from assistive technology instead.
+ */
+const spinnerVariants = cva("inline-block shrink-0", {
+    variants: {
+        size: {
+            xs: "size-3",
+            sm: "size-3.5",
+            default: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
+function Spinner({ size = "default", label = "Loading", decorative = false, className, ...props }) {
+    const a11y = decorative
+        ? { "aria-hidden": true }
+        : { role: "status", "aria-label": label };
+    return (_jsx("span", { "data-slot": "spinner", "data-size": size, ...a11y, className: cn(spinnerVariants({ size }), className), ...props, children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "size-full motion-safe:animate-spin", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", strokeWidth: "1.5", className: "stroke-(--cg-border-hairline)" }), _jsx("path", { d: "M8 1.5a6.5 6.5 0 0 1 6.5 6.5", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-(--cg-text-accent)" })] }) }));
+}
+export { Spinner, spinnerVariants };
+//# sourceMappingURL=spinner.js.map

package/dist/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/ui/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,eAAe,GAAG,GAAG,CAAC,uBAAuB,EAAE;IACnD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,UAAU;YACd,OAAO,EAAE,QAAQ;YACjB,EAAE,EAAE,QAAQ;SACb;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;CACrC,CAAC,CAAA;AAEF,SAAS,OAAO,CAAC,EACf,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EAOP;IACD,MAAM,IAAI,GAAG,UAAU;QACrB,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE;QAClC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,CAAA;IAC3C,OAAO,CACL,4BACY,SAAS,eACR,IAAI,KACX,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KAC/C,KAAK,YAET,eACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,SAAS,EAAC,oCAAoC,aAE9C,iBACE,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,KAAK,EACP,WAAW,EAAC,KAAK,EACjB,SAAS,EAAC,+BAA+B,GACzC,EACF,eACE,CAAC,EAAC,8BAA8B,EAChC,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,SAAS,EAAC,2BAA2B,GACrC,IACE,GACD,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/tabs.d.ts

@@ -20,6 +20,12 @@ import { type VariantProps } from "class-variance-authority";
  * The cost of a scroller is that the active chip can start off-screen, which is
  * the one thing a reader needs to see. `scrollActiveTabIntoView` pays it on
  * mount.
+ *
+ * Orientation is matched as `data-[orientation=…]`, the attribute Base UI emits
+ * (#246). shadcn's `data-horizontal:` spelling compiles to `[data-horizontal]`
+ * unless the consumer imports `shadcn/tailwind.css`, which the Console does not,
+ * so every horizontal tab set there laid its list beside the panel. Guarded by
+ * `test/orientation-variant.test.mjs`.
  */
 /**
  * Bring the active chip into view inside its own scroll port, on mount.

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

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

package/dist/ui/tabs.js

@@ -23,6 +23,12 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * The cost of a scroller is that the active chip can start off-screen, which is
  * the one thing a reader needs to see. `scrollActiveTabIntoView` pays it on
  * mount.
+ *
+ * Orientation is matched as `data-[orientation=…]`, the attribute Base UI emits
+ * (#246). shadcn's `data-horizontal:` spelling compiles to `[data-horizontal]`
+ * unless the consumer imports `shadcn/tailwind.css`, which the Console does not,
+ * so every horizontal tab set there laid its list beside the panel. Guarded by
+ * `test/orientation-variant.test.mjs`.
  */
 /**
  * Bring the active chip into view inside its own scroll port, on mount.
@@ -66,9 +72,9 @@ function scrollActiveTabIntoView(list) {
  */
 const useIsoLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
 function Tabs({ className, orientation = "horizontal", ...props }) {
-    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }));
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
 }
-const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
     variants: {
         variant: {
             default: "bg-muted",
@@ -93,7 +99,7 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center jus
             // Hiding it is safe here and would not be on a vertical list: the
             // active chip is scrolled in on mount, arrow keys move between chips,
             // and a touch reader drags.
-            pill: "relative w-full max-w-full justify-start gap-2 overflow-x-auto rounded-none bg-transparent p-0 py-1 group-data-horizontal/tabs:h-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            pill: "relative w-full max-w-full justify-start gap-2 overflow-x-auto rounded-none bg-transparent p-0 py-1 group-data-[orientation=horizontal]/tabs:h-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         },
     },
     defaultVariants: {
@@ -126,7 +132,7 @@ function TabsList({ className, variant = "default", ref, ...props }) {
         }, className: cn(tabsListVariants({ variant }), className), ...props }));
 }
 function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-body-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", 
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-body-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", 
         // THE PILL CHIP (ui#256).
         //
         // Every rule is scoped to the list's variant rather than added to the
@@ -148,7 +154,7 @@ function TabsTrigger({ className, ...props }) {
         // `packages/ui/test/contrast-guardrail.test.mjs`. `text-brand` alone
         // would be purple on purple inside a panel; the tint alone would be
         // inherited body text on lavender.
-        "group-data-[variant=pill]/tabs-list:data-active:border-brand-200 group-data-[variant=pill]/tabs-list:data-active:bg-brand-tint group-data-[variant=pill]/tabs-list:data-active:text-brand", "group-data-[variant=pill]/tabs-list:hover:text-ink group-data-[variant=pill]/tabs-list:data-active:hover:text-brand", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+        "group-data-[variant=pill]/tabs-list:data-active:border-brand-200 group-data-[variant=pill]/tabs-list:data-active:bg-brand-tint group-data-[variant=pill]/tabs-list:data-active:text-brand", "group-data-[variant=pill]/tabs-list:hover:text-ink group-data-[variant=pill]/tabs-list:data-active:hover:text-brand", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("flex-1 text-body-sm outline-none", 

package/dist/ui/tabs.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.31.6",
+  "version": "0.32.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",