@robr0/design-system 0.13.0 → 0.15.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 -->114<!-- /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 -->122<!-- /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 · Avatar group · 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 · Filter bar · Funnel chart · Gauge · 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 · 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
+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 · Source trail · 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 · Usage card
 <!-- component-list:end -->
 
 ### Ambient background
@@ -71,7 +71,7 @@ import '@robr0/design-system/tokens/tokens.css';
 import { Button, Card, Badge } from '@robr0/design-system';
 ```
 
-Deep imports work too (`@robr0/design-system/components/Button/Button`). The Recharts-backed charts live behind a separate entry so the optional `recharts` peer dependency is only needed if you use them; Sparkline and ContributionGraph are dependency-free and export from the main barrel:
+Deep imports work too (`@robr0/design-system/components/Button/Button`). The Recharts-backed charts live behind a separate entry so the optional `recharts` peer dependency is only needed if you use them; the dependency-free charts export from the main barrel with everything else:
 
 ```tsx
 import { BarChart, LineChart } from '@robr0/design-system/charts';
@@ -84,7 +84,7 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
   ```css
   :root { --font-family-primary: 'Inter', sans-serif; }
   ```
-- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it. The action colour is theme-split by design (light fills run teal-08/09/10, dark inverts to teal-05/04/03), so rebranding it means re-keying those steps:
+- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it. The action colour is theme-split by design (light fills run teal-08/09/10, dark inverts to teal-05/04/03), and the six fill steps below are the core of a rebrand:
   ```css
   :root {
     --primitive-teal-08: #6D31D3;  /* light fill */
@@ -96,6 +96,7 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
     --primitive-radius-full: 12px; /* pill buttons become rounded rectangles */
   }
   ```
