@vendure-io/ui 2.0.0-beta.1 → 2.0.0-beta.11

package/src/components/molecules/copy-feedback-provider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+// Function props can't cross a server→client boundary, so a copy surface
+// rendered from RSC (e.g. MDX docs) could never receive an `onCopied` callback
+// for toast wiring. This context is the RSC-safe alternative: mount
+// CopyFeedbackProvider once in a client component (wire your toast there — the
+// DS never toasts), and copy surfaces resolve their feedback in a fixed order —
+// explicit prop → this context → nothing beyond the built-in copied icon.
+interface CopyFeedbackContextValue {
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  onCopied?: () => void;
+  /** Called when the clipboard write fails. */
+  onCopyError?: (error: Error) => void;
+}
+
+const CopyFeedbackContext = createContext<CopyFeedbackContextValue>({});
+
+function CopyFeedbackProvider({
+  children,
+  onCopied,
+  onCopyError,
+}: CopyFeedbackContextValue & { children: ReactNode }) {
+  const value = useMemo(() => ({ onCopied, onCopyError }), [onCopied, onCopyError]);
+  return <CopyFeedbackContext.Provider value={value}>{children}</CopyFeedbackContext.Provider>;
+}
+
+function useCopyFeedback(): CopyFeedbackContextValue {
+  return useContext(CopyFeedbackContext);
+}
+
+export { CopyFeedbackProvider, useCopyFeedback, type CopyFeedbackContextValue };

package/src/components/molecules/copyable-text.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@vendure-io/ui/components/atoms/button';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
 import { cn } from '@vendure-io/ui/lib/utils';
 import { CheckIcon, CopyIcon } from 'lucide-react';
@@ -11,9 +12,16 @@ interface CopyButtonProps extends Omit<React.ComponentProps<typeof Button>, 'val
   value: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here — the DS never toasts.
