@cloudgrid-io/ui 0.29.0 → 0.29.2

package/dist/blocks/tab-bar.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+declare function TabBar({ label, className, children, onKeyDown, ...props }: Omit<React.ComponentProps<"nav">, "ref"> & {
+    /**
+     * Names the landmark. Required, not optional: a page with two `<nav>`s and no
+     * names gives a screen-reader user two identical "navigation" entries and no
+     * way to tell the app's bar from the site's header.
+     */
+    label: string;
+}): React.JSX.Element;
+declare function TabBarItem({ label, icon, count, active, render, className, onKeyDown, ...props }: Omit<useRender.ComponentProps<"button">, "children"> & {
+    label: React.ReactNode;
+    /**
+     * 22px in the frames. Sized by the caller, as every mark in this library is:
+     * the glyph box below is 22px and the mark fills what it is given.
+     *
+     * The label is what gets announced, so the glyph carries no name.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The count pill, on `SideNavItem`'s terms: it renders as text inside the
+     * item, so the accessible name becomes "Feedback 2" — the same two pieces of
+     * information a sighted reader gets. A caller who needs "Feedback, 2 unread"
+     * passes that as `label`, because only the caller knows what is counted.
+     *
+     * It sits beside the label rather than as a badge over the glyph, which makes
+     * an item wider. Four items with a count each do not fit a phone; three do.
+     */
+    count?: number;
+    active?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { TabBar, TabBarItem };
+//# sourceMappingURL=tab-bar.d.ts.map

package/dist/blocks/tab-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/tab-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAqGrD,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,qBA2CA;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,0EAsEA;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/tab-bar.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The bottom navigation a phone gets instead of a sidebar: three to five items
+ * pinned to the bottom of the viewport, each a glyph over a label, one of which
+ * is the page you are on.
+ *
+ * Read from the Console's founder-approved mobile frames (ui#256, Figma
+ * `5ouhISIL0mwYGHurvCGoEO`, `App / 01 Overview / Mobile` 8670:4808 and
+ * `App / 06 Versions / Mobile` 8670:4954). The same four destinations the
+ * `SideNav` column carries on a desktop — Overview, Insights, Build & run,
+ * Manage — reduced to a bar, because a 14-row column does not fit a phone and a
+ * hamburger hides the one thing a phone reader navigates with.
+ *
+ * ## It draws and it behaves. It does not know where anything is
+ *
+ * `SideNav`'s line, and the reason `render` exists here too. This block builds
+ * no `href`, matches no route and gates no role. The consumer decides which
+ * items a reader may see, which one is `active`, and what element an item
+ * actually is. Anything else would put the Console's URL helpers and its role
+ * model inside the design system, where neither can be right for long.
+ *
+ * ## Two parts
+ *
+ * `TabBar`      the `<nav>` landmark, the fixed strip, the safe area and the
+ *               keyboard.
+ * `TabBarItem`  one destination: a glyph, a label, an optional count, and
+ *               whether it is the page you are on.
+ *
+ * ## The keyboard
+ *
+ * Every item is a real tab stop, so Tab walks the bar in DOM order.
+ * ArrowRight and ArrowLeft are laid over that rather than replacing it: they
+ * move focus between items and wrap at the ends.
+ *
+ * As in `SideNav`, this is deliberately NOT a roving-tabindex tablist. A
+ * tablist owns one tab stop because its tabs are one control; these items are
+ * links to separate pages, and making three of four unreachable by Tab to
+ * satisfy a pattern they are not an instance of is a worse nav, not a more
+ * correct one.
+ *
+ * Horizontal keys only. The bar is a row, so ArrowUp and ArrowDown mean
+ * nothing in it — and a fixed strip at the bottom of a phone screen that ate
+ * them would take the one gesture that scrolls the page above it.
+ *
+ * Space is synthesised only where the browser does not already activate. A
+ * `<button>` fires on Enter and Space already; an `<a href>` fires on Enter and
+ * SCROLLS THE PAGE on Space. Since an item is normally an anchor — that is what
+ * `render={<Link />}` makes it — the bar synthesises the click for Space on
+ * anything that is not a button. Doing it unconditionally would fire a button
+ * twice.
+ *
+ * ## The active item reads the accent TEXT role, not the brand colour
+ *
+ * The frames paint the active glyph and label in the brand purple, and
+ * `text-brand` is the obvious reach. It is `--cg-primary`, declared at `:root`
+ * only, and the active item here has no ground of its own to carry — unlike
+ * `SideNavItem`, whose active row is a tinted chip and can therefore keep one
+ * pair of values on every surface (see that block's note for the measured
+ * argument).
+ *
+ * So this reads `var(--cg-text-accent)`, which is the accent role for TEXT and
+ * is declared in all three scopes: the brand purple on the page, white on the
+ * purple panel, lime on ink. On the surface the frames actually draw — a white
+ * bar on a white page — it resolves to exactly the purple they specify.
+ *
+ * Colour is never the only channel, so the active item also carries
+ * `aria-current="page"`.
+ *
+ * ## The label is 13px and the frame says 11
+ *
+ * `--cg-caption` is the smallest rung this brand ships. There is no 11px token,
+ * `component-source.spec.ts` bans `text-[11px]` along with every other
+ * arbitrary size, and adding a rung to the bottom of the type ramp is a brand
+ * decision with its own evidence bar (ui#248). Recorded in `docs/backlog.md`
+ * rather than decided here.
+ *
+ * ## Fixed, and what that means for a container
+ *
+ * The strip is `fixed inset-x-0 bottom-0`, because that is what a bottom
+ * navigation is, and a consumer who has to position it themselves has been
+ * handed half a component. To draw it inside a box instead — a phone frame in a
+ * gallery, a preview pane — give that box a transform (`[transform:translate(0)]`),
+ * which makes it the containing block for its fixed descendants.
+ *
+ * Nothing here reserves space for the bar in the page above it. That is the
+ * page's job and it needs the bar's height plus the safe area, which only the
+ * page knows how to spend.
+ */
+/** The items a key press can reach. */
+const ITEM_SELECTOR = '[data-slot="tab-bar-item"]';
+function reachableItems(root) {
+    return Array.from(root.querySelectorAll(ITEM_SELECTOR)).filter((el) => el.getClientRects().length > 0 && !el.hasAttribute("disabled"));
+}
+function TabBar({ label, className, children, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        if (step === 0)
+            return;
+        const items = reachableItems(event.currentTarget);
+        const from = items.indexOf(document.activeElement);
+        // Not -1 only when focus is already on an item. A key press while focus is
+        // anywhere else should do what it does anywhere else.
+        if (from === -1 || items.length === 0)
+            return;
+        event.preventDefault();
+        items[(from + step + items.length) % items.length]?.focus();
+    }
+    return (_jsx("nav", { "data-slot": "tab-bar", "aria-label": label, onKeyDown: handleKeyDown, className: cn("fixed inset-x-0 bottom-0 z-40 border-t border-hairline bg-card", 
+        // env(safe-area-inset-bottom) is 0 everywhere it does not apply, so
+        // this is not a phone-only branch: it is the home-indicator gutter on
+        // the hardware that has one and nothing on the hardware that does not.
+        // A class rather than an inline style, so it is assertable from markup.
+        "pb-[env(safe-area-inset-bottom)]", 
+        // text-ink because text does not flip by inheritance (rule 3): without
+        // it every label inside a panel would inherit the page's dark ink and
+        // stay dark on purple.
+        "text-ink", className), ...props, children: _jsx("div", { "data-slot": "tab-bar-items", className: "flex items-stretch", children: children }) }));
+}
+function TabBarItem({ label, icon, count, active, render, className, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        // See the module note: Space on an anchor scrolls. Synthesised only for the
+        // elements the browser does not already activate, or a button fires twice.
+        if (event.key !== " ")
+            return;
+        const el = event.currentTarget;
+        if (el.tagName === "BUTTON")
+            return;
+        event.preventDefault();
+        el.click();
+    }
+    return useRender({
+        render,
+        defaultTagName: "button",
+        props: {
+            "data-slot": "tab-bar-item",
+            "data-active": active ? "" : undefined,
+            // aria-current is what says "this is the page you are on". The accent says
+            // it to a reader who can see it, and colour is never the only channel.
+            "aria-current": active ? "page" : undefined,
+            // Only when this really is a <button>. `type` on an anchor is invalid, and
+            // `render={<Link />}` is the common case.
+            ...(render ? {} : { type: "button" }),
+            onKeyDown: handleKeyDown,
+            className: cn("flex flex-1 basis-0 flex-col items-center justify-center gap-1 px-1 pt-2 pb-1.5 text-caption no-underline", "transition-colors focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", active
+                ? // The accent TEXT role, not `text-brand`. See the module note: it is
+                    // the brand purple the frames draw at :root, and it is the only
+                    // accent name declared on the panel and on ink as well.
+                    "font-medium text-(--cg-text-accent)"
+                : "text-body hover:text-ink", className),
+            // Composed from the three slots rather than taken as `children`, which is
+            // why `children` is omitted from the props type: a caller who could pass
+            // both would have two ways to fill one item and no rule about which wins.
+            children: (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "data-slot": "tab-bar-icon", className: "flex size-[22px] shrink-0 items-center justify-center", children: icon })) : null, _jsxs("span", { "data-slot": "tab-bar-label", className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: label }), count === undefined ? null : (_jsx("span", { "data-slot": "tab-bar-count", 
+                                // The wash, for `SideNavItem`'s reason: a pale grey pill named
+                                // `bg-raised` is neutral-50 at :root only, so it would be a
+                                // near-white pill on the purple panel. --cg-hover is the one
+                                // ground token declared in all three scopes.
+                                className: "shrink-0 rounded-pill bg-(--cg-hover) px-1.5 text-caption text-body", children: count }))] })] })),
+            ...props,
+        },
+    });
+}
+export { TabBar, TabBarItem };
+//# sourceMappingURL=tab-bar.js.map

