@robr0/design-system 0.10.0 → 0.12.0

package/components/Badge/Badge.css

@@ -12,6 +12,10 @@
   line-height: var(--font-paragraph-sm-em-line-height);
   letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
   padding: var(--padding-xxxs) var(--padding-sm); /* Figma: 2px 8px */
+  /* Badges are borderless by decision (2026-08-26): the tinted fill
+     carries the status on its own, and the old per-variant borders sat
+     below 3:1 against their fills. The transparent border keeps the
+     geometry so the box does not shift against bordered neighbours. */
   border: var(--border-xs) solid transparent;
   border-radius: var(--radius-xs); /* Figma: 4px */
   white-space: nowrap;
@@ -23,7 +27,6 @@
 
 .ds-badge--info {
   background-color: var(--color-status-info-bg);
-  border-color: var(--color-status-info-border);
   color: var(--color-status-info-text);
 }
 
@@ -33,7 +36,6 @@
 
 .ds-badge--positive {
   background-color: var(--color-status-positive-bg);
-  border-color: var(--color-status-positive-border);
   color: var(--color-status-positive-text);
 }
 
@@ -43,7 +45,6 @@
 
 .ds-badge--warning {
   background-color: var(--color-status-warning-bg);
-  border-color: var(--color-status-warning-border);
   color: var(--color-status-warning-text);
 }
 
@@ -53,7 +54,6 @@
 
 .ds-badge--error {
   background-color: var(--color-status-error-bg);
-  border-color: var(--color-status-error-border);
   color: var(--color-status-error-text);
 }
 
@@ -63,6 +63,5 @@
 
 .ds-badge--neutral {
   background-color: var(--color-status-neutral-bg);
-  border-color: var(--color-status-neutral-border);
   color: var(--color-status-neutral-text);
 }

package/components/Card/Card.css

@@ -76,7 +76,9 @@
 .ds-card--case-study {
   height: auto;
   min-width: 0;
-  padding: 0;
+  /* The cover is inset, not full-bleed: 12px of card around a 12px-radius
+     cover keeps the corners concentric with the card's 24px shell. */
+  padding: var(--padding-sm-md);
   gap: 0;
   overflow: hidden;
   cursor: pointer;
@@ -103,6 +105,7 @@
   width: 100%;
   aspect-ratio: 940 / 480;
   overflow: hidden;
+  border-radius: var(--radius-md);
   background: var(--color-bg-container-secondary);
 }
 
