rift-ds 1.2.0 → 1.3.0

package/README.md

@@ -73,13 +73,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->142<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->143<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · World map
 <!-- component-list:end -->
 
 </details>

package/components/Chart/BarChart.js

@@ -39,7 +39,7 @@ const BarChart = ({
   const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const resolvedBarColor = barColor || getCSSVar("--color-chart-series-1", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
   const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#F1F1F1");

package/components/Chart/ComboChart.js

@@ -45,7 +45,7 @@ const ComboChart = ({
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const seriesColors = getChartSeriesColors();
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const resolvedBarColor = barColor || getCSSVar("--color-chart-series-1", "#0E6E8F");
   const resolvedLineColor = lineColor || seriesColors[1];
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
   const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");

package/components/Chart/Treemap.js

@@ -1,22 +1,88 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useCallback } from "react";
+import { useId, useCallback, useState, useEffect, useRef } from "react";
 import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
+let colorProbe;
+function toRgb(value) {
+  const input = value.trim();
+  if (!input || input === "none") return null;
+  if (colorProbe === void 0) {
+    colorProbe = document.createElement("canvas").getContext("2d");
+  }
+  if (!colorProbe) return null;
+  colorProbe.fillStyle = "#000000";
+  colorProbe.fillStyle = input;
+  const out = String(colorProbe.fillStyle);
+  if (out.startsWith("#")) {
+    return [1, 3, 5].map((i) => parseInt(out.slice(i, i + 2), 16));
+  }
+  const m = out.match(/rgba?\(([^)]+)\)/);
+  if (!m) return null;
+  const [r, g, b] = m[1].split(/[\s,/]+/).map(Number);
+  return [r, g, b];
+}
+const luminance = ([r, g, b]) => {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+const contrast = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (hi + 0.05) / (lo + 0.05);
+};
+const AA_TEXT = 4.5;
+function pickLabelStyle(rect) {
+  const style = getComputedStyle(rect);
+  const fill = toRgb(style.fill);
+  const primary = toRgb(style.getPropertyValue("--color-text-primary"));
+  const onInverse = toRgb(style.getPropertyValue("--color-text-on-inverse"));
+  if (!fill || !primary || !onInverse) return { tone: "primary", halo: false };
+  const primaryRatio = contrast(primary, fill);
+  const onInverseRatio = contrast(onInverse, fill);
+  const tone = primaryRatio >= onInverseRatio ? "primary" : "on-inverse";
+  return { tone, halo: Math.max(primaryRatio, onInverseRatio) < AA_TEXT };
+}
+function useThemeVersion() {
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    const observer = new MutationObserver(() => setVersion((v) => v + 1));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "data-brand", "style", "class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return version;
+}
 function TreemapContent(props) {
-  const { x, y, width, height, name, index, color } = props;
-  if (width < 4 || height < 4) return null;
+  const { x, y, width, height, name, index, color, themeVersion } = props;
+  const rectRef = useRef(null);
+  const [label, setLabel] = useState({ tone: "primary", halo: false });
   const seriesColors = getChartSeriesColors();
   const fill = color || seriesColors[index % seriesColors.length];
-  const textColor = getCSSVar("--color-text-primary", "#050505");
+  const visible = width >= 4 && height >= 4;
   const showLabel = width > 50 && height > 28;
+  useEffect(() => {
+    if (!showLabel || !rectRef.current) return;
+    setLabel(pickLabelStyle(rectRef.current));
+  }, [fill, showLabel, themeVersion]);
+  if (!visible) return null;
+  const primaryText = getCSSVar("--color-text-primary", "#050505");
+  const onInverseText = getCSSVar("--color-text-on-inverse", "#F1F1F1");
+  const textColor = label.tone === "primary" ? primaryText : onInverseText;
+  const haloColor = label.tone === "primary" ? onInverseText : primaryText;
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
       {
+        ref: rectRef,
         x,
         y,
         width,
@@ -33,7 +99,17 @@ function TreemapContent(props) {
         y: y + height / 2,
         textAnchor: "middle",
         dominantBaseline: "central",
-        style: { fill: textColor, fontSize: 12, fontWeight: 600 },
+        style: {
+          fill: textColor,
+          fontSize: 12,
+          fontWeight: 600,
+          ...label.halo && {
+            stroke: haloColor,
+            strokeWidth: 3,
+            strokeLinejoin: "round",
+            paintOrder: "stroke"
+          }
+        },
         children: name
       }
     )
@@ -62,6 +138,7 @@ const Treemap = ({
 }) => {
   const titleId = useId();
   const subtitleId = useId();
+  const themeVersion = useThemeVersion();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const renderTooltip = useCallback(
@@ -93,7 +170,7 @@ const Treemap = ({
             data,
             dataKey,
             aspectRatio: 4 / 3,
-            content: /* @__PURE__ */ jsx(TreemapContent, {}),
+            content: /* @__PURE__ */ jsx(TreemapContent, { themeVersion }),
             children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
           }
         ) }) })

package/components/ColorPicker/ColorPicker.js

@@ -243,7 +243,7 @@ const ColorPicker = React.forwardRef(
                     "aria-hidden": "true"
                   }
                 ),
-                showText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-text`, children: displayHex })
+                showText && /* @__PURE__ */ jsx("span", { id: `${inputId}-value`, className: `${baseClass}__trigger-text`, children: displayHex })
               ]
             }
           ),

package/components/Composer/Composer.css

@@ -224,9 +224,10 @@
 
 /* ============================================
    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.
+   A full-width, non-interactive note — what the model is currently looking
+   at. At the very top of the shell by default, or lifted above it as its
+   own bar (contextPlacement="above", styled at the end of this section).
+   Composer owns the chrome; the caller passes the text.
    ============================================ */
 
 .ds-composer__context {
@@ -267,6 +268,47 @@
   --icon-size: var(--icon-size-500);
 }
 
+/* ---------- contextPlacement="above" ----------
+   The chip leaves the shell for its own bar, full width, a small gap clear
+   of the shell's top edge, and the layout aligns on one optical rail: the
+   bar's --padding-200 ring plus the --padding-400 pill inset (24px). The
+   typed text, the attachments, the chip's icon ink and a ModelPicker
+   trigger's label all start on it. The inside placement keeps its own
+   geometry above, untouched. */
+
+/* The bar and the shell travel as one block, so a host's gap never lands
+   between them */
+.ds-composer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  width: 100%;
+}
+
+.ds-composer__context--above {
+  margin: 0;
+  /* Outside the shell, so the shell's custom properties do not reach it:
+     the send button's raw 40px, restated */
+  height: 40px;
+  /* The rail, plus the shell border this bar does not sit inside */
+  padding: 0 var(--padding-400) 0
+    calc(var(--padding-200) + var(--padding-400) + var(--border-025));
+}
+
+/* Optical alignment: a glyph's ink starts inside its box, so the box is
+   pulled back by that side bearing to land the ink on the rail. The
+   default fits the portrait document glyphs a context note usually
+   carries (ink starts 4/24 into the box); the fallback is a consumer hook
+   for a glyph with a different bearing. */
+.ds-composer__context--above .ds-composer__context-icon {
+  margin-left: calc(-1 * var(--ds-composer-context-icon-bearing, var(--icon-size-500) * 4 / 24));
+}
+
+.ds-composer--context-above .ds-composer__attachments,
+.ds-composer--context-above .ds-composer__content {
+  padding-inline: calc(var(--padding-200) + var(--padding-400));
+}
+
 /* 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. */

package/components/Composer/Composer.d.ts

@@ -38,14 +38,22 @@ type ComposerOwnProps = {
      */
     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.
+     * Contextual note rendered as a full-width, non-interactive chip — the
+     * "what the model is looking at" line a chat host pins over the message
+     * ("Looking at “Page name”"). `contextPlacement` decides where it sits.
+     * 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;
+    /**
+     * Where the `context` chip sits. `inside` (the default) pins it at the very
+     * top of the shell, above any attachments. `above` lifts it out of the
+     * shell into its own bar a small gap above it, so it reads as what the
+     * model can see rather than part of the message being typed. Either way
+     * its icon starts on the shell's text rail, and a click on it focuses the
+     * textarea.
+     */
+    contextPlacement?: 'inside' | 'above';
     /**
      * Icon at the left of the context chip — Material Symbol name (string,
      * e.g. `visibility`, `article`) or custom element (ReactNode). Decorative

package/components/Composer/Composer.js

@@ -16,6 +16,7 @@ const Composer = React.forwardRef(
     aiGlow = false,
     context,
     contextIcon,
+    contextPlacement = "inside",
     attachments,
     actions,
     trailingActions,
@@ -82,20 +83,32 @@ const Composer = React.forwardRef(
       aiGlow ? `${baseClass}--ai-glow` : "",
       streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
+      // The above placement moves the text onto the chip's rail; the shell
+      // needs to know, since the chip is no longer inside it.
+      context && contextPlacement === "above" ? `${baseClass}--context-above` : "",
       className
     ].filter(Boolean).join(" ");
     const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
-    return /* @__PURE__ */ jsxs(
+    const contextAbove = contextPlacement === "above";
+    const contextChip = context ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__context${contextAbove ? ` ${baseClass}__context--above` : ""}`,
+        onClick: contextAbove ? handleShellClick : void 0,
+        children: [
+          contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: typeof contextIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) : contextIcon }),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
+        ]
+      }
+    ) : null;
+    const shell = /* @__PURE__ */ jsxs(
       "div",
       {
         className: classes,
         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: typeof contextIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) : contextIcon }),
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
-          ] }),
+          !contextAbove && contextChip,
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
           /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",
