@robr0/design-system 0.4.0 → 0.6.0

package/components/SourceChip/SourceChip.css

@@ -0,0 +1,102 @@
+/* ============================================
+   SOURCE CHIP COMPONENT
+   Numbered citation pill linking a claim to
+   its source. Anchor when href is set, plain
+   span otherwise.
+   ============================================ */
+
+.ds-source-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs); /* 4px */
+
+  /* Spacing */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+
+  /* Shape — borderless pill on the secondary container */
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+
+  /* Typography */
+  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);
+  color: var(--color-text-secondary);
+
+  /* The pill shape is the affordance — never an underline */
+  text-decoration: none;
+  cursor: default;
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* ============================================
+   INDEX — citation numeral in its own circle
+   ============================================ */
+
+.ds-source-chip__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-tertiary);
+
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   ICON (leading, when no index)
+   ============================================ */
+
+.ds-source-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   TITLE — truncates with an ellipsis
+   ============================================ */
+
+.ds-source-chip__title {
+  max-width: 24ch;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ============================================
+   LINK (rendered as <a>)
+   ============================================ */
+
+.ds-source-chip--link {
+  cursor: pointer;
+}
+
+.ds-source-chip--link:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-source-chip--link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/SourceChip/SourceChip.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by SourceChip itself — everything else falls through to the root element. */
+type SourceChipOwnProps = {
+    /** The source name, e.g. "Design tokens quarterly". Truncates with an ellipsis when long. */
+    title: string;
+    /** Citation number, rendered as a leading numeral in its own small badge circle. */
+    index?: number;
+    /**
+     * Leading icon — a Material Symbol name (string) or custom element (ReactNode).
+     * The icon and the index share the leading slot: when both are passed, `index` wins
+     * and the icon is not rendered.
+     */
+    icon?: string | React.ReactNode;
+    /** Optional href — renders as an `<a>` instead of a `<span>`. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceChipProps extends SourceChipOwnProps, Omit<React.ComponentPropsWithoutRef<'a'>, keyof SourceChipOwnProps> {
+}
+/**
+ * SourceChip is the numbered citation pill linking a claim to its source.
+ * It renders inline after a sentence or in a sources row under an assistant
+ * chat message: a leading citation number (or icon) beside a truncating
+ * source title.
+ *
+ * Renders an `<a>` when `href` is supplied, a plain `<span>` otherwise.
+ * Forwards a ref to whichever element it renders, and spreads unrecognised
+ * props onto it — `target` and `rel` pass through as native anchor attributes.
+ */
+export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+export {};

package/components/SourceChip/SourceChip.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./SourceChip.css";
+import "../../fonts/material-symbols.css";
+const SourceChip = React.forwardRef(
+  ({ title, index, icon, href, className = "", ...rest }, ref) => {
+    const baseClass = "ds-source-chip";
+    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
+    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        children: content
+      }
+    );
+  }
+);
+SourceChip.displayName = "SourceChip";
+export {
+  SourceChip
+};

package/components/Stat/Stat.css

@@ -66,11 +66,11 @@
 }
 
 .ds-stat__delta--up {
-  color: var(--color-status-positive-text);
+  color: var(--color-core-accent-mint);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-status-error-text);
+  color: var(--color-core-accent-coral);
 }
 
 .ds-stat__delta--neutral {

package/components/Timeline/Timeline.css

@@ -332,8 +332,16 @@
   bottom: calc(8px - var(--gap-lg)); /* stop 8px above the next logo */
 }
 
-/* Last entry has no following logo — stop the bar at its own content */
+/* Last entry has no following logo — the bar runs to its own content's end
+   and fades out: the hairline treatment (1px, dissolving to the transparent
+   container colour) that marks the end of the timeline. */
 .ds-timeline--company .ds-timeline__item:last-child::before {
   display: block;
   bottom: 0;
+  width: var(--border-xs);
+  background: linear-gradient(
+    to bottom,
+    var(--color-divider),
+    var(--color-bg-container-primary-transparent)
+  );
 }

package/components/ToolCall/ToolCall.css

@@ -72,11 +72,11 @@
   --icon-size: var(--icon-size-sm);
 }
 
-/* The tool name is an identifier, so it takes the same monospace
-   context CodeBlock uses — the one place the system leaves Nunito Sans */
+/* The tool name is an identifier, so it takes the code stack —
+   the one place the system leaves Nunito Sans */
 .ds-tool-call__name {
   flex: none;
-  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-family-code);
   font-size: var(--font-paragraph-sm-size);
   line-height: var(--font-paragraph-sm-line-height);
   color: var(--color-text-primary);

package/components/registry.json

@@ -28,6 +28,14 @@
       "category": "ai",
       "client": true
     },
+    {
+      "name": "AiButton",
+      "label": "AI button",
+      "slug": "ai-button",
+      "description": "The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Alert",
       "label": "Alert",
@@ -124,6 +132,38 @@
       "category": "charts",
       "client": false
     },
