@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Chip/Chip.module.scss

@@ -1,5 +1,19 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+@mixin selected-surface {
+  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  color: var(--fui-field-selection-color, $fui-text-primary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+    box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, $fui-border-strong);
+  }
+}
 
 .chip {
   @include button-reset;
@@ -61,16 +75,7 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
   }
 }
 
@@ -89,19 +94,8 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-    border-color: var(--fui-color-accent, $fui-color-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-      border-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-      border-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
+    border-color: var(--fui-field-selection-border, $fui-border-strong);
   }
 }
 
@@ -118,16 +112,7 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
   }
 }
 
@@ -244,17 +229,8 @@
 }
 
 .selected + .remove {
-  background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-color-on-accent, $fui-color-on-accent);
+  @include selected-surface;
   border-left-color: transparent;
-
-  &:hover:not(:disabled) {
-    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-  }
 }
 
 // Chip.Group

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -2,7 +2,8 @@
 @use "../../tokens/mixins" as *;
 
 // Local component tokens (code blocks always dark — no light variant).
-// $fui-code-bg stays global (shared with Markdown's <pre> styling).
+// Background and selection stay global so apps can theme CodeBlock and
+// Markdown consistently without replacing either component.
 $fui-code-text: #e2e2e5 !default;
 $fui-code-text-muted: #8a8a9a !default;
 $fui-code-border: rgba(255, 255, 255, 0.06) !default;
@@ -11,12 +12,6 @@ $fui-code-tab-text-active: #e2e2e5 !default;
 $fui-code-copy-bg: rgba(255, 255, 255, 0.06) !default;
 $fui-code-copy-bg-hover: rgba(255, 255, 255, 0.12) !default;
 $fui-code-highlight-bg: rgba(255, 255, 255, 0.06) !default;
-// Selection tint derived from the primary action blue instead of semantic state colors.
-$fui-code-selection-bg: color-mix(
-  in srgb,
-  var(--fui-button-primary-base, #0a84ff) 30%,
-  transparent
-) !default;
 $fui-code-scrollbar-track: transparent !default;
 $fui-code-scrollbar-thumb: rgba(255, 255, 255, 0.1) !default;
 $fui-code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2) !default;

package/src/components/Combobox/Combobox.contract.json

@@ -3,15 +3,7 @@
   "name": "Combobox",
   "description": "Searchable select input that filters a dropdown list of options as you type. Supports single and multiple selection with chips.",
   "category": "forms",
-  "tags": [
-    "combobox",
-    "autocomplete",
-    "search",
-    "select",
-    "typeahead",
-    "form",
-    "multiselect"
-  ],
+  "tags": ["combobox", "autocomplete", "search", "select", "typeahead", "form", "multiselect"],
   "status": "stable",
   "sourcePath": "src/components/Combobox/index.tsx",
   "exportName": "Combobox",
@@ -110,11 +102,7 @@
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "className": {
       "type": "string",
@@ -163,6 +151,7 @@
       "Use helperText for guidance and error for validation messages",
       "Provide an empty state message when no results match",
       "Group related options with Combobox.Group for large lists",
+      "Static items may be composed through fragments and groups; filtering preserves wrapper composition",
       "Keep option text concise and searchable",
       "Use multiple prop for multi-select with chip display"
     ],
@@ -198,7 +187,7 @@
     {
       "name": "With Groups",
       "description": "Options organized into groups",
-      "code": "<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Group>\n      <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n      <Combobox.Item value=\"us\">United States</Combobox.Item>\n      <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n      <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n    </Combobox.Group>\n    <Combobox.Group>\n      <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n      <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n      <Combobox.Item value=\"de\">Germany</Combobox.Item>\n      <Combobox.Item value=\"fr\">France</Combobox.Item>\n    </Combobox.Group>\n  </Combobox.Content>\n</StatefulCombobox>"
+      "code": "<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <>\n      <Combobox.Group>\n        <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n        <Combobox.Item value=\"us\">United States</Combobox.Item>\n        <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n        <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Group>\n        <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n        <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n        <Combobox.Item value=\"de\">Germany</Combobox.Item>\n        <Combobox.Item value=\"fr\">France</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Empty>No matching country</Combobox.Empty>\n    </>\n  </Combobox.Content>\n</StatefulCombobox>"
     },
     {
       "name": "With Empty State",
@@ -260,11 +249,7 @@
       "Combobox.Input showTrigger: boolean - hide built-in trigger when using Combobox.Trigger explicitly",
       "maxVisibleItems: number - max visible options before scrolling (default 4)"
     ],