+   * Falls back to `CopyFeedbackProvider` when omitted (the RSC-safe path, since
+   * function props can't be passed from server components).
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails (e.g. permissions, insecure context). */
+  /**
+   * Called when the clipboard write fails (e.g. permissions, insecure context).
+   * Falls back to `CopyFeedbackProvider` when omitted.
+   */
   onCopyError?: (error: Error) => void;
   /** Accessible label before copying. @default "Copy" */
   copyLabel?: string;
@@ -40,6 +48,7 @@ function CopyButton({
   ...props
 }: CopyButtonProps) {
   const { copied, copy } = useCopy({ timeout });
+  const copyFeedback = useCopyFeedback();
 
   return (
     <Button
@@ -53,8 +62,9 @@ function CopyButton({
         onClick?.(event);
         if (event.defaultPrevented) return;
         const ok = await copy(value);
-        if (ok) onCopied?.();
-        else onCopyError?.(new Error('Failed to copy to the clipboard'));
+        if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+        else
+          (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
       }}
       {...props}
     >
@@ -71,10 +81,14 @@ interface CopyableTextProps {
   className?: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
+  /** Accessible label before copying, forwarded to the inner `CopyButton`. @default "Copy" */
+  copyLabel?: string;
+  /** Accessible label shown while the copied state is active, forwarded to the inner `CopyButton`. @default "Copied" */
+  copiedLabel?: string;
 }
 
 /**
@@ -89,11 +103,20 @@ function CopyableText({
   timeout,
   onCopied,
   onCopyError,
+  copyLabel,
+  copiedLabel,
 }: CopyableTextProps) {
   return (
     <span data-slot="copyable-text" className={cn('inline-flex items-center gap-1.5', className)}>
       {children ?? value}
-      <CopyButton value={value} timeout={timeout} onCopied={onCopied} onCopyError={onCopyError} />
+      <CopyButton
+        value={value}
+        timeout={timeout}
+        onCopied={onCopied}
+        onCopyError={onCopyError}
+        copyLabel={copyLabel}
+        copiedLabel={copiedLabel}
+      />
     </span>
   );
 }

package/src/components/molecules/data-table/data-table-bulk-actions.tsx

@@ -9,11 +9,12 @@ import type { DataTableBulkActionContext } from '@vendure-io/ui/components/molec
 import { cn } from '@vendure-io/ui/lib/utils';
 import * as React from 'react';
 
-// The selection overlay that replaces the controls row while rows are selected.
-// The cross-page selection cache lives here (donor parity): `rows` only ever
-// holds the current page, so we accumulate `row.original` by id as pages are
-// seen, letting `bulkActions` receive every selected original — not just the
-// ones still on screen.
+// The selection bar that replaces the controls row inside the header band
+// while rows are selected (returns null with an empty selection; the core
+// decides where it renders). The cross-page selection cache lives here (donor
+// parity): `rows` only ever holds the current page, so we accumulate
+// `row.original` by id as pages are seen, letting `bulkActions` receive every
+// selected original — not just the ones still on screen.
 
 /**
  * Accumulate `row.original` keyed by row id across page changes. Populated during
@@ -53,12 +54,12 @@ function DataTableBulkActions<TData>({
   };
 
   return (
+    // A plain band row, not a box: it takes the controls row's place inside
+    // the header band, so it carries no chrome of its own. min-h-9 matches
+    // the controls row's h-9 inputs so the swap holds the band height steady.
     <div
       data-slot="data-table-bulk-actions"
-      className={cn(
-        'bg-muted/50 flex flex-wrap items-center gap-2 rounded-md border px-3 py-2',
-        className,
-      )}
+      className={cn('flex min-h-9 flex-wrap items-center gap-2', className)}
       {...props}
     >
       {render(ctx)}

package/src/components/molecules/data-table/data-table-types.tsx

@@ -182,7 +182,11 @@ export interface DataTableProps<TData> {
   header?: React.ReactNode;
   /** Controls row (search, faceted filters, custom buttons). Render-prop gets the live table. */
   toolbar?: React.ReactNode | ((table: Table<TData>) => React.ReactNode);
-  /** Overlay content when selection is non-empty. Only meaningful with `rowSelection` wired. */
+  /**
+   * Replaces the controls row inside the header band while selection is
+   * non-empty (title and applied-filter chips stay). Only meaningful with
+   * `rowSelection` wired.
+   */
   bulkActions?: (ctx: DataTableBulkActionContext<TData>) => React.ReactNode;
   /**
    * Per-row actions → appends an actions column. First arg is `row.original`
@@ -225,8 +229,31 @@ export interface DataTableProps<TData> {
    */
   setTableOptions?: (options: TableOptions<TData>) => TableOptions<TData>;
 
+  /**
+   * The table's frame. `'card'` (default) renders the band anatomy on a real
+   * `Card`: a `CardHeader` (border-b) hosting the header/controls/chips zones,
+   * `CardTable` hosting the table flush to the card edges, and a `CardFooter`
+   * (border-t) hosting pagination when it is wired — no footer means the last
+   * row sits flush against the card's bottom edge. `'plain'` renders the same
+   * band structure without any card chrome, for a table embedded in an
+   * existing card (e.g. a dashboard widget): it MUST sit inside a `Card`,
+   * whose spacing variables (`--card-px`/`--card-gap`) drive the bands and
+   * edge-cell alignment — the host card is the frame.
+   */
+  frame?: 'card' | 'plain';
+  /**
+   * Extra `<TableRow>`s appended inside `TableBody` after the data rows — e.g.
+   * an order table's subtotal/shipping/total rows. Rendered only alongside
+   * real rows, never with the skeleton or empty states, and has no interaction
+   * with selection, sorting, or pagination. Use the function form to receive
+   * `columnCount` for `colSpan`s — display columns (select, actions) are
+   * injected around your columns, so a hard-coded count desyncs. Rows are
+   * presentational: give them `hover:bg-transparent`.
+   */
+  footerRows?: React.ReactNode | ((ctx: { columnCount: number }) => React.ReactNode);
+
   labels?: DataTableLabels;
-  className?: string; // outer div[data-slot="data-table"]
+  className?: string; // the frame root (data-slot="data-table")
 }
 
 /**

package/src/components/molecules/data-table/data-table.tsx

@@ -19,6 +19,7 @@ import {
   useReactTable,
   type VisibilityState,
 } from '@tanstack/react-table';
+import { Card, CardFooter, CardHeader, CardTable } from '@vendure-io/ui/components/atoms/card';
 import { Checkbox } from '@vendure-io/ui/components/atoms/checkbox';
 import {
   ContextMenu,
@@ -45,6 +46,7 @@ import {
 } from '@vendure-io/ui/components/molecules/data-table/data-table-filters';
 import {
   buildDisplayColumns,
+  getSelectedRowIds,
   resolveSlot,
 } from '@vendure-io/ui/components/molecules/data-table/data-table-helpers';
 import type {
@@ -59,13 +61,17 @@ import {
 } from '@vendure-io/ui/components/molecules/data-table/list-header';
 import { TablePagination } from '@vendure-io/ui/components/molecules/data-table/table-pagination';
 import { cn } from '@vendure-io/ui/lib/utils';
+import { AnimatePresence, motion } from 'motion/react';
 import * as React from 'react';
 
 // The composition root. Owns the single `useReactTable` instance and the
-// controlled/uncontrolled bridge, then lays out header → controls → chips →
-// bulk overlay → Table → footer. Every capability follows the Phase-1 rule
-// verbatim: a feature renders only if its config is wired — no feature flags, no
-// disabled placeholders. Only this folder imports TanStack; the composed
+// controlled/uncontrolled bridge, then lays out the card-framed table anatomy:
+// a CardHeader band (header → controls → chips → bulk overlay), a CardTable
+// hosting the Table flush to the card edges, and a CardFooter band for
+// pagination. `frame="plain"` keeps the band structure without the card
+// chrome. Every capability follows the Phase-1 rule verbatim: a feature
+// renders only if its config is wired — no feature flags, no disabled
+// placeholders. Only this folder imports TanStack; the composed
 // ListHeader/TablePagination/Chip primitives stay TanStack-free.
 
 /**
@@ -98,6 +104,16 @@ function headerLabelText<TData>(column: Column<TData, unknown>): string {
   return typeof header === 'string' ? header : column.id;
 }
 
+// The controls/bulk replace-on-select swap: the outgoing row drifts slightly
+// up as it fades, the incoming row rises in from below — a subtle vertical
+// hand-off (4px) rather than a plain crossfade.
+const bandRowFade = {
+  initial: { opacity: 0, y: 4 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -4 },
+  transition: { duration: 0.1, ease: 'easeOut' },
+} as const;
+
 function ariaSort<TData>(
   hasSorting: boolean,
   column: Column<TData, unknown>,
@@ -126,6 +142,8 @@ function DataTable<TData>({
   emptyState,
   renderRow,
   setTableOptions,
+  frame = 'card',
+  footerRows,
   labels,
   className,
 }: DataTableProps<TData>) {
@@ -307,7 +325,11 @@ function DataTable<TData>({
       ? table.getVisibleLeafColumns().find((column) => column.id !== selectColumnId)?.id
       : undefined;
   const columnClass = (id: string): string | undefined => {
-    if (id === selectColumnId) return 'relative w-0 p-0';
+    // `pl-0!`: the select cell is the first child, so CardTable's edge-cell
+    // padding would otherwise widen the zero-width cell and push the whole
+    // gutter arrangement out; important because CardTable's descendant rule
+    // out-specifies a plain utility on the cell.
+    if (id === selectColumnId) return 'relative w-0 p-0 pl-0!';
     if (id === leadingColumnId) return 'pl-8';
     // Actions cells drop vertical padding so a row-action button (taller than a
     // text line) sits inside the natural row height rather than inflating every
@@ -327,153 +349,215 @@ function DataTable<TData>({
     filters.showAppliedFilters !== false &&
     table.getState().columnFilters.length > 0;
   const showHeader = header != null || showControls || showChips;
-  const showBulk = rowSelection != null && bulkActions != null;
+  // Unlike the other zones, the bulk bar exists only while rows are selected,
+  // so it opens the header band on its own only then — a controls-less
+  // selectable table must not render an empty band. (Deliberate trade-off:
+  // for a table with no header content at all, the band pops in on first
+  // selection rather than reserving empty space.)
+  const showBulk =
+    rowSelection != null &&
+    bulkActions != null &&
+    getSelectedRowIds(table.getState().rowSelection).length > 0;
 
-  return (
-    <div data-slot="data-table" className={cn('flex flex-col gap-4', className)}>
-      {showHeader && (
-        <ListHeader>
-          {header}
-          {showControls && (
-            <ListHeaderControls>
-              {toolbarNode}
-              {hasFilterMenu && filters?.columns && (
-                <DataTableAddFilter table={table} columns={filters.columns} label={l.addFilter} />
-              )}
-              {showViewOptions && (
-                <DataTableViewOptions
+  const bands = (
+    <>
+      {(showHeader || showBulk) && (
+        <CardHeader className="border-b">
+          <ListHeader>
+            {header}
+            {/* Replace-on-select: while rows are selected the bulk bar takes
+                the controls row's place (title and applied-filter chips stay).
+                The swap fades out then in — one --transition-duration-fast
+                (100ms) per phase; mode="wait" keeps the rows sequential so
+                they never stack. */}
+            {(showControls || (rowSelection != null && bulkActions != null)) && (
+              <AnimatePresence initial={false} mode="wait">
+                {showBulk && bulkActions ? (
+                  <motion.div key="bulk-actions" {...bandRowFade}>
+                    <DataTableBulkActions
+                      table={table}
+                      cache={selectionCache}
+                      render={bulkActions}
+                    />
+                  </motion.div>
+                ) : showControls ? (
+                  <motion.div key="controls" {...bandRowFade}>
+                    <ListHeaderControls>
+                      {toolbarNode}
+                      {hasFilterMenu && filters?.columns && (
+                        <DataTableAddFilter
+                          table={table}
+                          columns={filters.columns}
+                          label={l.addFilter}
+                        />
+                      )}
+                      {showViewOptions && (
+                        <DataTableViewOptions
+                          table={table}
+                          triggerLabel={l.columnsTrigger}
+                          heading={l.columnsHeading}
+                        />
+                      )}
+                    </ListHeaderControls>
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
+            )}
+            {showChips && (
+              <ListHeaderChips>
+                <DataTableAppliedFilters
                   table={table}
-                  triggerLabel={l.columnsTrigger}
-                  heading={l.columnsHeading}
+                  columns={filters?.columns}
+                  inlineChipLimit={filters?.inlineChipLimit}
+                  removeLabel={l.removeFilter}
+                  collapsedLabel={l.filtersCollapsed}
                 />
-              )}
-            </ListHeaderControls>
-          )}
-          {showChips && (
-            <ListHeaderChips>
-              <DataTableAppliedFilters
-                table={table}
-                columns={filters?.columns}
-                inlineChipLimit={filters?.inlineChipLimit}
-                removeLabel={l.removeFilter}
-                collapsedLabel={l.filtersCollapsed}
-              />
-            </ListHeaderChips>
-          )}
-        </ListHeader>
+              </ListHeaderChips>
+            )}
+          </ListHeader>
+        </CardHeader>
       )}
 
