rift-ds 1.1.0 → 1.3.0

package/components/Inspector/InspectorDropdown.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { DropdownOption, DropdownOptionGroup } from '../Dropdown/Dropdown';
+/** Props owned by InspectorDropdown itself — everything else falls through to the wrapper. */
+type InspectorDropdownOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the dropdown's accessible name. */
+    label: string;
+    /** Currently selected value. */
+    value?: string;
+    /** Available options (flat list). Each option's `font` previews the face, as in Dropdown. */
+    options: DropdownOption[];
+    /** Optional grouped options. When provided, renders groups with labels and separators. */
+    groups?: DropdownOptionGroup[];
+    /** Shown on the right when nothing is selected. */
+    placeholder?: string;
+    /** Whether the dropdown is disabled. */
+    disabled?: boolean;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px. */
+    size?: 'default' | 'compact';
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes, applied to the wrapper. */
+    className?: string;
+};
+export interface InspectorDropdownProps extends InspectorDropdownOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InspectorDropdownOwnProps | 'onChange'> {
+}
+/**
+ * A one-row select for inspector panels: the name on the left, the chosen
+ * option and a chevron on the right. It is the library Dropdown with its
+ * trigger dressed as an inspector bar, so the menu, its keyboard model and
+ * its per-option font previews are Dropdown's own. The form counterpart,
+ * with a label above, is Dropdown itself.
+ *
+ * The name is an overlay the trigger reserves room for. It is measured,
+ * since names differ in width and a web font can change one after load,
+ * and it lets clicks through, so the whole bar opens the menu. Forwards a
+ * ref to the wrapper and spreads unrecognised props onto it.
+ */
+export declare const InspectorDropdown: React.ForwardRefExoticComponent<InspectorDropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Inspector/InspectorDropdown.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect } from "react";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import "./Inspector.css";
+const InspectorDropdown = React.forwardRef(
+  ({
+    label,
+    value,
+    options,
+    groups,
+    placeholder,
+    disabled = false,
+    size = "default",
+    onValueChange,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const dropdownId = React.useId();
+    const labelRef = useRef(null);
+    const [labelWidth, setLabelWidth] = useState(0);
+    useLayoutEffect(() => {
+      const node = labelRef.current;
+      if (!node) return;
+      const measure = () => setLabelWidth(node.offsetWidth);
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, []);
+    const classes = [
+      "ds-inspector-dropdown",
+      size === "compact" ? "ds-inspector-dropdown--compact" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        style: { ...style, "--ds-inspector-label-width": `${labelWidth}px` },
+        children: [
+          /* @__PURE__ */ jsx("span", { ref: labelRef, className: "ds-inspector-dropdown__label", "aria-hidden": "true", children: label }),
+          /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              id: dropdownId,
+              "aria-label": label,
+              size,
+              value,
+              options,
+              groups,
+              placeholder,
+              disabled,
+              onValueChange
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InspectorDropdown.displayName = "InspectorDropdown";
+export {
+  InspectorDropdown
+};

package/components/Inspector/InspectorInput.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by InspectorInput itself — everything else falls through to the <input>. */
+type InspectorInputOwnProps = {
+    /** The setting's name, drawn inside the bar on the left, as the field's real <label>. */
+    label: string;
+    /** Current value. */
+    value?: string;
+    /** Input type: a curated subset of the single-line text types. */
+    type?: 'text' | 'email' | 'url' | 'search' | 'tel';
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px (not the native character-width `size` attribute). */
+    size?: 'default' | 'compact';
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes, applied to the bar rather than the <input>. */
+    className?: string;
+};
+export interface InspectorInputProps extends InspectorInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InspectorInputOwnProps> {
+}
+/**
+ * A one-row text field for inspector panels: the name on the left, the
+ * typed value right-aligned in the rest of the bar. The form counterpart,
+ * with a label above and helper text below, is Input.
+ *
+ * Forwards a ref to the underlying <input> and spreads unrecognised props
+ * onto it, so `autoComplete`, `maxLength` and form registration all work.
+ */
+export declare const InspectorInput: React.ForwardRefExoticComponent<InspectorInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Inspector/InspectorInput.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Inspector.css";
+const InspectorInput = React.forwardRef(
+  ({
+    label,
+    value,
+    type = "text",
+    size = "default",
+    disabled = false,
+    onChange,
+    onValueChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-input",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-inspector-bar__label", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          ref,
+          id: inputId,
+          className: "ds-inspector-input__field",
+          type,
+          value,
+          disabled,
+          onChange: handleChange
+        }
+      )
+    ] });
+  }
+);
+InspectorInput.displayName = "InspectorInput";
+export {
+  InspectorInput
+};

package/components/Inspector/InspectorSection.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by InspectorSection itself — everything else falls through to the <section>. */
+type InspectorSectionOwnProps = {
+    /** The section's heading, shown on its header row. Not the native tooltip `title` attribute. */
+    title: string;
+    /** Whether the section is expanded (controlled). Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Whether an uncontrolled section starts expanded. */
+    defaultOpen?: boolean;
+    /** Called with the next expanded state when the header is pressed. */
+    onOpenChange?: (open: boolean) => void;
+    /** The section's controls, stacked one rhythm apart. */
+    children?: React.ReactNode;
+    /** Additional CSS classes, applied to the <section>. */
+    className?: string;
+};
+export interface InspectorSectionProps extends InspectorSectionOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof InspectorSectionOwnProps> {
+}
+/**
+ * A collapsible, titled run of inspector controls: the header row toggles
+ * it, and stacked sections are divided by a hairline. The general-purpose
+ * counterpart, a bordered set of content panels, is Accordion.
+ *
+ * Two behaviours separate it from Accordion. The body clips only while
+ * closed or animating, and goes `overflow: visible` once settled open, so
+ * a Dropdown menu inside can open past the section's edge. And a closed
+ * body is `inert`, so its controls leave the tab order rather than sitting
+ * focusable at zero height. Forwards a ref to the <section> and spreads
+ * unrecognised props onto it.
+ */
+export declare const InspectorSection: React.ForwardRefExoticComponent<InspectorSectionProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/Inspector/InspectorSection.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Inspector.css";
+import "../../fonts/material-symbols.css";
+const InspectorSection = React.forwardRef(
+  ({ title, open, defaultOpen = false, onOpenChange, children, className = "", ...rest }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = open ?? uncontrolledOpen;
+    const [settled, setSettled] = useState(isOpen);
+    const baseId = React.useId();
+    const panelId = `${baseId}-panel`;
+    const headerId = `${baseId}-header`;
+    const toggle = () => {
+      const next = !isOpen;
+      setSettled(false);
+      if (open === void 0) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    };
+    const classes = [
+      "ds-inspector-section",
+      isOpen ? "ds-inspector-section--open" : "",
+      isOpen && settled ? "ds-inspector-section--settled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("section", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: headerId,
+          className: "ds-inspector-section__trigger",
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ds-inspector-section__icon material-symbols-rounded",
+                "aria-hidden": "true",
+                children: "expand_more"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headerId,
+          className: "ds-inspector-section__panel",
+          inert: !isOpen,
+          onTransitionEnd: (event) => {
+            if (event.target !== event.currentTarget) return;
+            if (isOpen) setSettled(true);
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "ds-inspector-section__body", children })
+        }
+      )
+    ] });
+  }
+);
+InspectorSection.displayName = "InspectorSection";
+export {
+  InspectorSection
+};

