@robr0/design-system 0.14.0 → 0.16.0

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

@@ -23,6 +23,9 @@
   line-height: var(--font-paragraph-em-line-height);
   letter-spacing: var(--font-paragraph-em-letter-spacing);
   text-align: center;
+  /* A pill's label never wraps — a squeezed layout shortens around the
+     button, it doesn't fold the silhouette into two lines. */
+  white-space: nowrap;
 
   /* Transitions */
   transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
@@ -182,6 +185,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 +298,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 +351,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 +399,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 +426,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/Combobox/Combobox.js

@@ -125,9 +125,10 @@ const Combobox = React.forwardRef(({
     }
   }, []);
   useEffect(() => {
+    if (!isOpen) return;
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [handleClickOutside]);
+  }, [isOpen, handleClickOutside]);
   const moveFocus = (direction) => {
     setFocusedIndex((prev) => {
       let next = prev + direction;

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;
 }
 
 /* ============================================
@@ -47,9 +54,12 @@
   max-height: 60vh;
   margin-top: 10vh;
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md); /* 12px */
-  background-color: var(--color-bg-page-primary);
-  box-shadow: var(--shadow-modal);
+  border-radius: var(--radius-xl); /* 24px — the floating-surface shell */
+  background-color: var(--color-bg-glass);
+  box-shadow: var(--shadow-floating);
+  /* The glass token is deliberately translucent; this blur is what keeps
+     the page readable through the panel. */
+  backdrop-filter: blur(24px);
   overflow: hidden;
   transform: scale(0.98);
   transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
@@ -67,9 +77,16 @@
   display: flex;
   align-items: center;
   gap: var(--gap-sm); /* 8px */
-  padding: var(--padding-sm-md) var(--padding-md); /* 12px 16px */
+  padding: var(--padding-md) var(--padding-lg); /* 16px 20px */
   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 {
@@ -134,7 +151,18 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: var(--padding-xxs);
+  padding: var(--padding-sm);
+  /* 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 {
@@ -177,7 +205,7 @@
   display: flex;
   align-items: center;
   gap: var(--gap-sm-md);
-  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  padding: var(--padding-sm-md); /* 12px — 8px list inset keeps the text edge on the search row's 20px */
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
@@ -251,7 +279,7 @@
   display: flex;
   align-items: center;
   gap: var(--gap-md);
-  padding: var(--padding-sm) var(--padding-md);
+  padding: var(--padding-sm-md) var(--padding-lg);
   border-top: var(--border-xs) solid var(--color-divider);
   flex-shrink: 0;
   flex-wrap: wrap;