@versini/ui-datagrid 0.4.7 → 0.6.0

package/dist/DataGrid/DataGrid.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProps } from "./DataGridTypes";
-export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, noBorder, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -27,7 +27,7 @@ import { DataGridContext } from "./DataGridContext.js";
 
 /* =============================================================================
  * DataGrid (main component)
- * ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
+ * ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, noBorder = false, ...rest })=>{
     /**
 	 * Track registered header/footer components via context registration. Uses
 	 * counter-based tracking to properly handle multiple instances. Components
@@ -76,7 +76,7 @@ import { DataGridContext } from "./DataGridContext.js";
             stickyHeader: effectiveStickyHeader,
             stickyFooter: effectiveStickyFooter,
             loading: Boolean(loading),
-            hasColumns: Boolean(columns)
+            noBorder
         }), [
         mode,
         className,
@@ -84,7 +84,7 @@ import { DataGridContext } from "./DataGridContext.js";
         effectiveStickyHeader,
         effectiveStickyFooter,
         loading,
-        columns
+        noBorder
     ]);
     const contextValue = useMemo(()=>({
             mode,

package/dist/DataGrid/DataGridContext.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/DataGridTypes.d.ts

@@ -78,6 +78,11 @@ export type DataGridProps = {
      * @example ["200px", "1fr", "min-content"] - Fixed, flexible, and content-sized columns
      */
     columns?: ReadonlyArray<DataGridColumnSize>;