package/components/Inspector/InspectorSegmentedControl.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** One choice in an InspectorSegmentedControl. */
+export interface InspectorSegment {
+    /** The value reported when this segment is chosen. */
+    value: string;
+    /** Visible text. */
+    label: string;
+    /** Takes this one choice out of the set. */
+    disabled?: boolean;
+}
+/** Props owned by InspectorSegmentedControl itself — everything else falls through to the radiogroup. */
+type InspectorSegmentedControlOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Names the radiogroup. */
+    label: string;
+    /** The choices, drawn left to right in the bar's end. */
+    options: InspectorSegment[];
+    /** The selected value (controlled). Leave unset and use `defaultValue` for an uncontrolled set. */
+    value?: string;
+    /** The starting selection for an uncontrolled set. */
+    defaultValue?: string;
+    /** The radios' shared `name`, for native form submission. Generated when unset. */
+    name?: string;
+    /** Takes the whole set out of use. */
+    disabled?: boolean;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px. */
+    size?: 'default' | 'compact';
+    /** Called with the newly chosen value. */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes, applied to the bar. */
+    className?: string;
+};
+export interface InspectorSegmentedControlProps extends InspectorSegmentedControlOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InspectorSegmentedControlOwnProps> {
+}
+/**
+ * A one-row choice of a few options for inspector panels: the name on the
+ * left, the options as chips on the right. The selected chip takes a
+ * neutral fill, never the action colour. The form-and-toolbar counterpart,
+ * a free-standing pill strip, is SegmentedControl.
+ *
+ * Each option is a native radio, so arrow keys move the selection, the set
+ * announces as one radiogroup, and it submits with a form. A native
+ * `onChange` on the root receives each radio's bubbled change event.
+ * Forwards a ref to the root and spreads unrecognised props onto it.
+ */
+export declare const InspectorSegmentedControl: React.ForwardRefExoticComponent<InspectorSegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Inspector/InspectorSegmentedControl.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Inspector.css";
+const InspectorSegmentedControl = React.forwardRef(
+  ({
+    label,
+    options,
+    value,
+    defaultValue,
+    name,
+    disabled = false,
+    size = "default",
+    onValueChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const groupName = name ?? generatedId;
+    const labelId = `${generatedId}-label`;
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-segmented-control",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-labelledby": labelId,
+        ...rest,
+        ref,
+        className: classes,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "ds-inspector-bar__label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-segmented-control__segments", children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: "ds-inspector-segmented-control__segment", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "ds-inspector-segmented-control__radio",
+                type: "radio",
+                name: groupName,
+                value: option.value,
+                disabled: disabled || option.disabled,
+                ...value !== void 0 ? { checked: option.value === value } : { defaultChecked: option.value === defaultValue },
+                onChange: () => onValueChange?.(option.value)
+              }
+            ),
+            option.label
+          ] }, option.value)) })
+        ]
+      }
+    );
+  }
+);
+InspectorSegmentedControl.displayName = "InspectorSegmentedControl";
+export {
+  InspectorSegmentedControl
+};