@@ -142,7 +145,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm);
-  padding: var(--padding-lg);
+  /* 8px on top of the card's 12px inset: text lands 20px from the card edge
+     (the old full-bleed body padding) and sits slightly inside the cover. */
+  padding: var(--padding-md) var(--padding-sm) var(--padding-sm-md);
 }
 
 .ds-card--case-study__eyebrow {

package/components/CardStack/CardStack.css

@@ -0,0 +1,106 @@
+/* ============================================
+   CARD STACK COMPONENT
+   A deck showing one card, the rest peeking out
+   beneath. Forward flips lift the top card away;
+   backward flips drop it in from above. Depth
+   offsets are percentages of the card itself, so
+   the choreography scales with whatever card the
+   deck holds.
+   ============================================ */
+
+/* Base */
+
+.ds-card-stack {
+  /* How far each buried card peeks out below the one above it. */
+  --ds-card-stack-peek: var(--gap-md);
+
+  position: relative;
+  display: grid;
+  border-radius: var(--radius-xl);
+  padding-bottom: calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0));
+  outline: none;
+}
+
+.ds-card-stack:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-xxs);
+}
+
+/* Items — every card occupies the same cell; position is one transform. */
+
+.ds-card-stack__item {
+  grid-area: 1 / 1;
+  /* An opaque page-colour backing behind each card: the system's cards sit on
+     translucent surfaces, and without this the buried cards read through the
+     top one. Rounded to Card's radius; a deck of differently shaped cards
+     repoints --ds-card-stack-card-radius. */
+  background: var(--color-bg-page-primary);
+  border-radius: var(--ds-card-stack-card-radius, var(--radius-xl));
+  transform-origin: 50% 100%;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-pos, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-pos, 0)));
+  transition:
+    transform var(--motion-duration-deliberate) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized);
+}
+
+/* Deeper than the visible peek: parked at the last slot, faded out. */
+.ds-card-stack__item--buried {
+  opacity: 0;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-depth, 0)));
+}
+
+/* Flipped away with loop off: lifted out of view, above the deck. */
+.ds-card-stack__item--gone {
+  opacity: 0;
+  transform: translateY(-12%) scale(0.98);
+}
+
+/* Flip choreography — the lift is a fraction of the card's own height. */
+
+.ds-card-stack__item--leaving {
+  animation: ds-card-stack-leave var(--motion-duration-deliberate) var(--motion-ease-emphasized)
+    both;
+}
+
+.ds-card-stack__item--entering {
+  animation: ds-card-stack-enter var(--motion-duration-deliberate) var(--motion-ease-entrance)
+    both;
+}
+
+@keyframes ds-card-stack-leave {
+  from {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+}
+
+@keyframes ds-card-stack-enter {
+  from {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Screen-reader announcement of the deck position. */
+
+.ds-card-stack__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/CardStack/CardStack.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by CardStack itself — everything else falls through to the root `<div>`. */
+type CardStackOwnProps = {
+    /** The cards, in order. The first child starts on top. */
+    children?: React.ReactNode;
+    /**
+     * Controlled top card, as an index into `children`. Pair with
+     * `onIndexChange`. Omit to let the stack own its position.
+     */
+    index?: number;
+    /** Initial top card when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires when the top card changes, with the new index. */
+    onIndexChange?: (index: number) => void;
+    /** How many card edges peek out behind the top card. */
+    peek?: number;
+    /** Wrap from the last card back to the first. Off, the stack stops at both ends. */
+    loop?: boolean;
+    /**
+     * Clicking the top card flips to the next. Clicks that land on a link or
+     * control inside the card are left alone, so a card can still carry its
+     * own actions.
+     */
+    advanceOnClick?: boolean;
+    /** Accessible name for the stack, e.g. "Open roles". */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CardStackProps extends CardStackOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CardStackOwnProps> {
+}
+/**
+ * CardStack — a deck of cards showing one at a time, the rest peeking out
+ * beneath it. Flipping forward lifts the top card up and away while the next
+ * one rises into place; flipping back drops the previous card in from above.
+ * The stack is the pattern, not the cards: any children work, Card and
+ * EntityCard are the intended fillings, and every card should share one size
+ * so the deck keeps its shape.
+ *
+ * Flip by clicking the top card, or with the arrow keys when the stack has
+ * focus. Cards behind the top one are inert until their turn.
+ */
+export declare const CardStack: React.ForwardRefExoticComponent<CardStackProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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.d.ts

@@ -26,6 +26,10 @@ export interface AreaChartProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Show the legend under a multi-series chart */
+    showLegend?: boolean;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -33,4 +37,4 @@ export interface AreaChartProps {
  * Area chart built on Recharts with design-system tokens.
  * Supports multiple stacked or overlapping series with gradient fills.
  */
-export declare const AreaChart: ({ data, xKey, series, stacked, title, subtitle, summaryItems, height, className, }: AreaChartProps) => import("react").JSX.Element;
+export declare const AreaChart: ({ data, xKey, series, stacked, title, subtitle, summaryItems, height, showLegend, bare, className, }: AreaChartProps) => import("react").JSX.Element;

package/components/Chart/AreaChart.js

@@ -1,10 +1,10 @@
 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;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function AreaTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -26,13 +26,15 @@ const AreaChart = ({
   subtitle,
   summaryItems,
   height = 350,
+  showLegend = true,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),
@@ -50,8 +52,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 +78,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,
@@ -90,7 +92,7 @@ const AreaChart = ({
         },
         s.dataKey
       )),
-      series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+      showLegend && series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
     ] }) }) })
   ] });
 };

package/components/Chart/BarChart.d.ts

@@ -23,6 +23,8 @@ export interface BarChartProps {
     barColor?: string;
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface BarChartProps {
  * Part of the Chart component family — shares wrapper, header,
  * tooltip, and summary-stat styles with future chart types.
  */
-export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, className, }: BarChartProps) => import("react").JSX.Element;
+export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, bare, className, }: BarChartProps) => import("react").JSX.Element;

package/components/Chart/BarChart.js

@@ -3,8 +3,7 @@ import { useCallback } from "react";
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function ChartTooltip({
   active,
@@ -33,10 +32,11 @@ const BarChart = ({
   summaryItems,
   barColor,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");

package/components/Chart/Chart.css

@@ -96,6 +96,51 @@
 
 .ds-chart__body {
   width: 100%;
+  /* Anchors the radial centre label overlay. */
+  position: relative;
+}
+
+/* ============================================
+   BARE MODE — the chart sits inside another
+   panel that supplies the surface, so its own
+   card chrome would double-frame it
+   ============================================ */
+
+.ds-chart--bare {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+}
+
+/* ============================================
+   RADIAL CENTRE LABEL — the gauge's headline
+   in the donut hole
+   ============================================ */
+
+.ds-chart__radial-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: var(--gap-xxs);
+  pointer-events: none;
+}
+
+.ds-chart__radial-center-value {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-chart__radial-center-sub {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
 }
 
 /* ============================================