@@ -138,6 +151,13 @@ const Composer = React.forwardRef(
         ]
       }
     );
+    if (contextAbove && contextChip) {
+      return /* @__PURE__ */ jsxs("div", { className: `${baseClass}-group`, children: [
+        contextChip,
+        shell
+      ] });
+    }
+    return shell;
   }
 );
 Composer.displayName = "Composer";

package/components/DatePicker/DatePicker.css

@@ -138,7 +138,7 @@
 
 /* Today indicator */
 .ds-date-picker__cell--today {
-  border: var(--border-025) solid var(--color-action-primary-bg);
+  border: var(--border-025) solid var(--color-bg-page-inverse);
 }
 
 /* Selected */

package/components/EventCalendar/EventCalendar.css

@@ -7,7 +7,7 @@
    cell height.
 
    Event accents use the core accent roles —
-   never the action teal, which stays reserved
+   never the action colour, which stays reserved
    for actions.
    ============================================ */
 
@@ -190,7 +190,7 @@ button.ds-event-calendar__day:focus-visible {
   letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
 }
 
-/* Selected — the teal selection chip (the selected item of a mutually
+/* Selected — the action-colour selection chip (the selected item of a mutually
    exclusive set, DatePicker's convention). Declared after the today block
    so a selected today reads as selected. */
 .ds-event-calendar__cell--selected .ds-event-calendar__day {

package/components/FileInput/FileInput.css

@@ -178,7 +178,7 @@
   display: block;
   height: 100%;
   border-radius: var(--radius-pill);
-  background-color: var(--color-action-primary-bg);
+  background-color: var(--color-core-accent-mint);
   transition: width var(--motion-duration-base) var(--motion-ease-standard);
 }
 