package/components/Inspector/InspectorSlider.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by InspectorSlider itself — everything else falls through to the <input type="range">. */
+type InspectorSliderOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the range's accessible name. */
+    label: string;
+    /** Current value (controlled). Leave unset and use `defaultValue` for an uncontrolled slider. */
+    value?: number;
+    /** Starting value for an uncontrolled slider. Defaults to `min`. */
+    defaultValue?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. Also sets how many decimals the reading shows (0.02 reads "0.50"). */
+    step?: number;
+    /** Formats the reading on the right, and the value a screen reader announces. Defaults to the step's precision. */
+    format?: (value: number) => string;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px (not the native character-width `size` attribute). */
+    size?: 'default' | 'compact';
+    /**
+     * Convenience callback receiving the numeric value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature.
+     */
+    onValueChange?: (value: number) => void;
+    /** Additional CSS classes, applied to the bar rather than the <input>. */
+    className?: string;
+};
+export interface InspectorSliderProps extends InspectorSliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InspectorSliderOwnProps | 'type'> {
+}
+/**
+ * A one-row slider for inspector panels: the whole bar is the control, its
+ * fill is the value, and the name and reading sit inside it. The form
+ * counterpart, with a label above and a track, is Slider.
+ *
+ * A native range input covers the bar invisibly, so dragging anywhere,
+ * clicking to jump, the keyboard and the screen-reader semantics are the
+ * platform's. Forwards a ref to that input and spreads unrecognised props
+ * onto it.
+ */
+export declare const InspectorSlider: React.ForwardRefExoticComponent<InspectorSliderProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Inspector/InspectorSlider.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Inspector.css";
+const decimalsOf = (step) => {
+  const text = String(step);
+  const dot = text.indexOf(".");
+  return dot < 0 ? 0 : text.length - dot - 1;
+};
+const InspectorSlider = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    format,
+    size = "default",
+    disabled = false,
+    onChange,
+    onValueChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? min);
+    const current = value ?? uncontrolled;
+    const pct = max === min ? 0 : (current - min) / (max - min) * 100;
+    const reading = format ? format(current) : current.toFixed(decimalsOf(step));
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-slider",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      const next = Number(e.target.value);
+      if (value === void 0) setUncontrolled(next);
+      onChange?.(e);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes,
+        style: { "--ds-inspector-pct": `${pct}%` },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-slider__fill", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-slider__grip", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-inspector-bar__label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ds-inspector-bar__value", "aria-hidden": "true", children: reading }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-valuetext": reading,
+              ...rest,
+              ref,
+              id: inputId,
+              className: "ds-inspector-bar__native",
+              type: "range",
+              min,
+              max,
+              step,
+              value: current,
+              disabled,
+              onChange: handleChange
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InspectorSlider.displayName = "InspectorSlider";
+export {
+  InspectorSlider
+};

