@sableui/react 0.13.2 → 0.15.0

package/dist/components/toast/toast.meta.js

@@ -136,7 +136,7 @@ var toastMeta = {
       name: "type (toast option)",
       type: '"success" | "error" | "warning" | "info" | "loading"',
       default: "\u2014",
-      description: "Set by the toast.* helpers. Drives a semantic left accent (success\u2192success, error\u2192destructive, warning\u2192tone-warning, info\u2192tone-info); loading shows a spinner. Both loading and error persist until updated or dismissed unless the call supplies a timeout."
+      description: "Set by the toast.* helpers. Drives a leading status glyph from the shared tone list, the same one Note and InlineStatus use (success\u2192success, error\u2192destructive, warning\u2192warning, info\u2192info), which blooms in as the toast lands; loading shows a spinner, and the glyph blooms in its place when the toast settles. Both loading and error persist until updated or dismissed unless the call supplies a timeout."
     }
   ],
   subcomponents: [
@@ -211,6 +211,12 @@ var toastMeta = {
       part: "ToastRoot (stacked)",
       why: "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
     },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Status glyph",
+      why: "The glyph is what says how it went, so it lands as its own beat: it blooms in 120ms after the card, and blooms again in the spinner's place when a loading toast settles. A 16px glyph needs that amplitude to read as an answer; the card itself only slides."
+    },
     {
       slot: "activity",
       recipe: "none",

package/dist/components/toggle/toggle.js

@@ -3,8 +3,10 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { createContext, useContext } from "react";
 import { cn } from "../../lib/cn.js";
-import { SEGMENTED_ITEM, SEGMENTED_TRACK } from "../../lib/segmented.js";
-import { jsx } from "react/jsx-runtime";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { SEGMENTED_INNER_RADIUS, SEGMENTED_ITEM, SEGMENTED_TRACK } from "../../lib/segmented.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ToggleAppearanceContext = createContext("default");
 function Toggle({ className, ...props }) {
   const appearance = useContext(ToggleAppearanceContext);
@@ -31,17 +33,38 @@ function Toggle({ className, ...props }) {
   );
 }
 Toggle.displayName = "Toggle";
-function ToggleGroup({ className, appearance = "default", ...props }) {
-  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
+var SEGMENTED_GLIDE_HANDOFF = "[&[data-glide]>[data-pressed]]:bg-transparent";
+function ToggleGroup({
+  className,
+  appearance = "default",
+  motion,
+  children,
+  ...props
+}) {
+  const glide = appearance === "segmented" && !props.multiple;
+  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsxs(
     BaseToggleGroup,
     {
       "data-appearance": appearance,
+      "data-motion": motionAttribute(motion),
       className: cn(
         appearance === "segmented" ? SEGMENTED_TRACK : "inline-flex items-center gap-1",
+        glide && SEGMENTED_GLIDE_HANDOFF,
         className
       ),
       ...props,
-      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0
+      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0,
+      children: [
+        glide && /* @__PURE__ */ jsx(
+          HighlightGlide,
+          {
+            follow: "data-pressed",
+            timing: "selection",
+            className: cn(SEGMENTED_INNER_RADIUS, "bg-accent motion-glide")
+          }
+        ),
+        children
+      ]
     }
   ) });
 }

package/dist/components/toggle/toggle.meta.js

