@usefragments/ui 1.7.0 → 2.0.1

package/src/components/Prompt/Prompt.contract.json

@@ -20,8 +20,8 @@
     "maxRows: number (default: 8)",
     "autoResize: boolean (default: true)",
     "submitOnEnter: boolean (default: true)",
-    "variant: default|fixed|sticky (default: default)",
-    "appearance: panel|seamless (default: panel)",
+    "placement: inline|fixed|sticky (default: inline)",
+    "variant: outline|ghost (default: outline)",
     "onFiles: function",
     "accept: string"
   ],
@@ -94,12 +94,12 @@
       "default": "true",
       "required": false
     },
-    "variant": {
+    "placement": {
       "type": "enum",
-      "description": "Visual/positioning variant",
-      "default": "default",
+      "description": "Where the card sits: inline in the flow, fixed to the viewport bottom, or sticky to the content area (offset by --fui-prompt-inset-left)",
+      "default": "inline",
       "required": false,
-      "values": ["default", "fixed", "sticky"]
+      "values": ["inline", "fixed", "sticky"]
     },
     "onFiles": {
       "type": "function",
@@ -111,12 +111,12 @@
       "description": "accept filter for the attach button's picker, e.g. \"image/*\"",
       "required": false
     },
-    "appearance": {
+    "variant": {
       "type": "enum",
-      "description": "How the card is divided up. \"panel\" keeps the toolbar as a filled footer under a rule; \"seamless\" makes the whole card one writing surface with the controls floating on it.",
-      "default": "panel",
+      "description": "Card chrome. \"outline\" keeps the toolbar as a filled footer under a rule; \"ghost\" makes the whole card one writing surface with the controls floating on it.",
+      "default": "outline",
       "required": false,
-      "values": ["panel", "seamless"]
+      "values": ["outline", "ghost"]
     }
   },
   "usage": {
@@ -134,7 +134,7 @@
       "Always pass an onSubmit handler",
       "Set loading while the request is in flight to block duplicate sends",
       "Prompt.Textarea forwards native textarea props and composes your own handlers",
-      "appearance=\"seamless\" floats the controls on the writing surface instead of a footer",
+      "variant=\"ghost\" floats the controls on the writing surface instead of a footer",
       "Seamless secondary controls stay transparent; only Prompt.Submit keeps a filled shape",
       "Prompt.Submit uses a neutral inverse surface, never semantic brand color",
       "Prompt.ModeButton toggles a setting; Prompt.Select picks one from a list",
@@ -166,7 +166,7 @@
     {
       "name": "Agent Composer",
       "description": "Controls float on the writing surface instead of a footer.",
-      "code": "<Prompt\n  appearance=\"seamless\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
+      "code": "<Prompt\n  variant=\"ghost\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
     {
       "name": "With Attachments",

package/src/components/Prompt/Prompt.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/target" as target;
@@ -29,7 +30,7 @@
 
   // Gradient layer (behind everything)
   &::before {
-    inset: calc(-1 * var(--fui-stroke-hairline, 1px));
+    inset: calc(-1 * var(--fui-stroke-hairline, #{$fui-stroke-hairline}));
     z-index: 0;
     background: conic-gradient(
       from var(--beam-angle, 0deg) at 50% 50%,
@@ -45,13 +46,13 @@
     // Ambient loop: twice the shimmer beat, kept on the token scale.
     animation: beam-rotate calc(var(--fui-duration-shimmer, #{$fui-duration-shimmer}) * 2) linear
       infinite;
-    opacity: 0.6;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
     transition: opacity var(--fui-transition-normal, $fui-transition-normal);
   }
 
   // Mask layer — covers the interior, leaving only the 1px border visible
   &::after {
-    inset: var(--fui-stroke-hairline, 1px);
+    inset: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     z-index: 1;
     background: var(--fui-bg-elevated, $fui-bg-elevated);
   }
@@ -67,12 +68,13 @@
   }
 
   &[data-disabled] {
-    opacity: 0.5;
+    @include disabled-state;
+
     pointer-events: none;
 
     &::before {
       animation-play-state: paused;
-      opacity: 0.2;
+      opacity: calc(var(--fui-opacity-disabled, #{$fui-opacity-disabled}) * var(--fui-opacity-disabled, #{$fui-opacity-disabled}));
     }
   }
 }
@@ -92,7 +94,7 @@
   inherits: false;
 }
 
-// Fixed variant - for viewport-fixed prompts (centered to page)
+// Fixed placement - for viewport-fixed prompts (centered to page)
 .fixed {
   position: fixed;
   bottom: var(--fui-space-4, $fui-space-4);
@@ -104,7 +106,7 @@
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 }
 
-// Sticky variant - for content-area fixed prompts (accounts for sidebar)
+// Sticky placement - for content-area fixed prompts (accounts for sidebar)
 // Use --fui-prompt-inset-left CSS variable to offset from sidebar
 .sticky {
   position: fixed;
@@ -124,7 +126,7 @@
 }
 
 // ============================================
-// Seamless appearance
+// Ghost variant
 // ============================================
 
 // One continuous writing surface instead of a field with a footer.
@@ -135,12 +137,13 @@
 // resting on it — which is what makes the text you are writing the only thing
 // with any weight. Each selector below is one class deeper than the rule it
 // replaces, so this wins wherever the stylesheet happens to land.
+// (`variant="ghost"`; the default `outline` card is the rules above.)
 //
 // One gutter runs down the card. `--_gutter` is the distance from the card's
 // edge to the ink of everything in it, and every child is padded from it
 // rather than given a number of its own, so the placeholder, the first glyph
 // in the toolbar and any attachment chip all sit on the same line.
-.seamless {
+.ghost {
   --_gutter: var(--fui-space-3, #{$fui-space-3});
   // Every band is inset by its own children's padding, so what lands on the
   // gutter is the ink — the first character of the placeholder, the first glyph
@@ -154,7 +157,7 @@
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
 
   // The beam draws a 1px animated border by painting a gradient and masking
-  // out everything but the edge. Seamless has no edge to draw, so both layers
+  // out everything but the edge. Ghost has no edge to draw, so both layers
   // go and the card paints its own surface instead of borrowing the mask's.
   &::before,
   &::after {
@@ -170,7 +173,7 @@
   .toolbar {
     background-color: transparent;
     border-top: none;
-    padding: 0 calc(var(--_gutter) - var(--_control-padding)) var(--_gutter);
+    padding: var(--fui-raw-space-0, #{measurements.raw-space(0)}) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_control-padding, var(--fui-space-2, #{$fui-space-2}))) var(--_gutter, var(--fui-space-3, #{$fui-space-3}));
   }
 
   // The message is the content of the card, not a field in it. The bottom is
@@ -178,11 +181,11 @@
   // footer under it, and the top is tight for the same reason when a scope
   // band sits above.
   .textarea {
-    padding: var(--_gutter) var(--_gutter) var(--fui-space-1, $fui-space-1);
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) var(--_gutter, var(--fui-space-3, #{$fui-space-3})) var(--fui-space-1, $fui-space-1);
   }
 
   .attachments {
-    padding: var(--_gutter) calc(var(--_gutter) - var(--_chip-padding)) 0;
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_chip-padding, var(--fui-space-1, #{$fui-space-1}))) var(--fui-raw-space-0, #{measurements.raw-space(0)});
     gap: var(--fui-space-1, $fui-space-1);
   }
 
@@ -193,22 +196,22 @@
     padding-top: var(--fui-space-1, $fui-space-1);
   }
 
-  // In a panel the tabs are a strip the card is docked to, so they are centred
-  // and bordered like a folder tab. Seamless has no card edge for them to dock
+  // In an outline card the tabs are a strip the card is docked to, so they are centred
+  // and bordered like a folder tab. Ghost has no card edge for them to dock
   // against, so they become the top band of the one surface: left-aligned on
   // the gutter with the rest of it, and stripped of the chrome that only made
   // sense as an edge.
   .tabs {
-    margin-bottom: 0;
+    margin-bottom: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     justify-content: flex-start;
-    padding: var(--_gutter) calc(var(--_gutter) - var(--_control-padding)) 0;
+    padding: var(--_gutter, var(--fui-space-3, #{$fui-space-3})) calc(var(--_gutter, var(--fui-space-3, #{$fui-space-3})) - var(--_control-padding, var(--fui-space-2, #{$fui-space-2}))) var(--fui-raw-space-0, #{measurements.raw-space(0)});
   }
 
   .tabsInner {
     background-color: transparent;
     border: none;
-    border-radius: 0;
-    padding: 0;
+    border-radius: var(--fui-radius-none, #{$fui-radius-none});
+    padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     gap: var(--fui-space-1, $fui-space-1);
   }
 
@@ -224,7 +227,7 @@
   // the placeholder above it starts, and costs only a wider hover.
   .attach {
     width: auto;
-    padding-inline: var(--_control-padding);
+    padding-inline: var(--_control-padding, var(--fui-space-2, #{$fui-space-2}));
 
     svg {
       width: var(--fui-icon-md, $fui-icon-md);
@@ -232,7 +235,7 @@
     }
   }
 
-  // Labels and glyphs share the body scale inside a seamless composer. The
+  // Labels and glyphs share the body scale inside a ghost composer. The
   // trigger still truncates at its cap, but no longer looks like caption text
   // floating between larger attach and submit affordances.
   .select,
@@ -289,7 +292,7 @@
   // padding. Give the filled Submit shape the same inset at the trailing edge
   // so the two visible affordances balance across the toolbar.
   .submit {
-    margin-inline-end: var(--_control-padding);
+    margin-inline-end: var(--_control-padding, var(--fui-space-2, #{$fui-space-2}));
   }
 }
 
@@ -344,9 +347,10 @@
   display: inline-flex;
   gap: var(--fui-space-px, $fui-space-px);
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) 0 0;
-  padding: var(--fui-space-0-75, $fui-space-0-75) var(--fui-space-0-75, $fui-space-0-75) 0;
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-space-0-75, $fui-space-0-75) var(--fui-space-0-75, $fui-space-0-75) var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-bottom: none;
 }
 
@@ -355,7 +359,8 @@
   @include action.base;
   @include action.size("sm");
 
-  border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0 0;
+  border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -372,8 +377,7 @@
 }
 
 .tabButtonActive {
-  background-color: var(--fui-control-selected-bg, $fui-bg-active);
-  color: var(--fui-text-primary, $fui-text-primary);
+  @include segmented-selection;
 }
 
 // ============================================
@@ -387,7 +391,7 @@
   gap: var(--fui-space-2, $fui-space-2);
   padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // ============================================
@@ -461,8 +465,7 @@
 }
 
 .modeButtonActive {
-  color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-control-selected-bg, $fui-bg-active);
+  @include segmented-selection;
 }
 
 // ============================================
@@ -494,11 +497,6 @@
     background-color: var(--fui-bg-active, $fui-bg-active);
   }
 
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   svg {
     @include action.glyph("sm");
   }
@@ -512,8 +510,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--fui-space-1, $fui-space-1);
-  margin: 0;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3) 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3) var(--fui-raw-space-0, #{measurements.raw-space(0)});
   list-style: none;
 }
 
@@ -528,14 +526,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
-  height: var(--_chip-height);
+  height: var(--_chip-height, #{action.track("sm")});
   max-width: layout.measure("composer-item");
   padding-inline: var(--fui-space-1, $fui-space-1);
   // Outlined rather than filled. A chip sits on whatever surface the prompt is
   // using, and on an elevated card the raised fill is the same value as the
   // card itself — so the object would disappear exactly where it is most
   // likely to be used. An edge reads on any of them.
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
@@ -547,8 +545,8 @@
 // chip's height less the padding, which keeps it square without a second
 // number to keep in step.
 .attachmentThumb {
-  width: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
-  height: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
+  width: calc(var(--_chip-height, #{action.track("sm")}) - var(--fui-space-1, #{$fui-space-1}));
+  height: calc(var(--_chip-height, #{action.track("sm")}) - var(--fui-space-1, #{$fui-space-1}));
   flex-shrink: 0;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   object-fit: cover;
@@ -645,11 +643,6 @@
     background-color: var(--fui-text-tertiary, #{$fui-text-tertiary});
   }
 
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   svg {
     @include action.glyph("md");
   }

package/src/components/Prompt/index.tsx

@@ -9,9 +9,9 @@ import { Select, type SelectOption, type SelectValue } from '../Select';
 // Types
 // ============================================
 
-export type PromptVariant = 'default' | 'fixed' | 'sticky';
+export type PromptPlacement = 'inline' | 'fixed' | 'sticky';
 
-export type PromptAppearance = 'panel' | 'seamless';
+export type PromptVariant = 'outline' | 'ghost';
 
 export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'defaultValue'> {
   children: React.ReactNode;
@@ -43,13 +43,15 @@ export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onFiles?: (files: File[]) => void;
   /** `accept` for the attach button's picker, e.g. `"image/*"`. */
   accept?: string;
-  /** Visual variant - "fixed" for bottom-fixed elevated prompt */
+  /** Where the card sits: `inline` in the flow, `fixed` to the viewport bottom,
+   * `sticky` to the content area (offset by `--fui-prompt-inset-left`).
+   * @default "inline" */
+  placement?: PromptPlacement;
+  /** Card chrome. `outline` keeps the toolbar as a filled footer under a rule;
+   * `ghost` makes the whole card one writing surface with the controls floating
+   * on it — the shape most agent composers use.
+   * @default "outline" */
   variant?: PromptVariant;
-  /** How the card is divided up. `panel` keeps the toolbar as a filled footer
-   * under a rule; `seamless` makes the whole card one writing surface with the
-   * controls floating on it — the shape most agent composers use.
-   * @default "panel" */
-  appearance?: PromptAppearance;
 }
 
 export interface PromptTextareaProps extends Omit<
@@ -307,8 +309,8 @@ function PromptRoot({
   maxRows = 8,
   autoResize = true,
   submitOnEnter = true,
-  variant = 'default',
-  appearance = 'panel',
+  placement = 'inline',
+  variant = 'outline',
   onFiles,
   accept,
   className,
@@ -386,9 +388,9 @@ function PromptRoot({
 
   const classes = [
     styles.prompt,
-    variant === 'fixed' && styles.fixed,
-    variant === 'sticky' && styles.sticky,
-    appearance === 'seamless' && styles.seamless,
+    placement === 'fixed' && styles.fixed,
+    placement === 'sticky' && styles.sticky,
+    variant === 'ghost' && styles.ghost,
     dragging && styles.dragging,
     disabled && styles.disabled,
     loading && styles.loading,
@@ -403,8 +405,8 @@ function PromptRoot({
         className={classes}
         data-disabled={disabled || undefined}
         data-loading={loading || undefined}
+        data-placement={placement}
         data-variant={variant}
-        data-appearance={appearance}
         data-dragging={dragging || undefined}
       >
         {children}
@@ -780,7 +782,7 @@ function PromptSubmit({
       {loading ? (
         <Loading
           size="sm"
-          variant="spinner"
+          kind="spinner"
           color="current"
           label="Submitting"
           className={styles.submitSpinner}

package/src/components/RadioGroup/RadioGroup.contract.json

@@ -19,6 +19,7 @@
     "helperText: string",
     "error: union",
     "size: sm|md|lg (default: md)",
+    "variant: outline",
     "wrapperClassName: string",
     "groupClassName: string",
     "groupId: string",
@@ -87,10 +88,9 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual variant. 'default' is the inline radio, 'card' renders each item as a full-width clickable card with the radio tucked inside.",
-      "default": "default",
+      "description": "Chrome. Omit for the inline radio beside its label; 'outline' renders each item as a full-width bordered surface with the radio tucked inside.",
       "required": false,
-      "values": ["default", "card"]
+      "values": ["outline"]
     },
     "wrapperClassName": {
       "type": "string",
@@ -198,13 +198,15 @@
       "onChange: (value: string) => void - alias for onValueChange",
       "orientation: horizontal|vertical (default: vertical)",
       "size: sm|md|lg (default: md)",
+      "variant: outline - each item a full-width bordered surface; omit for the inline control",
       "label: string - group label",
       "helperText: string - helper text below the group",
       "error: boolean | string - error styling and message",
       "disabled: boolean - disable all options",
       "wrapperClassName/groupClassName - explicit styling targets for wrapper and group",
       "groupId: string - ID forwarded to the inner radiogroup while id remains on the wrapper",
-      "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling"
+      "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling",
+      "RadioGroup.Item trailing: ReactNode - a short value (price, count) at the end of the row on the label's line; pairs with variant=outline for plan pickers"
     ],
     "a11yRules": ["A11Y_RADIO_GROUP", "A11Y_LABEL_REQUIRED", "A11Y_TARGET_SIZE_MIN"]
   },

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

@@ -45,9 +45,22 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
   }
+
+  // A trailing value takes a third column so the label and helper keep
+  // theirs; it sits on the label's line at the end of the row.
+  &[data-has-trailing] {
+    grid-template-columns:
+      var(--_fui-boolean-mark-size, #{boolean.mark-size("md")}) minmax(0, 1fr)
+      auto;
+  }
+}
+
+.trailing {
+  justify-self: end;
+  text-align: end;
+  white-space: nowrap;
 }
 
 // The radio circle
@@ -62,20 +75,25 @@
   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-radius-full, $fui-radius-full);
   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] {
     background-color: color-mix(
       in srgb,
       var(--fui-control-checked-bg, #{$fui-color-accent}) 8%,
-      var(--fui-field-bg, #{$fui-bg-elevated})
+      var(--fui-bg-primary, #{$fui-bg-primary})
     );
     border-color: var(--fui-control-checked-border, $fui-color-accent);
     box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
@@ -86,13 +104,17 @@
     background-color: color-mix(
       in srgb,
       var(--fui-control-checked-bg-hover, #{$fui-color-accent-hover}) 12%,
-      var(--fui-field-bg, #{$fui-bg-elevated})
+      var(--fui-bg-primary, #{$fui-bg-primary})
     );
     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);
+    @include field.invalid-state;
+
+    &:focus-visible {
+      @include field.invalid-focus-state;
+    }
   }
 }
 
@@ -160,16 +182,16 @@
 }
 
 // ============================================
-// Card variant: each item is a full-width clickable surface that signals
+// Outline variant: each item is a full-width bordered surface that signals
 // selection via background + border tint while keeping the inline radio
 // circle as the canonical control. The `:has([data-checked])` selector is
 // the source of truth for selected styling — no extra attribute plumbing
 // required from JS.
 // ============================================
-// Card variant uses a transparent base so the selected accent tint reads
-// as a deliberate state change rather than a small shift between two grey
-// surfaces. Mirrors the pattern used by the Checkbox card variant.
-.itemWrapperCard {
+// The outline variant uses a transparent base so the selected accent tint
+// reads as a deliberate state change rather than a small shift between two
+// grey surfaces. Mirrors the pattern used by the Checkbox outline variant.
+.itemWrapperOutline {
   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);
@@ -218,26 +240,10 @@
 }
 
 .group[data-invalid] .radio {
-  border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-}
-
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
+  @include field.invalid-state;
 
-@media (prefers-contrast: more) {
-  .radio {
-    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-control-checked-border, $fui-color-accent);
-    }
-
-    &[data-invalid] {
-      border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    }
+  &:focus-visible {
+    @include field.invalid-focus-state;
   }
 }