package/components/Inspector/InspectorToggleSwitch.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+/** Props owned by InspectorToggleSwitch itself — everything else falls through to the <input type="checkbox">. */
+type InspectorToggleSwitchOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the switch's accessible name. */
+    label: string;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px (not the native character-width `size` attribute). */
+    size?: 'default' | 'compact';
+    /**
+     * Convenience callback receiving the checked state directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional CSS classes, applied to the bar rather than the <input>. */
+    className?: string;
+};
+export interface InspectorToggleSwitchProps extends InspectorToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InspectorToggleSwitchOwnProps | 'type'> {
+}
+/**
+ * A one-row switch for inspector panels: the whole bar is the switch, with
+ * the name on the left and a small track on the right. The form
+ * counterpart, a standalone switch with its label beside it, is
+ * ToggleSwitch.
+ *
+ * A native checkbox with `role="switch"` covers the bar, and the paint
+ * reads its `:checked` state, so `checked` and `defaultChecked` both work.
+ * Forwards a ref to that input and spreads unrecognised props onto it.
+ */
+export declare const InspectorToggleSwitch: React.ForwardRefExoticComponent<InspectorToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Inspector/InspectorToggleSwitch.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Inspector.css";
+const InspectorToggleSwitch = React.forwardRef(
+  ({
+    label,
+    size = "default",
+    disabled = false,
+    onChange,
+    onCheckedChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const classes = [
+      "ds-inspector-bar",
+      "ds-inspector-toggle-switch",
+      size === "compact" ? "ds-inspector-bar--compact" : "",
+      disabled ? "ds-inspector-bar--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-inspector-bar__label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "ds-inspector-toggle-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ds-inspector-toggle-switch__knob" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          ref,
+          id: inputId,
+          className: "ds-inspector-bar__native",
+          type: "checkbox",
+          role: "switch",
+          disabled,
+          onChange: handleChange
+        }
+      )
+    ] });
+  }
+);
+InspectorToggleSwitch.displayName = "InspectorToggleSwitch";
+export {
+  InspectorToggleSwitch
+};

package/components/Instructions/Instructions.css

@@ -64,14 +64,14 @@
   width: 32px;
   height: 32px;
   border-radius: var(--radius-pill);
-  border: var(--border-025) solid var(--color-action-primary-border);
+  border: var(--border-025) solid var(--color-bg-container-border);
   background-color: transparent;
   flex-shrink: 0;
 }
 
 .ds-instructions__badge .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
-  color: var(--color-action-primary-bg);
+  color: var(--color-icon-primary);
 }
 
 .ds-instructions__number {
@@ -79,14 +79,14 @@
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-title-body-weight);
   line-height: 1;
-  color: var(--color-action-primary-bg);
+  color: var(--color-text-secondary);
 }
 
 .ds-instructions__dot {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-pill);
-  background-color: var(--color-action-primary-bg);
+  background-color: var(--color-icon-primary);
 }
 
 .ds-instructions__connector {