+    /**
+     * Whether or not to render the DataGrid with a border.
+     * @default false
+     */
+    noBorder?: boolean;
 };
 export type DataGridHeaderProps = {
     /**

package/dist/DataGrid/DataGridTypes.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/useAnimatedHeight.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/DataGridBody.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -36,7 +36,7 @@ import { useColumnMeasurement } from "./useColumnMeasurement.js";
     const bodyRef = useRef(null);
     // Measure column widths for sticky header/footer sync.
     useColumnMeasurement(bodyRef, children);
-    const bodyClass = getBodyClass(Boolean(ctx.columns), className);
+    const bodyClass = getBodyClass(className);
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,

package/dist/DataGridBody/getBodyClass.d.ts

@@ -1,10 +1,9 @@
 /**
- * Get the CSS class for a DataGrid body element. When columns are provided, use
- * display:contents so the body doesn't interfere with the grid flow. Rows will
- * use subgrid.
+ * Get the CSS class for a DataGrid body element. Uses display:contents so the
+ * body doesn't interfere with the grid flow. Rows will use subgrid when columns
+ * are provided, or define their own grid otherwise.
  *
- * @param hasColumns - Whether the DataGrid has columns defined
  * @param className - Additional class name to merge
  *
  */
-export declare function getBodyClass(hasColumns: boolean | undefined, className?: string): string;
+export declare function getBodyClass(className?: string): string;

package/dist/DataGridBody/getBodyClass.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -10,15 +10,14 @@ import clsx from "clsx";
 ;// CONCATENATED MODULE: ./src/DataGridBody/getBodyClass.ts
 
 /**
- * Get the CSS class for a DataGrid body element. When columns are provided, use
- * display:contents so the body doesn't interfere with the grid flow. Rows will
- * use subgrid.
+ * Get the CSS class for a DataGrid body element. Uses display:contents so the
+ * body doesn't interfere with the grid flow. Rows will use subgrid when columns
+ * are provided, or define their own grid otherwise.
  *
- * @param hasColumns - Whether the DataGrid has columns defined
  * @param className - Additional class name to merge
  *
- */ function getBodyClass(hasColumns, className) {
-    return hasColumns ? clsx("contents", className) : clsx("flex flex-col", className);
+ */ function getBodyClass(className) {
+    return clsx("contents", className);
 }
 
 export { getBodyClass };

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/useColumnMeasurement.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/DataGridCell.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -97,8 +97,9 @@ import { getCellClasses } from "../utilities/classes.js";
                             onClick: handleSort,
                             noBorder: true,
                             focusMode: focusMode,
-                            mode: mode,
+                            mode: "light",
                             labelRight: children,
+                            noBackground: true,
                             children: getSortIcon()
                         }),
                         slotRight

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/DataGridConstants.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -42,7 +42,6 @@ DataGridFooter.displayName = "DataGridFooter";
  * Inner component to handle the useEffect for registering footer. Separated to
  * avoid hooks inside Consumer render prop.
  */ const DataGridFooterInner = ({ className, ctx, children, ...rest })=>{
-    const hasColumns = Boolean(ctx.columns);
     const footerRef = useRef(null);
     /**
 	 * Register this footer with the parent DataGrid on mount. This enables sticky
@@ -88,8 +87,7 @@ DataGridFooter.displayName = "DataGridFooter";
                 className,
                 stickyFooter: ctx.stickyFooter,
                 mode: ctx.mode,
-                blurEffect: ctx.blurEffect,
-                hasColumns
+                blurEffect: ctx.blurEffect
             }),
             ...rest,
             children: children

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -46,7 +46,6 @@ DataGridHeader.displayName = "DataGridHeader";
  * Inner component to handle the useEffect for registering captionId and header.
  * Separated to avoid hooks inside Consumer render prop.
  */ const DataGridHeaderInner = ({ caption, captionClassName, captionId, className, ctx, children, ...rest })=>{
-    const hasColumns = Boolean(ctx.columns);
     const headerRef = useRef(null);
     /**
 	 * Register this header with the parent DataGrid on mount. This enables sticky
@@ -107,8 +106,7 @@ DataGridHeader.displayName = "DataGridHeader";
                 className,
                 stickyHeader: ctx.stickyHeader,
                 mode: ctx.mode,
-                blurEffect: ctx.blurEffect,
-                hasColumns
+                blurEffect: ctx.blurEffect
             }),
             ...rest,
             children: [
@@ -116,7 +114,9 @@ DataGridHeader.displayName = "DataGridHeader";
                     id: captionId,
                     className: getCaptionClasses({
                         captionClassName,
-                        hasColumns
+                        mode: ctx.mode,
+                        hasBlur: Boolean(ctx.blurEffect && ctx.blurEffect !== "none"),
+                        stickyHeader: Boolean(ctx.stickyHeader)
                     }),
                     children: caption
                 }),

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/DataGridInfiniteBody.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -313,7 +313,7 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
     ]);
     // Measure column widths for sticky header/footer sync.
     useColumnMeasurement(bodyRef, renderedContent);
-    const bodyClass = getBodyClass(Boolean(ctx.columns), className);
+    const bodyClass = getBodyClass(className);
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,

package/dist/DataGridInfinite/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridRow/DataGridRow.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -90,7 +90,6 @@ import { getRowClasses } from "../utilities/classes.js";
                     className,
                     cellWrapper,
                     isLastRow,
-                    hasColumns: Boolean(columns),
                     stickyHeader,
                     stickyFooter
                 }),

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/sortingUtils.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 

package/dist/utilities/classes.d.ts

@@ -11,6 +11,10 @@ import { type BlurEffect, type CellWrapperType, type ThemeMode } from "../DataGr
 export declare const getTextColorClasses: ({ mode }: {
     mode: ThemeMode;
 }) => string;
+export declare const getTextColorClassesForHeaderFooter: ({ mode, hasBlur, }: {
+    mode: ThemeMode;
+    hasBlur: boolean;
+}) => string;
 /**
  * Surface background classes (main container backgrounds). Used by: DataGrid
  * wrapper.
@@ -22,8 +26,7 @@ export declare const getSurfaceBackgroundClasses: ({ mode }: {
  * Header/footer background classes (with optional blur transparency). Used by:
  * DataGridHeader, DataGridFooter.
  */
-export declare const getHeaderFooterBackgroundClasses: ({ mode, hasBlur, sticky, }: {
-    mode: ThemeMode;
+export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
     hasBlur: boolean;
     sticky: boolean;
 }) => string;
@@ -65,11 +68,11 @@ export declare const getOverlayClasses: ({ mode }: {
 /**
  * Generates classes for the main DataGrid wrapper and grid.
  */
-export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns, }: {
+export declare const getDataGridClasses: ({ mode, noBorder, className, wrapperClassName, stickyHeader, stickyFooter, loading, }: {
     mode: ThemeMode;
+    noBorder?: boolean;
     className?: string;
     loading?: boolean;
-    hasColumns?: boolean;
     stickyFooter?: boolean;
     stickyHeader?: boolean;
     wrapperClassName?: string;
@@ -85,28 +88,33 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
 /**
  * Generates classes for the DataGridHeader wrapper.
  */
-export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, hasColumns, }: {
+export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, }: {
     mode: ThemeMode;
     blurEffect?: BlurEffect;
     className?: string;
-    hasColumns?: boolean;
     stickyHeader?: boolean;
 }) => string;
 /**
  * Generates classes for the caption element inside DataGridHeader.
+ * Needs explicit styling since the parent may use `display: contents`
+ * when not sticky, which doesn't render a box and breaks CSS inheritance.
  */
-export declare const getCaptionClasses: ({ captionClassName, hasColumns, }: {
+export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stickyHeader, }: {
     captionClassName?: string;
-    hasColumns?: boolean;
+    mode: ThemeMode;
+    hasBlur: boolean;
+    stickyHeader: boolean;
 }) => string;
 /**
  * Generates classes for the DataGridFooter.
  */
-export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, hasColumns, }: {
+/**
+ * Generates classes for the DataGridFooter.
+ */
+export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, }: {
     mode: ThemeMode;
     blurEffect?: BlurEffect;
     className?: string;
-    hasColumns?: boolean;
     stickyFooter?: boolean;
 }) => string;
 /**
@@ -114,12 +122,11 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
  * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
  * :nth-child selectors, which don't work with wrapper elements.
  */
-export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, hasColumns, stickyHeader, stickyFooter, }: {
+export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter, }: {
     mode: ThemeMode;
     cellWrapper?: CellWrapperType;
     className?: string;
     isLastRow?: boolean;
-    hasColumns?: boolean;
     stickyHeader?: boolean;
     stickyFooter?: boolean;
 }) => string;

