@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Listbox/Listbox.module.scss

@@ -1,18 +1,21 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
+@use "../../recipes/layout" as layout;
 @use "../../recipes/popup" as popup;
 @use "../../recipes/typography" as typography;
 
 .listbox {
-  @include popup.container;
+  @include popup.inline-container;
   @include popup.viewport;
 
-  min-inline-size: var(--fui-listbox-min-inline, 192px);
-  border-color: var(--fui-form-group-border, $fui-border);
+  min-inline-size: layout.measure("menu-min");
 
   &:focus-visible {
     @include focus-ring;
   }
+
+  @include high-contrast-outline;
 }
 
 .item {
@@ -56,23 +59,14 @@
 .empty {
   @include typography.role("body-compact");
 
-  padding-block: var(--fui-popup-row-block-inset);
-  padding-inline: var(--fui-popup-row-inline-inset);
+  padding-block: var(
+    --fui-popup-row-block-inset,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
+  padding-inline: var(
+    --fui-popup-row-inline-inset,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-align: center;
 }
-
-@media (prefers-contrast: more) {
-  .listbox {
-    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));
-  }
-
-  .itemSelected,
-  .itemActive {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
-      var(--fui-color-accent, $fui-color-accent);
-    outline-offset: calc(-1 * var(--fui-focus-ring-width, $fui-focus-ring-width));
-  }
-}

package/src/components/Loading/Loading.contract.json

@@ -9,7 +9,7 @@
   "exportName": "Loading",
   "propsSummary": [
     "size: sm|md|lg|xl (default: md)",
-    "variant: spinner|dots|pulse (default: spinner)",
+    "kind: spinner|dots|pulse (default: spinner)",
     "label: string (default: Loading...)",
     "centered: boolean (default: false)",
     "fill: boolean (default: false)",
@@ -24,9 +24,9 @@
       "required": false,
       "values": ["sm", "md", "lg", "xl"]
     },
-    "variant": {
+    "kind": {
       "type": "enum",
-      "description": "Visual style of the loading animation",
+      "description": "Which animation plays",
       "default": "spinner",
       "required": false,
       "values": ["spinner", "dots", "pulse"]
@@ -57,7 +57,7 @@
     },
     "color": {
       "type": "enum",
-      "description": "Color variant - accent uses theme color, current inherits text color",
+      "description": "Colour. accent uses the theme accent, current inherits the surrounding text colour",
       "default": "accent",
       "required": false,
       "values": ["accent", "current", "muted"]
@@ -102,12 +102,12 @@
     {
       "name": "Dots",
       "description": "Three bouncing dots, at home in a message thread.",
-      "code": "<Loading variant=\"dots\" label=\"Sending message\" />"
+      "code": "<Loading kind=\"dots\" label=\"Sending message\" />"
     },
     {
       "name": "Pulse",
       "description": "One breathing dot for ambient background work.",
-      "code": "<Loading variant=\"pulse\" label=\"Syncing\" />"
+      "code": "<Loading kind=\"pulse\" label=\"Syncing\" />"
     },
     {
       "name": "Colors",

package/src/components/Loading/Loading.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/typography" as typography;
 
@@ -58,7 +59,7 @@
 }
 
 // ============================================
-// Spinner Variant
+// Spinner kind
 // ============================================
 
 .spinnerIcon {
@@ -68,7 +69,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
-    opacity: 0.7;
+    opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   }
 }
 
@@ -82,10 +83,10 @@
 }
 
 // ============================================
-// Dots Variant
+// Dots kind
 // ============================================
 
-// `.dots`/`.pulse` on the root are variant hooks only — sizing lives on the
+// `.dots`/`.pulse` on the root are kind hooks only — sizing lives on the
 // inner track. Sharing one class between root and track let the track's
 // 100% × 100% override the root's fixed activity footprint (rendered 0 × 0).
 .dotsTrack {
@@ -104,20 +105,20 @@
   animation: bounce var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out infinite;
 
   &:nth-child(1) {
-    animation-delay: 0s;
+    animation-delay: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   }
 
   &:nth-child(2) {
-    animation-delay: 0.2s;
+    animation-delay: calc(var(--fui-duration-pulse, #{$fui-duration-pulse}) / 8);
   }
 
   &:nth-child(3) {
-    animation-delay: 0.4s;
+    animation-delay: calc(var(--fui-duration-pulse, #{$fui-duration-pulse}) / 4);
   }
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
-    opacity: 0.6;
+    opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   }
 }
 
@@ -126,7 +127,7 @@
   60%,
   100% {
     transform: translateY(0);
-    opacity: 0.4;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
   30% {
     transform: translateY(-30%);
@@ -135,7 +136,7 @@
 }
 
 // ============================================
-// Pulse Variant
+// Pulse kind
 // ============================================
 
 .pulseTrack {
@@ -149,22 +150,22 @@
 
 .pulseRing {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: currentColor;
-  opacity: 0.3;
+  opacity: var(--fui-opacity-faint, #{$fui-opacity-faint});
   animation: pulseRing var(--fui-duration-pulse, $fui-duration-pulse) ease-out infinite;
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
-    opacity: 0.2;
+    opacity: var(--fui-opacity-faint, #{$fui-opacity-faint});
   }
 }
 
 .pulseDot {
-  width: 50%;
-  height: 50%;
+  inline-size: 50%;
+  block-size: 50%;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: currentColor;
   z-index: 1;
@@ -173,7 +174,7 @@
 @keyframes pulseRing {
   0% {
     transform: scale(0.5);
-    opacity: 0.5;
+    opacity: var(--fui-opacity-faint, #{$fui-opacity-faint});
   }
   100% {
     transform: scale(1.5);
@@ -192,7 +193,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--fui-backdrop, $fui-backdrop);
-  z-index: var(--fui-overlay-layer-backdrop, 50);
+  z-index: var(--fui-overlay-layer-backdrop, #{$fui-overlay-layer-backdrop});
 }
 
 .overlay {
@@ -200,7 +201,7 @@
 }
 
 // ============================================
-// Inline Variant
+// Inline
 // ============================================
 
 .inline {
@@ -209,23 +210,25 @@
   vertical-align: middle;
 }
 
+// The inline spinner scales with the surrounding text, so its box is an em
+// measure rather than a glyph step; the md icon is the fallback.
 .inline-sm {
-  --inline-size: 0.875em; // Relative to surrounding text
+  --_loading-inline-size: 0.875em;
 }
 
 .inline-md {
-  --inline-size: 1.125em;
+  --_loading-inline-size: 1.125em;
 }
 
 .inlineSpinner {
-  width: var(--inline-size);
-  height: var(--inline-size);
+  inline-size: var(--_loading-inline-size, var(--fui-icon-md, #{$fui-icon-md}));
+  block-size: var(--_loading-inline-size, var(--fui-icon-md, #{$fui-icon-md}));
   animation: spin var(--fui-duration-spin, $fui-duration-spin) linear infinite;
   color: currentColor;
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
-    opacity: 0.7;
+    opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   }
 }
 
@@ -240,9 +243,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-raw-space-12, 12px);
+  gap: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  z-index: 100;
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
 }
 
 .screenLabel {

package/src/components/Loading/index.tsx

@@ -8,13 +8,14 @@ import styles from "./Loading.module.scss";
 // ============================================
 
 export type LoadingSize = "sm" | "md" | "lg" | "xl";
-export type LoadingVariant = "spinner" | "dots" | "pulse";
+export type LoadingKind = "spinner" | "dots" | "pulse";
 
 export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Size of the loading indicator */
   size?: LoadingSize;
-  /** Visual style of the loading indicator */
-  variant?: LoadingVariant;
+  /** Which animation plays. Not chrome, so it is `kind`, not `variant`.
+   * @default "spinner" */
+  kind?: LoadingKind;
   /** Accessible label for screen readers */
   label?: string;
   /** Whether to center the loading indicator in its container */
@@ -23,7 +24,7 @@ export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
   fill?: boolean;
   /** Whether to show the loading indicator with a backdrop overlay */
   overlay?: boolean;
-  /** Color variant - uses accent color by default, 'current' inherits text color */
+  /** Colour. `accent` by default; `current` inherits the surrounding text colour */
   color?: "accent" | "current" | "muted";
 }
 
@@ -37,8 +38,8 @@ export interface LoadingInlineProps extends React.HTMLAttributes<HTMLSpanElement
 export interface LoadingScreenProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Loading indicator size */
   size?: LoadingSize;
-  /** Loading indicator variant */
-  variant?: LoadingVariant;
+  /** Which animation plays */
+  kind?: LoadingKind;
   /** Optional label text to display */
   label?: string;
   /** Whether to show the label text visually */
@@ -93,7 +94,7 @@ function PulseAnimation({ className }: { className?: string }) {
 const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(function LoadingRoot(
   {
     size = "md",
-    variant = "spinner",
+    kind = "spinner",
     label = "Loading...",
     centered = false,
     fill = false,
@@ -107,7 +108,7 @@ const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(function Load
   const classes = [
     styles.loading,
     styles[size],
-    styles[variant],
+    styles[kind],
     styles[`color-${color}`],
     centered && styles.centered,
     fill && styles.fill,
@@ -118,9 +119,9 @@ const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(function Load
     .join(" ");
 
   const animation =
-    variant === "dots" ? (
+    kind === "dots" ? (
       <DotsAnimation className={styles.dotsTrack} />
-    ) : variant === "pulse" ? (
+    ) : kind === "pulse" ? (
       <PulseAnimation className={styles.pulseTrack} />
     ) : (
       <SpinnerIcon className={styles.spinnerIcon} />
@@ -171,7 +172,7 @@ function LoadingInline({
 
 function LoadingScreen({
   size = "lg",
-  variant = "spinner",
+  kind = "spinner",
   label = "Loading...",
   showLabel = false,
   className,
@@ -181,7 +182,7 @@ function LoadingScreen({
 
   return (
     <div className={classes} role="status" aria-label={label} aria-live="polite" {...htmlProps}>
-      <LoadingRoot size={size} variant={variant} label={label} />
+      <LoadingRoot size={size} kind={kind} label={label} />
       {showLabel && <span className={styles.screenLabel}>{label}</span>}
     </div>
   );

package/src/components/Markdown/Markdown.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/prose" as prose;
 
 .markdown {
@@ -90,7 +91,7 @@
     background-color: var(--fui-code-bg, $fui-code-bg);
 
     code {
-      padding: 0;
+      padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
       background: none;
       font: inherit;
       letter-spacing: inherit;

package/src/components/Menu/Menu.contract.json

@@ -75,22 +75,22 @@
     {
       "name": "Default",
       "description": "Plain actions, one per row.",
-      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Actions</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Edit</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"
+      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Actions</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Edit</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"
     },
     {
       "name": "With Shortcuts",
       "description": "Trailing keys teach the faster path.",
-      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Edit</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item shortcut=\"Ctrl+Z\" onSelect={() => {}}>Undo</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+Y\" onSelect={() => {}}>Redo</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item shortcut=\"Ctrl+C\" onSelect={() => {}}>Copy</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+V\" onSelect={() => {}}>Paste</Menu.Item>\n  </Menu.Content>\n</Menu>"
+      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Edit</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item shortcut=\"Ctrl+Z\" onSelect={() => {}}>Undo</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+Y\" onSelect={() => {}}>Redo</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item shortcut=\"Ctrl+C\" onSelect={() => {}}>Copy</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+V\" onSelect={() => {}}>Paste</Menu.Item>\n  </Menu.Content>\n</Menu>"
     },
     {
       "name": "With Groups",
       "description": "Labels separate unrelated actions.",
-      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Options</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Group>\n      <Menu.GroupLabel>View</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>\n      <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>\n    </Menu.Group>\n    <Menu.Separator />\n    <Menu.Group>\n      <Menu.GroupLabel>Layout</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>\n      <Menu.Item onSelect={() => {}}>List View</Menu.Item>\n    </Menu.Group>\n  </Menu.Content>\n</Menu>"
+      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Options</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Group>\n      <Menu.GroupLabel>View</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>\n      <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>\n    </Menu.Group>\n    <Menu.Separator />\n    <Menu.Group>\n      <Menu.GroupLabel>Layout</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>\n      <Menu.Item onSelect={() => {}}>List View</Menu.Item>\n    </Menu.Group>\n  </Menu.Content>\n</Menu>"
     },
     {
       "name": "With Checkboxes",
       "description": "Rows that stay open while you toggle them.",
-      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Display</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>\n    <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>\n    <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>\n  </Menu.Content>\n</Menu>"
+      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Display</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>\n    <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>\n    <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>\n  </Menu.Content>\n</Menu>"
     },
     {
       "name": "With Checked Items",
@@ -100,7 +100,7 @@
     {
       "name": "With Submenu",
       "description": "Secondary options nest one level deep.",
-      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">File</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>New File</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>\n      <Menu.Content side=\"right\" align=\"start\">\n        <Menu.Item onSelect={() => {}}>PNG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>SVG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>PDF</Menu.Item>\n      </Menu.Content>\n    </Menu.Submenu>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"
+      "code": "<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">File</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>New File</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>\n      <Menu.Content side=\"right\" align=\"start\">\n        <Menu.Item onSelect={() => {}}>PNG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>SVG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>PDF</Menu.Item>\n      </Menu.Content>\n    </Menu.Submenu>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"
     },
     {
       "name": "Link Trigger",

package/src/components/Menu/Menu.module.scss

@@ -1,10 +1,11 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/popup" as popup;
 @use "../../recipes/typography" as typography;
 
 .positioner {
-  z-index: var(--fui-overlay-layer-anchored, 52);
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
   pointer-events: auto;
 
@@ -20,7 +21,7 @@
   @include popup.container;
 
   min-inline-size: layout.measure("menu-min");
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   list-style: none;
   opacity: 0;
   transform: scale(0.95);
@@ -74,8 +75,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--fui-popup-indicator-box);
-  block-size: var(--fui-popup-indicator-box);
+  inline-size: var(--fui-popup-indicator-box, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  block-size: var(--fui-popup-indicator-box, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
   flex: 0 0 auto;
 }
 
@@ -108,8 +109,8 @@
   color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
-    inline-size: var(--fui-raw-space-12, 12px);
-    block-size: var(--fui-raw-space-12, 12px);
+    inline-size: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+    block-size: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 }
 
@@ -117,8 +118,8 @@
   visibility: hidden;
 
   svg {
-    inline-size: var(--fui-raw-space-12, 12px);
-    block-size: var(--fui-raw-space-12, 12px);
+    inline-size: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+    block-size: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 }
 
@@ -141,8 +142,8 @@
   block-size: 0;
   margin-inline-start: auto;
   border-style: solid;
-  border-width: var(--fui-raw-space-4, 4px) 0 var(--fui-raw-space-4, 4px)
-    var(--fui-raw-space-6, 6px);
+  border-width: var(--fui-raw-space-4, #{measurements.raw-space(4)}) 0 var(--fui-raw-space-4, #{measurements.raw-space(4)})
+    var(--fui-raw-space-6, #{measurements.raw-space(6)});
   border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
 }
 

package/src/components/Message/Message.contract.json

@@ -10,7 +10,7 @@
   "propsSummary": [
     "role: user|assistant|system (required)",
     "children: node (required)",
-    "status: sending|streaming|complete|error (default: complete)",
+    "status: pending|streaming|complete|error (default: complete)",
     "timestamp: object",
     "avatar: node",
     "actions: node"
@@ -32,7 +32,7 @@
       "description": "Message state",
       "default": "complete",
       "required": false,
-      "values": ["sending", "streaming", "complete", "error"]
+      "values": ["pending", "streaming", "complete", "error"]
     },
     "timestamp": {
       "type": "object",
@@ -64,7 +64,7 @@
     ],
     "guidelines": [
       "Always set role — it drives alignment, avatar, and chrome",
-      "status covers sending, streaming, and error",
+      "status covers pending, streaming, and error",
       "Hide avatars with avatar={null}, or showAvatars={false} on ConversationList",
       "User bubbles cap at 80% of the inline measure so the two sides stay distinct",
       "Chrome stays on neutral surfaces; reserve accent for actions and semantic state",
@@ -117,7 +117,7 @@
     {
       "name": "With Actions",
       "description": "Controls stay hidden until the pointer enters the row.",
-      "code": "<Message\n  role=\"assistant\"\n  actions={\n    <>\n      <Button variant=\"ghost\" size=\"xs\">\n        Copy\n      </Button>\n      <Button variant=\"ghost\" size=\"xs\">\n        Regenerate\n      </Button>\n    </>\n  }\n>\n  <Message.Content>\n    Hover over this message to see the actions.\n  </Message.Content>\n</Message>"
+      "code": "<Message\n  role=\"assistant\"\n  actions={\n    <>\n      <Button variant=\"ghost\" size=\"sm\">\n        Copy\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\">\n        Regenerate\n      </Button>\n    </>\n  }\n>\n  <Message.Content>\n    Hover over this message to see the actions.\n  </Message.Content>\n</Message>"
     }
   ],
   "relations": [
@@ -141,7 +141,7 @@
     "propsSummary": [
       "role: \"user\" | \"assistant\" | \"system\" - determines styling",
       "children: ReactNode - message content",
-      "status: \"sending\" | \"streaming\" | \"complete\" | \"error\" - message state",
+      "status: \"pending\" | \"streaming\" | \"complete\" | \"error\" - message state",
       "timestamp: Date - when message was sent",
       "avatar: ReactNode - custom avatar (null to hide)",
       "actions: ReactNode - hover actions",

package/src/components/Message/Message.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/prose" as prose;
 @use "../../recipes/typography" as typography;
@@ -62,14 +63,15 @@
 }
 
 .error .content {
-  border: var(--fui-stroke-hairline, 1px) solid
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
     var(--fui-color-danger-border, $fui-color-danger-border);
   background: var(--fui-color-danger-bg, $fui-color-danger-bg);
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-.sending {
-  opacity: 0.7;
+// In-flight messages dim with the one disabled opacity until they land.
+.pending {
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
 }
 
 .avatar {
@@ -88,7 +90,7 @@
 }
 
 .avatarImage {
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .body {
@@ -126,7 +128,7 @@
     background-color: var(--fui-bg-subtle, $fui-bg-subtle);
 
     code {
-      padding: 0;
+      padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
       background: none;
       font: inherit;
       letter-spacing: inherit;
@@ -147,7 +149,7 @@
   display: inline-block;
   inline-size: 0.5em;
   block-size: 1em;
-  margin-inline-start: var(--fui-raw-space-2, 2px);
+  margin-inline-start: var(--fui-raw-space-2, #{measurements.raw-space(2)});
   background-color: currentColor;
   animation: blink var(--fui-duration-pulse, $fui-duration-pulse) step-end infinite;
 }

package/src/components/Message/index.tsx

@@ -11,7 +11,7 @@ import { Markdown } from '../Markdown';
 // ============================================
 
 export type MessageRole = 'user' | 'assistant' | 'system';
-export type MessageStatus = 'sending' | 'streaming' | 'complete' | 'error';
+export type MessageStatus = 'pending' | 'streaming' | 'complete' | 'error';
 
 export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Message role determines styling and alignment */
@@ -264,7 +264,7 @@ function MessageRoot({
     styles.message,
     styles[role],
     status === 'error' && styles.error,
-    status === 'sending' && styles.sending,
+    status === 'pending' && styles.pending,
     !showAvatar && styles.withoutAvatar,
     className,
   ].filter(Boolean).join(' ');