@robr0/design-system 0.14.0 → 0.15.0

package/components/CommandPalette/CommandPalette.js

@@ -80,15 +80,19 @@ const CommandPalette = ({
     }
   }, [open]);
   useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+    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.body.style.overflow = "";
+      document.removeEventListener("wheel", block);
+      document.removeEventListener("touchmove", block);
     };
-  }, [open]);
+  }, [open, baseClass]);
   useEffect(() => {
     if (!open) return;
     const handleTrapKeyDown = (e) => {

package/components/Composer/Composer.css

@@ -140,6 +140,24 @@
   }
 }
 
+/* Working: while a response streams, the ring stays lit and keeps turning
+   whether or not the field holds focus — the visible half of the `streaming`
+   contract for glowing composers. The pairing is defined in design.md's
+   Composer section; streaming without aiGlow changes nothing. */
+.ds-composer--ai-glow.ds-composer--streaming {
+  border-color: transparent;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::after {
+  opacity: 0.3;
+  animation-play-state: running;
+}
+
 /* Reduced motion: the ring and glow stay, the turning stops. */
 @media (prefers-reduced-motion: reduce) {
   .ds-composer--ai-glow::before,

package/components/Composer/Composer.d.ts

@@ -21,7 +21,8 @@ type ComposerOwnProps = {
     onSubmit?: (value: string) => void;
     /**
      * A response is streaming: the send button becomes a stop button, submit
-     * is blocked, and Enter is inert.
+     * is blocked, and Enter is inert. On a glowing composer (`aiGlow`) the
+     * gradient ring also stays lit and keeps turning while this is true.
      */
     streaming?: boolean;
     /** Fires when the stop button is pressed while `streaming`. */
@@ -32,7 +33,8 @@ type ComposerOwnProps = {
      * While focused, the shell wears AiButton's slowly rotating gradient ring
      * and glow in place of the plain selected border — the system's "a model
      * answers here" signal, for composers whose messages are answered by one.
-     * Off by default.
+     * While `streaming`, the ring stays lit and turning whether or not the
+     * field holds focus. Off by default.
      */
     aiGlow?: boolean;
     /**

package/components/Composer/Composer.js

@@ -77,6 +77,7 @@ const Composer = React.forwardRef(
     const classes = [
       baseClass,
       aiGlow ? `${baseClass}--ai-glow` : "",
+      streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
       className
     ].filter(Boolean).join(" ");

package/components/ContributionGraph/ContributionGraph.css

@@ -79,6 +79,27 @@
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
+  /* The year sweeps in left to right on mount: each column's delay steps by
+     a fraction of the entrance duration (--ds-contribution-week, set inline
+     per column). Token-composed, so reduced motion collapses the sweep. */
+  animation: ds-contribution-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    backwards;
+  animation-delay: calc(
+    var(--ds-contribution-week, 0) * var(--motion-duration-slower) / 40
+  );
+}
+
+@keyframes ds-contribution-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Hover lifts the day under the pointer, so the title tooltip has a visible
+   anchor. */
+.ds-contribution-graph__week .ds-contribution-graph__cell:not(.ds-contribution-graph__cell--empty):hover {
+  outline: var(--border-xs) solid var(--color-text-tertiary);
+  outline-offset: calc(-1 * var(--border-xs));
 }
 
 .ds-contribution-graph__cell--empty {

package/components/ContributionGraph/ContributionGraph.js

@@ -112,16 +112,24 @@ const ContributionGraph = ({
             style: { gridTemplateColumns: columnTemplate },
             role: "img",
             "aria-label": caption ?? "Contribution activity",
-            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
-              (day, dayIndex) => day ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
-                  title: formatTooltip(day)
-                },
-                day.date
-              ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
-            ) }, weekIndex))
+            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-contribution-graph__week",
+                style: { "--ds-contribution-week": weekIndex },
+                children: week.map(
+                  (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
+                      title: formatTooltip(day)
+                    },
+                    day.date
+                  ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
+                )
+              },
+              weekIndex
+            ))
           }
         )
       ] }),

package/components/Figure/Figure.css

@@ -47,15 +47,25 @@
    ZOOMABLE (has onClick)
    ============================================ */
 
