@robr0/design-system 0.9.0 → 0.11.0

package/components/CardStack/CardStack.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback } from "react";
+import "./CardStack.css";
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]';
+const NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown", " ", "Enter"]);
+const PREV_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const CardStack = React.forwardRef(
+  ({
+    children,
+    index: indexProp,
+    defaultIndex = 0,
+    onIndexChange,
+    peek = 2,
+    loop = true,
+    advanceOnClick = true,
+    label,
+    className = "",
+    onClick,
+    onKeyDown,
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-card-stack";
+    const items = React.Children.toArray(children);
+    const count = items.length;
+    const isControlled = indexProp !== void 0;
+    const [innerIndex, setInnerIndex] = useState(defaultIndex);
+    const index = Math.max(0, Math.min(isControlled ? indexProp : innerIndex, count - 1));
+    const [leaving, setLeaving] = useState(false);
+    const [entering, setEntering] = useState(false);
+    const pendingRef = useRef(null);
+    const commit = useCallback(
+      (next2) => {
+        const normalized = (next2 % count + count) % count;
+        if (!isControlled) setInnerIndex(normalized);
+        onIndexChange?.(normalized);
+      },
+      [count, isControlled, onIndexChange]
+    );
+    const next = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index >= count - 1) return;
+      pendingRef.current = index + 1;
+      setLeaving(true);
+    }, [count, leaving, entering, loop, index]);
+    const prev = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index <= 0) return;
+      commit(index - 1);
+      setEntering(true);
+    }, [count, leaving, entering, loop, index, commit]);
+    const handleTopAnimationEnd = (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (leaving) {
+        setLeaving(false);
+        if (pendingRef.current !== null) commit(pendingRef.current);
+        pendingRef.current = null;
+      }
+      if (entering) setEntering(false);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      if (!advanceOnClick || e.defaultPrevented) return;
+      const target = e.target;
+      const control = target.closest(INTERACTIVE_SELECTOR);
+      if (control && control !== e.currentTarget) return;
+      next();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || e.target !== e.currentTarget) return;
+      if (NEXT_KEYS.has(e.key)) {
+        e.preventDefault();
+        next();
+      } else if (PREV_KEYS.has(e.key)) {
+        e.preventDefault();
+        prev();
+      }
+    };
+    const visiblePeek = Math.max(0, Math.min(peek, count - 1));
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "group",
+        "aria-roledescription": "card stack",
+        "aria-label": label,
+        tabIndex: count > 1 ? 0 : void 0,
+        style: { ...style, "--ds-card-stack-depth": visiblePeek },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          items.map((child, k) => {
+            const raw = k - index;
+            const pos = loop ? (raw % count + count) % count : raw;
+            const gone = pos < 0;
+            const buried = pos > visiblePeek;
+            const isTop = pos === 0;
+            const itemClasses = [
+              `${baseClass}__item`,
+              gone ? `${baseClass}__item--gone` : "",
+              buried ? `${baseClass}__item--buried` : "",
+              isTop && leaving ? `${baseClass}__item--leaving` : "",
+              isTop && entering ? `${baseClass}__item--entering` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: itemClasses,
+                style: {
+                  "--ds-card-stack-pos": gone ? 0 : Math.min(pos, visiblePeek),
+                  zIndex: count - pos
+                },
+                inert: !isTop || void 0,
+                "aria-hidden": !isTop || void 0,
+                onAnimationEnd: isTop ? handleTopAnimationEnd : void 0,
+                children: child
+              },
+              k
+            );
+          }),
+          count > 1 && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sr-only`, role: "status", children: [
+            "Card ",
+            index + 1,
+            " of ",
+            count
+          ] })
+        ]
+      }
+    );
+  }
+);
+CardStack.displayName = "CardStack";
+export {
+  CardStack
+};

package/components/Carousel/Carousel.css

@@ -110,3 +110,12 @@
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   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-carousel .material-symbols-rounded {
+  color: inherit;
+}

package/components/Carousel/Carousel.js

@@ -1,14 +1,23 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useSyncExternalStore, useRef, useCallback, useEffect } from "react";
+import { MOTION_AUTOPLAY_INTERVAL_MS } from "../../tokens/motion.js";
 import "./Carousel.css";
 import "../../fonts/material-symbols.css";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (callback) => {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerReducedMotion = () => false;
 const Carousel = ({
   children,
   showDots = true,
   showArrows = true,
   autoPlay = false,
-  autoPlayInterval = 5e3,
+  autoPlayInterval = MOTION_AUTOPLAY_INTERVAL_MS,
   loop = false,
   onSlideChange,
   className = ""
@@ -17,6 +26,11 @@ const Carousel = ({
   const slideCount = slides.length;
   const [activeIndex, setActiveIndex] = useState(0);
   const [paused, setPaused] = useState(false);
+  const reducedMotion = useSyncExternalStore(
+    subscribeReducedMotion,
+    getReducedMotion,
+    getServerReducedMotion
+  );
   const containerRef = useRef(null);
   const baseClass = "ds-carousel";
   const goTo = useCallback(
@@ -35,10 +49,10 @@ const Carousel = ({
   const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);
   const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
   useEffect(() => {
-    if (!autoPlay || paused || slideCount <= 1) return;
+    if (!autoPlay || paused || reducedMotion || slideCount <= 1) return;
     const interval = setInterval(goNext, autoPlayInterval);
     return () => clearInterval(interval);
-  }, [autoPlay, paused, autoPlayInterval, goNext, slideCount]);
+  }, [autoPlay, paused, reducedMotion, autoPlayInterval, goNext, slideCount]);
   const handleKeyDown = (e) => {
     if (e.key === "ArrowLeft") {
       e.preventDefault();
@@ -48,6 +62,21 @@ const Carousel = ({
       goNext();
     }
   };
+  const handleDotKeyDown = (e, index) => {
+    let target;
+    if (e.key === "ArrowRight") {
+      target = loop ? (index + 1) % slideCount : Math.min(index + 1, slideCount - 1);
+    } else if (e.key === "ArrowLeft") {
+      target = loop ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0);
+    }
+    if (target === void 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    goTo(target);
+    const dotList = e.target.parentElement;
+    const dots = dotList?.querySelectorAll(`.${baseClass}__dot`);
+    dots?.[target]?.focus();
+  };
   const canGoPrev = loop || activeIndex > 0;
   const canGoNext = loop || activeIndex < slideCount - 1;
   const containerClasses = [baseClass, className].filter(Boolean).join(" ");
@@ -59,6 +88,8 @@ const Carousel = ({
       ref: containerRef,
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
       onKeyDown: handleKeyDown,
       role: "region",
       "aria-roledescription": "carousel",
@@ -111,8 +142,10 @@ const Carousel = ({
           {
             className: `${baseClass}__dot${index === activeIndex ? ` ${baseClass}__dot--active` : ""}`,
             onClick: () => goTo(index),
+            onKeyDown: (e) => handleDotKeyDown(e, index),
             role: "tab",
             "aria-selected": index === activeIndex,
+            tabIndex: index === activeIndex ? 0 : -1,
             "aria-label": `Go to slide ${index + 1}`,
             type: "button"
           },

package/components/Chart/AreaChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Area, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -32,7 +33,7 @@ const AreaChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),
@@ -50,8 +51,8 @@ const AreaChart = ({
       ] }, i)) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx("defs", { children: series.map((s) => {
-        const color = s.color || defaultColor;
+      /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+        const color = s.color || seriesColors[i % seriesColors.length];
         return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
           /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
           /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
@@ -76,13 +77,13 @@ const AreaChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Area,
         {
           type: "monotone",
           dataKey: s.dataKey,
           name: s.label,
-          stroke: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
           strokeWidth: 2,
           fill: `url(#area-gradient-${s.dataKey})`,
           fillOpacity: s.fillOpacity ?? 1,

package/components/Chart/BarChart.js

@@ -37,7 +37,7 @@ const BarChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#118AB2");
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");

package/components/Chart/LineChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Line } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -31,7 +32,7 @@ const LineChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),
@@ -68,13 +69,13 @@ const LineChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Line,
         {
           type: "monotone",
           dataKey: s.dataKey,
           name: s.label,
-          stroke: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
           strokeWidth: 2,
           strokeDasharray: s.strokeDasharray,
           dot: false,

package/components/Chart/PieChart.js

@@ -1,21 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#118AB2"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -48,7 +35,7 @@ const PieChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/components/Chart/RadarChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Tooltip, Radar, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -31,7 +32,7 @@ const RadarChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),
@@ -66,13 +67,13 @@ const RadarChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Radar,
         {
           name: s.label,
           dataKey: s.dataKey,
-          stroke: s.color || defaultColor,
-          fill: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
+          fill: s.color || seriesColors[i % seriesColors.length],
           fillOpacity: s.fillOpacity ?? 0.3
         },
         s.dataKey

package/components/Chart/RadialChart.js

@@ -1,21 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#118AB2"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -49,7 +36,7 @@ const RadialChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const bgColor = getCSSVar("--color-bg-container-primary", "#0E0E0E");
   const chartData = data.map((item, i) => ({

package/components/Chart/ScatterChart.js

@@ -1,19 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-const PALETTE = [
-  "#118AB2",
-  // teal-07
-  "#06D6A0",
-  // green-07
-  "#EF476F",
-  // red-07
-  "#FFD166",
-  // yellow-07
-  "#9E47EF"
-  // purple-07
-];
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -47,6 +36,7 @@ const ScatterChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
+  const seriesColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const renderTooltip = useCallback(
@@ -96,7 +86,7 @@ const ScatterChart = ({
         {
           name: ds.name,
           data: ds.data,
-          fill: ds.color || PALETTE[i % PALETTE.length]
+          fill: ds.color || seriesColors[i % seriesColors.length]
         },
         ds.name
       )),

package/components/Chart/StackedBarChart.js

@@ -1,25 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
 }
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#118AB2"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function StackedTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
   return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
@@ -47,7 +34,7 @@ const StackedBarChart = ({
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(StackedTooltip, { ...props }),

package/components/Chart/Treemap.js

@@ -1,23 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-const PALETTE = [
-  "#118AB2",
-  // teal-07
-  "#06D6A0",
-  // green-07
-  "#EF476F",
-  // red-07
-  "#FFD166",
-  // yellow-07
-  "#9E47EF",
-  // purple-07
-  "#1E47B0",
-  // blue-07
-  "#EF8247"
-  // orange
-];
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -25,7 +10,8 @@ function getCSSVar(name, fallback) {
 function TreemapContent(props) {
   const { x, y, width, height, name, index, color } = props;
   if (width < 4 || height < 4) return null;
-  const fill = color || PALETTE[index % PALETTE.length];
+  const seriesColors = getChartSeriesColors();
+  const fill = color || seriesColors[index % seriesColors.length];
   const textColor = getCSSVar("--color-text-primary", "#050505");
   const showLabel = width > 50 && height > 28;
   return /* @__PURE__ */ jsxs("g", { children: [

package/components/Chart/palette.d.ts

@@ -0,0 +1 @@
+export declare function getChartSeriesColors(): string[];

package/components/Chart/palette.js

@@ -0,0 +1,19 @@
+const SERIES_FALLBACKS = [
+  "#0E6E8F",
+  "#06D6A0",
+  "#FFD166",
+  "#EF476F",
+  "#9E47EF",
+  "#EF8247",
+  "#1E47B0"
+];
+function getChartSeriesColors() {
+  if (typeof window === "undefined") return SERIES_FALLBACKS;
+  const style = getComputedStyle(document.documentElement);
+  return SERIES_FALLBACKS.map(
+    (fallback, i) => style.getPropertyValue(`--color-chart-series-${i + 1}`).trim() || fallback
+  );
+}
+export {
+  getChartSeriesColors
+};

package/components/ChatMarker/ChatMarker.css

@@ -50,3 +50,12 @@
 .ds-chat-marker__icon .material-symbols-rounded {
   --icon-size: var(--icon-size-sm);
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   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-chat-marker .material-symbols-rounded {
+  color: inherit;
+}

package/components/ChatMessage/ChatMessage.css

@@ -110,6 +110,22 @@
   color: var(--color-text-primary);
 }
 
+/* Card furniture inside a turn steps clear of the content around it — at
+   the body's default rhythm an adjacent text line sits close enough to read
+   as a caption rather than a neighbouring block. Margins, not gap, so a
+   card standing alone adds nothing. */
+.ds-chat-message__content > .ds-message-card:not(:first-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:first-child),
+.ds-chat-message__content > .ds-tool-call:not(:first-child) {
+  margin-top: var(--gap-sm-md);
+}
+
+.ds-chat-message__content > .ds-message-card:not(:last-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:last-child),
+.ds-chat-message__content > .ds-tool-call:not(:last-child) {
+  margin-bottom: var(--gap-sm-md);
+}
+
 /* Bubble — capped width so a short line never drags a surface across the
    whole row; the fallback is the sanctioned consumer-override hook */
 .ds-chat-message--bubble .ds-chat-message__content {

package/components/ChatThread/ChatThread.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
+import { MOTION_SCROLL_SETTLE_MS } from "../../tokens/motion.js";
 import "./ChatThread.css";
 import "../../fonts/material-symbols.css";
-const SCROLLBAR_SETTLE_MS = 600;
 const JUMP_THRESHOLD_PX = 24;
 const ChatThread = React.forwardRef(
   ({
@@ -129,7 +129,7 @@ const ChatThread = React.forwardRef(
       window.clearTimeout(settleTimer.current);
       settleTimer.current = window.setTimeout(
         () => setScrolling(false),
-        SCROLLBAR_SETTLE_MS
+        MOTION_SCROLL_SETTLE_MS
       );
     };
     const jumpToBottom = () => {

package/components/Chip/Chip.css

@@ -220,3 +220,12 @@
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   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-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/CodeBlock/CodeBlock.css

@@ -95,7 +95,7 @@
   font-weight: var(--font-paragraph-sm-em-weight);
   line-height: var(--font-paragraph-sm-line-height);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: var(--font-overline-letter-spacing);
   color: var(--color-text-tertiary);
   flex-shrink: 0;
 }
@@ -178,3 +178,12 @@
   color: var(--color-text-primary);
   white-space: pre;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   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-code-block .material-symbols-rounded {
+  color: inherit;
+}