@robr0/design-system 0.13.0 → 0.15.0

package/components/Rating/Rating.css

@@ -0,0 +1,74 @@
+/* ============================================
+   RATING COMPONENT
+   Star-scale rating control
+   ============================================ */
+
+.ds-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   STEPS
+   ============================================ */
+
+.ds-rating__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  border-radius: var(--radius-xs);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-rating__icon {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-rating--compact .ds-rating__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-rating__step--filled {
+  color: var(--color-core-accent-gold);
+}
+
+.ds-rating__step--filled .ds-rating__icon {
+  --material-symbols-fill: 1;
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.ds-rating__step:hover {
+  transform: scale(1.1);
+}
+
+.ds-rating__step:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-rating--read-only .ds-rating__step {
+  cursor: default;
+}
+
+.ds-rating--read-only .ds-rating__step:hover {
+  transform: none;
+}
+
+.ds-rating--disabled .ds-rating__step {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-rating--disabled .ds-rating__step:hover {
+  transform: none;
+}

package/components/Rating/Rating.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by Rating itself — everything else falls through to the root node. */
+type RatingOwnProps = {
+    /** Current rating (controlled). 0 means no rating. */
+    value?: number;
+    /** Initial rating for uncontrolled use. 0 means no rating. */
+    defaultValue?: number;
+    /** Number of steps on the scale */
+    max?: number;
+    /**
+     * Convenience callback receiving the new rating directly.
+     * Fires on every selection, including a clear back to 0 via `allowClear`.
+     */
+    onValueChange?: (value: number) => void;
+    /** Display-only mode — renders the current rating with no interaction */
+    readOnly?: boolean;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Selecting the already-selected step clears the rating back to 0 */
+    allowClear?: boolean;
+    /** Material Symbol drawn for each step */
+    icon?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Accessible name for the group, and the base of each step's label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface RatingProps extends RatingOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RatingOwnProps> {
+}
+/**
+ * Star-scale rating control. Behaves as a radio group: each step is a
+ * `role="radio"` button, arrow keys move the selection, and the current
+ * step holds the roving tab stop. `readOnly` renders the same row as a
+ * static image with a spoken "N out of M" label.
+ *
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Rating/Rating.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Rating.css";
+import "../../fonts/material-symbols.css";
+const Rating = React.forwardRef(
+  ({
+    value,
+    defaultValue = 0,
+    max = 5,
+    onValueChange,
+    readOnly = false,
+    disabled = false,
+    allowClear = false,
+    icon = "star",
+    size = "default",
+    label = "Rating",
+    className = "",
+    ...rest
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(0);
+    const baseClass = "ds-rating";
+    const currentValue = value ?? internalValue;
+    const displayValue = !readOnly && !disabled && hoverValue > 0 ? hoverValue : currentValue;
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      readOnly ? `${baseClass}--read-only` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const setValue = (next) => {
+      const resolved = allowClear && next === currentValue ? 0 : next;
+      if (value === void 0) setInternalValue(resolved);
+      onValueChange?.(resolved);
+    };
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(max, currentValue + 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(1, currentValue - 1);
+          break;
+        case "Home":
+          next = 1;
+          break;
+        case "End":
+          next = max;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        if (value === void 0) setInternalValue(next);
+        onValueChange?.(next);
+        const steps2 = event.currentTarget.querySelectorAll('[role="radio"]');
+        steps2[next - 1]?.focus();
+      }
+    };
+    const steps = Array.from({ length: max }, (_, i) => i + 1);
+    if (readOnly) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          role: "img",
+          "aria-label": rest["aria-label"] ?? `${label}: ${currentValue} out of ${max}`,
+          children: steps.map((step) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, children: icon })
+            },
+            step
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "radiogroup",
+        "aria-label": rest["aria-label"] ?? label,
+        "aria-disabled": disabled || void 0,
+        onKeyDown: disabled ? void 0 : handleKeyDown,
+        onMouseLeave: () => setHoverValue(0),
+        children: steps.map((step) => {
+          const checked = step === currentValue;
+          const tabStop = checked || currentValue === 0 && step === 1;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": label ? `${label}: ${step} out of ${max}` : `${step} out of ${max}`,
+              tabIndex: tabStop ? 0 : -1,
+              disabled,
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              onClick: () => setValue(step),
+              onMouseEnter: () => setHoverValue(step),
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon })
+            },
+            step
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+export {
+  Rating
+};

package/components/SegmentedControl/SegmentedControl.css

@@ -92,6 +92,29 @@
   background-color: var(--color-action-primary-bg-hover);
 }
 
+/* ============================================
+   NEUTRAL VARIANT
+   The active pill fills grey instead of the
+   action teal — for sets where the selection
+   should not carry the action colour's weight.
+   ============================================ */
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active {
+  background-color: var(--color-action-neutral-bg);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__label {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active:hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
 /* ============================================
    DISABLED STATE
    ============================================ */

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -18,6 +18,8 @@ export interface SegmentedControlProps {
     onSegmentChange?: (value: string) => void;
     /** Component size */
     size?: 'default' | 'compact';
+    /** Visual treatment of the active segment — teal by default, `neutral` fills it grey */
+    variant?: 'primary' | 'neutral';
     /** Full width — segments fill container */
     fullWidth?: boolean;
     /** Accessible label for the tablist */
@@ -30,4 +32,4 @@ export interface SegmentedControlProps {
  * A horizontal set of mutually exclusive options with a
  * pill-shaped active indicator. Supports icons and keyboard navigation.
  */
-export declare const SegmentedControl: ({ segments, activeSegment, onSegmentChange, size, fullWidth, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;
+export declare const SegmentedControl: ({ segments, activeSegment, onSegmentChange, size, variant, fullWidth, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;

package/components/SegmentedControl/SegmentedControl.js

@@ -8,15 +8,17 @@ const SegmentedControl = ({
   activeSegment,
   onSegmentChange,
   size = "default",
+  variant = "primary",
   fullWidth = false,
   ariaLabel,
   className = ""
 }) => {
   const baseClass = "ds-segmented-control";
   const sizeClass = `${baseClass}--${size}`;
+  const variantClass = `${baseClass}--${variant}`;
   const fullWidthClass = fullWidth ? `${baseClass}--full-width` : "";
   const containerRef = useRef(null);
-  const classes = [baseClass, sizeClass, fullWidthClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, sizeClass, variantClass, fullWidthClass, className].filter(Boolean).join(" ");
   const handleKeyDown = (e, idx) => {
     const enabledSegments = segments.filter((s) => !s.disabled);
     const currentEnabledIdx = enabledSegments.findIndex((s) => s.value === segments[idx].value);

package/components/Slider/Slider.css

@@ -21,7 +21,7 @@
   border-radius: var(--radius-full);
   outline: none;
   cursor: pointer;
-  background: var(--color-bg-container-secondary);
+  background: var(--color-bg-container-tertiary);
 }
 
 .ds-slider--compact .ds-slider__input {

package/components/Slider/Slider.js

@@ -44,7 +44,7 @@ const Slider = React.forwardRef(
         onChange: handleChange,
         "aria-label": ariaLabel || rest["aria-label"],
         style: {
-          background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-secondary) ${percentage}%)`,
+          background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-tertiary) ${percentage}%)`,
           ...style
         }
       }

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