@robr0/design-system 0.14.0 → 0.15.0

package/README.md

@@ -18,7 +18,7 @@ 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 -->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)** |
+| **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 · 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
+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`.
 
@@ -142,6 +143,8 @@ The AI layer also serves machines directly. The live site exposes a Model Contex
 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
@@ -163,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/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);

package/components/CircularButton/CircularButton.css

@@ -196,6 +196,43 @@
   background-color: var(--color-action-passive-bg-active);
 }
 
+/* ============================================
+   NEUTRAL VARIANT (SOLID GREY)
+   Filled like primary but in the neutral greys —
+   unlike tertiary, the background is always shown.
+   ============================================ */
+
+.ds-circular-button--neutral {
+  background-color: var(--color-action-neutral-bg);
+  border: none;
+}
+
+.ds-circular-button--neutral .ds-circular-button__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-circular-button--neutral.ds-circular-button--hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral.ds-circular-button--active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-circular-button--neutral.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
 /* ============================================
    LOADING
    Keeps the variant's full-colour appearance (no disabled dim);
@@ -207,6 +244,15 @@
   pointer-events: none;
 }
 
+/* The spinner is a box, not a glyph: left inline, it sits on the text
+   baseline and the strut's descender pushes it ~1px above the button's
+   centre. Flex centres it geometrically. */
+.ds-circular-button--loading .ds-circular-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* ============================================
    FOCUS
    ============================================ */

package/components/CircularButton/CircularButton.d.ts

@@ -4,7 +4,7 @@ type CircularButtonOwnProps = {
     /** Material Symbol icon name */
     icon: string;
     /** Visual treatment */
-    variant?: 'primary' | 'secondary' | 'tertiary';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
     /**
      * Legacy alias for `variant`.
      *
@@ -34,6 +34,17 @@ type CircularButtonOwnProps = {
     loading?: boolean;
     /** Accessible label — required, because the button has no visible text */
     ariaLabel: string;
+    /**
+     * The hover/focus tooltip. An icon-only control names itself: by default
+     * the button wears a Tooltip carrying `ariaLabel`. Pass a string to show
+     * different wording, or `false` to opt out — for a host that labels the
+     * control another way, or one that owns the button's box directly
+     * (SplitButton's trigger stretches to its sibling segment, which the
+     * tooltip wrapper would block).
+     */
+    tooltip?: string | false;
+    /** Which side the tooltip opens on. */
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
     /** Optional href — renders as <a> instead of <button> */
     href?: string;
     /** Optional target attribute for links */
@@ -48,7 +59,7 @@ export interface CircularButtonProps extends CircularButtonOwnProps, Omit<React.
 /**
  * Circular icon button component.
  * A round button containing a single icon, available in
- * primary, secondary and tertiary variants with default and compact sizes.
+ * primary, secondary, tertiary and neutral variants with default and compact sizes.
  *
  * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref to
  * whichever element it renders, and spreads unrecognised props onto it.

package/components/CircularButton/CircularButton.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { Spinner } from "../Spinner/Spinner.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
 const CircularButton = React.forwardRef(
@@ -13,6 +14,8 @@ const CircularButton = React.forwardRef(
     size = "default",
     loading,
     ariaLabel,
+    tooltip,
+    tooltipPosition = "top",
     href,
     target,
     rel,
@@ -33,22 +36,19 @@ const CircularButton = React.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
-    if (href && !isDisabled && !isLoading) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ...rest,
-          ref,
-          className: classes,
-          href,
-          target,
-          rel,
-          "aria-label": ariaLabel,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
+    const control = href && !isDisabled && !isLoading ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
       "button",
       {
         ...rest,
@@ -61,6 +61,9 @@ const CircularButton = React.forwardRef(
         children
       }
     );
+    const tooltipContent = tooltip === false ? null : tooltip ?? ariaLabel;
+    if (!tooltipContent) return control;
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, position: tooltipPosition, children: control });
   }
 );
 CircularButton.displayName = "CircularButton";

package/components/CommandPalette/CommandPalette.css

@@ -14,13 +14,20 @@
   opacity: 0;
   visibility: hidden; /* also removes the input from the tab order */
   pointer-events: none;
-  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), visibility var(--motion-duration-fast) var(--motion-ease-standard);
+  /* Visibility waits out the fade only on close (duration token as delay);
+     on open it must flip instantly — the open effect focuses the input a
+     frame later, and focus() on a still-hidden element is a no-op, which
+     left the palette opening without its caret. */
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s linear var(--motion-duration-fast);
 }
 
 .ds-command-palette--open {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s;
 }
 
 /* ============================================
@@ -70,6 +77,13 @@
   padding: var(--padding-sm-md) var(--padding-md); /* 12px 16px */
   border-bottom: var(--border-xs) solid var(--color-divider);
   flex-shrink: 0;
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* The focused field marks the whole row with the active input border, the
+   same signal a focused Input gives its own edge. */
+.ds-command-palette__search:focus-within {
+  border-bottom-color: var(--color-input-border-selected);
 }
 
 .ds-command-palette__search-icon {
@@ -135,6 +149,17 @@
   min-height: 0;
   overflow-y: auto;
   padding: var(--padding-xxs);
+  /* Quiet scrollbar, ChatThread's recipe: thin and token-coloured instead
+     of the 15px native chrome rail a classic-scrollbar platform would draw
+     inside the panel. The stable gutter matters here because filtering
+     toggles overflow — without it every keystroke that crosses the
+     threshold reflows the rows sideways. */
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--color-divider) transparent;
+  /* The scroll lock lets wheel and touch through only inside this list, so
+     hitting its ends must not chain the leftover delta to the page. */
+  overscroll-behavior: contain;
 }
 
 .ds-command-palette__status {