package/components/Globe/Globe.d.ts

@@ -54,9 +54,11 @@ type GlobeOwnProps = {
     /** Fires whenever the view changes — drag, keys, or the auto-rotation. */
     onRotationChange?: (rotation: GlobeRotation) => void;
     /**
-     * Spin slowly on its own, in degrees per second. Pauses while the pointer
-     * is over the globe or it has focus, and never runs under
-     * `prefers-reduced-motion`. `0` switches it off.
+     * Spin slowly on its own, in degrees per second at the shipped motion
+     * tempo. The speed follows `--motion-duration-orbit`, so a theme that
+     * stretches or shortens its durations slows or quickens the spin with
+     * them. Pauses while the pointer is over the globe or it has focus, and
+     * never runs under `prefers-reduced-motion`. `0` switches it off.
      */
     autoRotate?: number;
     /** Drag to rotate, and rotate with the arrow keys (or W, A, S, D) when focused. */

package/components/Globe/Globe.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useState, useRef, useCallback, useSyncExternalStore, useEffect } from "react";
+import { MOTION_ORBIT_REFERENCE_MS } from "../../tokens/motion.js";
 import "./Globe.css";
 const VIEW = 480;
 const CENTER = VIEW / 2;
@@ -11,6 +12,15 @@ const DRAG_DEGREES_PER_RADIUS = 90;
 const KEY_STEP = 10;
 const MAX_LAT = 80;
 const MARKER = 5;