+  A complete rebrand re-keys the whole teal ramp (01-10): the remaining steps carry the primary label, active icons, hover/selected input borders, and the AI gradient, so stopping at the six fills leaves those teal. The easiest way to get all of it right is the [playground](https://www.robertritacca.com/playground): restyle the system live and copy out a complete, paste-ready override.
 
 Icons use a bundled Material Symbols Rounded variable font (woff2): components import it themselves, so they need no extra setup. If you render raw `.material-symbols-rounded` spans of your own, import `@robr0/design-system/fonts/material-symbols.css` once. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
 
@@ -136,6 +137,14 @@ 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
+```
+
+The same generated data is served as files too: every component's prop contract lives at `https://robertritacca.com/components/<slug>.md` beside its docs page, and a generated agent skill (a `SKILL.md` plus its `references/components.md` catalogue, under `https://robertritacca.com/skill/robr0-design-system/`) can be saved as a pair into a project's own skills folder so a coding agent carries the library's install, theming and catalogue rules into every session. The [setup guide](https://robertritacca.com/docs/get-started) has the two-command install.
+
 ---
 
 ## Tech
@@ -157,7 +166,7 @@ Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/w
 npm run verify   # lint + library type-check + package build + story tests + Storybook build + website lint + build + built-HTML checks
 ```
 
-CI also guards against documentation drift: generated surfaces (this README's component count and list, the website's skills pages, the published blueprint copies of the root markdown specs) are rebuilt from their source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
+CI also guards against documentation drift: every generated surface (the `validate-registry` entry in the root `package.json` is the authoritative list, from this README's component count to the per-component markdown and the consumer agent skill) is rebuilt from its source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
 
 ---
 

package/charts.d.ts

@@ -13,3 +13,4 @@ export * from './components/Chart/RadialChart';
 export * from './components/Chart/ScatterChart';
 export * from './components/Chart/StackedBarChart';
 export * from './components/Chart/Treemap';
+export * from './components/FunnelChart/FunnelChart';

package/charts.js

@@ -8,10 +8,12 @@ import { RadialChart } from "./components/Chart/RadialChart.js";
 import { ScatterChart } from "./components/Chart/ScatterChart.js";
 import { StackedBarChart } from "./components/Chart/StackedBarChart.js";
 import { Treemap } from "./components/Chart/Treemap.js";
+import { FunnelChart } from "./components/FunnelChart/FunnelChart.js";
 export {
   AreaChart,
   BarChart,
   ComboChart,
+  FunnelChart,
   LineChart,
   PieChart,
   RadarChart,

package/components/AnchorNav/AnchorNav.css

@@ -61,3 +61,77 @@
   font-weight: var(--font-paragraph-em-weight);
   border-left-color: var(--color-text-primary);
 }
+
+/* ============================================
+   FLOATING VARIANT
+   Collapsed to a minimap of short lines; the
+   full panel expands over it on hover, focus
+   or tap. The caller positions the nav itself
+   (typically fixed on the right page edge).
+   ============================================ */
+.ds-anchor-nav--floating {
+  position: relative;
+  display: inline-block;
+}
+
+.ds-anchor-nav__lines {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--gap-sm);
+  /* A comfortable hover/tap target around the thin lines */
+  padding: var(--padding-sm);
+  cursor: pointer;
+}
+
+.ds-anchor-nav__line {
+  /* One line per section: bespoke minimap geometry, specced in design.md */
+  width: 16px;
+  height: var(--border-md);
+  border-radius: var(--radius-full);
+  background-color: var(--color-divider);
+  transition:
+    width var(--motion-duration-fast) var(--motion-ease-standard),
+    background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav__line--active {
+  width: 24px;
+  background-color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__panel {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  right: 0;
+  min-width: 200px;
+  max-width: 280px;
+  /* A long list scrolls inside the panel rather than past the viewport */
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: var(--padding-md);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm);
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-floating);
+
+  /* Hidden by default — but never visibility: hidden, because the links must
+     stay focusable so tabbing into the nav expands it via :focus-within */
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(var(--gap-xxs), -50%);
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav--floating:hover .ds-anchor-nav__panel,
+.ds-anchor-nav--floating:focus-within .ds-anchor-nav__panel,
+.ds-anchor-nav--open .ds-anchor-nav__panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -50%);
+}

package/components/AnchorNav/AnchorNav.d.ts

@@ -8,6 +8,8 @@ export interface AnchorNavItem {
 type AnchorNavOwnProps = {
     /** The on-page sections to list, in document order */
     items: AnchorNavItem[];
+    /** Visual form: `list` renders the inline "On this page" rail; `floating` collapses to a stack of short lines that expands into a panel on hover, keyboard focus, or tap, so it can ride a page edge without taking column width */
+    variant?: 'list' | 'floating';
     /** Header text above the list; pass an empty string to render no header */
     title?: string;
     /** Material Symbols icon name beside the header; pass an empty string for none */
@@ -28,6 +30,11 @@ export interface AnchorNavProps extends AnchorNavOwnProps, Omit<React.ComponentP
  * has passed `offset` as current. Pass `activeId` to control the highlight
  * instead (no listener is attached). The active link carries
  * `aria-current="location"`.
+ *
+ * The `floating` variant collapses the list to a minimap of short lines and
+ * expands the full panel on hover or keyboard focus (the links stay focusable
+ * while collapsed, so tabbing in opens it). A tap opens it where hover
+ * doesn't exist; Escape or a click elsewhere closes it again.
  */
 export declare const AnchorNav: React.ForwardRefExoticComponent<AnchorNavProps & React.RefAttributes<HTMLElement>>;
 export {};

package/components/AnchorNav/AnchorNav.js

@@ -1,20 +1,24 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useRef, useImperativeHandle, useState, useCallback, useEffect } from "react";
 import "./AnchorNav.css";
 const AnchorNav = React.forwardRef(
   ({
     items,
+    variant = "list",
     title = "On this page",
     icon = "toc",
     activeId,
     onActiveChange,
     offset = 96,
     className,
+    onKeyDown,
     ...rest
   }, ref) => {
     const navRef = useRef(null);
     useImperativeHandle(ref, () => navRef.current);
+    const floating = variant === "floating";
+    const [open, setOpen] = useState(false);
     const isControlled = activeId !== void 0;
     const [trackedId, setTrackedId] = useState(void 0);
     const currentId = isControlled ? activeId : trackedId;
@@ -54,26 +58,75 @@ const AnchorNav = React.forwardRef(
         if (frame !== 0) window.cancelAnimationFrame(frame);
       };
     }, [isControlled, items, offset, setActive]);
-    const classes = ["ds-anchor-nav", className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("nav", { ref: navRef, "aria-label": title || "On this page", className: classes, ...rest, children: [
-      title && /* @__PURE__ */ jsxs("p", { className: "ds-anchor-nav__header", children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-anchor-nav__icon", "aria-hidden": "true", children: icon }),
-        title
-      ] }),
-      /* @__PURE__ */ jsx("ul", { className: "ds-anchor-nav__list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: `#${item.id}`,
-          className: item.id === currentId ? "ds-anchor-nav__link ds-anchor-nav__link--active" : "ds-anchor-nav__link",
-          "aria-current": item.id === currentId ? "location" : void 0,
-          onClick: () => {
-            if (!isControlled) setActive(item.id);
-            else onActiveChangeRef.current?.(item.id);
-          },
-          children: item.label
-        }
-      ) }, item.id)) })
-    ] });
+    useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event) => {
+        if (navRef.current && !navRef.current.contains(event.target)) setOpen(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open]);
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (floating && event.key === "Escape") {
+        setOpen(false);
+        const focused = document.activeElement;
+        if (focused instanceof HTMLElement && navRef.current?.contains(focused)) focused.blur();
+      }
+    };
+    const classes = [
+      "ds-anchor-nav",
+      floating && "ds-anchor-nav--floating",
+      floating && open && "ds-anchor-nav--open",
+      className
+    ].filter(Boolean).join(" ");
+    const header = title ? /* @__PURE__ */ jsxs("p", { className: "ds-anchor-nav__header", children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-anchor-nav__icon", "aria-hidden": "true", children: icon }),
+      title
+    ] }) : null;
+    const list = /* @__PURE__ */ jsx("ul", { className: "ds-anchor-nav__list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `#${item.id}`,
+        className: item.id === currentId ? "ds-anchor-nav__link ds-anchor-nav__link--active" : "ds-anchor-nav__link",
+        "aria-current": item.id === currentId ? "location" : void 0,
+        onClick: (event) => {
+          if (!isControlled) setActive(item.id);
+          else onActiveChangeRef.current?.(item.id);
+          if (floating) {
+            setOpen(false);
+            event.currentTarget.blur();
+          }
+        },
+        children: item.label
+      }
+    ) }, item.id)) });
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: navRef,
+        "aria-label": title || "On this page",
+        className: classes,
+        ...rest,
+        onKeyDown: handleKeyDown,
+        children: floating ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-anchor-nav__lines", "aria-hidden": "true", onClick: () => setOpen(true), children: items.map((item) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: item.id === currentId ? "ds-anchor-nav__line ds-anchor-nav__line--active" : "ds-anchor-nav__line"
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-anchor-nav__panel", children: [
+            header,
+            list
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          header,
+          list
+        ] })
+      }
+    );
   }
 );
 AnchorNav.displayName = "AnchorNav";

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/Button/Button.css