package/dist/utilities/classes.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.7
+  @versini/ui-datagrid v0.6.0
   © 2026 gizmette.com
 */
 
@@ -20,12 +20,21 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
  */ /**
  * Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
  * spinner, header/footer copy.
- */ const getTextColorClasses = ({ mode })=>clsx({
+ */ const getTextColorClasses = ({ mode })=>{
+    return clsx({
         "text-copy-light": mode === "dark",
         "text-copy-dark": mode === "light",
         "text-copy-light dark:text-copy-dark": mode === "system",
         "text-copy-dark dark:text-copy-light": mode === "alt-system"
     });
+};
+const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
+    return clsx({
+        "text-copy-dark": mode === "dark" && !hasBlur || mode === "light",
+        "text-copy-light dark:text-copy-dark": mode === "system" && hasBlur,
+        "text-copy-dark dark:text-copy-dark": (mode === "system" || mode === "alt-system") && !hasBlur
+    });
+};
 /**
  * Surface background classes (main container backgrounds). Used by: DataGrid
  * wrapper.
@@ -38,18 +47,14 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 /**
  * Header/footer background classes (with optional blur transparency). Used by:
  * DataGridHeader, DataGridFooter.
- */ const getHeaderFooterBackgroundClasses = ({ mode, hasBlur, sticky })=>clsx({
+ */ const getHeaderFooterBackgroundClasses = ({ hasBlur, sticky })=>{
+    return clsx({
         // Semi-transparent for blur effect.
-        "bg-surface-darkest/50": hasBlur && sticky && (mode === "dark" || mode === "system"),
-        "bg-surface-medium/50": hasBlur && sticky && (mode === "light" || mode === "alt-system"),
-        "dark:bg-surface-medium/50": hasBlur && sticky && mode === "system",
-        "dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
+        "bg-surface-medium/50 dark:bg-surface-medium/50": hasBlur && sticky,
         // Solid backgrounds.
-        "bg-surface-darkest": !hasBlur && (mode === "dark" || mode === "system"),
-        "bg-surface-medium-light": !hasBlur && (mode === "light" || mode === "alt-system"),
-        "dark:bg-surface-medium-light": !hasBlur && mode === "system",
-        "dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
+        "bg-surface-medium-light dark:bg-surface-medium-light": !hasBlur
     });
+};
 /**
  * Border color classes for rows. Used by: DataGridRow.
  */ const getBorderClasses = ({ mode })=>clsx({
@@ -90,7 +95,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
     });
 /**
  * Generates classes for the main DataGrid wrapper and grid.
- */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns })=>{
+ */ const getDataGridClasses = ({ mode, noBorder, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
     const overlayClasses = loading ? getOverlayClasses({
         mode
     }) : null;
@@ -101,6 +106,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
         loadingWrapper: overlayClasses?.loadingWrapper ?? "",
         loadingText: overlayClasses?.loadingText ?? "",
         wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
+            "ring-2 ring-table-dark": !noBorder,
             "overflow-x-auto": !hasSticky && !loading,
             "overflow-hidden flex flex-col": hasSticky || loading
         }, getSurfaceBackgroundClasses({
@@ -109,74 +115,91 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
             mode
         }), wrapperClassName),
         scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
-        grid: clsx("my-0 w-full text-left text-sm", hasColumns ? "grid" : "flex flex-col", className, getTextColorClasses({
+        grid: clsx("my-0 w-full text-left text-sm grid", className, getTextColorClasses({
             mode
         }))
     };
 };
 /**
  * Generates classes for the DataGridHeader wrapper.
- */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect, hasColumns })=>{
+ */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
     const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
-    if (hasColumns && !stickyHeader) {
+    if (!stickyHeader) {
         return clsx("contents", getHeaderFooterBackgroundClasses({
-            mode,
             hasBlur,
-            sticky: Boolean(stickyHeader)
-        }), getTextColorClasses({
-            mode
+            sticky: false
+        }), getTextColorClassesForHeaderFooter({
+            mode,
+            hasBlur
         }), className);
     }
-    return clsx("flex flex-col", "border-b border-table-medium shadow-md", {
-        "absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
-    }, getHeaderFooterBackgroundClasses({
-        mode,
+    return clsx("flex flex-col", "border-b border-table-medium shadow-md", "absolute left-0 right-0 z-20 top-0 rounded-t-lg", getHeaderFooterBackgroundClasses({
         hasBlur,
-        sticky: Boolean(stickyHeader)
-    }), getTextColorClasses({
-        mode
+        sticky: true
+    }), getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
     }), stickyHeader && getBlurClasses({
         blurEffect
     }), className);
 };
 /**
  * Generates classes for the caption element inside DataGridHeader.
- */ const getCaptionClasses = ({ captionClassName, hasColumns })=>{
-    return clsx("py-2 text-sm text-center font-bold", hasColumns && "col-span-full", captionClassName);
+ * Needs explicit styling since the parent may use `display: contents`
+ * when not sticky, which doesn't render a box and breaks CSS inheritance.
+ */ const getCaptionClasses = ({ captionClassName, mode, hasBlur, stickyHeader })=>{
+    /**
+	 * When sticky, the header wrapper renders a box with background/text colors.
+	 * When NOT sticky, the header uses `display: contents` so the caption needs
+	 * its own background and text color styling.
+	 */ const needsOwnBackground = !stickyHeader;
+    return clsx("py-2 text-sm text-center font-bold col-span-full", getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
+    }), needsOwnBackground && getHeaderFooterBackgroundClasses({
+        hasBlur,
+        sticky: false
+    }), captionClassName);
 };
 /**
  * Generates classes for the DataGridFooter.
- */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect, hasColumns })=>{
-    if (hasColumns && !stickyFooter) {
-        return clsx("contents", className);
-    }
+ */ /**
+ * Generates classes for the DataGridFooter.
+ */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
     const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
+    if (!stickyFooter) {
+        return clsx("contents", getTextColorClassesForHeaderFooter({
+            mode,
+            hasBlur
+        }), className);
+    }
     return clsx("flex flex-col", "border-t border-table-medium", {
         "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]": stickyFooter
     }, getHeaderFooterBackgroundClasses({
-        mode,
         hasBlur,
         sticky: Boolean(stickyFooter)
     }), stickyFooter && getBlurClasses({
         blurEffect
+    }), getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
     }), className);
 };
 /**
  * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
  * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
  * :nth-child selectors, which don't work with wrapper elements.
- */ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, hasColumns, stickyHeader, stickyFooter })=>{
+ */ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter })=>{
     const layoutClass = "group grid items-center";
     if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
         /**
-		 * When hasColumns is true and not sticky, the parent wrapper uses
-		 * `display: contents` which doesn't render a box. In this case, we need
-		 * to apply background and border styling directly to the row.
+		 * When not sticky, the parent wrapper uses `display: contents` which
+		 * doesn't render a box. In this case, we need to apply background and
+		 * border styling directly to the row.
 		 */ const isHeader = cellWrapper === CellWrapper.HEADER;
-        const parentUsesContents = isHeader ? hasColumns && !stickyHeader : hasColumns && !stickyFooter;
+        const parentUsesContents = isHeader ? !stickyHeader : !stickyFooter;
         if (parentUsesContents) {
             return clsx(layoutClass, getHeaderFooterBackgroundClasses({
-                mode,
                 hasBlur: false,
                 sticky: false
             }), {
@@ -242,4 +265,4 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
     return "gridcell";
 };
 
-export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses };
+export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses, getTextColorClassesForHeaderFooter };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.4.7",
+	"version": "0.6.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -67,7 +67,7 @@
 		"build:js": "rslib build",
 		"build:types": "echo 'Types now built with rslib'",
 		"build": "npm-run-all --serial clean build:check build:js",
-		"clean": "rimraf dist tmp coverage",
+		"clean": "rimraf dist tmp test-results playwright-report playwright/.cache coverage",
 		"dev:js": "rslib build --watch",
 		"dev:types": "echo 'Types now watched with rslib'",
 		"dev": "rslib build --watch",
@@ -77,6 +77,11 @@
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:coverage": "vitest run --coverage",
+		"test:update": "vitest run --update",
+		"test:visual": "playwright test -c playwright-ct.config.ts",
+		"test:visual:report": "playwright show-report playwright-report",
+		"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui",
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
@@ -94,5 +99,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "060ac013ddc251fea22063336302f5f804673301"
+	"gitHead": "a933817303d7fbc7682562b7db2579f93c1b9b42"
 }