package/dist/blocks/tab-bar.js.map

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

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
+export * from "./blocks/tab-bar.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -72,6 +72,7 @@ export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
+export * from "./blocks/tab-bar.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/tokens/base.json

@@ -915,14 +915,14 @@
       "$description": "SemiBold, not Bold. The draft's \"Body Bold\" style is Manrope SemiBold 600 at\n15/1.46, and 600 is what this rung has to be for `font-bold` to render it (#197).\n\nWas 700. Manrope at 700 next to the draft's 600 reads a weight heavier than the\ndesign everywhere the token is spent, and the alternative — a new\n--cg-weight-semibold that no component reads, beside a --cg-weight-bold that is\nnow wrong — would have left the wrong value reachable under the obvious name."
     },
     "weight-display": {
-      "$value": "700",
+      "$value": "400",
       "$type": "fontWeight",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-weight-display"
         }
       },
-      "$description": "The display rung, reachable as `font-heavy` (`font-display` is the family; see\ntheme.css). 700 rather than 800 since the face became Manrope (#197): the brand\nloads 400/500/600/700 and the 800 end of the axis belonged to the condensed\nface's own weight."
+      "$description": "The display rung, reachable as `font-heavy` (`font-display` is the family; see\ntheme.css). 400 because the display face is Tanker, and Tanker ships in exactly\none weight: Regular, usWeightClass 400. Any value above 400 is not a heavier cut\nof the face, it is a browser-synthesised faux bold — the same outlines smeared.\n\nWas 700, which was right while the face was Manrope (#197) and its variable axis\ncarried a real 700. #243 moved the face back to Tanker; this rung did not follow,\nand the founder read the result as \"too bold\" (#260)."
     }
   },
   "h1-display-ramp": {

package/dist/tokens.css

@@ -880,10 +880,14 @@
   --cg-weight-bold: 600;
   /*
      The display rung, reachable as `font-heavy` (`font-display` is the family; see
-     theme.css). 700 rather than 800 since the face became Manrope (#197): the brand
-     loads 400/500/600/700 and the 800 end of the axis belonged to the condensed
-     face's own weight. */
-  --cg-weight-display: 700;
+     theme.css). 400 because the display face is Tanker, and Tanker ships in exactly
+     one weight: Regular, usWeightClass 400. Any value above 400 is not a heavier cut
+     of the face, it is a browser-synthesised faux bold — the same outlines smeared.
+
+     Was 700, which was right while the face was Manrope (#197) and its variable axis
+     carried a real 700. #243 moved the face back to Tanker; this rung did not follow,
+     and the founder read the result as "too bold" (#260). */
+  --cg-weight-display: 400;
 
   /* ---- h1-display-ramp ----
      H1 display ramp: uppercase, condensed, Primary or white

package/dist/tokens.json

@@ -98,7 +98,7 @@
       "--cg-weight-regular": "400",
       "--cg-weight-medium": "500",
       "--cg-weight-bold": "600",
-      "--cg-weight-display": "700",
+      "--cg-weight-display": "400",
       "--cg-display-3xl": "120px",
       "--cg-display-2xl": "92px",
       "--cg-display-64": "64px",

package/dist/ui/tabs.d.ts

@@ -1,11 +1,52 @@
+import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { type VariantProps } from "class-variance-authority";
-declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+/**
+ * Three list treatments, and `pill` is the one with behaviour.
+ *
+ * `default`  the segmented control: a tinted track with a raised active tab.
+ * `line`     an underline under the active tab, no track at all.
+ * `pill`     a row of rounded-full chips that SCROLLS rather than wraps, for
+ *            choosing a sub-page on a narrow screen (ui#256). Read from the
+ *            Console's mobile frames: Architecture, Versions, Scheduled jobs,
+ *            Logs, Database, Configuration, Connections, seven chips on a
+ *            390px phone.
+ *
+ * Wrapping was the alternative and it is worse on the frame it is for: a
+ * second row of chips pushes the page's own heading below the fold, and the
+ * height of the strip then depends on how many sub-pages a reader's role can
+ * see. A scroller is one row whatever the count.
+ *
+ * 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.
+ */
+/**
+ * Bring the active chip into view inside its own scroll port, on mount.
+ *
+ * Deliberately NOT `element.scrollIntoView()`. That walks every ancestor scroll
+ * port, including the document, so on a phone it scrolls the whole page to
+ * wherever the chip strip happens to be — which is the page jumping under a
+ * reader who has not touched anything. Setting `scrollLeft` moves the one box
+ * that should move and nothing else.
+ *
+ * `offsetLeft` is read against the list, which is why the `pill` variant is
+ * `relative`: that makes the list its children's `offsetParent`, so the number
+ * is the chip's position inside the strip rather than its position inside
+ * whatever happened to be positioned further up the page.
+ *
+ * Exported because it is the only part of this that can be asserted without a
+ * browser. It reads four numbers and one selector, so the node suite calls it
+ * with a plain object carrying them; the real scroll is measured in
+ * `registry/e2e/tabs-pill.spec.ts`.
+ */
+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" | null | undefined;
+    variant?: "line" | "default" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
-declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
-declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+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;
+declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, scrollActiveTabIntoView };
 //# sourceMappingURL=tabs.d.ts.map

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,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,+BAY1B;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,+BASlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,+BAcpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,+BAmBtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,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;;;;;;;;;;;;;;;;;;;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"}

package/dist/ui/tabs.js

@@ -1,8 +1,70 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * Three list treatments, and `pill` is the one with behaviour.
+ *
+ * `default`  the segmented control: a tinted track with a raised active tab.
+ * `line`     an underline under the active tab, no track at all.
+ * `pill`     a row of rounded-full chips that SCROLLS rather than wraps, for
+ *            choosing a sub-page on a narrow screen (ui#256). Read from the
+ *            Console's mobile frames: Architecture, Versions, Scheduled jobs,
+ *            Logs, Database, Configuration, Connections, seven chips on a
+ *            390px phone.
+ *
+ * Wrapping was the alternative and it is worse on the frame it is for: a
+ * second row of chips pushes the page's own heading below the fold, and the
+ * height of the strip then depends on how many sub-pages a reader's role can
+ * see. A scroller is one row whatever the count.
+ *
+ * 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.
+ */
+/**
+ * Bring the active chip into view inside its own scroll port, on mount.
+ *
+ * Deliberately NOT `element.scrollIntoView()`. That walks every ancestor scroll
+ * port, including the document, so on a phone it scrolls the whole page to
+ * wherever the chip strip happens to be — which is the page jumping under a
+ * reader who has not touched anything. Setting `scrollLeft` moves the one box
+ * that should move and nothing else.
+ *
+ * `offsetLeft` is read against the list, which is why the `pill` variant is
+ * `relative`: that makes the list its children's `offsetParent`, so the number
+ * is the chip's position inside the strip rather than its position inside
+ * whatever happened to be positioned further up the page.
+ *
+ * Exported because it is the only part of this that can be asserted without a
+ * browser. It reads four numbers and one selector, so the node suite calls it
+ * with a plain object carrying them; the real scroll is measured in
+ * `registry/e2e/tabs-pill.spec.ts`.
+ */
+function scrollActiveTabIntoView(list) {
+    if (!list)
+        return;
+    const active = list.querySelector('[data-slot="tabs-trigger"][data-active]');
+    if (!active)
+        return;
+    const overflow = list.scrollWidth - list.clientWidth;
+    // Nothing to scroll. Without this the clamp below would still land on 0, but
+    // writing scrollLeft on a strip that does not overflow is a mutation with no
+    // meaning, and a test cannot tell it apart from the real thing.
+    if (overflow <= 0)
+        return;
+    const centred = active.offsetLeft - (list.clientWidth - active.offsetWidth) / 2;
+    list.scrollLeft = Math.max(0, Math.min(centred, overflow));
+}
+/**
+ * `useLayoutEffect` on the client so the strip is already scrolled on the first
+ * paint, `useEffect` on the server so React does not warn about a layout effect
+ * in a render that has no layout. Assigned once at module scope rather than
+ * chosen per render, so the hook order never changes.
+ */
+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 }));
 }
