@robr0/design-system 0.13.0 → 0.15.0

package/components/ToggleGroup/ToggleGroup.css

@@ -62,6 +62,23 @@
   color: var(--color-action-primary-text);
 }
 
+/* ============================================
+   NEUTRAL VARIANT
+   Active items fill grey instead of the action
+   teal — for sets where the selection should
+   not carry the action colour's weight.
+   ============================================ */
+
+.ds-toggle-group--neutral .ds-toggle-group__item--active {
+  background-color: var(--color-action-neutral-bg);
+  color: var(--color-action-neutral-text);
+}
+
+.ds-toggle-group--neutral .ds-toggle-group__item--active:hover {
+  background-color: var(--color-action-neutral-bg-hover);
+  color: var(--color-action-neutral-text);
+}
+
 /* ============================================
    COMPACT
    ============================================ */

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -17,6 +17,8 @@ type ToggleGroupOwnProps = {
     multiple?: boolean;
     /** Component size */
     size?: 'default' | 'compact';
+    /** Visual treatment of active items — teal by default, `neutral` fills them grey */
+    variant?: 'primary' | 'neutral';
     /** Whether the whole group is disabled */
     disabled?: boolean;
     /** Called with the next selection — a string when single, an array when `multiple` */

package/components/ToggleGroup/ToggleGroup.js

@@ -8,6 +8,7 @@ const ToggleGroup = React.forwardRef(
     value = [],
     multiple = false,
     size = "default",
+    variant = "primary",
     disabled = false,
     onValueChange,
     onChange,
@@ -19,6 +20,7 @@ const ToggleGroup = React.forwardRef(
     const classes = [
       baseClass,
       `${baseClass}--${size}`,
+      `${baseClass}--${variant}`,
       disabled ? `${baseClass}--disabled` : "",
       className
     ].filter(Boolean).join(" ");

package/components/ToolCall/ToolCall.css

@@ -40,6 +40,9 @@
   padding: var(--padding-sm) var(--padding-lg);
   background: none;
   border: none;
+  /* Buttons default to the UA's buttontext, not the inherited colour, so
+     anything in the header that inherits would read black in both themes. */
+  color: var(--color-text-primary);
   text-align: left;
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
@@ -215,7 +218,9 @@
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would
    otherwise override inheritance and detach the icon from the state
-   colours this component sets on its parents. */
-.ds-tool-call .material-symbols-rounded {
+   colours this component sets on its parents. The chevron is excluded —
+   it is the one icon that carries its own colour rule, which this
+   higher-specificity rule would otherwise silently override. */
+.ds-tool-call .material-symbols-rounded:not(.ds-tool-call__chevron) {
   color: inherit;
 }

package/components/Tooltip/Tooltip.css

@@ -17,8 +17,14 @@
   z-index: 50;
   padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
   border-radius: var(--radius-xs); /* 4px */
-  background-color: var(--color-bg-container-inverse);
-  color: var(--color-text-on-inverse);
+  /* The floating surface, same recipe as Popover: page background (the
+     container fill is semi-transparent), hairline border, floating shadow.
+     Same-polarity in both themes — light bubble on light, dark on dark —
+     softer than the old inverse fill. */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  background-color: var(--color-bg-page-primary);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-floating);
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-paragraph-sm-weight);
@@ -85,38 +91,49 @@
    ARROW
    ============================================ */
 
+/* The arrow is a rotated square in the panel's fill. It overlaps the panel
+   by a pixel more than before so its opaque fill covers the panel border
+   behind it, and draws the hairline itself on its two outward edges only. */
 .ds-tooltip__arrow {
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--color-bg-container-inverse);
+  background-color: var(--color-bg-page-primary);
   transform: rotate(45deg);
 }
 
 /* Arrow — top position (arrow points down) */
 .ds-tooltip__panel--top .ds-tooltip__arrow {
-  bottom: -4px;
+  bottom: -5px;
   left: 50%;
   margin-left: -4px;
+  border-right: var(--border-xs) solid var(--color-bg-container-border);
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — bottom position (arrow points up) */
 .ds-tooltip__panel--bottom .ds-tooltip__arrow {
-  top: -4px;
+  top: -5px;
   left: 50%;
   margin-left: -4px;
+  border-top: var(--border-xs) solid var(--color-bg-container-border);
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — left position (arrow points right) */
 .ds-tooltip__panel--left .ds-tooltip__arrow {
-  right: -4px;
+  right: -5px;
   top: 50%;
   margin-top: -4px;
+  border-top: var(--border-xs) solid var(--color-bg-container-border);
+  border-right: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — right position (arrow points left) */
 .ds-tooltip__panel--right .ds-tooltip__arrow {
-  left: -4px;
+  left: -5px;
   top: 50%;
   margin-top: -4px;
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
 }

package/components/Tooltip/Tooltip.d.ts

@@ -16,6 +16,7 @@ export interface TooltipProps {
 /**
  * Tooltip component for contextual text labels.
  * Appears on hover or focus with a short delay.
- * Uses inverted colours (dark background in light theme).
+ * Rides the system's floating surface — page background, hairline border,
+ * floating shadow — so the bubble stays light in light theme and dark in dark.
  */
 export declare const Tooltip: ({ children, content, position, showDelay, hideDelay, className, }: TooltipProps) => import("react").JSX.Element;

package/components/UsageCard/UsageCard.css

@@ -0,0 +1,30 @@
+/* ============================================
+   USAGE CARD COMPONENT
+   An agent's budgets at a glance — meter rows
+   with reset captions, in the chart card chrome
+   ============================================ */
+
+/* Base — the card chrome itself comes from ds-chart */
+
+.ds-usage-card__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-usage-card__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+}
+
+/* Reset caption — sits under the bar's trailing edge */
+
+.ds-usage-card__reset {
+  align-self: flex-end;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+}

package/components/UsageCard/UsageCard.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+/** One budgeted quantity in the card — a meter row with an optional reset caption. */
+export interface UsageItem {
+    /** What is being budgeted, e.g. the context window or a weekly limit */
+    label: string;
+    /** Current level */
+    value: number;
+    /** Upper bound of the budget; defaults to 100 */
+    max?: number;
+    /** Readout override replacing the default percentage, e.g. a token count */
+    valueText?: string;
+    /** Caption under the bar's trailing edge, e.g. when the limit resets */
+    resetLabel?: string;
+    /** Status override; left unset, the fill recolours through the card's thresholds */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+}
+/** Props owned by UsageCard itself — everything else falls through to the root node. */
+type UsageCardOwnProps = {
+    /** The budgets to show, one meter row each */
+    items: UsageItem[];
+    /** Card title in the shared chart-chrome header */
+    title?: string;
+    /** Supporting line under the title */
+    subtitle?: string;
+    /** Fractions of an item's max where its fill recolours to warning and then error */
+    thresholds?: {
+        warning?: number;
+        error?: number;
+    };
+    /** Chrome off (no border, padding, or fill) for use inside a panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface UsageCardProps extends UsageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof UsageCardOwnProps> {
+}
+/**
+ * An agent's budgets at a glance — the context window plus any number of
+ * plan or rate limits, one Meter row each, with reset captions. Wears the
+ * chart family's card chrome and takes `bare` for use inside a panel.
+ *
+ * Each fill recolours as its level crosses the card's thresholds (info
+ * until warning, then warning, then error), mirroring Gauge's threshold
+ * idea; an item's own `variant` overrides the derivation. Purely
+ * presentational (no 'use client'), so it renders from a Server Component.
+ */
+export declare const UsageCard: React.ForwardRefExoticComponent<UsageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/UsageCard/UsageCard.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Meter } from "../Meter/Meter.js";
+import "../Chart/Chart.css";
+import "./UsageCard.css";
+const DEFAULT_THRESHOLDS = { warning: 0.8, error: 0.95 };
+const UsageCard = React.forwardRef(
+  ({
+    items,
+    title,
+    subtitle,
+    thresholds,
+    bare = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-usage-card";
+    const limits = { ...DEFAULT_THRESHOLDS, ...thresholds };
+    const variantFor = (item) => {
+      if (item.variant) return item.variant;
+      const max = item.max ?? 100;
+      const fraction = max > 0 ? Math.max(0, Math.min(1, item.value / max)) : 0;
+      if (fraction >= limits.error) return "error";
+      if (fraction >= limits.warning) return "warning";
+      return "info";
+    };
+    const classes = [baseClass, "ds-chart", bare && "ds-chart--bare", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: "ds-chart__header", children: /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-text", children: [
+        title && /* @__PURE__ */ jsx("span", { className: "ds-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("span", { className: "ds-chart__subtitle", children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__item`, children: [
+        /* @__PURE__ */ jsx(
+          Meter,
+          {
+            label: item.label,
+            value: item.value,
+            max: item.max ?? 100,
+            valueText: item.valueText,
+            showValue: true,
+            variant: variantFor(item),
+            size: "compact"
+          }
+        ),
+        item.resetLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__reset`, children: item.resetLabel })
+      ] }, `${item.label}-${index}`)) })
+    ] });
+  }
+);
+UsageCard.displayName = "UsageCard";
+export {
+  UsageCard
+};

package/components/registry.d.ts

@@ -18,8 +18,12 @@
  *               deliberately false so consumers can render them from a React
  *               Server Component.
  *   folder      set only when the implementation lives in a shared folder
- *               rather than one named after the component — the nine chart
- *               components all live in Chart/. Omitted everywhere else.
+ *               rather than one named after the component — the recharts
+ *               wrapper set lives in Chart/. Omitted everywhere else.
+ *   recharts    true when the component's module imports recharts, so it
+ *               exports from the charts barrel rather than the main one
+ *               (recharts is an optional peer). Held to the actual imports
+ *               by scripts/generate-library-barrel.mjs on every build.
  *
  * `docOnlyHelpers` names the internal documentation helpers that are
  * deliberately excluded from the public count.
@@ -47,6 +51,8 @@ export interface ComponentMeta {
     client: boolean;
     /** Folder under src/components when it differs from `name` (shared folders like Chart) */
     folder?: string;
+    /** True when the module imports recharts and so exports from the charts barrel, not the main one */
+    recharts?: boolean;
 }
 export interface ComponentCategoryMeta {
     /** Category id — the value each component's `category` field carries, and the website route segment under /components */

package/components/registry.json

@@ -137,7 +137,8 @@
       "description": "Filled area chart for showing volume over time, with stacked and single-series variants.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "Avatar",
@@ -163,6 +164,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "Banner",
+      "label": "Banner",
+      "slug": "banner",
+      "description": "Full-width status strip for page-level announcements, with an action slot and optional dismissal.",
+      "category": "feedback",
+      "client": false
+    },
     {
       "name": "BarChart",
       "label": "Bar chart",
@@ -170,7 +179,8 @@
       "description": "Vertical bars for comparing values across categories or time, with summary stats and tooltips.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "Breadcrumb",
@@ -184,7 +194,7 @@
       "name": "Button",
       "label": "Button",
       "slug": "button",
-      "description": "Primary and secondary button variants in default and compact sizes, with icon support and multiple states.",
+      "description": "Primary, secondary, tertiary, neutral and destructive variants in default and compact sizes, with icon support and multiple states.",
       "category": "actions",
       "client": true
     },
@@ -272,7 +282,7 @@
       "name": "CircularButton",
       "label": "Circular button",
       "slug": "circular-button",
-      "description": "Round icon button with primary and secondary variants, default and compact sizes.",
+      "description": "Round icon button with primary, secondary, tertiary and neutral variants, default and compact sizes.",
       "category": "actions",
       "client": false
     },
@@ -307,7 +317,8 @@
       "description": "Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "Combobox",
@@ -489,9 +500,10 @@
       "name": "FunnelChart",
       "label": "Funnel chart",
       "slug": "funnel-chart",
-      "description": "Ordered funnel stages as stepped bars with conversion percentages, each sized by its share of the first stage.",
+      "description": "Ordered funnel stages as centred trapezoid bands, each sized by its share of the first stage.",
       "category": "charts",
-      "client": false
+      "client": false,
+      "recharts": true
     },
     {
       "name": "Gauge",
@@ -509,6 +521,22 @@
       "category": "maps",
       "client": true
     },
+    {
+      "name": "HoverCard",
+      "label": "Hover card",
+      "slug": "hover-card",
+      "description": "Rich preview panel that opens from hover or focus, with interactive content and position options.",
+      "category": "overlays",
+      "client": true
+    },
+    {
+      "name": "ImageCompare",
+      "label": "Image compare",
+      "slug": "image-compare",
+      "description": "Before-and-after image comparison with a draggable divider, keyboard control, and corner labels.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Input",
       "label": "Input",
@@ -556,7 +584,8 @@
       "description": "Multi-series line chart for trends over time, with per-series colours and a summary row.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "LinkList",
@@ -598,6 +627,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Meter",
+      "label": "Meter",
+      "slug": "meter",
+      "description": "Level indicator for a known quantity, with a status-coloured fill and an optional value readout.",
+      "category": "feedback",
+      "client": false
+    },
     {
       "name": "ModelPicker",
       "label": "Model picker",
@@ -661,7 +698,8 @@
       "description": "Proportional share of a whole as a pie or donut, with per-slice colours.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "PinInput",
@@ -718,7 +756,8 @@
       "description": "Multi-axis comparison of series across categories on a radial grid.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "RadialChart",
@@ -727,7 +766,8 @@
       "description": "Concentric progress rings for completion and KPI readouts.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "RadioButton",
@@ -737,6 +777,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "Rating",
+      "label": "Rating",
+      "slug": "rating",
+      "description": "Star-scale rating control with keyboard selection, a read-only mode, and a configurable icon.",
+      "category": "forms",
+      "client": true
+    },
     {
       "name": "Reasoning",
       "label": "Reasoning",
@@ -752,7 +800,8 @@
       "description": "Plots point clusters across two axes to show correlation and distribution.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "SectionTitle",
@@ -810,6 +859,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "SourceTrail",
+      "label": "Source trail",
+      "slug": "source-trail",
+      "description": "The sources an agent opened while answering, as a collapsible list with per-item status.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Sparkline",
       "label": "Sparkline",
@@ -826,6 +883,14 @@
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "SplitButton",
+      "label": "Split button",
+      "slug": "split-button",
+      "description": "Primary action with an attached menu of alternatives, composing Button and DropdownMenu in one pill.",
+      "category": "actions",
+      "client": false
+    },
     {
       "name": "SplitPane",
       "label": "Split pane",
@@ -841,7 +906,8 @@
       "description": "Bars split into stacked segments to compare totals and their composition.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
     },
     {
       "name": "Stat",
@@ -978,7 +1044,16 @@
       "description": "Nested rectangles sized by value for part-to-whole breakdowns.",
       "category": "charts",
       "client": false,
-      "folder": "Chart"
+      "folder": "Chart",
+      "recharts": true
+    },
+    {
+      "name": "UsageCard",
+      "label": "Usage card",
+      "slug": "usage-card",
+      "description": "An agent's budgets at a glance: context window and plan limits as meter rows with reset captions.",
+      "category": "ai",
+      "client": false
     }
   ],
   "docOnlyHelpers": [