+const ORBIT_READ_INTERVAL_MS = 250;
+const readOrbitTempo = (node) => {
+  if (!node) return 1;
+  const raw = getComputedStyle(node).getPropertyValue("--motion-duration-orbit").trim();
+  const m = raw.match(/^([\d.]+)(ms|s)$/);
+  if (!m) return 1;
+  const ms = parseFloat(m[1]) * (m[2] === "s" ? 1e3 : 1);
+  return ms > 0 ? MOTION_ORBIT_REFERENCE_MS / Math.max(ms, MOTION_ORBIT_REFERENCE_MS / 20) : 1;
+};
 const DEG = Math.PI / 180;
 const toVec = (lat, lng) => {
   const φ = lat * DEG;
@@ -148,22 +158,28 @@ const Globe = React.forwardRef(
       getReducedMotion,
       getServerReducedMotion
     );
+    const rootRef = useRef(null);
     const spinning = autoRotate !== 0 && !paused && !reducedMotion;
     useEffect(() => {
       if (!spinning) return;
       let frame = 0;
       let last = performance.now();
+      let tempo = readOrbitTempo(rootRef.current);
+      let lastRead = last;
       const tick = (now) => {
         const dt = (now - last) / 1e3;
         last = now;
+        if (now - lastRead >= ORBIT_READ_INTERVAL_MS) {
+          tempo = readOrbitTempo(rootRef.current);
+          lastRead = now;
+        }
         const [lng, lat] = rotationRef.current;
-        commit([lng - autoRotate * dt, lat]);
+        commit([lng - autoRotate * tempo * dt, lat]);
         frame = requestAnimationFrame(tick);
       };
       frame = requestAnimationFrame(tick);
       return () => cancelAnimationFrame(frame);
     }, [spinning, autoRotate, commit]);
-    const rootRef = useRef(null);
     const drag = useRef(null);
     const [dragging, setDragging] = useState(false);
     const setRef = (node) => {

package/components/Inspector/Inspector.css

@@ -4,7 +4,8 @@
    rails: each control is one bar with its name
    inside on the left and its state on the right.
    The form controls (Slider, Input, ToggleSwitch,
-   SegmentedControl, Dropdown) keep their label
+   SegmentedControl, Dropdown, ColorPicker) keep
+   their label
    above; these are their counterparts for a
    dense panel.
 
@@ -33,7 +34,8 @@
    default  8px + 24px line + 8px  = 40px, 20px sides, paragraph-emphasis
    compact  6px + 20px line + 6px  = 32px, 12px sides, paragraph-sm-emphasis */
 .ds-inspector-bar,
-.ds-inspector-dropdown {
+.ds-inspector-dropdown,
+.ds-inspector-color-picker {
   --ds-inspector-height: calc(2 * var(--padding-200) + var(--font-paragraph-emphasis-line-height));
   --ds-inspector-inset: var(--padding-500);
   --ds-inspector-font-family: var(--font-paragraph-emphasis-family);
@@ -45,7 +47,8 @@
 }
 
 .ds-inspector-bar--compact,
-.ds-inspector-dropdown--compact {
+.ds-inspector-dropdown--compact,
+.ds-inspector-color-picker--compact {
   --ds-inspector-height: calc(2 * var(--padding-150) + var(--font-paragraph-sm-emphasis-line-height));
   --ds-inspector-inset: var(--padding-300);
   --ds-inspector-font-family: var(--font-paragraph-sm-emphasis-family);
@@ -424,6 +427,108 @@
   color: var(--color-icon-secondary);
 }
 
+/* ============================================
+   COLOR PICKER — the library ColorPicker, dressed as a bar
+   ============================================ */
+
+.ds-inspector-color-picker {
+  position: relative;
+  min-width: 0;
+}
+
+/* The name rides over the trigger and lets clicks through, so the whole
+   bar opens the panel. The reading sits at the far end, so no room needs
+   reserving for the name the way the dropdown's left-aligned value does. */
+.ds-inspector-color-picker__label {
+  position: absolute;
+  top: calc(var(--ds-inspector-height) / 2);
+  left: var(--ds-inspector-inset);
+  z-index: 1;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  font-family: var(--ds-inspector-font-family);
+  font-size: var(--ds-inspector-font-size);
+  font-weight: var(--ds-inspector-label-weight);
+  line-height: var(--ds-inspector-line-height);
+  letter-spacing: var(--ds-inspector-letter-spacing);
+  color: var(--color-text-primary);
+  pointer-events: none;
+}
+
+.ds-inspector-color-picker .ds-colorpicker {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+/* The swatch is a circle one line tall, so its end inset is whatever
+   centres it in the bar: concentric with the pill's end cap. */
+.ds-inspector-color-picker .ds-colorpicker__trigger {
+  justify-content: flex-end;
+  gap: var(--gap-300);
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--ds-inspector-height);
+  padding: 0 calc((var(--ds-inspector-height) - var(--ds-inspector-line-height)) / 2) 0
+    var(--ds-inspector-inset);
+  border-color: transparent;
+  border-radius: var(--radius-pill);
+  background: var(--color-action-passive-bg-hover);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger:hover:not(:disabled),
+.ds-inspector-color-picker .ds-colorpicker--open .ds-colorpicker__trigger {
+  border-color: transparent;
+  background: var(--color-action-neutral-bg-hover);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger:active:not(:disabled) {
+  background: var(--color-action-neutral-bg-active);
+}
+
+/* The trigger's selected-border focus becomes the family's ring. */
+.ds-inspector-color-picker .ds-colorpicker__trigger:focus-visible {
+  border-color: transparent;
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* The reading comes before the swatch, so the colour sits at the bar's end
+   where the switch's track and the dropdown's chevron sit. */
+.ds-inspector-color-picker .ds-colorpicker__trigger-text {
+  order: -1;
+  padding-right: 0;
+  font-family: var(--ds-inspector-font-family);
+  font-size: var(--ds-inspector-font-size);
+  font-weight: var(--ds-inspector-value-weight);
+  line-height: var(--ds-inspector-line-height);
+  letter-spacing: var(--ds-inspector-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger-swatch {
+  width: var(--ds-inspector-line-height);
+  height: var(--ds-inspector-line-height);
+  border-radius: var(--radius-pill);
+}
+
+/* The panel opens under the bar and spans it. */
+.ds-inspector-color-picker .ds-colorpicker__panel {
+  right: 0;
+  width: auto;
+}
+
+/* Disabled dims the whole bar, name included, rather than the trigger alone. */
+.ds-inspector-color-picker--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-inspector-color-picker--disabled .ds-colorpicker__trigger {
+  opacity: 1;
+}
+
 /* ============================================
    SECTION — a collapsible, titled run of controls
    ============================================ */

package/components/Inspector/InspectorColorPicker.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/** Props owned by InspectorColorPicker itself — everything else falls through to the wrapper. */
+type InspectorColorPickerOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the start of the trigger's accessible name. */
+    label: string;
+    /** Current colour as a hex string — 3, 6 or 8 digit, with or without `#`. */
+    value?: string;
+    /** Initial colour for uncontrolled use. */
+    defaultValue?: string;
+    /**
+     * Called with the colour as an uppercase hex string (`#RRGGBB`, or
+     * `#RRGGBBAA` when `showAlpha` and alpha is below 100%). Fires live while
+     * dragging, as in ColorPicker.
+     */
+    onValueChange?: (value: string) => void;
+    /** Add an alpha (opacity) slider to the panel and emit 8-digit hex when alpha is below 100%. */
+    showAlpha?: boolean;
+    /** When set, a hidden input carries the current hex under this name, so the picker joins native form submission. */
+    name?: string;
+    /** Whether the picker is disabled. */
+    disabled?: boolean;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px. */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes, applied to the wrapper. */
+    className?: string;
+};
+export interface InspectorColorPickerProps extends InspectorColorPickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InspectorColorPickerOwnProps | 'onChange' | 'defaultValue'> {
+}
+/**
+ * A one-row colour setting for inspector panels: the name on the left, the
+ * hex reading and a round swatch at the bar's end. It is the library
+ * ColorPicker with its trigger dressed as an inspector bar, so the panel,
+ * its saturation area, hue and alpha sliders and hex field are
+ * ColorPicker's own. The form counterpart, with a label above and helper
+ * text below, is ColorPicker itself.
+ *
+ * The whole bar is the trigger: the name is an overlay that lets clicks
+ * through, and the trigger is named by the name followed by the hex reading
+ * ("Tint colour #163300"). Forwards a ref to the wrapper and spreads
+ * unrecognised props onto it.
+ */
+export declare const InspectorColorPicker: React.ForwardRefExoticComponent<InspectorColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};