@robr0/design-system 0.15.0 → 0.16.0

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

@@ -54,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);
@@ -74,7 +77,7 @@
   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);
@@ -148,7 +151,7 @@
   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
@@ -202,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);
@@ -276,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;

package/components/CommandPalette/CommandPalette.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
+import { useState, useRef, useId, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Kbd } from "../Kbd/Kbd.js";
 import "./CommandPalette.css";
 import "../../fonts/material-symbols.css";
-const emptySubscribe = () => () => {
-};
-const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
 const CommandPalette = ({
   open,
   onOpenChange,
@@ -28,10 +29,9 @@ const CommandPalette = ({
   const inputRef = useRef(null);
   const panelRef = useRef(null);
   const listRef = useRef(null);
-  const previousFocusRef = useRef(null);
   const generatedId = useId();
   const baseClass = "ds-command-palette";
-  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const mounted = useMounted();
   const matches = useCallback(
     (command) => {
       const q = query.trim().toLowerCase();
@@ -68,58 +68,9 @@ const CommandPalette = ({
     document.addEventListener("keydown", handleHotkey);
     return () => document.removeEventListener("keydown", handleHotkey);
   }, [hotkey, open, onOpenChange]);
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-      const raf = requestAnimationFrame(() => inputRef.current?.focus());
-      return () => cancelAnimationFrame(raf);
-    }
-    if (previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const block = (event) => {
-      const target = event.target instanceof Element ? event.target : null;
-      if (target?.closest(`.${baseClass}__list`)) return;
-      event.preventDefault();
-    };
-    document.addEventListener("wheel", block, { passive: false });
-    document.addEventListener("touchmove", block, { passive: false });
-    return () => {
-      document.removeEventListener("wheel", block);
-      document.removeEventListener("touchmove", block);
-    };
-  }, [open, baseClass]);
-  useEffect(() => {
-    if (!open) return;
-    const handleTrapKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onOpenChange(false);
-        return;
-      }
-      if (e.key === "Tab") {
-        const panel = panelRef.current;
-        if (!panel) return;
-        const focusable = panel.querySelectorAll(FOCUSABLE);
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", handleTrapKeyDown);
-    return () => document.removeEventListener("keydown", handleTrapKeyDown);
-  }, [open, onOpenChange]);
+  useLayer({ open, onDismiss: () => onOpenChange(false) });
+  useFocusScope(panelRef, { active: open, initialFocus: () => inputRef.current });
+  useScrollLock(open, { strategy: "cancel-events", allowWithin: listRef });
   const runCommand = (command) => {
     if (command.disabled) return;
     command.onSelect?.();

package/components/Composer/Composer.css

@@ -166,6 +166,60 @@
   }
 }
 
+/* ============================================
+   CONTEXT CHIP
+   A full-width, non-interactive note at the very top of the shell — what
+   the model is currently looking at. Composer owns the chrome; the caller
+   passes the text.
+   ============================================ */
+
+.ds-composer__context {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  /* The action bar's tight --padding-sm ring, open toward the text below */
+  margin: var(--padding-sm) var(--padding-sm) 0;
+  /* ModelPicker's trigger geometry — the send button's height with the same
+     0/padding-md inset — so the chip and the bar's pills read as one family */
+  height: var(--ds-composer-send-size);
+  padding: 0 var(--padding-md);
+  background-color: var(--color-chat-context-bg);
+  /* A full pill, matching the suggestion chips around the composer */
+  border-radius: var(--radius-full);
+  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);
+  /* Tertiary, like DocumentChip's metadata line — the note is ambient
+     context, quieter than anything a person typed. The icon inherits it:
+     one tone for the whole note. */
+  color: var(--color-text-tertiary);
+  /* Not editable, not a control — but a click still falls through the shell
+     handler and focuses the textarea */
+  cursor: default;
+}
+
+.ds-composer__context-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-composer__context-icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* The text owns the truncation: one line, ellipsized only when the note
+   actually outgrows the shell — an ellipsis is a truncation mark, not
+   punctuation. The icon beside it never shrinks. */
+.ds-composer__context-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ============================================
    ATTACHMENTS ROW
    ============================================ */

package/components/Composer/Composer.d.ts

@@ -37,6 +37,22 @@ type ComposerOwnProps = {
      * field holds focus. Off by default.
      */
     aiGlow?: boolean;
+    /**
+     * Contextual note rendered as a full-width, non-interactive chip at the
+     * very top of the shell, above any attachments — the "what the model is
+     * looking at" line a chat host pins over the message ("Looking at
+     * “Page name”"). One line: a note too long for the shell truncates with
+     * an ellipsis. Composer owns the chip's chrome; the caller passes the
+     * text.
+     */
+    context?: React.ReactNode;
+    /**
+     * Material Symbol name rendered at the left of the context chip
+     * (`visibility`, `article`…). Decorative and hidden from assistive
+     * technology — the chip's text carries the meaning. None by default,
+     * matching the ai set's icon-free-unless-asked convention.
+     */
+    contextIcon?: string;
     /**
      * Attachment row rendered above the textarea (DocumentChips). Fully
      * controlled by the caller — Composer never owns the list.
@@ -59,10 +75,11 @@ type ComposerOwnProps = {
 export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof ComposerOwnProps> {
 }
 /**
- * Composer is the chat input shell: an attachments row, an auto-growing
- * textarea, a leading actions slot, and a trailing send button — the one
- * sanctioned primary-action teal in the chat set, because sending a message
- * is a genuine primary CTA. While `streaming`, send becomes stop and Enter
+ * Composer is the chat input shell: an optional context note ("Looking at
+ * “Page name”"), an attachments row, an auto-growing textarea, a leading
+ * actions slot, and a trailing send button — the one sanctioned
+ * primary-action teal in the chat set, because sending a message is a
+ * genuine primary CTA. While `streaming`, send becomes stop and Enter
  * is inert.
  *
  * The textarea grows with its content up to `maxRows`, then scrolls

package/components/Composer/Composer.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useLayoutEffect } from "react";
 import { CircularButton } from "../CircularButton/CircularButton.js";
+import "../../fonts/material-symbols.css";
 import "./Composer.css";
 const Composer = React.forwardRef(
   ({
@@ -13,6 +14,8 @@ const Composer = React.forwardRef(
     onStop,
     maxRows = 8,
     aiGlow = false,
+    context,
+    contextIcon,
     attachments,
     actions,
     trailingActions,
@@ -89,6 +92,10 @@ const Composer = React.forwardRef(
         style: { "--ds-composer-max-rows": maxRows },
         onClick: handleShellClick,
         children: [
+          context && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__context`, children: [
+            contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
+          ] }),
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
           /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",

package/components/Dialog/Dialog.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId } from "react";
 import ReactDOM from "react-dom";
 import "./Dialog.css";
 import "../../fonts/material-symbols.css";
-const emptySubscribe = () => () => {
-};
-const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
 const Dialog = React.forwardRef(
   ({
     open,
@@ -21,7 +22,6 @@ const Dialog = React.forwardRef(
     ...rest
   }, ref) => {
     const panelRef = useRef(null);
-    const previousFocusRef = useRef(null);
     const titleId = useId();
     const descId = useId();
     const baseClass = "ds-dialog";
@@ -30,63 +30,10 @@ const Dialog = React.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    const mounted = useSyncExternalStore(
-      emptySubscribe,
-      () => true,
-      () => false
-    );
-    useEffect(() => {
-      if (open) {
-        previousFocusRef.current = document.activeElement;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (!open) return;
-      const panel = panelRef.current;
-      if (panel) {
-        const first = panel.querySelector(
-          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
-        ) ?? panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
-      }
-      const handleKeyDown = (e) => {
-        if (e.key === "Escape" && dismissible) {
-          onOpenChange(false);
-          return;
-        }
-        if (e.key === "Tab" && panel) {
-          const focusable = panel.querySelectorAll(FOCUSABLE);
-          if (focusable.length === 0) return;
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-        }
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [open, dismissible, onOpenChange]);
-    useEffect(() => {
-      if (!open && previousFocusRef.current) {
-        previousFocusRef.current.focus();
-        previousFocusRef.current = null;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (open) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-      return () => {
-        document.body.style.overflow = "";
-      };
-    }, [open]);
+    const mounted = useMounted();
+    useLayer({ open, dismissOnEscape: dismissible, onDismiss: () => onOpenChange(false) });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
     const handleBackdropClick = () => {
       if (dismissible) onOpenChange(false);
     };

package/components/Drawer/Drawer.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId } from "react";
 import ReactDOM from "react-dom";
 import "./Drawer.css";
 import "../../fonts/material-symbols.css";
-const emptySubscribe = () => () => {
-};
-const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
 const Drawer = React.forwardRef(
   ({
     open,
@@ -22,7 +23,6 @@ const Drawer = React.forwardRef(
     ...rest
   }, ref) => {
     const panelRef = useRef(null);
-    const previousFocusRef = useRef(null);
     const titleId = useId();
     const descId = useId();
     const baseClass = "ds-drawer";
@@ -31,63 +31,10 @@ const Drawer = React.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    const mounted = useSyncExternalStore(
-      emptySubscribe,
-      () => true,
-      () => false
-    );
-    useEffect(() => {
-      if (open) {
-        previousFocusRef.current = document.activeElement;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (!open) return;
-      const panel = panelRef.current;
-      if (panel) {
-        const first = panel.querySelector(
-          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
-        ) ?? panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
-      }
-      const handleKeyDown = (e) => {
-        if (e.key === "Escape" && dismissible) {
-          onOpenChange(false);
-          return;
-        }
-        if (e.key === "Tab" && panel) {
-          const focusable = panel.querySelectorAll(FOCUSABLE);
-          if (focusable.length === 0) return;
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-        }
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [open, dismissible, onOpenChange]);
-    useEffect(() => {
-      if (!open && previousFocusRef.current) {
-        previousFocusRef.current.focus();
-        previousFocusRef.current = null;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (open) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-      return () => {
-        document.body.style.overflow = "";
-      };
-    }, [open]);
+    const mounted = useMounted();
+    useLayer({ open, dismissOnEscape: dismissible, onDismiss: () => onOpenChange(false) });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
     const handleScrimClick = () => {
       if (dismissible) onOpenChange(false);
     };

package/components/Dropdown/Dropdown.js

@@ -63,9 +63,10 @@ const Dropdown = React.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isOpen) return;
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [handleClickOutside]);
+    }, [isOpen, handleClickOutside]);
     const handleKeyDown = (e) => {
       if (disabled) return;
       switch (e.key) {

package/components/DropdownMenu/DropdownMenu.js

@@ -177,6 +177,7 @@ const DropdownMenu = ({
     setFocusedIndex(-1);
   }, []);
   useEffect(() => {
+    if (!isOpen) return;
     const handler = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
         handleClose();
@@ -184,7 +185,7 @@ const DropdownMenu = ({
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, [handleClose]);
+  }, [isOpen, handleClose]);
   const handleKeyDown = (e) => {
     switch (e.key) {
       case "Enter":
@@ -323,14 +324,21 @@ const DropdownMenu = ({
     size === "compact" ? `${baseClass}__panel--compact` : ""
   ].filter(Boolean).join(" ");
   const itemCounter = { count: 0 };
+  const triggerProps = React.isValidElement(trigger) ? trigger.props : void 0;
   return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
     /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? menuId : void 0,
       "aria-activedescendant": activeDescendantId,
-      onClick: handleToggle,
-      onKeyDown: handleKeyDown
+      onClick: (e) => {
+        triggerProps?.onClick?.(e);
+        handleToggle();
+      },
+      onKeyDown: (e) => {
+        triggerProps?.onKeyDown?.(e);
+        handleKeyDown(e);
+      }
     }) : /* @__PURE__ */ jsx(
       "button",
       {

package/components/ModelPicker/ModelPicker.js

@@ -60,9 +60,10 @@ const ModelPicker = React.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isOpen) return;
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [handleClickOutside]);
+    }, [isOpen, handleClickOutside]);
     const handleTriggerKeyDown = (e) => {
       if (disabled) return;
       switch (e.key) {

package/components/Popover/Popover.js

@@ -27,6 +27,9 @@ const Popover = ({
     }
     onOpenChange?.(next);
   }, [isControlled, onOpenChange]);
+  useEffect(() => {
+    return () => clearTimeout(hoverTimeoutRef.current);
+  }, []);
   useEffect(() => {
     if (!isOpen || trigger !== "click") return;
     const handler = (e) => {

package/components/SegmentedControl/SegmentedControl.css

@@ -55,12 +55,14 @@
   transition: color var(--motion-duration-base) var(--motion-ease-standard);
 }
 
-/* Icon */
+/* Icon — same idle tier as the label, so an icon never reads dimmer than
+   the text beside it, and an icon-only segment (the site's theme toggle)
+   holds label-strength contrast in both modes. */
 .ds-segmented-control__icon {
   flex-shrink: 0;
   --icon-size: var(--icon-size-md);
   line-height: 1;
-  color: var(--color-icon-secondary);
+  color: var(--color-text-secondary);
   transition: color var(--motion-duration-base) var(--motion-ease-standard);
 }
 

package/components/SourceTrail/SourceTrail.css

@@ -161,11 +161,11 @@
 }
 
 .ds-source-trail__row--active .ds-source-trail__row-indicator {
-  color: var(--color-status-info-text);
+  color: var(--color-status-info-icon);
 }
 
 .ds-source-trail__row--done .ds-source-trail__row-indicator {
-  color: var(--color-status-positive-text);
+  color: var(--color-status-positive-icon);
 }
 
 /* A pending source has not been opened yet, so its chip sits quieter */

package/components/TimePicker/TimePicker.js

@@ -101,9 +101,10 @@ const TimePicker = React.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isOpen) return;
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [handleClickOutside]);
+    }, [isOpen, handleClickOutside]);
     const handleKeyDown = (e) => {
       if (disabled) return;
       switch (e.key) {

package/components/ToolCall/ToolCall.css

@@ -13,7 +13,11 @@
    ============================================ */
 
 .ds-tool-call {
+  /* Two colour channels per status: -text for the status word (tuned for
+     text contrast) and -icon for the indicator glyph, which needs a hue
+     that survives a plain surface — see the status token comment. */
   --ds-tool-call-color: var(--color-text-secondary);
+  --ds-tool-call-icon-color: var(--color-icon-secondary);
 
   display: flex;
   flex-direction: column;
@@ -71,7 +75,7 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  color: var(--ds-tool-call-color);
+  color: var(--ds-tool-call-icon-color);
 }
 
 .ds-tool-call__indicator .material-symbols-rounded {
@@ -150,18 +154,22 @@
 
 .ds-tool-call--pending {
   --ds-tool-call-color: var(--color-status-warning-text);
+  --ds-tool-call-icon-color: var(--color-status-warning-icon);
 }
 
 .ds-tool-call--running {
   --ds-tool-call-color: var(--color-status-info-text);
+  --ds-tool-call-icon-color: var(--color-status-info-icon);
 }
 
 .ds-tool-call--success {
   --ds-tool-call-color: var(--color-status-positive-text);
+  --ds-tool-call-icon-color: var(--color-status-positive-icon);
 }
 
 .ds-tool-call--error {
   --ds-tool-call-color: var(--color-status-error-text);
+  --ds-tool-call-icon-color: var(--color-status-error-icon);
 }
 
 /* ============================================

package/components/Tooltip/Tooltip.js

@@ -24,6 +24,12 @@ const Tooltip = ({
     clearTimeout(showTimeoutRef.current);
     hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
   };
+  useEffect(() => {
+    return () => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
   useEffect(() => {
     if (!visible) return;
     const onKeyDown = (e) => {