@robr0/design-system 0.12.0 → 0.14.0

package/README.md

@@ -18,8 +18,8 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->109<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
-| **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
+| **Design system** (`/src`) | <!-- component-count -->120<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. An MCP endpoint serves the same public data, plus the component prop API, to any agent. |
 
 ---
 
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Funnel chart · Globe · Input · Instructions · Interrupt card · Kbd · Legend tile · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gauge · Globe · Hover card · Image compare · Input · Instructions · Interrupt card · Kbd · Legend tile · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
 <!-- component-list:end -->
 
 ### Ambient background
@@ -136,6 +136,12 @@ The answering half is a Claude-backed route (`website/src/app/api/chat/route.ts`
 
 Answers are measured, not assumed. `evals/chat` holds a golden set that runs through the real route (persona, corpus, guardrails, all of it) with `npm run eval:chat`; it costs real API calls, so it runs on demand and never in CI. A second validator fails the build when a golden-set fact is missing from the corpus, which keeps the eval and the site describing the same system.
 
+The AI layer also serves machines directly. The live site exposes a Model Context Protocol endpoint at `https://robertritacca.com/api/mcp`: a stateless Streamable HTTP server with five tools covering the component list, per-component prop APIs, the design tokens, install setup, and full-text search over the same corpus the chat reads. No key, no account; every tool reads only published, generated data. The prop API is built from the same JSDoc that produces the published `.d.ts`, so an agent consuming the package reads the exact contract npm ships:
+
+```bash
+claude mcp add --transport http robr0-ds https://robertritacca.com/api/mcp
+```
+
 ---
 
 ## Tech

package/components/AvatarGroup/AvatarGroup.css

@@ -0,0 +1,61 @@
+/* ============================================
+   AVATAR GROUP COMPONENT
+   Overlapping avatar stack with a "+N" counter.
+   The pixel size ladder matches Avatar's sizes
+   so the counter circle sits flush in the row.
+   ============================================ */
+
+/* Base */
+
+.ds-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Items — each avatar (and the counter) sits in a ring-bearing wrapper
+   so the overlaps stay legible on any surface. */
+
+.ds-avatar-group__item {
+  position: relative;
+  display: inline-flex;
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 var(--border-md) var(--color-bg-page-primary);
+}
+
+.ds-avatar-group__item + .ds-avatar-group__item {
+  margin-left: calc(var(--gap-sm) * -1);
+}
+
+/* Overflow counter */
+
+.ds-avatar-group__overflow {
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Sizes — matching Avatar's ladder */
+
+.ds-avatar-group--sm .ds-avatar-group__overflow {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+
+.ds-avatar-group--md .ds-avatar-group__overflow {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.ds-avatar-group--lg .ds-avatar-group__overflow {
+  width: 56px;
+  height: 56px;
+  font-size: 18px;
+}

package/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by AvatarGroup itself — everything else falls through to the root div. */
+type AvatarGroupOwnProps = {
+    /** The avatars to stack, in display order — normally `Avatar` elements. */
+    children: React.ReactNode;
+    /** Avatars shown before the rest collapse into a "+N" counter. */
+    max?: number;
+    /**
+     * Size applied to every avatar in the stack and to the overflow counter.
+     * Cloned onto the children so the group cannot render mixed sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Accessible label for the overflow counter. Defaults to "N more" —
+     * override it to localise or add context, e.g. "4 more reviewers".
+     */
+    overflowLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AvatarGroupProps extends AvatarGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AvatarGroupOwnProps> {
+}
+/**
+ * AvatarGroup — an overlapping stack of avatars with a "+N" counter for the
+ * overflow, the "who's here" affordance in collaboration UIs. Purely
+ * presentational: it lays out the `Avatar` children it is given (forcing a
+ * uniform size onto them) and counts the rest, so it renders from a Server
+ * Component. Each avatar carries a page-coloured ring so the overlaps stay
+ * legible on any surface.
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./AvatarGroup.css";
+const AvatarGroup = React.forwardRef(
+  ({ children, max = 5, size = "md", overflowLabel, className = "", ...rest }, ref) => {
+    const baseClass = "ds-avatar-group";
+    const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    const allChildren = React.Children.toArray(children);
+    const visible = allChildren.slice(0, Math.max(max, 0));
+    const overflow = allChildren.length - visible.length;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "group", children: [
+      visible.map((child, index) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__item`, children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, index)),
+      overflow > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__item ${baseClass}__overflow`,
+          role: "img",
+          "aria-label": overflowLabel ?? `${overflow} more`,
+          children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+            "+",
+            overflow
+          ] })
+        }
+      )
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  AvatarGroup
+};

package/components/Banner/Banner.css

@@ -0,0 +1,110 @@
+/* ============================================
+   BANNER COMPONENT
+   Full-width page-level status strip
+   ============================================ */
+
+.ds-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-lg);
+  width: 100%;
+  padding: var(--padding-sm) var(--padding-lg);
+}
+
+.ds-banner__body {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  min-width: 0;
+}
+
+.ds-banner--center .ds-banner__body {
+  flex: 1;
+  justify-content: center;
+}
+
+.ds-banner__icon {
+  --icon-size: var(--icon-size-sm);
+  flex-shrink: 0;
+}
+
+.ds-banner__content {
+  margin: 0;
+  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);
+}
+
+.ds-banner__title {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+}
+
+.ds-banner__action {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   DISMISS
+   ============================================ */
+
+.ds-banner__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xxs);
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-banner__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-banner__dismiss:hover {
+  opacity: 0.7;
+}
+
+.ds-banner__dismiss:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   VARIANTS
+   ============================================ */
+
+.ds-banner--info {
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-text);
+}
+
+.ds-banner--positive {
+  background-color: var(--color-status-positive-bg);
+  color: var(--color-status-positive-text);
+}
+
+.ds-banner--warning {
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-text);
+}
+
+.ds-banner--error {
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-text);
+}
+
+.ds-banner--neutral {
+  background-color: var(--color-status-neutral-bg);
+  color: var(--color-status-neutral-text);
+}