@@ -182,6 +182,35 @@
   cursor: not-allowed;
 }
 
+/* ============================================
+   NEUTRAL BUTTON (SOLID GREY)
+   Filled like primary but in the neutral greys —
+   unlike tertiary, the background is always shown.
+   ============================================ */
+
+.ds-button--neutral {
+  background-color: var(--color-action-neutral-bg);
+  border: none;
+}
+
+.ds-button--neutral .ds-button__text {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-button--neutral.ds-button--hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-button--neutral.ds-button--active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-button--neutral.ds-button--disabled {
+  background-color: var(--color-action-neutral-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ============================================
    DESTRUCTIVE BUTTON
    For dangerous actions: delete, remove, etc.
@@ -266,6 +295,10 @@
   color: var(--color-icon-primary);
 }
 
+.ds-button--neutral .ds-button__icon {
+  color: var(--color-action-neutral-text);
+}
+
 .ds-button--destructive .ds-button__icon {
   color: var(--color-core-accent-coral);
 }
@@ -315,6 +348,10 @@
   background-color: var(--color-action-passive-bg-hover);
 }
 
+.ds-button--neutral:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
 .ds-button--destructive:not(.ds-button--disabled):hover {
   background-color: var(--color-core-accent-coral);
 }
@@ -359,6 +396,10 @@
   background-color: var(--color-action-passive-bg-active);
 }
 
+.ds-button--neutral:not(.ds-button--disabled):active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
 .ds-button--destructive:not(.ds-button--disabled):active {
   background-color: var(--color-core-accent-coral);
 }
@@ -382,6 +423,16 @@
   pointer-events: none;
 }
 
+/* The spinner is a box, not a glyph: left inline in the icon slot, it sits
+   on the text baseline and the strut's descender pushes it above centre.
+   Flex centres it geometrically — the same fix as CircularButton's loading
+   icon. */
+.ds-button--loading .ds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* The generic icon-slot svg sizing must not distort the spinner —
    it sizes itself from the Spinner size prop */
 .ds-button .ds-button__icon .ds-spinner__circle {

package/components/Button/Button.d.ts

@@ -8,7 +8,7 @@ type ButtonOwnProps = {
     /** Icon for right side — Material Symbol name (string) or custom element (ReactNode) */
     iconRight?: string | React.ReactNode;
     /** Visual treatment */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'destructive';
     /** Button size */
     size?: 'default' | 'compact';
     /** Whether the button is disabled */
@@ -63,7 +63,7 @@ export interface ButtonProps extends ButtonOwnProps, Omit<React.ComponentPropsWi
 }
 /**
  * Button component from Figma design system.
- * Supports primary, secondary, tertiary and destructive variants.
+ * Supports primary, secondary, tertiary, neutral and destructive variants.
  * Icons can be placed on the left and/or right side of the text.
  *
  * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref to

package/components/Chart/Chart.css

@@ -149,7 +149,10 @@
 
 .ds-chart__tooltip {
   padding: var(--padding-sm) var(--padding-md);
-  background-color: var(--color-bg-container-primary);
+  background-color: var(--color-bg-glass);
+  /* The glass token is deliberately translucent; this blur is what keeps
+     the chart's marks readable through the overlay. */
+  backdrop-filter: blur(24px);
   border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-sm); /* 8px */
   box-shadow: var(--shadow-floating);