@@ -11,17 +73,82 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center jus
         variant: {
             default: "bg-muted",
             line: "gap-1 bg-transparent",
+            // No track, no wrap, one row. `relative` is load-bearing rather than
+            // cosmetic: it makes the list the offsetParent of its chips, which is
+            // what `scrollActiveTabIntoView` measures against.
+            //
+            // py-1 is the focus ring's room. `overflow-x: auto` computes overflow-y
+            // to auto as well, so a ring drawn outside the strip's box would either
+            // be clipped or produce a vertical scrollbar; 4px of padding is more
+            // than the 3px ring needs.
+            //
+            // `p-0` before it, and it is not redundant. tailwind-merge's padding
+            // conflicts are one-directional: a later `px-*` does NOT remove an
+            // earlier `p-*`, so the base's `p-[3px]` would have survived into the
+            // strip and left it with a 3px inline gutter that no class in this
+            // string mentions.
+            //
+            // The scrollbar is hidden in both dialects because a always-visible
+            // scrollbar under a 34px chip row is most of a second row's height.
+            // 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",
         },
     },
     defaultVariants: {
         variant: "default",
     },
 });
-function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+function TabsList({ className, variant = "default", ref, ...props }) {
+    const list = React.useRef(null);
+    useIsoLayoutEffect(() => {
+        // Only the variant that scrolls. `default` and `line` are `w-fit` and have
+        // no scroll port, so this would be a measurement of nothing — and running
+        // it anyway is how a variant that was supposed to be untouched acquires
+        // behaviour.
+        if (variant !== "pill")
+            return;
+        scrollActiveTabIntoView(list.current);
+    }, [variant]);
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, 
+        // Merged rather than replaced. Base UI forwards the ref to the real
+        // element, so taking it for the scroll would otherwise silently drop a
+        // consumer's own ref, and a dropped ref fails at THEIR call site.
+        ref: (node) => {
+            list.current = node;
+            if (typeof ref === "function") {
+                const cleanup = ref(node);
+                return typeof cleanup === "function" ? cleanup : undefined;
+            }
+            if (ref)
+                ref.current = node;
+        }, 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", "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 }));
+    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", 
+        // THE PILL CHIP (ui#256).
+        //
+        // Every rule is scoped to the list's variant rather than added to the
+        // base string, which is what keeps `default` and `line` byte-identical
+        // to what they rendered before. The prefixed selector also carries
+        // higher specificity than the unprefixed base rules it has to beat
+        // (`flex-1`, `rounded-md`, `text-foreground/60`, and the
+        // `data-active:bg-background` line above), which is the same mechanism
+        // `line` already uses. tailwind-merge cannot collapse the two, because a
+        // prefixed utility and a bare one are different groups to it.
+        //
+        // flex-none over the base's flex-1: a chip is as wide as its words. Four
+        // equal chips would compress "Scheduled jobs" and leave "Logs" swimming.
+        "group-data-[variant=pill]/tabs-list:h-auto group-data-[variant=pill]/tabs-list:flex-none group-data-[variant=pill]/tabs-list:shrink-0 group-data-[variant=pill]/tabs-list:rounded-pill group-data-[variant=pill]/tabs-list:border-hairline group-data-[variant=pill]/tabs-list:bg-card group-data-[variant=pill]/tabs-list:px-3 group-data-[variant=pill]/tabs-list:py-1.5 group-data-[variant=pill]/tabs-list:text-caption group-data-[variant=pill]/tabs-list:font-medium group-data-[variant=pill]/tabs-list:text-body", 
+        // The active chip is self-contained: its own ground AND its own text,
+        // which is `SideNavItem`'s decision and its measured numbers. The tint
+        // under the brand purple is one pair of values on the page, on the panel
+        // and on ink, held at 5.02:1 by
+        // `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 }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("flex-1 text-body-sm outline-none", 
@@ -34,5 +161,5 @@ function TabsContent({ className, ...props }) {
         // passes through.
         "focus-visible:ring-3 focus-visible:ring-ring", className), ...props }));
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, scrollActiveTabIntoView };
 //# sourceMappingURL=tabs.js.map

package/dist/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,MAAM,sBACE,WAAW,EAC7B,SAAS,EAAE,EAAE,CACX,gDAAgD,EAChD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,GAAG,CAC1B,yOAAyO,EACzO;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,sBAAsB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AAED,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACyD;IACjE,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,WAAW,kBACP,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA2B;IACnE,OAAO,CACL,KAAC,aAAa,CAAC,GAAG,iBACN,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,81BAA81B,EAC91B,+PAA+P,EAC/P,mJAAmJ,EACnJ,sYAAsY,EACtY,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B;IACrE,OAAO,CACL,KAAC,aAAa,CAAC,KAAK,iBACR,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,kCAAkC;QAClC,wEAAwE;QACxE,uEAAuE;QACvE,sEAAsE;QACtE,uEAAuE;QACvE,oEAAoE;QACpE,qEAAqE;QACrE,kBAAkB;QAClB,8CAA8C,EAC9C,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}
+{"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.29.0",
+  "version": "0.29.2",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",