@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Chart/Chart.contract.json

@@ -1,14 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Chart",
-  "description": "Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.",
+  "description": "Plots your data with tooltips, legends, and colors that track the theme.",
   "category": "display",
-  "tags": [
-    "chart",
-    "graph",
-    "data-visualization",
-    "recharts"
-  ],
+  "tags": ["chart", "graph", "data-visualization", "recharts"],
   "status": "stable",
   "dependencies": [
     {
@@ -55,48 +50,47 @@
   },
   "usage": {
     "when": [
-      "Displaying data trends over time",
-      "Comparing categorical data",
-      "Showing distribution or composition",
-      "Dashboard data visualizations"
+      "A trend over time is the point",
+      "Categories need comparing side by side",
+      "A whole splits into parts worth seeing"
     ],
     "whenNot": [
-      "Simple numeric values (use Text or Badge)",
-      "Progress toward a goal (use Progress)",
-      "Tabular data without visualization (use Table)"
+      "One number tells the story (use Text or Badge)",
+      "Distance to a goal (use Progress)",
+      "Readers need exact values (use Table)"
     ],
     "guidelines": [
-      "Use ChartContainer to wrap recharts chart components",
-      "Define a ChartConfig to map data keys to labels and colors (and optionally icons for custom legend/tooltip UIs)",
-      "Use FUI CSS variables for colors so charts adapt to theme changes",
-      "Use ChartTooltip and ChartLegend for consistent themed overlays",
-      "ChartTooltip and ChartLegend accept custom content renderers for advanced formatting"
+      "Wrap every recharts chart in ChartContainer",
+      "Map each data key to a label and color in ChartConfig",
+      "Colors come from --fui-* variables so both themes stay readable",
+      "Pair with ChartTooltip and ChartLegend rather than recharts' own",
+      "Give the container a real height — recharts cannot measure zero"
     ],
     "accessibility": [
-      "Charts include recharts accessibilityLayer by default",
-      "Provide meaningful labels in ChartConfig for screen readers",
-      "Consider providing a data table alternative for complex charts"
+      "accessibilityLayer is on by default",
+      "ChartConfig labels are what screen readers read",
+      "Pass dataTable to offer the same numbers as text"
     ]
   },
   "examples": [
     {
       "name": "Line Chart",
-      "description": "Multi-series line chart showing trends over time",
+      "description": "Two series share one scale, so the gap between them reads instantly.",
       "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n      users: { label: 'Users', color: 'var(--fui-color-info)' },\n    }}\n  >\n    <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <ChartLegend />\n      <Line type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" strokeWidth={2} dot={false} />\n      <Line type=\"monotone\" dataKey=\"users\" stroke=\"var(--fui-color-info)\" strokeWidth={2} dot={false} />\n    </LineChart>\n  </ChartContainer>\n</div>"
     },
     {
       "name": "Bar Chart",
-      "description": "Categorical bar chart comparing device sessions",
+      "description": "Fixed categories, compared by height — the safest default.",
       "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"device\" />\n      <YAxis />\n      <ChartTooltip />\n      <Bar dataKey=\"sessions\" fill=\"var(--fui-color-accent)\" radius={[4, 4, 0, 0]} />\n    </BarChart>\n  </ChartContainer>\n</div>"
     },
     {
       "name": "Area Chart",
-      "description": "Filled area chart showing revenue trend",
+      "description": "The fill under the line stresses volume, not just direction.",
       "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <AreaChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <Area type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" fill=\"var(--fui-color-accent)\" fillOpacity={0.15} strokeWidth={2} />\n    </AreaChart>\n  </ChartContainer>\n</div>"
     },
     {
       "name": "Pie Chart",
-      "description": "Donut chart showing browser share distribution",
+      "description": "Parts of one whole — keep it under six slices or it stops reading.",
       "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },\n      Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },\n      Safari: { label: 'Safari', color: 'var(--fui-color-success)' },\n      Edge: { label: 'Edge', color: 'var(--fui-color-warning)' },\n    }}\n  >\n    <PieChart>\n      <ChartTooltip />\n      <ChartLegend />\n      <Pie\n        data={browserData}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        cx=\"50%\"\n        cy=\"50%\"\n        innerRadius={60}\n        outerRadius={90}\n        strokeWidth={2}\n      >\n        {browserData.map((entry) => (\n          <Cell key={entry.name} fill={entry.color} />\n        ))}\n      </Pie>\n    </PieChart>\n  </ChartContainer>\n</div>"
     }
   ],
@@ -123,9 +117,7 @@
       "children: ReactElement - recharts chart component",
       "Chart.Tooltip / Chart.Legend support custom content renderers for advanced overlays"
     ],