-    "a11yRules": [
-      "A11Y_COMBOBOX_KEYBOARD",
-      "A11Y_COMBOBOX_LABEL",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_COMBOBOX_KEYBOARD", "A11Y_COMBOBOX_LABEL", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
@@ -278,10 +263,7 @@
       "Group",
       "GroupLabel"
     ],
-    "requiredChildren": [
-      "Input",
-      "Content"
-    ],
+    "requiredChildren": ["Input", "Content"],
     "commonPatterns": [
       "<Combobox placeholder=\"Search...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>",
       "<Combobox multiple placeholder=\"Select items...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>",

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

@@ -197,7 +197,7 @@
   border-color: var(--fui-form-group-border, $fui-border);
 
   // Item height derived from text-base font + vertical padding
-  --_item-h: calc(
+  --_combobox-item-h: calc(
     var(--fui-font-size-sm, #{$fui-font-size-sm}) *
       var(--fui-line-height-normal, #{$fui-line-height-normal}) +
       var(--fui-space-2, #{$fui-space-2}) * 2
@@ -207,7 +207,8 @@
   // Show N items + half-peek scroll hint (default 4.5 items)
   // !important needed to override Base UI's inline max-height: 100%
   max-height: calc(
-    var(--_item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) * 2
+    var(--_combobox-item-h) * var(--fui-select-max-items, 4.5) +
+      var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
 

package/src/components/Combobox/index.tsx

@@ -168,6 +168,7 @@ interface ComboboxContextValue {
   placeholder?: string;
   multiple?: boolean;
   selectedValues: string[];
+  staticLabels: ReadonlyMap<string, string>;
   itemsRef: React.MutableRefObject<Map<string, string>>;
   itemsVersion: number;
   incrementItemsVersion: () => void;
@@ -178,8 +179,11 @@ interface ComboboxContextValue {
   inputId?: string;
 }
 
+const EMPTY_STATIC_LABELS = new Map<string, string>();
+
 const ComboboxContext = React.createContext<ComboboxContextValue>({
   selectedValues: [],
+  staticLabels: EMPTY_STATIC_LABELS,
   itemsRef: { current: new Map() },
   itemsVersion: 0,
   incrementItemsVersion: () => {},
@@ -188,6 +192,16 @@ const ComboboxContext = React.createContext<ComboboxContextValue>({
   size: "md",
 });
 
+const EMPTY_FILTERED_ITEM_INDICES = new Map<string, number>();
+const ComboboxFilteredItemIndexContext = React.createContext<ReadonlyMap<string, number>>(
+  EMPTY_FILTERED_ITEM_INDICES
+);
+
+function itemIndicesFromSerializedValues(serializedValues: string): ReadonlyMap<string, number> {
+  const values = JSON.parse(serializedValues) as string[];
+  return new Map(values.map((value, index) => [value, index]));
+}
+
 function getNodeText(node: React.ReactNode): string {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
@@ -197,6 +211,84 @@ function getNodeText(node: React.ReactNode): string {
   return "";
 }
 
+interface ComboboxStaticItem {
+  label: string;
+  value: string;
+}
+
+function collectStaticItems(node: React.ReactNode): ComboboxStaticItem[] {
+  const items: ComboboxStaticItem[] = [];
+
+  React.Children.forEach(node, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === ComboboxItem) {
+      const props = child.props as ComboboxItemProps;
+      items.push({
+        label: getNodeText(props.children).trim() || props.value,
+        value: props.value,
+      });
+      return;
+    }
+    collectStaticItems((child.props as { children?: React.ReactNode }).children).forEach((item) =>
+      items.push(item)
+    );
+  });
+
+  return items;
+}
+
+interface FilterStaticChildrenResult {
+  children: React.ReactNode;
+  visibleItemCount: number;
+  changed: boolean;
+}
+
+function filterStaticChildren(
+  node: React.ReactNode,
+  visibleValues: ReadonlySet<string>
+): FilterStaticChildrenResult {
+  let visibleItemCount = 0;
+  let changed = false;
+
+  const filteredChildren = React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === ComboboxItem) {
+      const props = child.props as ComboboxItemProps;
+      if (visibleValues.has(props.value)) {
+        visibleItemCount += 1;
+        return child;
+      }
+      changed = true;
+      return null;
+    }
+
+    const props = child.props as { children?: React.ReactNode };
+    if (props.children === undefined) return child;
+
+    const nested = filterStaticChildren(props.children, visibleValues);
+    visibleItemCount += nested.visibleItemCount;
+
+    if (child.type === ComboboxGroup && nested.visibleItemCount === 0) {
+      changed = true;
+      return null;
+    }
+    if (!nested.changed) return child;
+
+    changed = true;
+    return React.cloneElement(
+      child as React.ReactElement<{ children?: React.ReactNode }>,
+      undefined,
+      nested.children
+    );
+  });
+
+  return {
+    children: changed ? filteredChildren : node,
+    visibleItemCount,
+    changed,
+  };
+}
+
 // ============================================
 // Components
 // ============================================
@@ -230,6 +322,12 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
   ref
 ) {
   const size = useResolvedControlSize(sizeProp);
+  const staticItems = React.useMemo(() => collectStaticItems(children), [children]);
+  const staticValues = React.useMemo(() => staticItems.map((item) => item.value), [staticItems]);
+  const staticLabels = React.useMemo(
+    () => new Map(staticItems.map((item) => [item.value, item.label])),
+    [staticItems]
+  );
   // Track selected values for chip rendering
   const [internalValue, setInternalValue] = React.useState<string | string[] | null>(
     value ?? defaultValue ?? (multiple ? [] : null)
@@ -262,9 +360,11 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
   );
 
   // Convert value → label for input display
-  const itemToStringLabel = React.useCallback((itemValue: string) => {
-    return itemsRef.current.get(itemValue) ?? itemValue;
-  }, []);
+  const itemToStringLabel = React.useCallback(
+    (itemValue: string) =>
+      staticLabels.get(itemValue) ?? itemsRef.current.get(itemValue) ?? itemValue,
+    [staticLabels]
+  );
 
   // Derive selected values array for chip rendering
   const currentValue = value !== undefined ? value : internalValue;
@@ -292,6 +392,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       placeholder,
       multiple,
       selectedValues,
+      staticLabels,
       itemsRef,
       itemsVersion,
       incrementItemsVersion,
@@ -304,6 +405,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       placeholder,
       multiple,
       selectedValues,
+      staticLabels,
       itemsVersion,
       incrementItemsVersion,
       explicitTriggerCount,
@@ -347,6 +449,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       <ComboboxContext.Provider value={contextValue}>
         {wrapperContent(
           <BaseCombobox.Root<string, true>
+            items={staticValues}
             value={controlledValue}
             defaultValue={uncontrolledValue}
             onValueChange={handleValueChange}
@@ -391,6 +494,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
     <ComboboxContext.Provider value={contextValue}>
       {wrapperContent(
         <BaseCombobox.Root<string, false>
+          items={staticValues}
           value={controlledValue}
           defaultValue={uncontrolledValue ?? null}
           onValueChange={handleValueChange}
@@ -450,7 +554,9 @@ function ComboboxInput({
             {context.selectedValues.map((chipValue) => (
               <BaseCombobox.Chip key={chipValue} className={styles.chip}>
                 <span className={styles.chipLabel}>
-                  {context.itemsRef.current.get(chipValue) ?? chipValue}
+                  {context.staticLabels.get(chipValue) ??
+                    context.itemsRef.current.get(chipValue) ??
+                    chipValue}
                 </span>
                 <BaseCombobox.ChipRemove className={styles.chipRemove}>
                   <XIcon />
@@ -512,6 +618,17 @@ function ComboboxContent({
   ...htmlProps
 }: ComboboxContentProps) {
   const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
+  const filteredItems = BaseCombobox.useFilteredItems() as string[];
+  const serializedFilteredItems = JSON.stringify(filteredItems);
+  const filteredItemIndices = React.useMemo(
+    () => itemIndicesFromSerializedValues(serializedFilteredItems),
+    [serializedFilteredItems]
+  );
+  const visibleValues = React.useMemo(() => new Set(filteredItems), [filteredItems]);
+  const filteredContent = React.useMemo(
+    () => filterStaticChildren(children, visibleValues),
+    [children, visibleValues]
+  );
 
   const popupStyle =
     maxVisibleItems != null
@@ -530,7 +647,9 @@ function ComboboxContent({
         className={styles.positioner}
       >
         <BaseCombobox.Popup {...htmlProps} className={popupClasses} style={popupStyle}>
-          {children}
+          <ComboboxFilteredItemIndexContext.Provider value={filteredItemIndices}>
+            {filteredContent.children}
+          </ComboboxFilteredItemIndexContext.Provider>
         </BaseCombobox.Popup>
       </BaseCombobox.Positioner>
     </BaseCombobox.Portal>
@@ -539,6 +658,7 @@ function ComboboxContent({
 
 function ComboboxItem({ children, value, disabled, className, ...htmlProps }: ComboboxItemProps) {
   const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);
+  const filteredItemIndices = React.useContext(ComboboxFilteredItemIndexContext);
   const classes = [styles.item, className].filter(Boolean).join(" ");
 
   // Register this item's label in the registry so the input can display it
@@ -555,7 +675,13 @@ function ComboboxItem({ children, value, disabled, className, ...htmlProps }: Co
   }, [itemsRef, incrementItemsVersion, value, label]);
 
   return (
-    <BaseCombobox.Item {...htmlProps} value={value} disabled={disabled} className={classes}>
+    <BaseCombobox.Item
+      {...htmlProps}
+      value={value}
+      index={filteredItemIndices.get(value)}
+      disabled={disabled}
+      className={classes}
+    >
       {children}
       <BaseCombobox.ItemIndicator className={styles.itemIndicator}>
         <CheckIcon />

package/src/components/DataTable/DataTable.contract.json

@@ -3,14 +3,7 @@
   "name": "DataTable",
   "description": "Data table with sorting, selection, and column management. Powered by TanStack Table.",
   "category": "display",
-  "tags": [
-    "table",
-    "data",
-    "grid",
-    "list",
-    "sorting",
-    "tanstack"
-  ],
+  "tags": ["table", "data", "grid", "list", "sorting", "tanstack"],
   "status": "stable",
   "sourcePath": "src/components/DataTable/index.tsx",
   "exportName": "DataTable",
@@ -26,6 +19,7 @@
     "rowSelection: object",
     "onRowSelectionChange: function",
     "onRowClick: function",
+    "getRowProps: function",
     "getSubRows: function",
     "expanded: union",
     "onExpandedChange: function",
@@ -97,6 +91,11 @@
       "description": "Handler for row clicks/keyboard activation. Called as (row, event)",
       "required": false
     },
+    "getRowProps": {
+      "type": "function",
+      "description": "Returns row-level HTML, ARIA, data, class, and event props for each rendered data row",
+      "required": false
+    },
     "getSubRows": {
       "type": "function",
       "description": "Extract sub-rows for expandable tree tables",
@@ -123,10 +122,7 @@
       "description": "Table density",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md"
-      ]
+      "values": ["sm", "md"]
     },
     "caption": {
       "type": "string",
@@ -181,13 +177,15 @@
       "Use consistent alignment (numbers right, text left)",
       "Provide meaningful empty states",
       "Consider mobile responsiveness",
-      "Use showCheckbox for bulk selection workflows"
+      "Use showCheckbox for bulk selection workflows",
+      "Use getRowProps to provide an accessible name and intentional semantics for clickable rows"
     ],
     "accessibility": [
       "Proper table semantics with headers",
       "Sortable columns are keyboard accessible",
       "Row selection checkboxes include aria-labels",
-      "Expand/collapse buttons have aria-expanded state"
+      "Expand/collapse buttons have aria-expanded state",
+      "Clickable rows expose an accessible action label through getRowProps"
     ]
   },
   "examples": [
@@ -224,7 +222,7 @@
     {
       "name": "Clickable Rows",
       "description": "Rows respond to click and keyboard activation",
-      "code": "<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  onRowClick={(row) => alert(`${row.method} ${row.path}`)}\n  size=\"sm\"\n  aria-label=\"API endpoints\"\n/>"
+      "code": "<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  getRowProps={(row) => ({\n    role: 'button',\n    'aria-label': `Open ${row.method} ${row.path}`,\n  })}\n  onRowClick={(row) => alert(`${row.method} ${row.path}`)}\n  size=\"sm\"\n  aria-label=\"API endpoints\"\n/>"
     },
     {
       "name": "Striped",
@@ -273,22 +271,17 @@
       "showCheckbox: boolean - add checkbox column",
       "getSubRows: (row) => T[] - enable expandable rows",
       "onRowClick: (row, event) => void - row activation handler with event access",
+      "getRowProps: (row) => HTMLAttributes<HTMLTableRowElement> - row-level ARIA, role, data, class, and event props",
       "size: sm|md - table density",
       "striped: boolean - alternating row backgrounds",
       "bordered: boolean - bordered container",
       "wrapperClassName / wrapperProps - style and configure the outer wrapper div"
     ],
-    "a11yRules": [
-      "A11Y_TABLE_HEADERS",
-      "A11Y_TABLE_SORT"
-    ]
+    "a11yRules": ["A11Y_TABLE_HEADERS", "A11Y_TABLE_SORT"]
   },
   "ai": {
     "compositionPattern": "simple",
-    "subComponents": [
-      "Root",
-      "Columns"
-    ],
+    "subComponents": ["Root", "Columns"],
     "commonPatterns": [
       "<DataTable columns={createColumns([{key:\"name\",header:\"Name\"},{key:\"status\",header:\"Status\"}])} data={[{name:\"Item 1\",status:\"Active\"}]} />"
     ]

package/src/components/DataTable/DataTable.module.scss

@@ -3,7 +3,10 @@
 
 .wrapper {
   --fui-data-table-bg: var(--fui-table-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
-  --fui-data-table-header-bg: var(--fui-table-header-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent));
+  --fui-data-table-header-bg: var(
+    --fui-table-header-bg,
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent)
+  );
 
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
@@ -69,7 +72,10 @@
   user-select: none;
   // Opaque so the sticky header doesn't let rows bleed through on scroll,
   // while inheriting the table surface instead of forcing the page background.
-  background: var(--fui-data-table-header-bg);
+  background: var(
+    --fui-data-table-header-bg,
+    var(--fui-data-table-bg, var(--fui-bg-primary, #{$fui-bg-primary}))
+  );
 
   &:first-child {
     border-top-left-radius: var(--fui-radius-md, $fui-radius-md);
@@ -142,6 +148,10 @@
 
 // Body
 .tbody {
+  .td {
+    padding-top: var(--fui-space-2, $fui-space-2);
+    padding-bottom: var(--fui-space-2, $fui-space-2);
+  }
 }
 
 .row {
@@ -174,11 +184,18 @@
 }
 
 .selected {
-  background-color: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent));
-  box-shadow: inset 1px 0 0 var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+  background-color: var(
+    --fui-table-row-selected-bg,
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent)
+  );
+  box-shadow: inset 1px 0 0
+    var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
 
   &:hover {
-    background-color: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent));
+    background-color: var(
+      --fui-table-row-selected-bg,
+      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent)
+    );
   }
 }
 
@@ -204,10 +221,16 @@
   }
 
   .selected {
-    background-color: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent));
+    background-color: var(
+      --fui-table-row-selected-bg,
+      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent)
+    );
 
     &:hover {
-      background-color: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent));
+      background-color: var(
+        --fui-table-row-selected-bg,
+        color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent)
+      );
     }
   }
 }
@@ -216,7 +239,7 @@
 .bordered {
   border: 1px solid var(--fui-table-border, var(--fui-border, #{$fui-border}));
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  background: var(--fui-data-table-bg);
+  background: var(--fui-data-table-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
   overflow: hidden;
 }