@usefragments/ui 1.5.3 → 1.6.0

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

@@ -1,5 +1,9 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 // ============================================
 // Prompt Root
@@ -16,7 +20,7 @@
   // Beam border — rotating conic gradient clipped to a 1px border
   &::before,
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
@@ -72,12 +76,16 @@
 }
 
 @keyframes beam-rotate {
-  from { --beam-angle: 0deg; }
-  to { --beam-angle: 360deg; }
+  from {
+    --beam-angle: 0deg;
+  }
+  to {
+    --beam-angle: 360deg;
+  }
 }
 
 @property --beam-angle {
-  syntax: '<angle>';
+  syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
 }
@@ -89,7 +97,7 @@
   left: 50%;
   transform: translateX(-50%);
   width: calc(100% - var(--fui-space-8, $fui-space-8));
-  max-width: 800px;
+  max-width: layout.measure("page-narrow");
   z-index: 100;
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 }
@@ -104,7 +112,7 @@
   margin-left: auto;
   margin-right: auto;
   width: calc(100% - var(--fui-prompt-inset-left, 0px) - var(--fui-space-8, $fui-space-8));
-  max-width: 800px;
+  max-width: layout.measure("page-narrow");
   z-index: 100;
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 
@@ -140,15 +148,6 @@
   --_control-padding: var(--fui-space-2, #{$fui-space-2});
   --_chip-padding: var(--fui-space-1, #{$fui-space-1});
 
-  // Composer controls are compact, but still need enough visual weight to read
-  // as one deliberate toolbar. The xs button token is the dense 32px control
-  // height in every density preset; scoping all three inputs to it keeps
-  // selects, attach, action and submit controls on one optical grid without a
-  // one-off dimension.
-  --fui-target-size-min: var(--fui-button-height-xs, #{$fui-button-height-xs});
-  --fui-button-height-sm: var(--fui-button-height-xs, #{$fui-button-height-xs});
-  --fui-input-height-sm: var(--fui-button-height-xs, #{$fui-button-height-xs});
-
   border-color: transparent;
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
 
@@ -284,19 +283,6 @@
     }
   }
 
-  // Round affordances track the scoped target size rather than the 2rem they
-  // are given for a form.
-  .submit,
-  .actionButton {
-    width: var(--fui-target-size-min);
-    height: var(--fui-target-size-min);
-
-    svg {
-      width: var(--fui-icon-md, $fui-icon-md);
-      height: var(--fui-icon-md, $fui-icon-md);
-    }
-  }
-
   // Attach's glyph reaches the leading ink gutter through its own control
   // padding. Give the filled Submit shape the same inset at the trailing edge
   // so the two visible affordances balance across the toolbar.
@@ -311,7 +297,7 @@
 
 .textarea {
   @include button-reset;
-  @include text-base;
+  @include typography.role("body-compact");
 
   display: block;
   width: 100%;
@@ -321,7 +307,6 @@
   border: none;
   resize: none;
   overflow-y: auto;
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -357,20 +342,16 @@
   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: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   border-bottom: none;
 }
 
 .tabButton {
   @include button-reset;
+  @include action.base;
+  @include action.size("sm");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0 0;
-  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-tertiary, $fui-text-tertiary);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -398,7 +379,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: 1px solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 }
 
 // ============================================
@@ -426,16 +407,12 @@
 .actionButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   color: var(--fui-text-primary, $fui-text-primary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -446,8 +423,7 @@
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    @include action.glyph("md");
   }
 }
 
@@ -458,16 +434,13 @@
 .modeButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.size("sm");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -495,15 +468,11 @@
 .attach {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  // The target size rather than a spacing step, so it tracks whatever scale
-  // the surface around it has established.
-  width: var(--fui-target-size-min, $fui-target-size-min);
-  height: var(--fui-target-size-min, $fui-target-size-min);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
@@ -523,8 +492,7 @@
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
@@ -547,19 +515,19 @@
 // Sized off the same target as everything else in the bar, so a chip and a
 // control are the same height and the card has one horizontal rhythm.
 .attachment {
-  --_chip-height: var(--fui-target-size-min, #{$fui-target-size-min});
+  --_chip-height: #{action.track("sm")};
 
   display: inline-flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   height: var(--_chip-height);
-  max-width: 15rem;
+  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: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) 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);
@@ -597,13 +565,11 @@
 .attachmentRemove {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("micro");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  width: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
-  height: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -614,8 +580,7 @@
   }
 
   svg {
-    width: var(--fui-icon-xs, $fui-icon-xs);
-    height: var(--fui-icon-xs, $fui-icon-xs);
+    @include action.glyph("micro");
   }
 }
 
@@ -634,7 +599,7 @@
 // must not push the submit button off the row. Select's ghost trigger already
 // allows shrinking and ellipsises its value; this only caps how far it grows.
 .select {
-  max-width: 15rem;
+  max-width: layout.measure("composer-item");
 }
 
 // ============================================
@@ -642,7 +607,9 @@
 // ============================================
 
 .usage {
-  @include helper-text;
+  @include typography.role("caption");
+
+  color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
 }
 
@@ -653,12 +620,9 @@
 .submit {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   // A neutral inverse keeps send visibly primary without spending the product
   // accent, which may already encode agent state.
@@ -679,8 +643,7 @@
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    @include action.glyph("md");
   }
 }
 

package/src/components/Prompt/index.tsx

@@ -437,9 +437,6 @@ function PromptTextarea({
     onFiles,
   } = usePromptContext();
 
-  const lineHeight = 1.5;
-  const padding = 12; // top + bottom padding in pixels
-
   const adjustHeight = React.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea || !autoResize) return;
@@ -450,8 +447,12 @@ function PromptTextarea({
     // Calculate min and max heights based on rows
     const computedStyle = window.getComputedStyle(textarea);
     const fontSize = parseFloat(computedStyle.fontSize);
-    const minHeight = minRows * fontSize * lineHeight + padding;
-    const maxHeight = maxRows * fontSize * lineHeight + padding;
+    const computedLineHeight = parseFloat(computedStyle.lineHeight);
+    const lineHeight = Number.isFinite(computedLineHeight) ? computedLineHeight : fontSize * 1.5;
+    const paddingBlock =
+      parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+    const minHeight = minRows * lineHeight + paddingBlock;
+    const maxHeight = maxRows * lineHeight + paddingBlock;
 
     // Set the height, clamped to min/max
     const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);

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;
 
@@ -91,26 +95,16 @@
     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,8 +112,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--fui-raw-space-8, 8px);
+  height: var(--fui-raw-space-8, 8px);
   background-color: var(--fui-button-primary-base, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
@@ -137,48 +131,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 +171,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),
@@ -235,11 +205,21 @@
       color-mix(in srgb, var(--fui-button-primary-base, #{$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,8 +228,9 @@
 
 @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);

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}