rift-ds 1.0.0

package/components/ToolCall/ToolCall.css

@@ -0,0 +1,234 @@
+/* ============================================
+   TOOL CALL COMPONENT
+   One tool invocation: a skimmable header row
+   and, behind a disclosure, the arguments and
+   the result.
+
+   The container stays neutral — colour lives in
+   the indicator and the status word, so a long
+   run of calls reads as a list rather than a
+   wall of tinted cards. The border is the
+   standard container hairline in every status;
+   the status word and icon carry the state.
+   ============================================ */
+
+.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;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  /* 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-600);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-tool-call__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  width: 100%;
+  /* 20px sides — the card family's shared content inset. */
+  padding: var(--padding-200) var(--padding-500);
+  background: none;
+  border: none;
+  /* Buttons default to the UA's buttontext, not the inherited colour, so
+     anything in the header that inherits would read black in both themes. */
+  color: var(--color-text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-tool-call__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-tool-call__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* No panel to open — the row is a plain div and must not look pressable */
+.ds-tool-call__header--static {
+  cursor: default;
+}
+
+.ds-tool-call__header--static:hover {
+  background-color: transparent;
+}
+
+.ds-tool-call__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--ds-tool-call-icon-color);
+}
+
+.ds-tool-call__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+/* The tool name is an identifier, so it takes the code stack —
+   the one place the system leaves Nunito Sans */
+.ds-tool-call__name {
+  flex: none;
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-tool-call__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  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);
+}
+
+.ds-tool-call__status {
+  flex: none;
+  margin-left: auto;
+  color: var(--ds-tool-call-color);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  white-space: nowrap;
+}
+
+/* A summary already claims the free space; without one the status still
+   needs pushing to the right, which the auto margin above handles */
+.ds-tool-call__summary ~ .ds-tool-call__status {
+  margin-left: 0;
+}
+
+.ds-tool-call__duration {
+  flex: none;
+  color: var(--color-text-tertiary);
+  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);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ds-tool-call__chevron {
+  --icon-size: var(--icon-size-500);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   STATUSES
+   ============================================ */
+
+.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);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tool-call__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-tool-call__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-tool-call--open .ds-tool-call__content {
+  padding: var(--padding-400) var(--padding-500);
+  border-top: var(--border-025) solid var(--color-divider);
+}
+
+.ds-tool-call__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-tool-call__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   ACTIONS
+   Outside the panel, so a call awaiting approval
+   can be answered without expanding it first.
+   ============================================ */
+
+.ds-tool-call__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-200);
+  padding: var(--padding-200) var(--padding-500) var(--padding-400);
+}
+
+/* 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. The chevron is excluded —
+   it is the one icon that carries its own colour rule, which this
+   higher-specificity rule would otherwise silently override. */
+.ds-tool-call .material-symbols-rounded:not(.ds-tool-call__chevron) {
+  color: inherit;
+}