-.ds-figure--zoomable {
+/* The zoom control is a real <button> wrapping the media (ARIA forbids
+   role="button" on <figure>), stripped back to a bare block. */
+.ds-figure__zoom {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
   cursor: zoom-in;
 }
 
-.ds-figure--zoomable:hover .ds-figure__media img {
+.ds-figure__zoom:hover .ds-figure__media img {
   opacity: 0.88;
 }
 
-.ds-figure--zoomable:focus-visible {
+/* Inset ring: the button sits inside the figure's overflow clip, so an
+   outset outline would be cropped away. */
+.ds-figure__zoom:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }

package/components/Figure/Figure.js

@@ -9,26 +9,17 @@ const Figure = ({
 }) => {
   const baseClass = "ds-figure";
   const classes = [baseClass, onClick && `${baseClass}--zoomable`, className].filter(Boolean).join(" ");
-  const onKeyDown = onClick ? (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onClick();
-    }
-  } : void 0;
-  return /* @__PURE__ */ jsxs(
-    "figure",
-    {
-      className: classes,
-      onClick,
-      onKeyDown,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children }),
-        caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
-      ]
-    }
-  );
+  const media = /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children });
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    onClick ? (
+      // A real button rather than role="button" on the figure: ARIA
+      // forbids the button role on <figure>, and the element brings
+      // Enter/Space activation itself. Its accessible name is the
+      // child image's alt text.
+      /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__zoom`, onClick, children: media })
+    ) : media,
+    caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+  ] });
 };
 export {
   Figure

package/components/FunnelChart/FunnelChart.css

@@ -1,42 +1,17 @@
 /* ============================================
    FUNNEL CHART COMPONENT
-   Side-by-side vertical bars stepping down with
-   each stage's share of the first. Geometry and
-   colour arrive per stage as inline custom
-   properties (--funnel-stage-size, a clamped
-   percentage number; --funnel-stage-color, a
-   chart-series token), so the rules here stay
-   token-only.
+   Centred trapezoid funnel built on Recharts'
+   native Funnel. Card chrome, header, padding
+   and the tooltip surface all come from the
+   shared chart styles (Chart.css); colour
+   arrives per stage as a chart-series token
+   resolved live in SVG paint. This file owns
+   only what the shared styles cannot reach.
    ============================================ */
 
-/* Base — card chrome, header, and padding come from the shared chart
-   styles (Chart.css); this file owns the stage row alone. */
+/* The stage-name labels draw as SVG text, which inherits no typography from
+   the shared chart classes — pin them to the family's primary face. */
 
-.ds-funnel-chart__stages {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-xxs);
-}
-
-/* Parts */
-
-.ds-funnel-chart__stage {
-  flex: 1;
-  min-width: 0;
-  height: calc(var(--funnel-stage-size) * 1%);
-  border-radius: var(--radius-sm);
-  background-color: var(--funnel-stage-color);
-  display: grid;
-  place-items: center;
-}
-
-.ds-funnel-chart__pct {
-  background-color: var(--color-bg-container-primary);
-  color: var(--color-text-primary);
-  border-radius: var(--radius-full);
-  padding: var(--padding-xxxs) var(--padding-xs);
-  font-family: var(--font-caption-family);
-  font-size: var(--font-caption-size);
-  font-weight: var(--font-paragraph-sm-em-weight);
-  line-height: var(--font-caption-line-height);
+.ds-funnel-chart .recharts-label-list text {
+  font-family: var(--font-family-primary);
 }

package/components/FunnelChart/FunnelChart.d.ts

@@ -1,19 +1,19 @@
 import { default as React } from 'react';
 /** One stage of the funnel, ordered widest first. */
 export interface FunnelStage {
-    /** Stage name, read into the chart's accessible label. */
+    /** Stage name, shown beside the stage and read into the chart's accessible label. */
     label: string;
-    /** Raw count for the stage — drives the bar's height as a share of the first stage. */
+    /** Raw count for the stage — drives the stage's width as a share of the first stage. */
     value: number;
     /**
-     * Preformatted value ("96.4K") for the accessible label and any consumer
-     * legend. Falls back to the raw `value`, locale-formatted.
+     * Preformatted value ("96.4K") for the tooltip and the accessible label.
+     * Falls back to the raw `value`, locale-formatted.
      */
     displayValue?: string;
 }
 /** Props owned by FunnelChart itself — everything else falls through to the root div. */
 type FunnelChartOwnProps = {
-    /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
+    /** Ordered stages, first stage widest. Each later stage's width is its share of the first. */
     data: FunnelStage[];
     /** Chart title, in the shared chart header. */
     title?: string;
@@ -23,9 +23,12 @@ type FunnelChartOwnProps = {
     bare?: boolean;
     /** Chart area height in pixels. */
     height?: number;
+    /** Shows each stage's name beside its band. Turn off when a legend under the chart already carries the names. */
+    showLabels?: boolean;
     /**
-     * Floor percentage for a stage's height, so steep drop-offs stay readable.
-     * Shares are clamped to the range from this floor up to 100.
+     * Floor percentage from the stepped-bar rendering this chart used to have.
+     * @deprecated The funnel now draws true trapezoids sized by value, so a
+     * height floor no longer applies; the prop is ignored.
      */
     minStageShare?: number;
     /** Additional CSS classes */
@@ -34,15 +37,15 @@ type FunnelChartOwnProps = {
 export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
 }
 /**
- * FunnelChart — ordered stages as side-by-side vertical bars whose heights
- * step down with each stage's share of the first, each carrying a centred
- * percentage pill. Pure JSX and CSS computed from props: no recharts, no
- * hooks, no browser APIs, so it deliberately omits 'use client' and renders
- * from a Server Component. It wears the chart family's card chrome (title,
- * subtitle, padding) and takes `bare` to drop it inside a Panel, like every
- * other chart. Degenerate data stays safe: an empty array renders an empty
- * stage row, and a zero or negative first value draws every stage at the
- * floor height.
+ * FunnelChart — ordered stages as a centred funnel of trapezoid bands, built
+ * on Recharts' native Funnel so the stages sweep in on load and share the
+ * family's tooltip and palette. Each band's width is its stage's share of the
+ * first, the honest recharts geometry: the taper itself is the conversion
+ * story, and the glass tooltip carries each stage's reading and percentage.
+ * It wears the chart family's card chrome (title, subtitle, padding) and
+ * takes `bare` to drop it inside a Panel, like every other chart. The whole
+ * funnel is summarised in one accessible label, stage by stage. Degenerate
+ * data stays safe: an empty array renders an empty chart area.
  */
 export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/FunnelChart/FunnelChart.js

@@ -1,8 +1,31 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { ResponsiveContainer, FunnelChart as FunnelChart$1, Tooltip, Funnel, LabelList } from "recharts";
+import { getChartSeriesColors } from "../Chart/palette.js";
 import "../Chart/Chart.css";
 import "./FunnelChart.css";
-const SERIES_COUNT = 7;
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function FunnelTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  const stage = entry.payload;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: stage?.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "ds-chart__tooltip-dot",
+          style: { backgroundColor: stage?.fill }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: stage?.share !== void 0 ? `${stage.share}%` : "" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: stage?.displayValue ?? entry.value?.toLocaleString() })
+    ] })
+  ] });
+}
 const FunnelChart = React.forwardRef(
   ({
     data,
@@ -10,55 +33,60 @@ const FunnelChart = React.forwardRef(
     subtitle,
     bare = false,
     height = 190,
-    minStageShare = 16,
+    showLabels = true,
+    minStageShare,
     className = "",
     ...rest
   }, ref) => {
     const baseClass = "ds-funnel-chart";
     const chartClass = "ds-chart";
-    const classes = [
-      chartClass,
-      bare && `${chartClass}--bare`,
-      baseClass,
-      className
-    ].filter(Boolean).join(" ");
+    const classes = [chartClass, bare && `${chartClass}--bare`, baseClass, className].filter(Boolean).join(" ");
+    const seriesColors = getChartSeriesColors();
+    const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+    const surfaceColor = getCSSVar("--color-bg-container-primary", "#FFFFFF");
     const firstValue = data.length > 0 ? data[0].value : 0;
-    const clampShare = (share) => Math.min(Math.max(share, minStageShare), 100);
     const stages = data.map((stage, i) => ({
-      ...stage,
-      share: clampShare(firstValue > 0 ? stage.value / firstValue * 100 : 0),
-      color: `var(--color-chart-series-${i % SERIES_COUNT + 1})`
+      name: stage.label,
+      value: stage.value,
+      displayValue: stage.displayValue,
+      share: firstValue > 0 ? Math.round(stage.value / firstValue * 100) : 0,
+      fill: seriesColors[i % seriesColors.length]
     }));
-    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.label} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.name} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    const renderTooltip = useCallback(
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      (props) => /* @__PURE__ */ jsx(FunnelTooltip, { ...props }),
+      []
+    );
     return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
       (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
         title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
         subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
       ] }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${chartClass}__body ${baseClass}__stages`,
-          style: { height },
-          role: "img",
-          "aria-label": ariaLabel,
-          children: stages.map((stage, i) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${baseClass}__stage`,
-              style: {
-                "--funnel-stage-size": stage.share,
-                "--funnel-stage-color": stage.color
-              },
-              children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
-                Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
-                "%"
-              ] })
-            },
-            `${stage.label}-${i}`
-          ))
-        }
-      )
+      /* @__PURE__ */ jsx("div", { className: `${chartClass}__body`, role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(FunnelChart$1, { margin: { top: 4, right: 4, bottom: 4, left: 4 }, children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+        /* @__PURE__ */ jsx(
+          Funnel,
+          {
+            dataKey: "value",
+            nameKey: "name",
+            data: stages,
+            lastShapeType: "rectangle",
+            stroke: surfaceColor,
+            strokeWidth: 2,
+            children: showLabels && /* @__PURE__ */ jsx(
+              LabelList,
+              {
+                position: "right",
+                dataKey: "name",
+                fill: textSecondary,
+                stroke: "none",
+                fontSize: 12
+              }
+            )
+          }
+        )
+      ] }) }) })
     ] });
   }
 );

package/components/Gauge/Gauge.css

@@ -39,7 +39,7 @@
 
 .ds-gauge__track {
   fill: none;
-  stroke: var(--color-bg-container-secondary);
+  stroke: var(--color-bg-container-tertiary);
   stroke-linecap: round;
 }
 
@@ -48,6 +48,16 @@
   stroke: currentColor;
   stroke-linecap: round;
   transition: stroke-dasharray var(--motion-duration-slow) var(--motion-ease-emphasized);
+  /* Sweep in from an empty dial on mount — the single keyframe animates to
+     the element's own dasharray, so one rule serves every reading. The
+     duration tokens collapse under reduced motion, guarding this for free. */
+  animation: ds-gauge-sweep var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-gauge-sweep {
+  from {
+    stroke-dasharray: 0 100;
+  }
 }
 
 .ds-gauge__center {

package/components/Meter/Meter.css

@@ -47,7 +47,7 @@
   width: 100%;
   height: 8px;
   border-radius: var(--radius-full);
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-tertiary);
   overflow: hidden;
 }
 
@@ -59,6 +59,15 @@
   height: 100%;
   border-radius: var(--radius-full);
   transition: width var(--motion-duration-base) var(--motion-ease-standard);
+  /* Grows to the current level on mount — the single keyframe animates to
+     the inline width, and the duration token collapses under reduced motion. */
+  animation: ds-meter-grow var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-meter-grow {
+  from {
+    width: 0;
+  }
 }
 
 /* ============================================

package/components/ProgressBar/ProgressBar.css

@@ -17,7 +17,7 @@
 .ds-progress-bar__track {
   flex: 1;
   height: 8px;
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-tertiary);
   border-radius: var(--radius-full);
   overflow: hidden;
 }

package/components/SegmentedControl/SegmentedControl.css

@@ -92,6 +92,29 @@
   background-color: var(--color-action-primary-bg-hover);
 }
 
+/* ============================================
+   NEUTRAL VARIANT
+   The active pill fills grey instead of the
+   action teal — for sets where the selection
+   should not carry the action colour's weight.
+   ============================================ */
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active {
+  background-color: var(--color-action-neutral-bg);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__label {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active:hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
 /* ============================================
    DISABLED STATE
    ============================================ */

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -18,6 +18,8 @@ export interface SegmentedControlProps {
     onSegmentChange?: (value: string) => void;
     /** Component size */
     size?: 'default' | 'compact';
+    /** Visual treatment of the active segment — teal by default, `neutral` fills it grey */
+    variant?: 'primary' | 'neutral';
     /** Full width — segments fill container */
     fullWidth?: boolean;
     /** Accessible label for the tablist */
@@ -30,4 +32,4 @@ export interface SegmentedControlProps {
  * A horizontal set of mutually exclusive options with a
  * pill-shaped active indicator. Supports icons and keyboard navigation.
  */
-export declare const SegmentedControl: ({ segments, activeSegment, onSegmentChange, size, fullWidth, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;
+export declare const SegmentedControl: ({ segments, activeSegment, onSegmentChange, size, variant, fullWidth, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;

package/components/SegmentedControl/SegmentedControl.js

@@ -8,15 +8,17 @@ const SegmentedControl = ({
   activeSegment,
   onSegmentChange,
   size = "default",
+  variant = "primary",
   fullWidth = false,
   ariaLabel,
   className = ""
 }) => {
   const baseClass = "ds-segmented-control";
   const sizeClass = `${baseClass}--${size}`;
+  const variantClass = `${baseClass}--${variant}`;
   const fullWidthClass = fullWidth ? `${baseClass}--full-width` : "";
   const containerRef = useRef(null);
-  const classes = [baseClass, sizeClass, fullWidthClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, sizeClass, variantClass, fullWidthClass, className].filter(Boolean).join(" ");
   const handleKeyDown = (e, idx) => {
     const enabledSegments = segments.filter((s) => !s.disabled);
     const currentEnabledIdx = enabledSegments.findIndex((s) => s.value === segments[idx].value);

package/components/Slider/Slider.css

@@ -21,7 +21,7 @@
   border-radius: var(--radius-full);
   outline: none;
   cursor: pointer;
-  background: var(--color-bg-container-secondary);
+  background: var(--color-bg-container-tertiary);
 }
 
 .ds-slider--compact .ds-slider__input {

package/components/Slider/Slider.js

@@ -44,7 +44,7 @@ const Slider = React.forwardRef(
         onChange: handleChange,
         "aria-label": ariaLabel || rest["aria-label"],
         style: {
-          background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-secondary) ${percentage}%)`,
+          background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-tertiary) ${percentage}%)`,
           ...style
         }
       }