@@ -69,7 +69,7 @@ var toggleMeta = {
       name: "appearance",
       type: '"default" | "segmented"',
       default: '"default"',
-      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Toggles inside inherit it."
+      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Single-select segmented draws ONE fill that glides to the pressed option and resizes to its label; multi-select keeps a fill per pressed option. Toggles inside inherit it."
     },
     {
       name: "multiple",
@@ -77,6 +77,12 @@ var toggleMeta = {
       default: "false",
       description: "On ToggleGroup: allow several toggles pressed at once. The default is single-select, which behaves like a radio group."
     },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "On ToggleGroup: how much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
     {
       name: "Toggle",
       type: "Base UI Toggle props (pressed, defaultPressed, onPressedChange, disabled, value) + className",
@@ -87,7 +93,7 @@ var toggleMeta = {
   subcomponents: [
     {
       name: "ToggleGroup",
-      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + className',
+      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + motion?: "full" | "subtle" | "off" + className',
       description: "Groups child Toggles and shares pressed state across them \u2014 each Toggle inside carries a value. Defaults to multiple: false (single-select) \u2014 the fit for view-mode switches and segmented controls; pass multiple to allow several pressed at once, e.g. a row of formatting toggles."
     },
     {
@@ -100,6 +106,38 @@ var toggleMeta = {
     appearance: ["default", "segmented"]
   },
   tokensUsed: ["muted-foreground", "foreground", "accent", "accent-foreground", "card", "border", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Toggle",
+      why: "Toggles arrive with the toolbar or header they sit in. Animating each one in would make a row of controls ripple for no reason."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Toggle",
+      why: "Hover and the pressed fill ease rather than flip, so pressing reads as the same button changing state, not a different button appearing."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Toggle",
+      why: "The small settle under the finger confirms the press landed before the state change is read \u2014 the difference matters most on touch, where there is no hover."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Segmented fill",
+      why: 'In a single-select segmented group one fill travels to the chosen option and stretches to its label, so a view switch reads as one control now pointing elsewhere. Measured, because labels differ in width. Expressive: motion="subtle" lands it in place.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Toggle",
+      why: "A toggle commits instantly. Work that follows from the new state shows where its result appears, not on the control."
+    }
+  ],
   a11y: [
     "Base UI sets aria-pressed on each Toggle and manages the pressed/disabled states.",
     "ToggleGroup provides arrow-key roving focus across its items; loopFocus wraps at the ends.",
@@ -119,6 +157,10 @@ var toggleMeta = {
       label: "Segmented view switch",
       code: '<ToggleGroup appearance="segmented" defaultValue={["list"]} aria-label="View"><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
     },
+    {
+      label: "Segmented with labels, subtle motion",
+      code: '<ToggleGroup appearance="segmented" motion="subtle" defaultValue={["week"]} aria-label="Range"><Toggle value="day">Day</Toggle><Toggle value="week">Week</Toggle><Toggle value="month">Month</Toggle></ToggleGroup>'
+    },
     {
       label: "Multi-select group",
       code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'

package/dist/components/tool-call/index.js

@@ -0,0 +1,8 @@
+// src/components/tool-call/index.ts
+import { TOOL_CALL_STATUS_LABELS, ToolCall } from "./tool-call.js";
+import { toolCallMeta } from "./tool-call.meta.js";
+export {
+  TOOL_CALL_STATUS_LABELS,
+  ToolCall,
+  toolCallMeta
+};

package/dist/components/tool-call/tool-call.js

@@ -0,0 +1,117 @@
+// src/components/tool-call/tool-call.tsx
+import { useRef } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { CodeBlock } from "../code-block/index.js";
+import {
+  Collapsible,
+  CollapsibleIndicator,
+  CollapsiblePanel,
+  CollapsibleTrigger
+} from "../collapsible/index.js";
+import { Spinner } from "../spinner/index.js";
+import { toolCallHeaderVariants, toolCallVariants } from "./tool-call.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TOOL_CALL_STATUS_LABELS = {
+  running: "Running",
+  awaiting: "Needs approval",
+  complete: "Done",
+  error: "Failed",
+  denied: "Denied"
+};
+var STATUSES = Object.keys(TOOL_CALL_STATUS_LABELS);
+function formatData(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+function ToolCall({
+  name,
+  title,
+  status = "running",
+  statusLabel,
+  input,
+  output,
+  error,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+  ...props
+}) {
+  const tier = useTypeTier();
+  const word = statusLabel ?? TOOL_CALL_STATUS_LABELS[status];
+  const mountedStatus = useRef(status).current;
+  const announcement = status === mountedStatus ? "" : `${typeof title === "string" ? title : name}: ${word}`;
+  const hasInput = input !== void 0;
+  const hasOutput = children !== void 0 || output !== void 0;
+  const hasDetails = hasInput || hasOutput;
+  const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "motion-icon-swap size-4 shrink-0", children: STATUSES.map((s) => /* @__PURE__ */ jsx("span", { "data-active": s === status, className: "inline-flex", children: s === "running" ? /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        size: "sm",
+        role: "none",
+        "aria-label": void 0,
+        className: cn("text-muted-foreground", status !== "running" && "[&_svg]:[animation-play-state:paused]")
+      }
+    ) : /* @__PURE__ */ jsx(Icon, { name: GLYPHS[s].name, className: GLYPHS[s].className }) }, s)) }),
+    /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 items-baseline gap-2", tier.body), children: [
+      /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", !title && "font-mono"), children: title ?? name }),
+      title ? /* @__PURE__ */ jsx("span", { className: cn("hidden truncate font-mono text-muted-foreground sm:inline", tier.secondary), children: name }) : null
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-muted-foreground", tier.secondary, status === "error" && "text-destructive"), children: word }),
+    hasDetails ? /* @__PURE__ */ jsx(CollapsibleIndicator, {}) : null
+  ] });
+  const errorLine = status === "error" && error ? /* @__PURE__ */ jsx("p", { className: cn("px-3 pb-2 text-destructive", tier.supporting), children: error }) : null;
+  const live = /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: announcement });
+  if (!hasDetails) {
+    return /* @__PURE__ */ jsxs("div", { "data-status": status, className: cn(toolCallVariants({ status }), className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: toolCallHeaderVariants({ interactive: false }), children: row }),
+      errorLine,
+      live
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      "data-status": status,
+      defaultOpen,
+      open,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      className: cn(toolCallVariants({ status }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { className: cn("group/collapsible", toolCallHeaderVariants({ interactive: true })), children: row }),
+        errorLine,
+        /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-t border-border p-3", children: [
+          hasInput ? /* @__PURE__ */ jsx(Detail, { label: "Input", tier: tier.label, code: formatData(input) }) : null,
+          children !== void 0 ? children : output !== void 0 ? /* @__PURE__ */ jsx(Detail, { label: "Output", tier: tier.label, code: formatData(output) }) : null
+        ] }) }),
+        live
+      ]
+    }
+  );
+}
+ToolCall.displayName = "ToolCall";
+var GLYPHS = {
+  awaiting: { name: "clock", className: "text-tone-warning" },
+  complete: { name: "check", className: "text-muted-foreground" },
+  error: { name: "warning", className: "text-destructive" },
+  denied: { name: "xmark", className: "text-muted-foreground" }
+};
+function Detail({ label, tier, code }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier), children: label }),
+    /* @__PURE__ */ jsx(CodeBlock, { code })
+  ] });
+}
+export {
+  TOOL_CALL_STATUS_LABELS,
+  ToolCall
+};

