@mediaradar/design-components 0.18.6 → 0.18.8

package/dist/index.d.cts

@@ -1376,7 +1376,7 @@ interface SelectionPickerProps<T extends PickerRow> {
  * filtered client-side (the default), or externally-computed `results` for a
  * caller whose search is server-side/async, with `loading`/`error`/
  * `hasMore`/`onLoadMore` covering that mode's states.
- * @tokens rounded-control, rounded-card, border-border-default, bg-input,
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-input,
  * bg-canvas, bg-surface, shadow-raised, shadow-overlay, text-text-primary,
  * text-text-secondary, text-text-tertiary, text-text-link,
  * text-brand-primaryAction, border-brand-primaryAction, bg-brand-primaryAction,
@@ -1646,7 +1646,7 @@ interface NameListModalProps {
  * checkboxes under it. Shared by the Account Lists table and the list detail
  * page so create/rename look identical; `fieldLabel`/`placeholder` relabel it
  * for dialogs that name something other than a list.
- * @tokens bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
+ * @tokens border-border-strong, bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
  * @behavior Escape closes the dialog via `onCancel`, same as clicking the
  * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
  * When `options` are given they render as CheckBox rows below the field, and
@@ -1664,15 +1664,14 @@ interface NameListModalProps {
 declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit, fieldLabel, placeholder, options, }: NameListModalProps): react.ReactPortal;
 
 /**
- * Which stroke a chip trigger carries.
- *   - `box`    : the boxed two-line chip (caption over value), on the default
- *                border. The common filter-bar chip.
- *   - `inline` : the same white fill with a darker stroke, for chips sitting
- *                directly on the warm canvas with no boxed shell around them.
+ * Kept for compatibility. Since 0.18.5 both variants draw the same
+ * `border-strong` stroke, matching SelectFilter, DateRangeFilter,
+ * DataScopeFilter, AdvertiserQuickFilter and SearchBar, so every dropdown
+ * trigger in a filter row has one border colour.
  */
 type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(variant?: ChipVariant): string;
+declare function chipTriggerClass(_variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1686,11 +1685,10 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens text-control-caption, rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
- * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
- * boxed two-line chip on the default border) or `inline` (same fill, darker
- * stroke, for chips sitting directly on the canvas). It is an argument to
- * that function, not a prop on `ChipContent`.
+ * @tokens text-control-caption, rounded-control, bg-input, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @behavior `chipTriggerClass` still accepts a `ChipVariant` (`box` or
+ * `inline`) so existing calls compile, but both draw the same `border-strong`
+ * stroke as every other dropdown trigger.
  * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
@@ -1921,7 +1919,7 @@ declare function Tag({ children, className }: TagProps): react.JSX.Element;
  * first/prev/pages/next/last pager, and the resolved "1 – 25 of N results"
  * range. Owns no state — the host page holds `page` and `perPage` so the
  * paged slice and the bar can't disagree.
- * @tokens rounded-control, border-border-default, bg-input, text-text-primary, text-text-secondary, text-text-tertiary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, focus:outline-border-focus
+ * @tokens border-border-strong, rounded-control, bg-input, text-text-primary, text-text-secondary, text-text-tertiary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, focus:outline-border-focus
  * @behavior The current page is filled with the brand action color (matching
  * the Contacts pager). First/prev disable on page 1, next/last on the last
  * page — disabled controls stay in the layout so the row never reflows.
@@ -2007,7 +2005,7 @@ interface MultiSelectGroup {
  * button shape (two-line caption + value with a chevron) and opens a
  * searchable checkbox popover. Used for the page-level Media Type /
  * Advertiser filters that share state with the filter tray.
- * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
  * @behavior `variant` picks the trigger's chip stroke: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill,
@@ -2120,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

@@ -1376,7 +1376,7 @@ interface SelectionPickerProps<T extends PickerRow> {
  * filtered client-side (the default), or externally-computed `results` for a
  * caller whose search is server-side/async, with `loading`/`error`/
  * `hasMore`/`onLoadMore` covering that mode's states.
- * @tokens rounded-control, rounded-card, border-border-default, bg-input,
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-input,
  * bg-canvas, bg-surface, shadow-raised, shadow-overlay, text-text-primary,
  * text-text-secondary, text-text-tertiary, text-text-link,
  * text-brand-primaryAction, border-brand-primaryAction, bg-brand-primaryAction,
@@ -1646,7 +1646,7 @@ interface NameListModalProps {
  * checkboxes under it. Shared by the Account Lists table and the list detail
  * page so create/rename look identical; `fieldLabel`/`placeholder` relabel it
  * for dialogs that name something other than a list.
- * @tokens bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
+ * @tokens border-border-strong, bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
  * @behavior Escape closes the dialog via `onCancel`, same as clicking the
  * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
  * When `options` are given they render as CheckBox rows below the field, and
@@ -1664,15 +1664,14 @@ interface NameListModalProps {
 declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit, fieldLabel, placeholder, options, }: NameListModalProps): react.ReactPortal;
 
 /**
- * Which stroke a chip trigger carries.
- *   - `box`    : the boxed two-line chip (caption over value), on the default
- *                border. The common filter-bar chip.
- *   - `inline` : the same white fill with a darker stroke, for chips sitting
- *                directly on the warm canvas with no boxed shell around them.
+ * Kept for compatibility. Since 0.18.5 both variants draw the same
+ * `border-strong` stroke, matching SelectFilter, DateRangeFilter,
+ * DataScopeFilter, AdvertiserQuickFilter and SearchBar, so every dropdown
+ * trigger in a filter row has one border colour.
  */
 type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(variant?: ChipVariant): string;
+declare function chipTriggerClass(_variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1686,11 +1685,10 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens text-control-caption, rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
- * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
- * boxed two-line chip on the default border) or `inline` (same fill, darker
- * stroke, for chips sitting directly on the canvas). It is an argument to
- * that function, not a prop on `ChipContent`.
+ * @tokens text-control-caption, rounded-control, bg-input, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @behavior `chipTriggerClass` still accepts a `ChipVariant` (`box` or
+ * `inline`) so existing calls compile, but both draw the same `border-strong`
+ * stroke as every other dropdown trigger.
  * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
@@ -1921,7 +1919,7 @@ declare function Tag({ children, className }: TagProps): react.JSX.Element;
  * first/prev/pages/next/last pager, and the resolved "1 – 25 of N results"
  * range. Owns no state — the host page holds `page` and `perPage` so the
  * paged slice and the bar can't disagree.
- * @tokens rounded-control, border-border-default, bg-input, text-text-primary, text-text-secondary, text-text-tertiary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, focus:outline-border-focus
+ * @tokens border-border-strong, rounded-control, bg-input, text-text-primary, text-text-secondary, text-text-tertiary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, focus:outline-border-focus
  * @behavior The current page is filled with the brand action color (matching
  * the Contacts pager). First/prev disable on page 1, next/last on the last
  * page — disabled controls stay in the layout so the row never reflows.
@@ -2007,7 +2005,7 @@ interface MultiSelectGroup {
  * button shape (two-line caption + value with a chevron) and opens a
  * searchable checkbox popover. Used for the page-level Media Type /
  * Advertiser filters that share state with the filter tray.
- * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
  * @behavior `variant` picks the trigger's chip stroke: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill,
@@ -2120,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

@@ -233,7 +233,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+          /* @__PURE__ */ jsx3("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
             /* @__PURE__ */ jsx3(Search2, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx3(
               "input",
@@ -892,7 +892,7 @@ function DateRangeFilter({
 function Field({ label, value }) {
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
     /* @__PURE__ */ jsx7("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx7("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
+    /* @__PURE__ */ jsx7("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-strong bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
   ] });
 }
 function NavBtn({ children, onClick, ...rest }) {
@@ -2313,7 +2313,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3", children: [
           /* @__PURE__ */ jsx24(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx24(
             "input",
@@ -2627,7 +2627,7 @@ function FilterDropdown({
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
-        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
         children: [
           label,
           /* @__PURE__ */ jsx24(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2644,7 +2644,7 @@ function FilterDropdown({
           style: { top: pos.top, left: pos.left },
           className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
           children: [
-            searchable && /* @__PURE__ */ jsxs22("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+            searchable && /* @__PURE__ */ jsxs22("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
               /* @__PURE__ */ jsx24(Search4, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
               /* @__PURE__ */ jsx24(
                 "input",
@@ -2984,7 +2984,7 @@ function NameListModal({
                     value: name,
                     onChange: (e) => setName(e.target.value),
                     placeholder,
-                    className: "h-10 rounded-control border border-border-default bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
                   }
                 )
               ] }),
@@ -3007,13 +3007,12 @@ function NameListModal({
 
 // src/ChipTrigger.tsx
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
-function chipTriggerClass(variant = "box") {
+function chipTriggerClass(_variant = "box") {
   return cn(
-    "flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-    // Both variants sit on the input fill. `inline` carries the darker stroke
-    // so it still reads as a control against the warm canvas with no boxed
-    // shell behind it.
-    variant === "inline" ? "border-border-strong" : "border-border-default"
+    "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus"
+    // One stroke for every trigger: a `box` chip on the lighter default
+    // border sat beside SelectFilter's darker one in the same row and read as
+    // a different kind of control. The variant no longer changes anything.
   );
 }
 function ChipContent({ caption, value, icon }) {
@@ -3316,7 +3315,7 @@ function TablePagination({
             onChange: (e) => onPerPageChange(Number(e.target.value)),
             "aria-label": "Items per page",
             "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
-            className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
+            className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
             children: perPageOptions.map((n) => /* @__PURE__ */ jsx35("option", { value: n, children: n }, n))
           }
         ),
@@ -3457,7 +3456,7 @@ function MiniSelect({ value, onChange, options }) {
         const opt = options.find((o) => String(o.value) === e.target.value);
         if (opt) onChange(opt.value);
       },
-      className: "rounded-control border border-border-default bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
+      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
       children: options.map((o) => /* @__PURE__ */ jsx36("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
@@ -3710,7 +3709,7 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs33("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+          searchable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs33("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
             /* @__PURE__ */ jsx37(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx37(
               "input",
@@ -3834,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(
@@ -3846,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
       ),