@mediaradar/design-components 0.18.7 → 0.18.8

package/dist/index.d.cts

@@ -2118,10 +2118,12 @@ interface ToggleProps {
  * Rendered as a `<button role="switch">` so the on/off state is announced as a
  * switch rather than a checkbox, and so the track and knob can carry the brand
  * fill without fighting a native input's styling hooks.
- * @tokens bg-brand-primaryAction, bg-border-interactive, bg-surface, shadow-raised, outline-border-focus
+ * @tokens bg-brand-primaryAction, bg-surface, shadow-raised, outline-border-focus
  * @behavior The knob is positioned by `translate-x`, not by flex alignment, so
- * the slide animates. Off uses `bg-border-interactive` rather than a grey
- * literal, which keeps the track visible against `bg-surface` in dark mode.
+ * the slide animates. Off is `border-interactive` mixed 70/30 with
+ * `text-secondary` (an inline style), so the track and the knob on it are at
+ * least 3:1 against the surface in both themes (WCAG 1.4.11). The two tokens
+ * are the same colour in light mode, so light is unchanged.
  * Pair it with a label and any InfoTip in the surrounding row: this component
  * draws only the switch, so rows stay free to lay the label out however they
  * need (usually label left, switch pushed right).

package/dist/index.d.ts

@@ -2118,10 +2118,12 @@ interface ToggleProps {
  * Rendered as a `<button role="switch">` so the on/off state is announced as a
  * switch rather than a checkbox, and so the track and knob can carry the brand
  * fill without fighting a native input's styling hooks.
- * @tokens bg-brand-primaryAction, bg-border-interactive, bg-surface, shadow-raised, outline-border-focus
+ * @tokens bg-brand-primaryAction, bg-surface, shadow-raised, outline-border-focus
  * @behavior The knob is positioned by `translate-x`, not by flex alignment, so
- * the slide animates. Off uses `bg-border-interactive` rather than a grey
- * literal, which keeps the track visible against `bg-surface` in dark mode.
+ * the slide animates. Off is `border-interactive` mixed 70/30 with
+ * `text-secondary` (an inline style), so the track and the knob on it are at
+ * least 3:1 against the surface in both themes (WCAG 1.4.11). The two tokens
+ * are the same colour in light mode, so light is unchanged.
  * Pair it with a label and any InfoTip in the surrounding row: this component
  * draws only the switch, so rows stay free to lay the label out however they
  * need (usually label left, switch pushed right).

package/dist/index.js

@@ -3833,6 +3833,7 @@ var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
 };
+var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
   return /* @__PURE__ */ jsx38(
@@ -3845,10 +3846,11 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
       disabled,
       "data-testid": testIdPrefix && `${testIdPrefix}-toggle`,
       onClick: () => onChange(!checked),
+      style: checked ? void 0 : { backgroundColor: OFF_TRACK },
       className: cn(
         "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         s.track,
-        checked ? "bg-brand-primaryAction" : "bg-border-interactive",
+        checked && "bg-brand-primaryAction",
         disabled && "cursor-not-allowed opacity-50",
         className
       ),