@usefragments/ui 1.5.4 → 1.7.0

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -1,21 +1,22 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/boolean-range" as boolean;
+@use "../../recipes/field" as field;
+@use "../../recipes/target" as target;
 
 // Container wrapper
 .wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fui-space-1, $fui-space-1);
+  @include field.wrapper;
 }
 
 .groupLabel {
-  @include label-text;
+  @include field.label;
 }
 
 // Radio group
 .group {
   display: flex;
-  gap: var(--fui-space-3, $fui-space-3);
+  gap: var(--fui-raw-space-12, 12px);
 }
 
 .vertical {
@@ -29,14 +30,18 @@
 
 // Individual item wrapper
 .itemWrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
   cursor: pointer;
-  font-family: var(--fui-font-sans, $fui-font-sans);
 
-  &[data-has-description] {
-    align-items: flex-start;
+  &[data-size="sm"] {
+    @include boolean.row("sm");
+  }
+
+  &[data-size="md"] {
+    @include boolean.row("md");
+  }
+
+  &[data-size="lg"] {
+    @include boolean.row("lg");
   }
 
   &[data-disabled] {
@@ -48,18 +53,17 @@
 // The radio circle
 .radio {
   @include interactive-base;
+  @include boolean.mark("md");
+  @include target.hit-area("micro");
 
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-sizing: border-box;
-  width: var(--fui-icon-sm, $fui-icon-sm);
-  height: var(--fui-icon-sm, $fui-icon-sm);
-  margin-top: 0;
+  margin-block-start: var(--_fui-boolean-mark-offset, 0);
   background-color: var(--fui-field-bg, $fui-bg-elevated);
-  border: 1px solid var(--fui-field-border, $fui-border-strong);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-field-border, $fui-border-strong);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: inherit;
 
@@ -70,47 +74,36 @@
   &[data-checked] {
     background-color: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 8%,
+      var(--fui-control-checked-bg, #{$fui-color-accent}) 8%,
       var(--fui-field-bg, #{$fui-bg-elevated})
     );
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
-    box-shadow: inset 0 0 0 1px
-      color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 55%, transparent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
+    box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 55%, transparent);
   }
 
   &[data-checked]:hover:not([data-disabled]) {
     background-color: color-mix(
       in srgb,
-      var(--fui-button-primary-hover, #{$fui-color-accent}) 12%,
+      var(--fui-control-checked-bg-hover, #{$fui-color-accent-hover}) 12%,
       var(--fui-field-bg, #{$fui-bg-elevated})
     );
-    border-color: var(--fui-button-primary-hover, $fui-color-accent);
+    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);
   }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: var(--fui-target-size-min, $fui-target-size-min);
-    height: var(--fui-target-size-min, $fui-target-size-min);
-    transform: translate(-50%, -50%);
-  }
 }
 
 // Size variants
 .radioSm {
-  width: var(--fui-icon-xs, $fui-icon-xs);
-  height: var(--fui-icon-xs, $fui-icon-xs);
+  @include boolean.mark("sm");
 }
 
 .radioLg {
-  width: 1.25rem;
-  height: 1.25rem;
+  @include boolean.mark("lg");
+  @include target.hit-area("compact");
 }
 
 // The indicator dot - use absolute positioning for perfect centering
@@ -118,9 +111,9 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: var(--fui-button-primary-base, $fui-color-accent);
+  width: var(--fui-raw-space-8, 8px);
+  height: var(--fui-raw-space-8, 8px);
+  background-color: var(--fui-control-checked-bg, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
   // Animation - use translate for centering combined with scale
@@ -137,48 +130,33 @@
 }
 
 .radioSm .indicator {
-  width: 0.375rem;
-  height: 0.375rem;
+  width: var(--fui-raw-space-6, 6px);
+  height: var(--fui-raw-space-6, 6px);
 }
 
 .radioLg .indicator {
-  width: 0.625rem;
-  height: 0.625rem;
+  width: var(--fui-raw-space-10, 10px);
+  height: var(--fui-raw-space-10, 10px);
 }
 
 // Label content
 .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fui-space-0-5, $fui-space-0-5);
+  min-inline-size: 0;
 }
 
 .label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
   user-select: none;
 }
 