package/components/Banner/Banner.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Banner itself — everything else falls through to the root node. */
+type BannerOwnProps = {
+    /** Status variant determines colour and default icon */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Short leading emphasis before the body text. Deliberately shadows the native `title` attribute — a banner never needs a hover tooltip. */
+    title?: string;
+    /** Banner body content — a single line of text, rendered inside the banner's paragraph */
+    children?: React.ReactNode;
+    /** Custom icon override — Material Symbol name */
+    icon?: string;
+    /** Action slot on the trailing edge, for a compact Button or link */
+    action?: React.ReactNode;
+    /** Whether the banner shows a dismiss button */
+    dismissible?: boolean;
+    /** Callback when the dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Horizontal alignment of the banner content */
+    align?: 'start' | 'center';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface BannerProps extends BannerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof BannerOwnProps> {
+}
+/**
+ * Full-width status strip for page-level announcements: a release notice, a
+ * degraded-service warning, an environment flag. The third sibling in the
+ * feedback family — Alert sits inline in the layout, Toast interrupts and
+ * leaves, Banner spans the page and stays until dismissed.
+ *
+ * Stateless like Alert: `dismissible` shows the close control and `onDismiss`
+ * reports the click; removing the banner is the consumer's render decision.
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Banner/Banner.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Banner.css";
+import "../../fonts/material-symbols.css";
+const defaultIcons = {
+  info: "info",
+  positive: "check_circle",
+  warning: "warning",
+  error: "error",
+  neutral: "campaign"
+};
+const Banner = React.forwardRef(
+  ({
+    variant = "info",
+    title,
+    children,
+    icon,
+    action,
+    dismissible = false,
+    onDismiss,
+    align = "start",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-banner";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      align === "center" ? `${baseClass}--center` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const iconName = icon || defaultIcons[variant];
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "status", children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: iconName }),
+        /* @__PURE__ */ jsxs("p", { className: `${baseClass}__content`, children: [
+          title && /* @__PURE__ */ jsx("strong", { className: `${baseClass}__title`, children: title }),
+          title && children ? " " : null,
+          children
+        ] }),
+        action && /* @__PURE__ */ jsx("span", { className: `${baseClass}__action`, children: action })
+      ] }),
+      dismissible && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__dismiss`,
+          onClick: onDismiss,
+          "aria-label": "Dismiss banner",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+Banner.displayName = "Banner";
+export {
+  Banner
+};

package/components/ContributionGraph/ContributionGraph.css

@@ -4,14 +4,20 @@
    day, coloured by the contribution colour ramp
    ============================================ */
 
+/* Card chrome, header, and padding come from the shared chart styles
+   (Chart.css); this file owns the grid, legend, and cell ramp. */
+
 .ds-contribution-graph {
   --ds-contribution-cell: 12px;
   --ds-contribution-gap: 3px;
 
+  min-width: 0;
+}
+
+.ds-contribution-graph__content {
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm);
-  width: 100%;
   min-width: 0;
 }
 

package/components/ContributionGraph/ContributionGraph.d.ts

@@ -9,6 +9,12 @@ export interface ContributionDay {
 export interface ContributionGraphProps {
     /** One entry per day, ordered oldest to newest */
     days: ContributionDay[];
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Summary line shown under the grid, e.g. "496 contributions in the last year" */
     caption?: string;
     /** Show month labels above the grid */
@@ -22,5 +28,7 @@ export interface ContributionGraphProps {
  * ContributionGraph renders a GitHub-style contribution heatmap:
  * one cell per day, arranged in weekday rows and week columns,
  * coloured by activity level via the --color-chart-contribution-* ramp.
+ * It wears the chart family's card chrome (title, subtitle, padding) and
+ * takes `bare` to drop it inside a panel that supplies the surface.
  */
-export declare const ContributionGraph: ({ days, caption, showMonthLabels, showLegend, className, }: ContributionGraphProps) => import("react").JSX.Element;
+export declare const ContributionGraph: ({ days, title, subtitle, bare, caption, showMonthLabels, showLegend, className, }: ContributionGraphProps) => import("react").JSX.Element;

package/components/ContributionGraph/ContributionGraph.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import "../Chart/Chart.css";
 import "./ContributionGraph.css";
 const MONTH_LABELS = [
   "Jan",
@@ -62,6 +63,9 @@ const buildMonthLabels = (weeks) => {
 };
 const ContributionGraph = ({
   days,
+  title,
+  subtitle,
+  bare = false,
   caption,
   showMonthLabels = true,
   showLegend = true,
@@ -69,53 +73,65 @@ const ContributionGraph = ({
 }) => {
   const weeks = buildWeeks(days);
   const monthLabels = buildMonthLabels(weeks);
-  const classes = ["ds-contribution-graph", className].filter(Boolean).join(" ");
+  const chartClass = "ds-chart";
+  const classes = [
+    chartClass,
+    bare && `${chartClass}--bare`,
+    "ds-contribution-graph",
+    className
+  ].filter(Boolean).join(" ");
   const columnTemplate = `repeat(${weeks.length}, minmax(var(--ds-contribution-cell), 1fr))`;
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__scroll", children: [
-      showMonthLabels && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-contribution-graph__months",
-          style: { gridTemplateColumns: columnTemplate },
-          "aria-hidden": "true",
-          children: monthLabels.map(({ weekIndex, label }) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "ds-contribution-graph__month-label",
-              style: { gridColumnStart: weekIndex + 1 },
-              children: label
-            },
-            `${label}-${weekIndex}`
-          ))
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-contribution-graph__grid",
-          style: { gridTemplateColumns: columnTemplate },
-          role: "img",
-          "aria-label": caption ?? "Contribution activity",
-          children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
-            (day, dayIndex) => day ? /* @__PURE__ */ jsx(
-              "div",
+    (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${chartClass}__body ds-contribution-graph__content`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__scroll", children: [
+        showMonthLabels && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-contribution-graph__months",
+            style: { gridTemplateColumns: columnTemplate },
+            "aria-hidden": "true",
+            children: monthLabels.map(({ weekIndex, label }) => /* @__PURE__ */ jsx(
+              "span",
               {
-                className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
-                title: formatTooltip(day)
+                className: "ds-contribution-graph__month-label",
+                style: { gridColumnStart: weekIndex + 1 },
+                children: label
               },
-              day.date
-            ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
-          ) }, weekIndex))
-        }
-      )
-    ] }),
-    (caption || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__footer", children: [
-      caption && /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__caption", children: caption }),
-      showLegend && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__legend", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "Less" }),
-        [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("div", { className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${level}` }, level)),
-        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "More" })
+              `${label}-${weekIndex}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-contribution-graph__grid",
+            style: { gridTemplateColumns: columnTemplate },
+            role: "img",
+            "aria-label": caption ?? "Contribution activity",
+            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
+              (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
+                  title: formatTooltip(day)
+                },
+                day.date
+              ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
+            ) }, weekIndex))
+          }
+        )
+      ] }),
+      (caption || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__footer", children: [
+        caption && /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__caption", children: caption }),
+        showLegend && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__legend", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "Less" }),
+          [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("div", { className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${level}` }, level)),
+          /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "More" })
+        ] })
       ] })
     ] })
   ] });

package/components/EmptyState/EmptyState.css

@@ -13,6 +13,11 @@
   gap: var(--gap-md); /* 16px */
   padding: var(--padding-xl); /* 32px */
   width: 100%;
+  /* width: 100% plus own padding — border-box locally (as ContactCard,
+     Checkbox, Composer, SelectionCard and Textarea do), so a consumer
+     without a global reset doesn't get a horizontal scrollbar wherever
+     this is embedded. */
+  box-sizing: border-box;
 }
 
 /* ============================================