package/components/ToolCall/ToolCall.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+/** Props owned by ToolCall itself — everything else falls through to the root element. */
+type ToolCallOwnProps = {
+    /** The tool that was invoked, shown in monospace. */
+    name: string;
+    /** Where the call has got to. Drives the colour, the indicator, and the default status text. */
+    status?: ToolCallStatus;
+    /** One line describing this particular call, e.g. the target path or query. */
+    summary?: string;
+    /** How long the call took, e.g. "1.2s". Free text, so callers keep their own formatting. */
+    duration?: string;
+    /** Override the status text shown beside the indicator. */
+    statusLabel?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls for a call awaiting a decision — allow, deny, always allow.
+     * Rendered outside the collapsible panel, so approving never requires
+     * expanding the call first.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** The call's arguments and result. */
+    children?: React.ReactNode;
+};
+export interface ToolCallProps extends ToolCallOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToolCallOwnProps> {
+}
+/**
+ * ToolCall is the record of one tool invocation: what ran, how it went, how
+ * long it took, and — behind a disclosure — the arguments it was given and
+ * what it returned.
+ *
+ * A run is mostly a list of these, so the collapsed header carries everything
+ * needed to skim it and the body holds everything needed to audit it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ToolCall/ToolCall.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./ToolCall.css";
+import "../../fonts/material-symbols.css";
+const DEFAULT_STATUS_LABELS = {
+  pending: "Needs approval",
+  running: "Running",
+  success: "Done",
+  error: "Failed"
+};
+const STATUS_ICONS = {
+  pending: "pause_circle",
+  success: "check_circle",
+  error: "error"
+};
+const ToolCall = React.forwardRef(
+  ({
+    name,
+    status = "success",
+    summary,
+    duration,
+    statusLabel,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    actions,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-tool-call";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const hasPanel = Boolean(children);
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const classes = [
+      baseClass,
+      `${baseClass}--${status}`,
+      isOpen ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "running" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+      summary && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, children: summary }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__status`, children: statusLabel ?? DEFAULT_STATUS_LABELS[status] }),
+      duration && /* @__PURE__ */ jsx("span", { className: `${baseClass}__duration`, children: duration }),
+      hasPanel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasPanel ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: header
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__header ${baseClass}__header--static`, children: header }),
+      hasPanel && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children })
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+ToolCall.displayName = "ToolCall";
+export {
+  ToolCall
+};

package/components/Toolbar/Toolbar.css

@@ -0,0 +1,56 @@
+/* ============================================
+   TOOLBAR COMPONENT
+   Grouped strip of controls in one shell
+   ============================================ */
+
+/* Base — a pill shell on the container fill. Padding clears the focus
+   ring's full reach (2px offset + 2px outline), so a focused control's
+   ring seats inside the shell instead of slicing its border. */
+
+.ds-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100);
+  padding: var(--padding-150);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+}
+
+/* Orientation */
+
+.ds-toolbar--vertical {
+  flex-direction: column;
+}
+
+/* Variants */
+
+/* Floating: the glass pill for controls hovering over content — frosted
+   fill, floating elevation. The consumer's layout positions it. */
+.ds-toolbar--floating {
+  background-color: var(--color-bg-glass);
+  /* The frost's strength; an effect length with no token family, chosen by
+     eye to match the system's other glass surfaces. */
+  --ds-toolbar-frost: 24px;
+  backdrop-filter: blur(var(--ds-toolbar-frost));
+  box-shadow: var(--shadow-floating);
+}
+
+/* Separator — a hairline between control clusters, inset from the shell's
+   edge by stretching only across the controls' own height. */
+
+.ds-toolbar__separator {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--border-025);
+  margin-block: var(--gap-050);
+  margin-inline: var(--gap-050);
+  background-color: var(--color-divider);
+}
+
+.ds-toolbar--vertical .ds-toolbar__separator {
+  width: auto;
+  height: var(--border-025);
+  margin-block: var(--gap-050);
+  margin-inline: var(--gap-050);
+}

package/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/** Props owned by Toolbar itself — everything else falls through to the root div. */
+type ToolbarOwnProps = {
+    /** Accessible name for the toolbar — what a screen reader calls the group. */
+    label: string;
+    /** Which way the controls run. */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * `default` is an attached bar on the container fill; `floating` is the
+     * glass pill for controls hovering over content — position it with your own
+     * layout (the component never fixes itself to the viewport).
+     */
+    variant?: 'default' | 'floating';
+    /** The toolbar's controls — group unrelated clusters with `ToolbarSeparator`. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ToolbarProps extends ToolbarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToolbarOwnProps> {
+}
+/**
+ * Toolbar — a grouped strip of controls sharing one shell: buttons, toggles,
+ * segmented controls, separated into clusters. Announces as `role="toolbar"`
+ * and moves focus with the arrow keys (Home/End jump to the ends), following
+ * the toolbar keyboard pattern, while every control keeps its natural tab
+ * stop.
+ *
+ * The `floating` variant is the glass pill for controls that hover over
+ * content — a canvas's zoom cluster, a stage's own instruments. The shell is
+ * unpositioned by design; the consumer's layout decides where it floats.
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+/** A hairline divider between a Toolbar's control clusters. */
+export declare const ToolbarSeparator: () => React.JSX.Element;
+export {};

package/components/Toolbar/Toolbar.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import "./Toolbar.css";
+import { getFocusable } from "../../behaviors/focusable.js";
+const Toolbar = React.forwardRef(
+  ({
+    label,
+    orientation = "horizontal",
+    variant = "default",
+    children,
+    className = "",
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-toolbar";
+    const rootRef = useRef(null);
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || !rootRef.current) return;
+      const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+      const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+      if (e.key !== nextKey && e.key !== prevKey && e.key !== "Home" && e.key !== "End") return;
+      const items = getFocusable(rootRef.current);
+      const current = items.indexOf(document.activeElement);
+      if (items.length === 0 || current === -1) return;
+      e.preventDefault();
+      const target = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : e.key === nextKey ? (current + 1) % items.length : (current - 1 + items.length) % items.length;
+      items[target].focus();
+    };
+    const classes = [
+      baseClass,
+      `${baseClass}--${orientation}`,
+      `${baseClass}--${variant}`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref: setRootRef,
+        className: classes,
+        role: "toolbar",
+        "aria-label": label,
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        children
+      }
+    );
+  }
+);
+Toolbar.displayName = "Toolbar";
+const ToolbarSeparator = () => /* @__PURE__ */ jsx("span", { className: "ds-toolbar__separator", "aria-hidden": "true" });
+export {
+  Toolbar,
+  ToolbarSeparator
+};

package/components/Tooltip/Tooltip.css

@@ -0,0 +1,175 @@
+/* ============================================
+   TOOLTIP COMPONENT
+   Contextual text label on hover / focus
+   ============================================ */
+
+.ds-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tooltip__panel {
+  position: absolute;
+  z-index: 50;
+  padding: var(--padding-150) var(--padding-200); /* 6px 8px */
+  border-radius: var(--radius-100); /* 4px */
+  /* The floating surface, same recipe as Popover: page background (the
+     container fill is semi-transparent), hairline border, floating shadow.
+     Same-polarity in both themes — light bubble on light, dark on dark —
+     softer than the old inverse fill. */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  background-color: var(--color-bg-page-primary);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-floating);
+  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);
+  white-space: nowrap;
+  pointer-events: none;
+  /* Hidden panels leave layout entirely: opacity/visibility alone keep the
+     box in the page's scrollable overflow, so an edge-adjacent trigger's
+     panel adds horizontal scroll while invisible. display transitions
+     discretely (allow-discrete holds it through the exit fade; the entry
+     fade starts from @starting-style below); browsers without those skip
+     the fades but show and hide correctly. */
+  display: none;
+  opacity: 0;
+  transition-property: opacity, transform, display;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-ease-standard);
+  transition-behavior: allow-discrete;
+}
+
+.ds-tooltip__panel--visible {
+  display: block;
+  opacity: 1;
+}
+
+/* ============================================
+   POSITIONS
+   ============================================ */
+
+.ds-tooltip__panel--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  margin-bottom: var(--gap-100); /* 4px */
+}
+
+.ds-tooltip__panel--top.ds-tooltip__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-tooltip__panel--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+  margin-top: var(--gap-100);
+}
+
+.ds-tooltip__panel--bottom.ds-tooltip__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-tooltip__panel--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+  margin-right: var(--gap-100);
+}
+
+.ds-tooltip__panel--left.ds-tooltip__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+.ds-tooltip__panel--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  margin-left: var(--gap-100);
+}
+
+.ds-tooltip__panel--right.ds-tooltip__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Entry states for the display flip: a panel arriving from display:none has
+   no prior computed style, so these supply the fade's starting frame. Each
+   mirrors its position's hidden transform above. */
+@starting-style {
+  .ds-tooltip__panel--top.ds-tooltip__panel--visible {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+
+  .ds-tooltip__panel--bottom.ds-tooltip__panel--visible {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+
+  .ds-tooltip__panel--left.ds-tooltip__panel--visible {
+    opacity: 0;
+    transform: translateY(-50%) translateX(4px);
+  }
+
+  .ds-tooltip__panel--right.ds-tooltip__panel--visible {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-4px);
+  }
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+/* The arrow is a rotated square in the panel's fill. It overlaps the panel
+   by a pixel more than before so its opaque fill covers the panel border
+   behind it, and draws the hairline itself on its two outward edges only. */
+.ds-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-bg-page-primary);
+  transform: rotate(45deg);
+}
+
+/* Arrow — top position (arrow points down) */
+.ds-tooltip__panel--top .ds-tooltip__arrow {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-right: var(--border-025) solid var(--color-bg-container-border);
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* Arrow — bottom position (arrow points up) */
+.ds-tooltip__panel--bottom .ds-tooltip__arrow {
+  top: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-top: var(--border-025) solid var(--color-bg-container-border);
+  border-left: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* Arrow — left position (arrow points right) */
+.ds-tooltip__panel--left .ds-tooltip__arrow {
+  right: -5px;
+  top: 50%;
+  margin-top: -4px;
+  border-top: var(--border-025) solid var(--color-bg-container-border);
+  border-right: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* Arrow — right position (arrow points left) */
+.ds-tooltip__panel--right .ds-tooltip__arrow {
+  left: -5px;
+  top: 50%;
+  margin-top: -4px;
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+  border-left: var(--border-025) solid var(--color-bg-container-border);
+}