package/dist/components/tool-call/tool-call.meta.js

@@ -0,0 +1,147 @@
+// src/components/tool-call/tool-call.meta.ts
+var toolCallMeta = {
+  name: "ToolCall",
+  summary: "One tool an agent called, as a quiet row inside its turn: a status glyph, what it did, the tool's name and where it is \u2014 with the arguments and result behind a disclosure.",
+  status: "stable",
+  keywords: [
+    "tool call",
+    "function call",
+    "tool use",
+    "agent step",
+    "mcp",
+    "ai",
+    "tool result",
+    "agent activity"
+  ],
+  usage: {
+    description: "Use it for each tool call in an assistant's turn, so the person can see what the agent did and check any step. The row is the summary \u2014 glyph, a plain-words title, the tool's name, the status \u2014 and stays one line, so a turn with ten calls is still scannable. Input and output sit behind the disclosure, because they are read rarely and, when they are, in full.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Give it a `title` in plain words, in the tense of the status: "Searching the docs" while running, "Searched the docs" once done. The `name` stays beside it in mono for the person who wants to know exactly which tool ran.'
+      },
+      {
+        guidance: "do",
+        description: "Drive `status` from the call's real state and keep the same element mounted as it changes. The spinner swaps for the outcome in place, and the change is announced to screen readers once."
+      },
+      {
+        guidance: "do",
+        description: 'Pass `error` with `status="error"`. It shows under the row without opening anything, because a failure is the one result everyone needs to read.'
+      },
+      {
+        guidance: "do",
+        description: "Pass a rendered result as `children` when the output is something to look at \u2014 a list of hits, a diff \u2014 rather than data to inspect. It replaces the output's code view, and `input` still shows above it."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not put the approve and deny buttons in a ToolCall. A call held for permission is `status="awaiting"` here, and the decision itself is ApprovalBlock, which says what will happen and asks once.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for the agent's thinking or a progress note. A wait with no tool behind it is ThinkingOrb or a Spinner with a status line, and a row that claims a tool ran when none did makes every other row less trustworthy.",
+        instead: ["ThinkingOrb", "Spinner"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not open every call by default. A turn whose calls all show their JSON buries the answer; leave `defaultOpen` for the one call the person is likely to check, if any."
+      }
+    ],
+    anatomy: [
+      { name: "Status glyph", required: true, description: "Spinner while running, then the outcome: check, warning, clock (awaiting approval) or \xD7. The only part that moves." },
+      { name: "Title", required: false, description: "What the call does, in plain words. Without one, the tool's name leads." },
+      { name: "Name", required: true, description: "The tool's own name in mono, after the title. Hidden below the sm breakpoint when a title is present." },
+      { name: "Status", required: true, description: "One word for where the call is: Running, Needs approval, Done, Failed, Denied." },
+      { name: "Error line", required: false, description: "The failure message, under the row and always visible." },
+      { name: "Details", required: false, description: "Input and output as code, or a rendered result. A disclosure; the row is its trigger." }
+    ]
+  },
+  related: {
+    components: ["Message", "ThinkingOrb", "StreamingText", "CodeBlock", "Collapsible", "InlineStatus"]
+  },
+  props: [
+    { name: "name", type: "string", description: "The tool's own name, as the model called it (`search_docs`). Shown in mono." },
+    { name: "title", type: "ReactNode", description: "What the call does, in words a person reads. Leads the row; omit it and `name` leads." },
+    { name: "status", type: '"running" | "awaiting" | "complete" | "error" | "denied"', default: '"running"', description: "Where the call is. `awaiting` is held for the person's approval; `denied` is one they declined." },
+    { name: "statusLabel", type: "string", description: "Overrides the status word, for another language or a more specific phrase." },
+    { name: "input", type: "unknown", description: "The arguments. A string shows as is; anything else as formatted JSON." },
+    { name: "output", type: "unknown", description: "The result, shown the same way as `input`." },
+    { name: "error", type: "ReactNode", description: 'What went wrong, for `status="error"`. Always visible under the row.' },
+    { name: "children", type: "ReactNode", description: "A rendered result in place of `output`'s code view." },
+    { name: "defaultOpen", type: "boolean", default: "false", description: "Open the details on mount." },
+    { name: "open", type: "boolean", description: "Controlled open state of the details." },
+    { name: "onOpenChange", type: "(open: boolean) => void", description: "Called when the details open or close." }
+  ],
+  variants: {
+    status: ["running", "awaiting", "complete", "error", "denied"]
+  },
+  tokensUsed: ["card", "border", "destructive", "muted", "muted-foreground", "foreground", "tone-warning", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives as part of the assistant's turn, and the turn's own arrival covers it. A second entrance per call would make a busy turn twitch."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Header",
+      why: "The header is the disclosure trigger but reads as a status row. The hover step is what tells the person it opens."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-icon-swap",
+      part: "Status glyph",
+      why: "The spinner becoming a check or a warning is the moment the call settles, and it is the one change in the row worth catching from the corner of the eye. The swap reads as one mark replaced, not a flicker."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-disclosure",
+      part: "Details",
+      why: "The height change connects the code that appears to the row that was pressed, in a thread where several rows look alike."
+    },
+    {
+      slot: "activity",
+      recipe: "motion-spin",
+      part: "Status glyph",
+      why: "While the call runs, the spinner is what separates working from stuck. It pauses once the call settles, so a long thread of finished calls costs nothing."
+    }
+  ],
+  a11y: [
+    "With details, the header is a button with aria-expanded (Base UI Collapsible); its name is the title, the tool name and the status word, so it reads as one sentence.",
+    'A status change after mount is announced once through a polite role=status region ("Searched the docs: Done"). The status a call mounts with is not announced, so a thread restored from history stays quiet.',
+    "The glyph is aria-hidden: the status word beside it carries the meaning, so colour and shape are never the only signal."
+  ],
+  examples: [
+    {
+      label: "A finished call",
+      code: `<ToolCall
+	name="search_docs"
+	title="Searched the docs"
+	status="complete"
+	input={{ query: "date range picker" }}
+	output={{ hits: ["DatePicker", "Calendar", "DateTile"] }}
+/>`
+    },
+    {
+      label: "Running, then failed",
+      code: `<div className="flex flex-col gap-2">
+	<ToolCall name="read_file" title="Reading package.json" status="running" input={{ path: "package.json" }} />
+	<ToolCall
+		name="run_tests"
+		title="Ran the tests"
+		status="error"
+		error="3 of 412 tests failed in date-picker.test.tsx."
+		input={{ filter: "date-picker" }}
+	/>
+</div>`
+    },
+    {
+      label: "Waiting for approval",
+      code: `<ToolCall name="send_email" title="Send the invoice to Ada" status="awaiting" input={{ to: "ada@example.com", subject: "INV-1042" }} />`
+    }
+  ]
+};
+export {
+  toolCallMeta
+};

