@usefragments/ui 1.7.0 → 2.0.0

package/src/components/CodeBlock/index.tsx

@@ -29,7 +29,9 @@ async function loadShikiDeps() {
   }
   await _shikiLoadPromise;
 }
-import { TabsRoot, TabsList, Tab, TabsPanel } from "../Tabs";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { TabsRoot, TabsList, Tab, TabsPanel, type TabsVariant } from "../Tabs";
 import { FUI_CSS_VARIABLES_THEME } from "./css-variables-theme";
 import styles from "./CodeBlock.module.scss";
 import { isDevelopmentBuild, isProductionBuild } from "../../utils/env";
@@ -750,8 +752,9 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
           <div className={styles.header}>
             <span className={styles.filename}>{filename ?? ""}</span>
             {shouldShowHeaderCopy && (
-              <button
-                type="button"
+              <IconButton
+                variant="ghost"
+                size="sm"
                 onClick={handleCopy}
                 className={`${styles.copyButton} ${copied ? styles.copied : ""}`}
                 aria-label={copied ? "Copied!" : "Copy code"}
@@ -761,19 +764,20 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
                 ) : (
                   <CopyIcon className={styles.icon} />
                 )}
-              </button>
+              </IconButton>
             )}
           </div>
         )}
         {shouldShowOverlayCopy && (
-          <button
-            type="button"
+          <IconButton
+            variant="ghost"
+            size="sm"
             onClick={handleCopy}
             className={`${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`}
             aria-label={copied ? "Copied!" : "Copy code"}
           >
             {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
-          </button>
+          </IconButton>
         )}
         {highlight.loading ? (
           <div className={styles.loading} style={codeContainerStyle}>
@@ -789,18 +793,21 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
           />
         )}
         {persistentCopy && (
-          <button
-            type="button"
+          <IconButton
+            variant="ghost"
+            size="sm"
             onClick={handleCopy}
             className={`${styles.persistentCopy} ${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`}
             aria-label={copied ? "Copied!" : "Copy code"}
           >
             {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
-          </button>
+          </IconButton>
         )}
         {shouldShowCollapse && (
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="sm"
+            fullWidth
             onClick={toggleCollapsed}
             className={
               collapseAction === "expand"
@@ -823,7 +830,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
                 <span>Show less</span>
               </>
             )}
-          </button>
+          </Button>
         )}
       </div>
       {caption && <div className={styles.caption}>{caption}</div>}
@@ -863,8 +870,8 @@ export interface TabbedCodeBlockProps {
   showLineNumbers?: boolean;
   /** Syntax highlighting theme (applies to all tabs) */
   theme?: CodeBlockTheme;
-  /** Tab list visual style */
-  tabsVariant?: "underline" | "pills";
+  /** Tab list chrome: `soft` (default) is the filled rail, `ghost` the underline strip. */
+  tabsVariant?: TabsVariant;
   /** Enable word wrapping for long lines */
   wordWrap?: boolean;
   /** Maximum height in pixels (enables scrolling) */
@@ -892,7 +899,7 @@ function TabbedCodeBlock({
   copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = "pills",
+  tabsVariant = "soft",
   wordWrap,
   maxHeight,
   collapsible,

package/src/components/Collapsible/Collapsible.module.scss

@@ -25,11 +25,6 @@
   &:focus-visible {
     @include focus-ring;
   }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 }
 
 .triggerContent {
@@ -72,8 +67,7 @@
 }
 
 .disabled .trigger {
-  opacity: 0.5;
-  cursor: not-allowed;
+  @include disabled-state;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/ColorPicker/ColorPicker.module.scss

@@ -92,7 +92,27 @@ $fui-colorpicker-pointer-size: $fui-target-size-min !default;
   @include field.shell;
 
   flex-shrink: 0;
+
+  &:focus-visible,
+  &[data-popup-open] {
+    @include field.focus-state;
+  }
+
+  .wrapper[data-invalid] & {
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render. Without it the ring stays
+    // accent-coloured and the control reads half-valid at the moment the user
+    // is actually in it.
+    &:focus-visible,
+    &[data-popup-open] {
+      @include field.invalid-focus-state;
+    }
+  }
+
   // Disabled state (opacity + pointer-events) comes from @include interactive-base.
+  @include high-contrast-outline;
 }
 
 // Hex input wrapper (using Input component)
@@ -115,8 +135,6 @@ $fui-colorpicker-pointer-size: $fui-target-size-min !default;
 .popup {
   @include popup.container;
 
-  border-radius: var(--fui-radius-lg, $fui-radius-lg);
-
   // react-colorful styling overrides
   :global(.react-colorful) {
     width: var(--fui-colorpicker-size, #{$fui-colorpicker-size});
@@ -141,17 +159,6 @@ $fui-colorpicker-pointer-size: $fui-target-size-min !default;
   }
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .swatch {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/ColorPicker/index.tsx

@@ -167,6 +167,7 @@ const ColorPickerRoot = React.forwardRef<HTMLDivElement, ColorPickerProps>(funct
             className={styles.swatch}
             style={{ backgroundColor: displayValue }}
             disabled={disabled}
+            aria-invalid={error || undefined}
             aria-label={label ? `Edit ${label} color` : "Edit color"}
           />
           <BasePopover.Portal>

package/src/components/Combobox/Combobox.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 @use "../../recipes/field";
 @use "../../recipes/layout";
@@ -44,9 +45,20 @@
   }
 
   &:has([data-disabled]) {
-    background-color: var(--fui-field-bg-disabled, $fui-bg-tertiary);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    @include field.disabled-state;
   }
+
+  .wrapper[data-invalid] & {
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render.
+    &:focus-within {
+      @include field.invalid-focus-state;
+    }
+  }
+
+  @include high-contrast-outline;
 }
 
 // Size variants for input wrapper — override --_field-h.
@@ -67,7 +79,7 @@
   flex: 1;
   min-width: layout.measure("inline-floor");
   min-block-size: 0;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   background: transparent;
   border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -183,7 +195,7 @@
 
 // Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
@@ -279,21 +291,6 @@
   @include popup.group-label;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .inputWrapper {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &:focus-within {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Combobox/index.tsx

@@ -178,6 +178,9 @@ interface ComboboxContextValue {
   size: "sm" | "md" | "lg";
   // Id applied to Combobox.Input so a native <label htmlFor> can target it.
   inputId?: string;
+  /** Mirrors the wrapper's `data-invalid` onto the input as `aria-invalid`, so
+   * assistive tech hears the state the danger edge is painting. */
+  invalid?: boolean;
 }
 
 const EMPTY_STATIC_LABELS = new Map<string, string>();
@@ -422,6 +425,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       registerTrigger,
       size,
       inputId,
+      invalid: hasError,
     }),
     [
       placeholder,
@@ -434,14 +438,17 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       registerTrigger,
       size,
       inputId,
+      hasError,
     ]
   );
 
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
 
+  // data-invalid lets the shell pick up the error border, the same hook Select,
+  // DatePicker and RadioGroup use; without it `error` renders only the message.
   const wrapperContent = (inner: React.ReactNode) => (
-    <div ref={ref} className={wrapperClasses}>
+    <div ref={ref} className={wrapperClasses} data-invalid={hasError || undefined}>
       {inner}
       {helperText && (
         <span id={helperId} className={helperClasses}>
@@ -590,6 +597,7 @@ function ComboboxInput({
           placeholder={context.selectedValues.length === 0 ? inputPlaceholder : undefined}
           id={inputId}
           className={classes}
+          aria-invalid={context.invalid || undefined}
         />
         {renderTrigger && (
           <BaseCombobox.Trigger className={styles.trigger}>
@@ -607,6 +615,7 @@ function ComboboxInput({
         placeholder={inputPlaceholder}
         id={inputId}
         className={classes}
+        aria-invalid={context.invalid || undefined}
       />
       {renderTrigger && (
         <BaseCombobox.Trigger className={styles.trigger}>

package/src/components/Command/Command.contract.json

@@ -47,6 +47,12 @@
       "description": "Whether to loop keyboard navigation",
       "default": "true",
       "required": false
+    },
+    "hosted": {
+      "type": "boolean",
+      "description": "The Command sits inside another surface (a Popover, a Dialog) that draws the frame, so it draws none of its own",
+      "default": "false",
+      "required": false
     }
   },
   "usage": {
@@ -84,7 +90,7 @@
     {
       "name": "Dialog Command Palette",
       "description": "The same list summoned over the page.",
-      "code": "<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"secondary\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => {}}>New File</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>"
+      "code": "<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"soft\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content width=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => {}}>New File</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>"
     },
     {
       "name": "With Groups",

package/src/components/Command/Command.module.scss

@@ -1,4 +1,6 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/field" as field;
 @use "../../recipes/popup" as popup;
@@ -10,6 +12,16 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  @include high-contrast-outline;
+}
+
+// Hosted: the surrounding surface is the frame; the pick list keeps only its
+// own inset.
+.hosted {
+  background: transparent;
+  border: 0;
+  border-radius: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  box-shadow: none;
 }
 
 .inputWrapper {
@@ -18,8 +30,8 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-popup-row-content-gap);
-  margin-block-end: var(--fui-popup-container-inset);
+  gap: var(--fui-popup-row-content-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
+  margin-block-end: var(--fui-popup-container-inset, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
 
   &:focus-within {
     @include field.focus-state;
@@ -36,7 +48,7 @@
 .input {
   flex: 1;
   min-inline-size: 0;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   border: none;
   outline: none;
   color: var(--fui-text-primary, $fui-text-primary);
@@ -69,8 +81,8 @@
   }
 
   > svg {
-    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;
   }
 }
@@ -97,8 +109,8 @@
 .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-secondary, $fui-text-secondary);
   text-align: center;
 }
@@ -106,17 +118,3 @@
 .separator {
   @include popup.group-separator;
 }
-
-@media (prefers-contrast: more) {
-  .command {
-    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));
-  }
-
-  .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/Command/index.tsx

@@ -20,6 +20,11 @@ export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
   filter?: (value: string, search: string, keywords?: string[]) => number;
   /** Whether to loop keyboard navigation. Default: true */
   loop?: boolean;
+  /**
+   * The Command sits inside another surface (a Popover, a Dialog) that draws
+   * the frame, so it draws none of its own.
+   */
+  hosted?: boolean;
 }
 
 export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -154,6 +159,7 @@ function CommandRoot({
   onSearchChange,
   filter = defaultFilter,
   loop = true,
+  hosted = false,
   className,
   ...htmlProps
 }: CommandProps) {
@@ -249,7 +255,7 @@ function CommandRoot({
     <CommandContext.Provider value={contextValue}>
       <div
         {...htmlProps}
-        className={[styles.command, className].filter(Boolean).join(" ")}
+        className={[styles.command, hosted && styles.hosted, className].filter(Boolean).join(" ")}
         role="search"
       >
         {children}

package/src/components/ComponentDefaults/ComponentDefaults.contract.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "ComponentDefaults",
+  "description": "Utility provider that sets the default control size for every control below it.",
+  "category": "utilities",
+  "tags": ["provider", "defaults", "size", "utility"],
+  "status": "stable",
+  "sourcePath": "src/components/ComponentDefaults/index.tsx",
+  "exportName": "ComponentDefaultsProvider",
+  "propsSummary": [
+    "children: node (required)",
+    "controlSize: sm|md|lg",
+    "value: { controlSize?: sm|md|lg }"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Subtree that inherits the defaults",
+      "required": true
+    },
+    "controlSize": {
+      "type": "enum",
+      "description": "Default size for controls that do not pass their own size prop",
+      "required": false,
+      "values": ["sm", "md", "lg"]
+    },
+    "value": {
+      "type": "object",
+      "description": "Full defaults object; explicit controlSize wins over value.controlSize",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "A region needs every control at one size (dense table toolbars, compact sidebars)",
+      "A ThemeProvider subtree should default to sm or lg controls"
+    ],
+    "whenNot": [
+      "Sizing a single control (pass its size prop)",
+      "Changing spacing or typography (use tokens, not control size)"
+    ],
+    "guidelines": [
+      "Renders no chrome: it only supplies context read through useResolvedControlSize",
+      "Nest providers to override the size for a smaller region",
+      "An explicit size prop on a control always wins over the provider default",
+      "ThemeProvider componentDefaults wires this provider for you at the root"
+    ],
+    "accessibility": [
+      "sm controls still meet the kit's minimum target size through the action recipe"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Dense Toolbar",
+      "description": "Every control in the toolbar defaults to sm without repeating the prop.",
+      "code": "<ComponentDefaultsProvider controlSize=\"sm\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    <Button variant=\"soft\">Filter</Button>\n    <Button variant=\"ghost\">Export</Button>\n  </div>\n</ComponentDefaultsProvider>"
+    },
+    {
+      "name": "Nested Override",
+      "description": "A nested provider narrows the default for one region.",
+      "code": "<ComponentDefaultsProvider controlSize=\"lg\">\n  <Button>Large by default</Button>\n  <ComponentDefaultsProvider controlSize=\"sm\">\n    <Button>Small in this region</Button>\n  </ComponentDefaultsProvider>\n</ComponentDefaultsProvider>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Theme",
+      "relationship": "parent",
+      "note": "ThemeProvider accepts componentDefaults and mounts this provider"
+    },
+    {
+      "component": "Button",
+      "relationship": "child",
+      "note": "Controls resolve their size through useResolvedControlSize"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "controlSize: sm|md|lg - default size for controls below the provider",
+      "value: { controlSize } - defaults object, explicit controlSize wins",
+      "useComponentDefaults() - read the merged defaults",
+      "useResolvedControlSize(explicit, fallback) - explicit > provider > fallback (md)"
+    ],
+    "a11yRules": []
+  },
+  "provenance": {
+    "source": "manual",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-09-03T00:00:00.000Z"
+  }
+}

package/src/components/ConversationList/ConversationList.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/typography" as typography;
@@ -64,7 +65,7 @@
 
 .dateSeparatorLine {
   flex: 1;
-  height: var(--fui-stroke-hairline, 1px);
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   background-color: var(--fui-border, $fui-border);
 }
 
@@ -73,8 +74,6 @@
 
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
 }
 
 // ============================================

package/src/components/ConversationList/index.tsx

@@ -130,7 +130,7 @@ function TypingIndicator({
       <div className={styles.typingContent}>
         <Loading
           size="sm"
-          variant="dots"
+          kind="dots"
           color="muted"
           label=""
           role="presentation"
@@ -242,7 +242,7 @@ function ConversationListRoot({
       <div {...htmlProps} ref={containerRef} className={classes} onScroll={handleScroll}>
         {loadingHistory && (
           <div className={styles.loadingHistory}>
-            <Loading size="md" variant="spinner" color="muted" label="Loading history" />
+            <Loading size="md" kind="spinner" color="muted" label="Loading history" />
             <span>Loading history...</span>
           </div>
         )}

package/src/components/DataTable/DataTable.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/table-chrome" as table-chrome;
 @use "../../recipes/target" as target;
@@ -45,6 +46,7 @@
 .headerRow,
 .row {
   @include table-chrome.row;
+  @include high-contrast-outline;
 }
 
 .headerRow {
@@ -75,7 +77,7 @@
 
   justify-content: space-between;
   inline-size: 100%;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: inherit;
   text-align: start;
   transition: color var(--fui-transition-fast, $fui-transition-fast);
@@ -148,12 +150,13 @@
   );
 
   .td:first-child {
-    box-shadow: inset var(--fui-table-divider-size) 0 0
-      var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+    box-shadow: inset var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))
+      0 0 var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 
   &:dir(rtl) .td:first-child {
-    box-shadow: inset calc(-1 * var(--fui-table-divider-size)) 0 0
+    box-shadow: inset
+      calc(-1 * var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))) 0 0
       var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 }
@@ -300,11 +303,11 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
-@media (prefers-contrast: more) {
-  .headerRow,
-  .row {
-    border-block-end-color: CanvasText;
-  }
+// Virtualizer spacer rows: height is measured state set inline; the chrome
+// reset lives here so the spacer never paints a cell.
+.virtualSpacer {
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/DataTable/DataTable.virtual.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
 import { Table, type TableProps } from "../Table";
+import styles from "./DataTable.module.scss";
 
 // ============================================
 // Dependency (@tanstack/react-virtual)
@@ -86,13 +87,13 @@ function DataTableVirtualRoot<TItem>({
       <Table.Body>
         {paddingTop > 0 ? (
           <tr aria-hidden="true">
-            <td colSpan={colSpan} style={{ height: paddingTop, padding: 0 }} />
+            <td colSpan={colSpan} className={styles.virtualSpacer} style={{ height: paddingTop }} />
           </tr>
         ) : null}
         {virtualRows.map((row) => renderRow(row))}
         {paddingBottom > 0 ? (
           <tr aria-hidden="true">
-            <td colSpan={colSpan} style={{ height: paddingBottom, padding: 0, border: 0 }} />
+            <td colSpan={colSpan} className={styles.virtualSpacer} style={{ height: paddingBottom }} />
           </tr>
         ) : null}
       </Table.Body>

package/src/components/DataTable/index.tsx

@@ -547,7 +547,7 @@ function DataTableLive<T>({
                         style={{
                           ...getColumnSizeStyle(cell.column),
                           ...(isFirstDataCell
-                            ? ({ "--_fui-table-tree-depth": depth } as React.CSSProperties)
+                            ? ({ "--fui-table-tree-depth": depth } as React.CSSProperties)
                             : undefined),
                         }}
                       >