@robr0/design-system 0.14.0 → 0.15.0

package/components/SourceTrail/SourceTrail.css

@@ -0,0 +1,209 @@
+/* ============================================
+   SOURCE TRAIL COMPONENT
+   The research trail under an agent's answer:
+   a count header with a disclosure over the
+   sources it opened, in order.
+
+   Shares the chat furniture's 24px shell with
+   ToolCall — a collapsed trail reads as one
+   more row in the run, not a different species.
+   ============================================ */
+
+.ds-source-trail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-source-trail__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  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);
+}
+
+.ds-source-trail__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-source-trail__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-source-trail__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.ds-source-trail__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-source-trail__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-source-trail__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-source-trail--open .ds-source-trail__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-source-trail__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-source-trail--open .ds-source-trail__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-source-trail__list {
+  overflow: hidden;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-source-trail--open .ds-source-trail__list {
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  gap: var(--gap-sm);
+}
+
+/* ============================================
+   ROWS
+   ============================================ */
+
+.ds-source-trail__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  min-width: 0;
+}
+
+/* Streaming: an appended row eases in. Pure CSS, so the global
+   reduced-motion guard collapses the duration tokens. */
+.ds-source-trail--streaming .ds-source-trail__row {
+  animation: ds-source-trail-enter var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+@keyframes ds-source-trail-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.ds-source-trail__row-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.ds-source-trail__row-indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-source-trail__row--pending .ds-source-trail__row-indicator {
+  color: var(--color-text-tertiary);
+}
+
+.ds-source-trail__row--active .ds-source-trail__row-indicator {
+  color: var(--color-status-info-text);
+}
+
+.ds-source-trail__row--done .ds-source-trail__row-indicator {
+  color: var(--color-status-positive-text);
+}
+
+/* A pending source has not been opened yet, so its chip sits quieter */
+.ds-source-trail__row--pending {
+  opacity: 0.6;
+}
+
+.ds-source-trail__detail {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+/* Screen-reader-only status text, matching AgentPlan's row announcement */
+.ds-source-trail__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Icons follow the state colour set on their parents, even against a
+   consumer stylesheet that colours .material-symbols-rounded globally.
+   The chevron is excluded — it carries its own colour rule, which this
+   higher-specificity rule would otherwise silently override. */
+.ds-source-trail .material-symbols-rounded:not(.ds-source-trail__chevron) {
+  color: inherit;
+}

package/components/SourceTrail/SourceTrail.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export type SourceTrailStatus = 'pending' | 'active' | 'done';
+/** One source the agent opened while answering. */
+export interface SourceTrailItem {
+    /** The source name, passed through to the row's SourceChip. */
+    title: string;
+    /** Optional link to the source — the chip renders as an anchor. */
+    href?: string;
+    /** Leading icon for the chip — a Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Where the visit has got to. Drives the row's indicator; defaults to done. */
+    status?: SourceTrailStatus;
+    /** Supporting line, e.g. what the source contributed to the answer. */
+    detail?: string;
+}
+/** Props owned by SourceTrail itself — everything else falls through to the root element. */
+type SourceTrailOwnProps = {
+    /** The sources, in the order the agent opened them. */
+    items: SourceTrailItem[];
+    /**
+     * Header text. Left unset, it is computed from the items —
+     * "Reading 3 sources" while any is still pending or active,
+     * "Read 3 sources" once every visit has settled.
+     */
+    title?: string;
+    /** Still researching: newly appended rows animate in. */
+    streaming?: boolean;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceTrailProps extends SourceTrailOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SourceTrailOwnProps> {
+}
+/**
+ * SourceTrail is the research trail under an agent's answer: the sources it
+ * opened, in order, each with a status and an optional note on what it
+ * contributed. SourceChip is the atom; this is the list — a count header
+ * with a disclosure, so a long trail collapses to one line.
+ *
+ * While `streaming`, appended rows animate in (pure CSS, so the global
+ * reduced-motion guard covers it) and the active row carries a spinner.
+ */
+export declare const SourceTrail: React.ForwardRefExoticComponent<SourceTrailProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/SourceTrail/SourceTrail.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { SourceChip } from "../SourceChip/SourceChip.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./SourceTrail.css";
+import "../../fonts/material-symbols.css";
+const STATUS_ICONS = {
+  pending: "circle",
+  done: "check_circle"
+};
+const STATUS_TEXT = {
+  pending: "Not opened yet",
+  active: "Reading now",
+  done: "Read"
+};
+const SourceTrail = React.forwardRef(
+  ({
+    items,
+    title,
+    streaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-source-trail";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const unsettled = items.some(
+      (item) => item.status === "pending" || item.status === "active"
+    );
+    const count = items.length;
+    const heading = title ?? (unsettled || streaming ? `Reading ${count} source${count === 1 ? "" : "s"}` : `Read ${count} source${count === 1 ? "" : "s"}`);
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: unsettled || streaming ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "travel_explore" }) }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__heading`, children: heading }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: items.map((item, index) => {
+            const status = item.status ?? "done";
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: `${baseClass}__row ${baseClass}__row--${status}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__row-indicator`, "aria-hidden": "true", children: status === "active" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+                  /* @__PURE__ */ jsx(
+                    SourceChip,
+                    {
+                      title: item.title,
+                      href: item.href,
+                      icon: item.icon,
+                      target: item.href ? "_blank" : void 0,
+                      rel: item.href ? "noopener noreferrer" : void 0
+                    }
+                  ),
+                  item.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: item.detail }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: STATUS_TEXT[status] })
+                ]
+              },
+              `${item.title}-${index}`
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+SourceTrail.displayName = "SourceTrail";
+export {
+  SourceTrail
+};

package/components/Sparkline/Sparkline.css

@@ -17,20 +17,44 @@
 
 /* Parts */
 
+/* The line draws itself on mount, the way the recharts lines do: the path is
+   normalised to 100 dash units (pathLength on the SVG side), and the offset
+   retreats from fully hidden to zero. The fill and end dot fade in behind
+   and after it. All durations are tokens, so reduced motion collapses the
+   whole sequence to the finished state for free. */
+
 .ds-sparkline__line {
   fill: none;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
+  stroke-dasharray: 100;
+  animation: ds-sparkline-draw var(--motion-duration-slower) var(--motion-ease-emphasized);
 }
 
 .ds-sparkline__fill {
   fill: currentColor;
   opacity: 0.15;
+  animation: ds-sparkline-fade var(--motion-duration-slower) var(--motion-ease-standard);
 }
 
 .ds-sparkline__dot {
   fill: currentColor;
+  /* Waits out the draw, then pops in where the line ends. */
+  animation: ds-sparkline-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    var(--motion-duration-slower) backwards;
+}
+
+@keyframes ds-sparkline-draw {
+  from {
+    stroke-dashoffset: 100;
+  }
+}
+
+@keyframes ds-sparkline-fade {
+  from {
+    opacity: 0;
+  }
 }
 
 /* Tones */
@@ -40,11 +64,11 @@
 }
 
 .ds-sparkline--positive {
-  color: var(--color-status-positive-text);
+  color: var(--color-trend-up);
 }
 
 .ds-sparkline--negative {
-  color: var(--color-status-error-text);
+  color: var(--color-trend-down);
 }
 
 .ds-sparkline--neutral {

package/components/Sparkline/Sparkline.js

@@ -92,7 +92,8 @@ const Sparkline = React.forwardRef(
             {
               className: `${baseClass}__line`,
               d: linePath,
-              strokeWidth
+              strokeWidth,
+              pathLength: 100
             }
           ),
           showDot && lastPoint && /* @__PURE__ */ jsx(

package/components/Spinner/Spinner.css

@@ -39,7 +39,7 @@
 }
 
 .ds-spinner__track {
-  stroke: var(--color-bg-container-secondary);
+  stroke: var(--color-bg-container-tertiary);
 }
 
 .ds-spinner__arc {

package/components/SplitButton/SplitButton.d.ts

@@ -10,7 +10,7 @@ type SplitButtonOwnProps = {
     /** Menu entries for the alternative actions */
     items: DropdownMenuEntry[];
     /** Visual treatment, shared by both segments */
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'neutral';
     /** Component size */
     size?: 'default' | 'compact';
     /** Disables both segments */

package/components/SplitButton/SplitButton.js

@@ -49,6 +49,7 @@ const SplitButton = React.forwardRef(
             {
               className: `${baseClass}__trigger`,
               icon: "keyboard_arrow_down",
+              tooltip: false,
               ariaLabel: menuLabel,
               variant,
               size,

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);
+}