package/dist/components/tool-call/tool-call.variants.js

@@ -0,0 +1,33 @@
+// src/components/tool-call/tool-call.variants.ts
+import { cva } from "class-variance-authority";
+var toolCallVariants = cva(
+  "w-full overflow-hidden rounded-md border bg-card text-start",
+  {
+    variants: {
+      status: {
+        running: "border-border",
+        awaiting: "border-border",
+        complete: "border-border",
+        error: "border-destructive/40",
+        denied: "border-border"
+      }
+    },
+    defaultVariants: { status: "running" }
+  }
+);
+var toolCallHeaderVariants = cva(
+  "flex w-full min-w-0 items-center gap-2 px-3 py-2 text-start",
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer motion-interactive sable-surface-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        false: ""
+      }
+    },
+    defaultVariants: { interactive: false }
+  }
+);
+export {
+  toolCallHeaderVariants,
+  toolCallVariants
+};

package/dist/components/tooltip/index.js

@@ -6,7 +6,8 @@ import {
   TooltipPortal,
   TooltipContent,
   TooltipArrow,
-  SimpleTooltip
+  SimpleTooltip,
+  TooltipGroup
 } from "./tooltip.js";
 import { tooltipMeta } from "./tooltip.meta.js";
 export {
@@ -14,6 +15,7 @@ export {
   Tooltip,
   TooltipArrow,
   TooltipContent,
+  TooltipGroup,
   TooltipPortal,
   TooltipProvider,
   TooltipTrigger,

package/dist/components/tooltip/tooltip.js

@@ -1,8 +1,10 @@
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as Base } from "@base-ui/react/tooltip";
+import { createContext, useContext, useMemo, useState } from "react";
 import { cn } from "../../lib/cn.js";
 import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
 import { useAnchoredDensity } from "../../lib/density.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TooltipProvider = Base.Provider;
 var Tooltip = Base.Root;
@@ -58,16 +60,98 @@ function SimpleTooltip({
   sideOffset,
   ...root
 }) {
+  const group = useContext(TooltipGroupContext);
+  const payload = useMemo(
+    () => ({ content, side, align, sideOffset }),
+    [content, side, align, sideOffset]
+  );
+  if (group) {
+    return /* @__PURE__ */ jsx(Base.Trigger, { handle: group, payload, disabled: root.disabled, render: children });
+  }
   return /* @__PURE__ */ jsxs(Base.Root, { ...root, children: [
     /* @__PURE__ */ jsx(Base.Trigger, { render: children }),
     /* @__PURE__ */ jsx(TooltipContent, { side, align, sideOffset, children: content })
   ] });
 }
+var TooltipGroupContext = createContext(null);
+var GLIDE_DURATION = "calc(var(--motion-duration-slow) * var(--motion-expressive, 1))";
+var GROUP_POSITIONER = cn(
+  "z-(--z-overlay) h-(--positioner-height) w-(--positioner-width)",
+  "[&:has([data-transitioning])]:[transition-property:top,right,bottom,left]",
+  "[&:has([data-transitioning])]:[transition-duration:calc(var(--motion-duration-slow)*var(--motion-expressive,1))]",
+  "[&:has([data-transitioning])]:ease-emphasized"
+);
+function groupPopupStyle(state) {
+  if (state.transitionStatus === "starting") return void 0;
+  const closing = state.transitionStatus === "ending";
+  return {
+    transitionProperty: "opacity, scale, width, height",
+    transitionDuration: closing ? `var(--motion-duration-exit), var(--motion-duration-exit), ${GLIDE_DURATION}, ${GLIDE_DURATION}` : `var(--motion-duration-fast), var(--motion-duration-fast), ${GLIDE_DURATION}, ${GLIDE_DURATION}`,
+    transitionTimingFunction: closing ? "var(--motion-ease-standard), var(--motion-ease-standard), var(--motion-ease-emphasized), var(--motion-ease-emphasized)" : "var(--motion-ease-standard), var(--motion-ease-spring), var(--motion-ease-emphasized), var(--motion-ease-emphasized)"
+  };
+}
+var GROUP_VIEWPORT = cn(
+  "relative",
+  "[&>*]:[transition-property:opacity,translate]",
+  "[&>*]:[transition-duration:var(--motion-duration-fast),calc(var(--motion-duration-slow)*var(--motion-expressive,1))]",
+  "[&>*]:[transition-timing-function:var(--motion-ease-standard),var(--motion-ease-emphasized)]",
+  "[&>[data-previous]]:w-(--popup-width) [&>[data-previous]]:whitespace-nowrap",
+  "[&>[data-current][data-starting-style]]:opacity-0 [&>[data-previous][data-ending-style]]:opacity-0",
+  // Travelling right: the new label comes in from the right, the old leaves left.
+  "[&[data-activation-direction~=right]>[data-current][data-starting-style]]:translate-x-2",
+  "[&[data-activation-direction~=right]>[data-previous][data-ending-style]]:-translate-x-2",
+  "[&[data-activation-direction~=left]>[data-current][data-starting-style]]:-translate-x-2",
+  "[&[data-activation-direction~=left]>[data-previous][data-ending-style]]:translate-x-2",
+  "[&[data-activation-direction~=down]>[data-current][data-starting-style]]:translate-y-2",
+  "[&[data-activation-direction~=down]>[data-previous][data-ending-style]]:-translate-y-2",
+  "[&[data-activation-direction~=up]>[data-current][data-starting-style]]:-translate-y-2",
+  "[&[data-activation-direction~=up]>[data-previous][data-ending-style]]:translate-y-2"
+);
+function TooltipGroup({ children, motion }) {
+  const [handle] = useState(() => Base.createHandle());
+  return /* @__PURE__ */ jsxs(TooltipGroupContext.Provider, { value: handle, children: [
+    children,
+    /* @__PURE__ */ jsx(Base.Root, { handle, children: ({ payload }) => /* @__PURE__ */ jsx(TooltipGroupContent, { payload, motion }) })
+  ] });
+}
+TooltipGroup.displayName = "TooltipGroup";
+function TooltipGroupContent({
+  payload,
+  motion
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
+    Base.Positioner,
+    {
+      side: payload?.side ?? "top",
+      align: payload?.align ?? "center",
+      sideOffset: payload?.sideOffset ?? 6,
+      "data-motion": motionAttribute(motion),
+      className: GROUP_POSITIONER,
+      children: /* @__PURE__ */ jsx(
+        Base.Popup,
+        {
+          ...anchoredDensity,
+          style: groupPopupStyle,
+          className: cn(
+            "select-none rounded-sm border border-border-floating bg-popover px-2.5 py-1.5 text-label-md text-popover-foreground shadow-md outline-none",
+            "h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] overflow-clip",
+            // The enter/exit targets and transform origin; the transition
+            // list itself is groupPopupStyle's.
+            "motion-pop"
+          ),
+          children: /* @__PURE__ */ jsx(Base.Viewport, { className: GROUP_VIEWPORT, children: payload?.content })
+        }
+      )
+    }
+  ) });
+}
 export {
   SimpleTooltip,
   Tooltip,
   TooltipArrow,
   TooltipContent,
+  TooltipGroup,
   TooltipPortal,
   TooltipProvider,
   TooltipTrigger

package/dist/components/tooltip/tooltip.meta.js

@@ -101,7 +101,12 @@ var tooltipMeta = {
     {
       name: "SimpleTooltip",
       type: "Base UI Tooltip.Root props + content: ReactNode + children: ReactElement + side | align | sideOffset",
-      description: "Shorthand wrapping Root + Trigger + Content for the common case. The single child becomes the trigger (via Base UI render); content sets the body; side / align / sideOffset forward to the content with the same defaults. Composition parts remain for advanced use."
+      description: "Shorthand wrapping Root + Trigger + Content for the common case. The single child becomes the trigger (via Base UI render); content sets the body; side / align / sideOffset forward to the content with the same defaults. Composition parts remain for advanced use. Inside a TooltipGroup it becomes a trigger of the group's shared tooltip instead."
+    },
+    {
+      name: "TooltipGroup",
+      type: '{ children: ReactNode; motion?: "full" | "subtle" | "off" }',
+      description: "One tooltip shared by every SimpleTooltip inside it \u2014 for a toolbar or a row of icon buttons. Moving the pointer along the row glides the tooltip to the next trigger and swaps its label (old fades out, new fades in, each sliding toward the direction of travel), instead of closing one tooltip and opening another a few pixels away. Renders no element. Each SimpleTooltip keeps its own content / side / align / sideOffset and `disabled`; root props such as open / onOpenChange belong to the shared tooltip and are ignored inside a group. `motion` turns it down: `subtle` jumps between triggers and only cross-fades the label. The composable Tooltip parts are unaffected."
     }
   ],
   tokensUsed: ["popover", "popover-foreground", "border-floating"],
@@ -129,6 +134,12 @@ var tooltipMeta = {
       recipe: "none",
       part: "Content",
       why: "Tooltip copy is resident before the tooltip opens. Anything that has to be fetched is a Popover with its own loading state."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "TooltipGroup",
+      why: "Moving between triggers in a group, the one tooltip glides to the next trigger, resizes to its label and cross-fades the text with a short slide toward the direction of travel. Separate tooltips would close here and open there, two surfaces blinking side by side; the glide says it is the same hint following the pointer. Base UI's handle + Viewport supply the shared popup and the previous/current content; the timing is the expressive glide (slow, emphasized), so `subtle` keeps only the cross-fade."
     }
   ],
   a11y: [
@@ -149,6 +160,10 @@ var tooltipMeta = {
     {
       label: "Shorthand (SimpleTooltip)",
       code: '<SimpleTooltip content="Saved to your workspace."><Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button></SimpleTooltip>'
+    },
+    {
+      label: "One tooltip gliding along a toolbar (TooltipGroup)",
+      code: '<TooltipGroup><Toolbar aria-label="Formatting"><SimpleTooltip content="Bold"><ToolbarButton size="icon-sm" aria-label="Bold"><Icon name="bold" /></ToolbarButton></SimpleTooltip><SimpleTooltip content="Italic"><ToolbarButton size="icon-sm" aria-label="Italic"><Icon name="italic" /></ToolbarButton></SimpleTooltip><SimpleTooltip content="Insert link"><ToolbarButton size="icon-sm" aria-label="Insert link"><Icon name="link" /></ToolbarButton></SimpleTooltip></Toolbar></TooltipGroup>'
     }
   ]
 };