-.labelSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.labelLg {
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
-}
-
 .helper {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  display: block;
+  @include field.helper;
 }
 
 // Error message
 .error {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+  @include field.error;
 }
 
 // ============================================
@@ -192,18 +170,9 @@
 // as a deliberate state change rather than a small shift between two grey
 // surfaces. Mirrors the pattern used by the Checkbox card variant.
 .itemWrapperCard {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-3, $fui-space-3);
   width: 100%;
-  height: var(
-    --fui-input-height,
-    $fui-input-height
-  ); // matches Input size="md" so radio cards align with form fields
-  box-sizing: border-box;
-  padding: 0 var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  border: 1px solid var(--fui-border-default, $fui-border-default);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-default, $fui-border-default);
   background: transparent;
   transition:
     background var(--fui-transition-fast, $fui-transition-fast),
@@ -216,30 +185,40 @@
   }
 
   &:focus-within:not([data-disabled]) {
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
     @include focus-ring;
   }
 
   &:has([data-checked]) {
     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);
+    box-shadow: 0 0 0 var(--fui-stroke-hairline, 1px)
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 28%, transparent);
   }
 
-  // Inline with the input field convention rather than the lifted card
-  // headline weight — the label sits at base-size, tight against the radio.
-  .label {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  &[data-size="sm"] {
+    @include boolean.card("sm");
   }
+
+  &[data-size="md"] {
+    @include boolean.card("md");
+  }
+
+  &[data-size="lg"] {
+    @include boolean.card("lg");
+  }
+}
+
+.group[data-invalid] .radio {
+  border-color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
 // ============================================
@@ -248,11 +227,12 @@
 
 @media (prefers-contrast: more) {
   .radio {
-    border-width: 2px;
     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] {
-      border-color: var(--fui-button-primary-base, $fui-color-accent);
+      border-color: var(--fui-control-checked-border, $fui-color-accent);
     }
 
     &[data-invalid] {

package/src/components/RadioGroup/index.tsx

@@ -132,14 +132,6 @@ function RadioItem({
     .filter(Boolean)
     .join(" ");
 
-  const labelClasses = [
-    styles.label,
-    size === "sm" && styles.labelSm,
-    size === "lg" && styles.labelLg,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
   const wrapperClasses = [
     styles.itemWrapper,
     variant === "card" && styles.itemWrapperCard,
@@ -157,6 +149,7 @@ function RadioItem({
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
+        data-size={size}
         className={[radioClasses, className].filter(Boolean).join(" ")}
       >
         <BaseRadio.Indicator className={styles.indicator} />
@@ -169,6 +162,7 @@ function RadioItem({
       className={wrapperClasses}
       data-disabled={disabled || undefined}
       data-has-description={resolvedHelperText ? true : undefined}
+      data-size={size}
     >
       <BaseRadio.Root
         value={value}
@@ -176,12 +170,13 @@ function RadioItem({
         aria-label={ariaLabel}
         aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
         aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
+        data-size={size}
         className={radioClasses}
       >
         <BaseRadio.Indicator className={styles.indicator} />
       </BaseRadio.Root>
       <div className={[styles.content, contentClassName].filter(Boolean).join(" ")}>
-        <span id={labelId} className={labelClasses}>
+        <span id={labelId} className={styles.label}>
           {label}
         </span>
         {resolvedHelperText && (
@@ -248,6 +243,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
           ref={ref}
           {...htmlProps}
           className={[styles.wrapper, wrapperClassName].filter(Boolean).join(" ")}
+          data-size={size}
         >
           {label && (
             <span id={labelId} className={styles.groupLabel}>
@@ -268,6 +264,8 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
             aria-label={ariaLabel}
             aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
             aria-describedby={mergeAriaIds(ariaDescribedBy, errorId, helperId)}
+            data-size={size}
+            data-invalid={hasError || undefined}
             className={groupClasses}
           >
             {children}

package/src/components/ScrollArea/ScrollArea.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ScrollArea",
-  "description": "A styled scrollable container with thin scrollbars and optional fade indicators.",
+  "description": "Scrolls overflowing content with a slim scrollbar and optional edge fades.",
   "category": "layout",
-  "tags": [
-    "scroll",
-    "overflow",
-    "scrollbar",
-    "container",
-    "layout"
-  ],
+  "tags": ["scroll", "overflow", "scrollbar", "container", "layout"],
   "status": "stable",
   "sourcePath": "src/components/ScrollArea/index.tsx",
   "exportName": "ScrollArea",
@@ -31,22 +25,14 @@
       "description": "Scroll direction",
       "default": "vertical",
       "required": false,
-      "values": [
-        "horizontal",
-        "vertical",
-        "both"
-      ]
+      "values": ["horizontal", "vertical", "both"]
     },
     "scrollbarVisibility": {
       "type": "enum",
       "description": "When to show the scrollbar",
       "default": "auto",
       "required": false,
-      "values": [
-        "auto",
-        "always",
-        "hover"
-      ]
+      "values": ["auto", "always", "hover"]
     },
     "showFades": {
       "type": "boolean",
@@ -62,23 +48,22 @@
   },
   "usage": {
     "when": [
-      "Content overflows its container and needs scrolling",
-      "Horizontal tab bars or chip lists that may overflow",
-      "Scrollable panels, sidebars, or dropdown content",
-      "Any area where native scrollbars look too heavy"
+      "Content that overflows a fixed-size container",
+      "Tab bars or chip rows that may run past the edge",
+      "Scrollable panels, sidebars, and menu content"
     ],
     "whenNot": [
-      "Page-level scrolling (use native body scroll)",
-      "Very short content that never overflows"
+      "Whole-page scrolling (use the native body scroll)",
+      "Content that can never overflow"
     ],
     "guidelines": [
-      "Use `orientation` to constrain scroll direction",
-      "Use `showFades` to hint at hidden content beyond the viewport",
-      "The `hover` scrollbar visibility keeps the UI clean until the user interacts",
-      "Combine with `orientation=\"horizontal\"` for tab bars and chip rows"
+      "orientation constrains which axis can scroll",
+      "showFades hints at hidden content when nothing else does",
+      "scrollbarVisibility=\"hover\" hides the thumb without shifting layout",
+      "The container needs a fixed height or the area cannot scroll"
     ],
     "accessibility": [
-      "Preserves native scroll behavior and keyboard support",
+      "Preserves native scroll behavior and keyboard support across both axes",
       "Scrollbar is visible on focus for keyboard users",
       "Respects prefers-reduced-motion for fade transitions"
     ]
@@ -86,23 +71,23 @@
   "examples": [
     {
       "name": "Vertical",
-      "description": "Vertical scrollable area with thin scrollbar.",
-      "code": "<ScrollArea style={{ height: '200px' }}>\n  {/* Long content */}\n</ScrollArea>"
+      "description": "Scrolls down with a thin, always-visible thumb.",
+      "code": "import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "Horizontal",
-      "description": "Horizontal scrollable area for overflowing inline content like tabs or chips.",
-      "code": "<ScrollArea orientation=\"horizontal\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    {tags.map(tag => <Chip key={tag}>{tag}</Chip>)}\n  </div>\n</ScrollArea>"
+      "description": "Keeps an overflowing row of chips on one line.",
+      "code": "import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\">\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "With Fades",
-      "description": "Fade indicators show when content is scrollable in either direction.",
-      "code": "<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"
+      "description": "Edge fades signal there is more content each way.",
+      "code": "import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\" showFades>\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "Hover Scrollbar",
-      "description": "Scrollbar is hidden until the user hovers over the scroll area.",
-      "code": "<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"
+      "description": "Thumb stays invisible until hover or keyboard focus.",
+      "code": "import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"
     }
   ],
   "contract": {
@@ -114,9 +99,7 @@
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ],
+    "subComponents": ["Root"],
     "commonPatterns": [
       "<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>",
       "<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"