-      {showBulk && bulkActions && (
-        <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
-      )}
-
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="group/header-row">
-              {headerGroup.headers.map((headerCell) => {
-                const content = headerCell.isPlaceholder
-                  ? null
-                  : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
-                return (
-                  <TableHead
-                    key={headerCell.id}
-                    aria-sort={ariaSort(sorting != null, headerCell.column)}
-                    className={columnClass(headerCell.column.id)}
-                  >
-                    {sorting != null && !headerCell.isPlaceholder ? (
-                      <DataTableColumnHeader
-                        column={headerCell.column}
-                        sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
-                      >
-                        {content}
-                      </DataTableColumnHeader>
-                    ) : (
-                      content
-                    )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {isLoading && rows.length === 0 ? (
-            Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
-              <TableRow key={`skeleton-${rowIndex}`}>
-                {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
-                  <TableCell key={`skeleton-cell-${cellIndex}`}>
-                    <Skeleton className="h-4 w-full" />
-                  </TableCell>
-                ))}
+      <CardTable>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="group/header-row">
+                {headerGroup.headers.map((headerCell) => {
+                  const content = headerCell.isPlaceholder
+                    ? null
+                    : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
+                  return (
+                    <TableHead
+                      key={headerCell.id}
+                      aria-sort={ariaSort(sorting != null, headerCell.column)}
+                      className={columnClass(headerCell.column.id)}
+                    >
+                      {sorting != null && !headerCell.isPlaceholder ? (
+                        <DataTableColumnHeader
+                          column={headerCell.column}
+                          sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
+                        >
+                          {content}
+                        </DataTableColumnHeader>
+                      ) : (
+                        content
+                      )}
+                    </TableHead>
+                  );
+                })}
               </TableRow>
-            ))
-          ) : bodyRows.length === 0 ? (
-            <TableRow className="hover:bg-transparent">
-              <TableCell
-                colSpan={Math.max(columnCount, 1)}
-                className="text-muted-foreground h-24 text-center"
-              >
-                {emptyState ?? l.empty}
-              </TableCell>
-            </TableRow>
-          ) : (
-            bodyRows.map((row) => {
-              const rowNode = (
-                <TableRow
-                  className="group/row"
-                  data-state={row.getIsSelected() ? 'selected' : undefined}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className={columnClass(cell.column.id)}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading && rows.length === 0 ? (
+              Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
+                <TableRow key={`skeleton-${rowIndex}`}>
+                  {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
+                    <TableCell key={`skeleton-cell-${cellIndex}`}>
+                      <Skeleton className="h-4 w-full" />
                     </TableCell>
                   ))}
                 </TableRow>
-              );
-              // Right-click accelerator: the row itself is the context-menu
-              // trigger, so the consumer supplies only the items and the core
-              // owns the menu chrome.
-              const defaultRow = contextActions ? (
-                <ContextMenu>
-                  <ContextMenuTrigger render={rowNode} />
-                  <ContextMenuContent>
-                    {contextActions(row.original, { row, table })}
-                  </ContextMenuContent>
-                </ContextMenu>
-              ) : (
-                rowNode
-              );
-              // Row-render seam: consumers can swap the default row for a
-              // full-width utility row or a per-row wrapper the cell grid can't
-              // express. Returning `defaultRow` keeps the built-in rendering.
-              return (
-                <React.Fragment key={row.id}>
-                  {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
-                </React.Fragment>
-              );
-            })
-          )}
-        </TableBody>
-      </Table>
+              ))
+            ) : bodyRows.length === 0 ? (
+              <TableRow className="hover:bg-transparent">
+                <TableCell
+                  colSpan={Math.max(columnCount, 1)}
+                  className="text-muted-foreground h-24 text-center"
+                >
+                  {emptyState ?? l.empty}
+                </TableCell>
+              </TableRow>
+            ) : (
+              <>
+                {bodyRows.map((row) => {
+                  const rowNode = (
+                    <TableRow
+                      className="group/row"
+                      data-state={row.getIsSelected() ? 'selected' : undefined}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id} className={columnClass(cell.column.id)}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                  // Right-click accelerator: the row itself is the context-menu
+                  // trigger, so the consumer supplies only the items and the core
+                  // owns the menu chrome.
+                  const defaultRow = contextActions ? (
+                    <ContextMenu>
+                      <ContextMenuTrigger render={rowNode} />
+                      <ContextMenuContent>
+                        {contextActions(row.original, { row, table })}
+                      </ContextMenuContent>
+                    </ContextMenu>
+                  ) : (
+                    rowNode
+                  );
+                  // Row-render seam: consumers can swap the default row for a
+                  // full-width utility row or a per-row wrapper the cell grid can't
+                  // express. Returning `defaultRow` keeps the built-in rendering.
+                  return (
+                    <React.Fragment key={row.id}>
+                      {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
+                    </React.Fragment>
+                  );
+                })}
+                {typeof footerRows === 'function' ? footerRows({ columnCount }) : footerRows}
+              </>
+            )}
+          </TableBody>
+        </Table>
+      </CardTable>
 
       {pagination && (
-        <TablePagination
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-          totalItems={pagination.totalItems ?? table.getPrePaginationRowModel().rows.length}
-          onPageChange={pagination.onPageChange}
-          onPageSizeChange={pagination.onPageSizeChange}
-          pageSizeOptions={pagination.pageSizeOptions}
-          getPageHref={pagination.getPageHref}
-          formatRange={pagination.formatRange}
-          navLabel={l.pagination?.navLabel}
-          previousLabel={l.pagination?.previousLabel}
-          nextLabel={l.pagination?.nextLabel}
-          pageSizeLabel={l.pagination?.pageSizeLabel}
-        />
+        <CardFooter className="border-t">
+          <TablePagination
+            className="w-full"
+            page={pagination.page}
+            pageSize={pagination.pageSize}
+            totalItems={pagination.totalItems ?? table.getPrePaginationRowModel().rows.length}
+            onPageChange={pagination.onPageChange}
+            onPageSizeChange={pagination.onPageSizeChange}
+            pageSizeOptions={pagination.pageSizeOptions}
+            getPageHref={pagination.getPageHref}
+            formatRange={pagination.formatRange}
+            navLabel={l.pagination?.navLabel}
+            previousLabel={l.pagination?.previousLabel}
+            nextLabel={l.pagination?.nextLabel}
+            pageSizeLabel={l.pagination?.pageSizeLabel}
+          />
+        </CardFooter>
+      )}
+    </>
+  );
+
+  // `plain` renders a chrome-less stack instead of a Card so the bands and
+  // CardTable consume the HOST card's spacing variables (--card-px /
+  // --card-gap): edge cells align with the host's padding regardless of its
+  // size, and a trailing CardTable's negative margin reaches through the
+  // host's bottom padding so the last row sits flush against the host's edge.
+  // With no header band the leading CardTable's negative margin would eat the
+  // host's flex gap too and press the rows against the preceding content, so
+  // the stack restores that one gap as padding.
+  return frame === 'plain' ? (
+    <div
+      data-slot="data-table"
+      className={cn(
+        'flex flex-col gap-(--card-gap)',
+        !(showHeader || showBulk) && 'pt-(--card-gap)',
+        className,
       )}
+    >
+      {bands}
     </div>
+  ) : (
+    <Card data-slot="data-table" className={className}>
+      {bands}
+    </Card>
   );
 }