-    "a11yRules": [
-      "A11Y_CHART_LABEL"
-    ]
+    "a11yRules": ["A11Y_CHART_LABEL"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Chart/Chart.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/typography" as typography;
 
@@ -57,13 +58,13 @@
 .tooltipItems {
   display: flex;
   flex-direction: column;
-  gap: var(--_fui-chart-tooltip-item-gap);
+  gap: var(--_fui-chart-tooltip-item-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
 }
 
 .tooltipItem {
   display: flex;
   align-items: center;
-  gap: var(--_fui-chart-tooltip-item-gap);
+  gap: var(--_fui-chart-tooltip-item-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
   justify-content: space-between;
 }
 
@@ -82,8 +83,8 @@
     @include representation.chart-marker("dashed");
 
     box-sizing: border-box;
-    border-top: var(--fui-chart-marker-stroke, var(--fui-raw-space-2, 2px)) dashed;
-    border-radius: 0;
+    border-block-start: var(--fui-chart-marker-stroke, var(--fui-raw-space-2, #{measurements.raw-space(2)})) dashed;
+    border-radius: var(--fui-radius-none, #{$fui-radius-none});
   }
 }
 
@@ -104,7 +105,7 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-raw-space-12, 12px);
+  gap: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   padding-block-start: var(--fui-raw-space-8, 8px);
 }
 

package/src/components/Chart/index.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { mergeAriaIds } from "../../utils/aria";
 import styles from "./Chart.module.scss";
+import { isDevelopmentBuild } from "../../utils/env";
 
 // ============================================
 // Types (self-owned — no external dependency for types)
@@ -74,7 +75,7 @@ function loadChartDeps(): Promise<void> {
         _RechartsLegend = rc.Legend as unknown as React.ComponentType<Record<string, unknown>>;
       } catch {
         _chartFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] Chart: recharts is not installed. " +
               "Install it with: npm install recharts"
@@ -132,6 +133,34 @@ export function ChartContainer({
   ...htmlProps
 }: ChartContainerProps) {
   const chartId = React.useId();
+  const frameRef = React.useRef<HTMLDivElement | null>(null);
+  // Recharts only lays a chart out once it knows a pixel box. Percentage
+  // sizing leaves the first paint blank until something else happens to
+  // resize the window, so the container measures its own frame and hands the
+  // chart real numbers — re-measured whenever the frame changes.
+  const [frame, setFrame] = React.useState<{ width: number; height: number } | null>(null);
+
+  React.useEffect(() => {
+    const element = frameRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      const width = Math.round(rect.width);
+      const height = Math.round(rect.height);
+      setFrame((current) =>
+        current && current.width === width && current.height === height
+          ? current
+          : { width, height }
+      );
+    };
+
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
   const summaryId = summary ? `chart-summary-${chartId}` : undefined;
   const dataTableId = dataTable ? `chart-data-${chartId}` : undefined;
 
@@ -149,12 +178,12 @@ export function ChartContainer({
   // Inject sizing props into the chart child (recharts API).
   // Only pass `responsive` for custom component types to avoid leaking the
   // prop to intrinsic DOM nodes in test/demo usage.
-  const chartChildProps: Record<string, unknown> = {
-    width: "100%",
-    height: "100%",
-  };
+  const measured = frame !== null && frame.width > 0 && frame.height > 0;
+  const chartChildProps: Record<string, unknown> = measured
+    ? { width: frame.width, height: frame.height }
+    : { width: "100%", height: "100%" };
 
-  if (typeof children.type !== "string") {
+  if (!measured && typeof children.type !== "string") {
     chartChildProps.responsive = true;
   }
 
@@ -167,6 +196,7 @@ export function ChartContainer({
     <ChartConfigContext.Provider value={config}>
       <div
         {...htmlProps}
+        ref={frameRef}
         className={rootClasses}
         style={{ ...cssVars, ...style }}
         role="img"

package/src/components/Checkbox/Checkbox.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Checkbox",
-  "description": "Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.",
-  "category": "forms",
+  "description": "Selects options that take effect when a form is submitted.",
+  "category": "inputs",
   "tags": ["checkbox", "form", "boolean", "selection", "input"],
   "status": "stable",
   "sourcePath": "src/components/Checkbox/index.tsx",
@@ -16,6 +16,7 @@
     "disabled: boolean (default: false)",
     "required: boolean (default: false)",
     "size: sm|md|lg (default: md)",
+    "variant: outline",
     "label: string",
     "helperText: string",
     "description: string",
@@ -76,10 +77,9 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual variant. 'default' is the inline checkbox, 'card' renders as a full-width clickable card with the checkbox tucked inside.",
-      "default": "default",
+      "description": "Chrome. Omit for the inline checkbox beside its label; 'outline' renders a full-width bordered surface with the checkbox tucked inside.",
       "required": false,
-      "values": ["default", "card"]
+      "values": ["outline"]
     },
     "label": {
       "type": "string",
@@ -139,63 +139,63 @@
   },
   "usage": {
     "when": [
-      "Form fields requiring explicit submission",
-      "Multi-select from a list of options",
-      "Terms and conditions acceptance",
-      "Filter or preference checklists"
+      "Choices that apply only once the form is submitted",
+      "Picking several items from a list",
+      "Accepting terms",
+      "Filter and preference lists"
     ],
     "whenNot": [
-      "Immediate effect settings (use Switch)",
-      "Single selection from options (use RadioGroup)",
-      "Selecting from many options (use Select)"
+      "Settings that apply instantly (use Switch)",
+      "One choice from a few (use RadioGroup)",
+      "Many options (use Select)"
     ],
     "guidelines": [
-      "Always include a visible label",
-      "Use helperText for additional context when needed",
-      "Group related checkboxes visually",
-      "Use indeterminate state for parent/child relationships"
+      "Always show a label",
+      "Add helperText when the consequence is not obvious",
+      "Keep related boxes together",
+      "Use indeterminate for a parent whose children are partly checked"
     ],
     "accessibility": [
-      "Proper label association",
-      "Keyboard accessible (Space to toggle)",
-      "Visible focus indicator",
-      "Indeterminate state properly announced"
+      "Label is tied to the box",
+      "Space toggles it",
+      "Focus ring stays visible",
+      "Indeterminate is announced as mixed"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic checkbox with label",
+      "description": "One box, one label, off to start.",
       "code": "<StatefulCheckbox label=\"Accept terms and conditions\" />"
     },
     {
       "name": "With Helper Text",
-      "description": "Checkbox with helper text",
+      "description": "Second line spells out what opting in does.",
       "code": "<StatefulCheckbox\n  label=\"Email notifications\"\n  helperText=\"Receive email updates about your account activity\"\n/>"
     },
     {
       "name": "Checked",
-      "description": "Pre-checked checkbox",
+      "description": "Starts on.",
       "code": "<StatefulCheckbox defaultChecked label=\"Subscribe to newsletter\" />"
     },
     {
       "name": "Indeterminate",
-      "description": "Partial selection state",
+      "description": "A dash on the parent means only some children are on.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox indeterminate label=\"Select all\" />\n  <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>\n    <StatefulCheckbox defaultChecked label=\"Option 1\" />\n    <StatefulCheckbox label=\"Option 2\" />\n    <StatefulCheckbox defaultChecked label=\"Option 3\" />\n  </div>\n</div>"
     },
     {
       "name": "Sizes",
-      "description": "Available size options",
+      "description": "Three box sizes: sm, md, lg.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulCheckbox size=\"sm\" label=\"Small checkbox\" />\n  <StatefulCheckbox size=\"md\" label=\"Medium checkbox\" />\n  <StatefulCheckbox size=\"lg\" label=\"Large checkbox\" />\n</div>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive states",
+      "description": "Locked in both positions, on and off.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox disabled label=\"Disabled unchecked\" />\n  <Checkbox disabled checked label=\"Disabled checked\" />\n</div>"
     },
     {
       "name": "Custom Styling Targets",
-      "description": "Use explicit class targets for control vs content styling",
+      "description": "controlClassName styles the box, contentClassName the text.",
       "code": "<Checkbox\n  label=\"Styled checkbox\"\n  helperText=\"Control and content wrappers can be targeted independently\"\n  controlClassName=\"demo-checkbox-control\"\n  contentClassName=\"demo-checkbox-content\"\n/>"
     }
   ],
@@ -217,6 +217,7 @@
       "onCheckedChange: (checked) => void - change handler",
       "onChange: (checked) => void - alias for onCheckedChange",
       "indeterminate: boolean - partial selection state",
+      "variant: outline - full-width bordered surface; omit for the inline control",
       "label: string - checkbox label",
       "helperText: string - helper text (preferred)",
       "description: string - deprecated alias for helperText",

package/src/components/Checkbox/Checkbox.module.scss

@@ -21,8 +21,7 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
   }
 }
 
@@ -38,46 +37,45 @@
   flex-shrink: 0;
   box-sizing: border-box;
   margin-block-start: var(--_fui-boolean-mark-offset, 0);
-  background-color: var(--fui-field-bg, $fui-bg-elevated);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-field-border, $fui-border-strong);
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
   border-radius: var(--fui-checkbox-radius, var(--fui-radius-sm, #{$fui-radius-sm}));
   cursor: inherit;
+  @include high-contrast-outline;
 
   &:hover:not([data-disabled]) {
-    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
+    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus-visible {
+    @include field.focus-state;
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--fui-button-primary-base, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border,
-      var(--fui-button-primary-base, #{$fui-color-accent})
-    );
-    box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
+    background-color: var(--fui-control-checked-bg, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
+    box-shadow: inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
+      color-mix(in srgb, var(--fui-control-checked-color, #{$fui-color-on-accent}) 24%, transparent);
   }
 
   &[data-checked]:hover:not([data-disabled]),
   &[data-indeterminate]:hover:not([data-disabled]) {
-    background-color: var(--fui-button-primary-hover, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border-hover,
-      var(--fui-button-primary-hover, #{$fui-color-accent})
-    );
+    background-color: var(--fui-control-checked-bg-hover, $fui-color-accent-hover);
+    border-color: var(--fui-control-checked-border-hover, $fui-color-accent-hover);
   }
 
   &[data-invalid] {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    border-color: var(--fui-color-danger, $fui-color-danger);
   }
 
   &[data-invalid][data-checked],
   &[data-invalid][data-indeterminate] {
     background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    border-color: var(--fui-color-danger, $fui-color-danger);
     box-shadow: inset 0 0 0 1px
       color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 35%, transparent);
   }
-
 }
 
 // Size variants
@@ -99,24 +97,40 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--fui-button-primary-color, #fff);
+  color: var(--fui-control-checked-color, $fui-color-on-accent);
 
   svg {
     width: var(--fui-icon-xs, $fui-icon-xs);
     height: var(--fui-icon-xs, $fui-icon-xs);
   }
 
-  // Animation
+  // Animation: the mark draws itself in (stroke-dashoffset over the
+  // pathLength-normalized glyphs) instead of popping. Opacity keeps the
+  // un-draw exit from lingering.
   opacity: 0;
-  transform: scale(0.8);
-  transition:
-    opacity var(--fui-transition-fast, $fui-transition-fast),
-    transform var(--fui-transition-fast, $fui-transition-fast);
+  transition: opacity var(--fui-transition-fast, $fui-transition-fast);
+
+  svg :is(polyline, line) {
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+    transition: stroke-dashoffset var(--fui-transition-normal, $fui-transition-normal);
+  }
 
   [data-checked] > &,
   [data-indeterminate] > & {
     opacity: 1;
-    transform: scale(1);
+
+    svg :is(polyline, line) {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    svg :is(polyline, line) {
+      transition: none;
+    }
   }
 
   [data-invalid][data-checked] > &,
@@ -152,11 +166,11 @@
 }
 
 // ============================================
-// Card variant: full-width clickable surface that mirrors the RadioGroup
-// card variant. Selection state is driven by `:has([data-checked])` so the
+// Outline variant: full-width bordered surface that mirrors the RadioGroup
+// outline variant. Selection state is driven by `:has([data-checked])` so the
 // styling reacts to the same control state the rest of the component uses.
 // ============================================
-.wrapperCard {
+.wrapperOutline {
   width: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-default, $fui-border-default);
@@ -173,23 +187,23 @@
 
   &:focus-within:not([data-disabled]) {
     @include focus-ring;
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
   }
 
   &:has([data-checked]),
   &:has([data-indeterminate]) {
     background: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 13%,
+      var(--fui-control-checked-bg, #{$fui-color-accent}) 13%,
       transparent
     );
     border-color: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 62%,
+      var(--fui-control-checked-border, #{$fui-color-accent}) 62%,
       transparent
     );
     box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 28%, transparent);
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 28%, transparent);
   }
 
   &[data-size="sm"] {
@@ -205,27 +219,6 @@
   }
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .checkbox {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-
-    &[data-checked],
-    &[data-indeterminate] {
-      border-color: var(--fui-button-primary-base, $fui-color-accent);
-    }
-
-    &[data-invalid] {
-      border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    }
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Checkbox/index.tsx

@@ -38,13 +38,11 @@ export interface CheckboxProps extends Omit<
    * @default "md" */
   size?: "sm" | "md" | "lg";
   /**
-   * Visual variant.
-   * - `default`: inline checkbox next to a label (form-control style).
-   * - `card`: full-width clickable card with the checkbox tucked inside.
-   *   Useful for multi-select question lists, settings toggles, etc.
-   * @default "default"
+   * Chrome. Omit it for the inline checkbox next to a label (form-control
+   * style); `outline` renders a full-width bordered surface with the checkbox
+   * tucked inside — multi-select question lists, settings toggles, plan pickers.
    */
-  variant?: "default" | "card";
+  variant?: "outline";
   /** Label text */
   label?: string;
   /** Helper text shown below the label */
@@ -93,7 +91,9 @@ function CheckIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <polyline points="20 6 9 17 4 12" />
+      {/* Point order = draw order: the mark draws short arm first, then the
+          long stroke. pathLength normalizes the dash budget for the CSS draw. */}
+      <polyline points="4 12 9 17 20 6" pathLength={24} />
     </svg>
   );
 }
@@ -110,7 +110,7 @@ function MinusIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <line x1="5" y1="12" x2="19" y2="12" />
+      <line x1="5" y1="12" x2="19" y2="12" pathLength={24} />
     </svg>
   );
 }
@@ -130,7 +130,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
     readOnly = false,
     required = false,
     size: sizeProp,
-    variant = "default",
+    variant,
     label,
     helperText,
     description,
@@ -167,7 +167,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
     .filter(Boolean)
     .join(" ");
 
-  const wrapperClasses = [styles.wrapper, variant === "card" && styles.wrapperCard, className]
+  const wrapperClasses = [styles.wrapper, variant === "outline" && styles.wrapperOutline, className]
     .filter(Boolean)
     .join(" ");
   const handleCheckedChange = onChange ?? onCheckedChange;