+    {
+      "name": "ChatHeader",
+      "label": "Chat header",
+      "slug": "chat-header",
+      "description": "The top row of a chat surface, with the conversation title and its controls.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMarker",
+      "label": "Chat marker",
+      "slug": "chat-marker",
+      "description": "An inline conversation separator for date breaks and system notes.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMessage",
+      "label": "Chat message",
+      "slug": "chat-message",
+      "description": "A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatThread",
+      "label": "Chat thread",
+      "slug": "chat-thread",
+      "description": "A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Checkbox",
       "label": "Checkbox",
@@ -180,6 +220,14 @@
       "category": "overlays",
       "client": true
     },
+    {
+      "name": "Composer",
+      "label": "Composer",
+      "slug": "composer",
+      "description": "An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "ContactCard",
       "label": "Contact card",
@@ -236,6 +284,14 @@
       "category": "layout",
       "client": false
     },
+    {
+      "name": "DocumentChip",
+      "label": "Document chip",
+      "slug": "document-chip",
+      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Drawer",
       "label": "Drawer",
@@ -316,6 +372,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "InterruptCard",
+      "label": "Interrupt card",
+      "slug": "interrupt-card",
+      "description": "A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Kbd",
       "label": "Kbd",
@@ -332,14 +396,38 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MessageActions",
+      "label": "Message actions",
+      "slug": "message-actions",
+      "description": "An icon-button row for message-level actions like copy, retry, and feedback.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "MessageCard",
+      "label": "Message card",
+      "slug": "message-card",
+      "description": "A structured rich-content card embedded in a chat message, with media, title, body, and actions.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Nav",
       "label": "Navigation",
       "slug": "navigation",
-      "description": "Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.",
+      "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
       "category": "navigation",
       "client": false
     },
+    {
+      "name": "NavList",
+      "label": "Nav list",
+      "slug": "nav-list",
+      "description": "Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.",
+      "category": "navigation",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -364,6 +452,22 @@
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "PromptSuggestions",
+      "label": "Prompt suggestions",
+      "slug": "prompt-suggestions",
+      "description": "A horizontal row of tappable prompt suggestions to start or steer a conversation.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "Prose",
+      "label": "Prose",
+      "slug": "prose",
+      "description": "Token-styled typography for rendered markdown and rich agent output.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Quote",
       "label": "Quote",
@@ -428,6 +532,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "SourceChip",
+      "label": "Source chip",
+      "slug": "source-chip",
+      "description": "A numbered citation pill linking a claim to its source.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Spinner",
       "label": "Spinner",

package/components/registry.json.d.ts

@@ -28,6 +28,14 @@ declare const _default: {
       "category": "ai",
       "client": true
     },
+    {
+      "name": "AiButton",
+      "label": "AI button",
+      "slug": "ai-button",
+      "description": "The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Alert",
       "label": "Alert",
@@ -124,6 +132,38 @@ declare const _default: {
       "category": "charts",
       "client": false
     },
+    {
+      "name": "ChatHeader",
+      "label": "Chat header",
+      "slug": "chat-header",
+      "description": "The top row of a chat surface, with the conversation title and its controls.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMarker",
+      "label": "Chat marker",
+      "slug": "chat-marker",
+      "description": "An inline conversation separator for date breaks and system notes.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMessage",
+      "label": "Chat message",
+      "slug": "chat-message",
+      "description": "A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatThread",
+      "label": "Chat thread",
+      "slug": "chat-thread",
+      "description": "A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Checkbox",
       "label": "Checkbox",
@@ -180,6 +220,14 @@ declare const _default: {
       "category": "overlays",
       "client": true
     },
+    {
+      "name": "Composer",
+      "label": "Composer",
+      "slug": "composer",
+      "description": "An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "ContactCard",
       "label": "Contact card",
@@ -236,6 +284,14 @@ declare const _default: {
       "category": "layout",
       "client": false
     },
+    {
+      "name": "DocumentChip",
+      "label": "Document chip",
+      "slug": "document-chip",
+      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Drawer",
       "label": "Drawer",
@@ -316,6 +372,14 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "InterruptCard",
+      "label": "Interrupt card",
+      "slug": "interrupt-card",
+      "description": "A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Kbd",
       "label": "Kbd",
@@ -332,14 +396,38 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MessageActions",
+      "label": "Message actions",
+      "slug": "message-actions",
+      "description": "An icon-button row for message-level actions like copy, retry, and feedback.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "MessageCard",
+      "label": "Message card",
+      "slug": "message-card",
+      "description": "A structured rich-content card embedded in a chat message, with media, title, body, and actions.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Nav",
       "label": "Navigation",
       "slug": "navigation",
-      "description": "Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.",
+      "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
       "category": "navigation",
       "client": false
     },
+    {
+      "name": "NavList",
+      "label": "Nav list",
+      "slug": "nav-list",
+      "description": "Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.",
+      "category": "navigation",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -364,6 +452,22 @@ declare const _default: {
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "PromptSuggestions",
+      "label": "Prompt suggestions",
+      "slug": "prompt-suggestions",
+      "description": "A horizontal row of tappable prompt suggestions to start or steer a conversation.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "Prose",
+      "label": "Prose",
+      "slug": "prose",
+      "description": "Token-styled typography for rendered markdown and rich agent output.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Quote",
       "label": "Quote",
@@ -428,6 +532,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "SourceChip",
+      "label": "Source chip",
+      "slug": "source-chip",
+      "description": "A numbered citation pill linking a claim to its source.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Spinner",
       "label": "Spinner",