@robr0/design-system 0.10.0 → 0.12.0

package/components/NotificationCenter/NotificationCenter.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React, { useState, useId } from "react";
 import { EmptyState } from "../EmptyState/EmptyState.js";
 import "./NotificationCenter.css";
 import "../../fonts/material-symbols.css";
@@ -42,6 +42,11 @@ const NotificationCenter = React.forwardRef(
     const isTabControlled = activeTab !== void 0;
     const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab ?? tabs?.[0]?.value);
     const currentTab = isTabControlled ? activeTab : uncontrolledTab;
+    const idBase = useId();
+    const panelId = `${idBase}-panel`;
+    const tabIdFor = (index) => `${idBase}-tab-${index}`;
+    const activeTabIndex = tabs?.findIndex((tab) => tab.value === currentTab) ?? -1;
+    const hasTabs = !!tabs && tabs.length > 0;
     const selectTab = (value) => {
       if (!isTabControlled) setUncontrolledTab(value);
       onTabChange?.(value);
@@ -80,21 +85,23 @@ const NotificationCenter = React.forwardRef(
       /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
         /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
           /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
-          unreadCount !== void 0 && unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__unread`, children: [
+          unreadCount !== void 0 && unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__unread`, "aria-live": "polite", children: [
             unreadCount,
             " unread"
           ] })
         ] }),
         onMarkAllRead && /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__mark-all`, onClick: onMarkAllRead, children: markAllLabel })
       ] }),
-      tabs && tabs.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, role: "tablist", "aria-label": `${title} filters`, children: tabs.map((tab, index) => {
+      hasTabs && /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, role: "tablist", "aria-label": `${title} filters`, children: tabs.map((tab, index) => {
         const isActive = tab.value === currentTab;
         return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
+            id: tabIdFor(index),
             role: "tab",
             "aria-selected": isActive,
+            "aria-controls": panelId,
             tabIndex: isActive ? 0 : -1,
             className: [
               `${baseClass}__tab`,
@@ -110,15 +117,24 @@ const NotificationCenter = React.forwardRef(
           tab.value
         );
       }) }),
-      /* @__PURE__ */ jsx("div", { className: `${baseClass}__list`, children: hasItems ? children : emptyState ?? /* @__PURE__ */ jsx(
-        EmptyState,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          icon: "notifications",
-          title: "Nothing new",
-          description: "Notifications will collect here as they arrive.",
-          size: "compact"
+          className: `${baseClass}__list`,
+          role: hasTabs ? "tabpanel" : void 0,
+          id: hasTabs ? panelId : void 0,
+          "aria-labelledby": hasTabs && activeTabIndex >= 0 ? tabIdFor(activeTabIndex) : void 0,
+          children: hasItems ? children : emptyState ?? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              icon: "notifications",
+              title: "Nothing new",
+              description: "Notifications will collect here as they arrive.",
+              size: "compact"
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
 );

package/components/NumberInput/NumberInput.css

@@ -152,3 +152,12 @@
 .ds-numberinput--compact .ds-numberinput__stepper {
   padding: 0 var(--padding-sm); /* 8px */
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-numberinput .material-symbols-rounded {
+  color: inherit;
+}

package/components/Panel/Panel.css

@@ -0,0 +1,26 @@
+/* ============================================
+   PANEL COMPONENT
+   The plain dashboard surface
+   ============================================ */
+
+.ds-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  min-width: 0;
+  background-color: var(--color-bg-container-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--padding-lg);
+}
+
+/* ============================================
+   PADDING VARIANTS
+   ============================================ */
+
+.ds-panel--compact {
+  padding: var(--padding-md);
+}
+
+.ds-panel--flush {
+  padding: 0;
+}

package/components/Panel/Panel.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/** Props owned by Panel itself; everything else falls through to the <div>. */
+type PanelOwnProps = {
+    /** Interior padding: 'default' uses --padding-lg, 'compact' uses --padding-md, 'none' removes it */
+    padding?: 'default' | 'compact' | 'none';
+    /** Additional CSS classes */
+    className?: string;
+    /** Panel content */
+    children?: React.ReactNode;
+};
+export interface PanelProps extends PanelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PanelOwnProps> {
+}
+/**
+ * Panel component: the plain dashboard surface.
+ * A rounded container on the primary container background with no border and
+ * no shadow: just the surface, ready for whatever a dashboard region holds.
+ * Content stacks vertically with a medium gap.
+ *
+ * Forwards a ref to the `<div>` element and spreads unrecognised props onto it.
+ */
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Panel/Panel.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Panel.css";
+const Panel = React.forwardRef(
+  ({ padding = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-panel";
+    const classes = [
+      baseClass,
+      padding === "compact" ? `${baseClass}--compact` : "",
+      padding === "none" ? `${baseClass}--flush` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Panel.displayName = "Panel";
+export {
+  Panel
+};

package/components/Popover/Popover.css

@@ -35,13 +35,15 @@
 
   /* Hidden by default */
   opacity: 0;
+  visibility: hidden; /* keeps panel content out of the tab order when closed */
   pointer-events: none;
   transform: scale(0.96);
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard), visibility var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-popover__panel--open {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
   transform: scale(1);
 }

package/components/Popover/Popover.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 import "./Popover.css";
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "summary"]);
 const canCarryPopoverSemantics = (el) => typeof el.type === "string" ? INTERACTIVE_TAGS.has(el.type) : true;
@@ -59,7 +60,7 @@ const Popover = ({
   };
   const handleMouseLeave = () => {
     if (trigger === "hover") {
-      hoverTimeoutRef.current = setTimeout(() => setOpen(false), 150);
+      hoverTimeoutRef.current = setTimeout(() => setOpen(false), MOTION_HOVER_HIDE_DELAY_MS);
     }
   };
   const baseClass = "ds-popover";

package/components/SourceChip/SourceChip.css

@@ -100,3 +100,12 @@
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-source-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/Stat/Stat.css

@@ -65,14 +65,56 @@
   line-height: 1;
 }
 
+/* The trend tokens are theme-split for contrast: deep status inks on
+   light surfaces, the mint/coral accents on dark ones. */
 .ds-stat__delta--up {
-  color: var(--color-core-accent-mint);
+  color: var(--color-trend-up);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-core-accent-coral);
+  color: var(--color-trend-down);
 }
 
 .ds-stat__delta--neutral {
   color: var(--color-text-tertiary);
 }
+
+/* ============================================
+   INLINE DELTA — delta to the right of the
+   value, bottom-aligned to its baseline
+   ============================================ */
+
+.ds-stat--delta-inline {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'value delta'
+    'label label';
+  column-gap: var(--gap-sm);
+  row-gap: var(--gap-xxs);
+}
+
+.ds-stat--delta-inline .ds-stat__value {
+  grid-area: value;
+}
+
+.ds-stat--delta-inline .ds-stat__label {
+  grid-area: label;
+}
+
+.ds-stat--delta-inline .ds-stat__delta {
+  grid-area: delta;
+  align-self: end;
+  justify-self: start;
+  /* Optical baseline: compensates the display value's half-leading. */
+  margin-bottom: var(--gap-xs);
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-stat .material-symbols-rounded {
+  color: inherit;
+}

package/components/Stat/Stat.d.ts

@@ -7,6 +7,8 @@ export interface StatProps {
     delta?: string;
     /** Direction of the delta — colours it and adds an arrow */
     trend?: 'up' | 'down' | 'neutral';
+    /** Where the delta sits: stacked below the label, or inline to the right of the value, bottom-aligned */
+    deltaPlacement?: 'stacked' | 'inline';
     /** Stat size */
     size?: 'default' | 'large';
     /** Additional CSS classes */
@@ -16,4 +18,4 @@ export interface StatProps {
  * Stat component — a single headline metric with a label and an
  * optional trend delta. Compose several in a row for a metrics band.
  */
-export declare const Stat: ({ value, label, delta, trend, size, className, }: StatProps) => import("react").JSX.Element;
+export declare const Stat: ({ value, label, delta, trend, deltaPlacement, size, className, }: StatProps) => import("react").JSX.Element;

package/components/Stat/Stat.js

@@ -11,11 +11,17 @@ const Stat = ({
   label,
   delta,
   trend = "neutral",
+  deltaPlacement = "stacked",
   size = "default",
   className = ""
 }) => {
   const baseClass = "ds-stat";
-  const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    deltaPlacement === "inline" ? `${baseClass}--delta-inline` : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value }),
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),

package/components/Stepper/Stepper.css

@@ -205,3 +205,12 @@ button.ds-stepper__content:hover .ds-stepper__label {
   height: auto;
   transform: translateX(-50%);
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-stepper .material-symbols-rounded {
+  color: inherit;
+}

package/components/TagInput/TagInput.css

@@ -158,3 +158,12 @@
   line-height: var(--font-paragraph-sm-line-height);
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-taginput .material-symbols-rounded {
+  color: inherit;
+}

package/components/TimePicker/TimePicker.js

@@ -158,6 +158,7 @@ const TimePicker = React.forwardRef(
         focusedEl?.scrollIntoView({ block: "nearest" });
       }
     }, [focusedIndex, isOpen]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && timeOptions[focusedIndex] ? `${inputId}-option-${focusedIndex}` : void 0;
     return /* @__PURE__ */ jsxs(
       Field,
       {
@@ -181,7 +182,8 @@ const TimePicker = React.forwardRef(
               className: `${baseClass}__trigger`,
               "aria-expanded": isOpen,
               "aria-haspopup": "listbox",
-              "aria-controls": `${inputId}-listbox`,
+              "aria-controls": isOpen ? `${inputId}-listbox` : void 0,
+              "aria-activedescendant": activeOptionId,
               "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
               "aria-invalid": error || void 0,
               disabled,
@@ -211,6 +213,7 @@ const TimePicker = React.forwardRef(
               children: timeOptions.map((option, index) => /* @__PURE__ */ jsxs(
                 "li",
                 {
+                  id: `${inputId}-option-${index}`,
                   className: [
                     `${baseClass}__option`,
                     option.value === selectedValue ? `${baseClass}__option--selected` : "",

package/components/Toast/Toast.css

@@ -1,11 +1,23 @@
 /* ============================================
    TOAST CONTAINER
    Fixed position stack for notifications
+
+   Consumer hooks (custom properties with fallbacks, so the defaults hold
+   until a consumer sets them): a page that keeps its own fixed chrome in a
+   corner (a chat launcher, a cookie bar, a docked panel) sets the matching
+   inset so toasts stack clear of it rather than on top of it, and raises
+   --ds-toast-z above its own overlay layers. Toasts are transient feedback
+   and must be seen; a launcher can be covered for five seconds.
+     --ds-toast-z             stacking order (default 200, the library's top)
+     --ds-toast-inset-top     gap from the top edge for top-* placements
+     --ds-toast-inset-bottom  gap from the bottom edge for bottom-* placements
+     --ds-toast-inset-left    gap from the left edge for *-left placements
+     --ds-toast-inset-right   gap from the right edge for *-right placements
    ============================================ */
 
 .ds-toast-container {
   position: fixed;
-  z-index: 200;
+  z-index: var(--ds-toast-z, 200);
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm); /* 8px */
@@ -14,38 +26,38 @@
 }
 
 .ds-toast-container--top-right {
-  top: 0;
-  right: 0;
+  top: var(--ds-toast-inset-top, 0);
+  right: var(--ds-toast-inset-right, 0);
   align-items: flex-end;
 }
 
 .ds-toast-container--top-left {
-  top: 0;
-  left: 0;
+  top: var(--ds-toast-inset-top, 0);
+  left: var(--ds-toast-inset-left, 0);
   align-items: flex-start;
 }
 
 .ds-toast-container--bottom-right {
-  bottom: 0;
-  right: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
+  right: var(--ds-toast-inset-right, 0);
   align-items: flex-end;
 }
 
 .ds-toast-container--bottom-left {
-  bottom: 0;
-  left: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
+  left: var(--ds-toast-inset-left, 0);
   align-items: flex-start;
 }
 
 .ds-toast-container--top-center {
-  top: 0;
+  top: var(--ds-toast-inset-top, 0);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 
 .ds-toast-container--bottom-center {
-  bottom: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
@@ -340,3 +352,12 @@
     transform: scaleX(0);
   }
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-toast .material-symbols-rounded {
+  color: inherit;
+}

package/components/Toast/Toast.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useSyncExternalStore, useCallback, useContext, createContext, useRef, useEffect } from "react";
+import { MOTION_AUTO_DISMISS_MS } from "../../tokens/motion.js";
 import ReactDOM from "react-dom";
 import "./Toast.css";
 import "../../fonts/material-symbols.css";
@@ -62,8 +63,7 @@ const ToastItem = ({
     "div",
     {
       className: classes,
-      role: "status",
-      "aria-live": variant === "error" || variant === "warning" ? "assertive" : "polite",
+      role: variant === "error" || variant === "warning" ? "alert" : void 0,
       onMouseEnter: () => setPauseTimer(true),
       onMouseLeave: () => setPauseTimer(false),
       onFocus: () => setPauseTimer(true),
@@ -119,7 +119,7 @@ const ToastProvider = ({
         ...data,
         id,
         variant: data.variant || "info",
-        duration: data.duration ?? 5e3,
+        duration: data.duration ?? MOTION_AUTO_DISMISS_MS,
         dismissible: data.dismissible ?? true
       };
       setToasts((prev) => {
@@ -150,6 +150,7 @@ const ToastProvider = ({
           className: containerClasses,
           role: "region",
           "aria-label": "Notifications",
+          "aria-live": "polite",
           children: toasts.map((t) => /* @__PURE__ */ jsx(
             ToastItem,
             {
@@ -159,7 +160,7 @@ const ToastProvider = ({
               variant: t.variant || "info",
               dismissible: t.dismissible ?? true,
               icon: t.icon,
-              duration: t.duration ?? 5e3,
+              duration: t.duration ?? MOTION_AUTO_DISMISS_MS,
               onDismiss: dismiss
             },
             t.id

package/components/ToggleGroup/ToggleGroup.css

@@ -82,3 +82,12 @@
   opacity: 0.4;
   pointer-events: none;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-toggle-group .material-symbols-rounded {
+  color: inherit;
+}

package/components/ToolCall/ToolCall.css

@@ -20,7 +20,10 @@
   width: 100%;
   background-color: var(--color-bg-container-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md);
+  /* The chat furniture shares one 24px shell with MessageCard and the
+     bubbles; a closed row rounds to a capsule the way a one-line bubble
+     does, echoing the system's pill buttons. */
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
@@ -33,7 +36,8 @@
   align-items: center;
   gap: var(--gap-sm);
   width: 100%;
-  padding: var(--padding-sm) var(--padding-md);
+  /* 20px sides — the card family's shared content inset. */
+  padding: var(--padding-sm) var(--padding-lg);
   background: none;
   border: none;
   text-align: left;
@@ -181,7 +185,7 @@
 }
 
 .ds-tool-call--open .ds-tool-call__content {
-  padding: var(--padding-md);
+  padding: var(--padding-md) var(--padding-lg);
   border-top: var(--border-xs) solid var(--color-divider);
 }
 
@@ -202,8 +206,16 @@
 .ds-tool-call__actions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm-md) var(--padding-md);
-  border-top: var(--border-xs) solid var(--color-divider);
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-tool-call .material-symbols-rounded {
+  color: inherit;
 }

package/components/Tooltip/Tooltip.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, isValidElement, cloneElement } from "react";
+import { useState, useRef, useId, useEffect, isValidElement, cloneElement } from "react";
 import "./Tooltip.css";
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 const Tooltip = ({
   children,
   content,
   position = "top",
-  showDelay = 300,
-  hideDelay = 150,
+  showDelay = MOTION_HOVER_SHOW_DELAY_MS,
+  hideDelay = MOTION_HOVER_HIDE_DELAY_MS,
   className = ""
 }) => {
   const [visible, setVisible] = useState(false);
@@ -23,6 +24,18 @@ const Tooltip = ({
     clearTimeout(showTimeoutRef.current);
     hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
   };
+  useEffect(() => {
+    if (!visible) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+        setVisible(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [visible]);
   const trigger = isValidElement(children) ? cloneElement(children, {
     "aria-describedby": tooltipId
   }) : children;
@@ -42,19 +55,10 @@ const Tooltip = ({
       onBlur: hide,
       children: [
         trigger,
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: panelClasses,
-            role: "tooltip",
-            id: tooltipId,
-            "aria-hidden": !visible,
-            children: [
-              content,
-              /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("span", { className: panelClasses, role: "tooltip", id: tooltipId, children: [
+          content,
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
+        ] })
       ]
     }
   );