@optiaxiom/react 3.4.1 → 3.4.3

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,11 +1,11 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CalendarGrid.css.ts.vanilla-C3oiSPp9.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CalendarGrid.css.ts.vanilla-CGuGZF4d.css";
 //#region src/calendar/CalendarGrid.css.ts
 var grid = recipeRuntime({ base: [{
 	display: "flex",
 	flexDirection: "column",
 	gap: "2"
-}, "_1nv4bf"] });
+}, "_11qxqd5"] });
 //#endregion
 export { grid };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CalendarMonths.css.ts.vanilla-DtOKdM16.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CalendarMonths.css.ts.vanilla-D8IOykx5.css";
 //#region src/calendar/CalendarMonths.css.ts
 var months = recipeRuntime({ base: [{
 	alignItems: "start",
 	gap: "16"
-}, "icd1py"] });
+}, "tt0dmw"] });
 //#endregion
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CalendarNextMonthButton.css.ts.vanilla-B7hHfu0K.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CalendarNextMonthButton.css.ts.vanilla-DzTRs2Ac.css";
 //#region src/calendar/CalendarNextMonthButton.css.ts
-var button = recipeRuntime({ base: "p5ttn5" });
+var button = recipeRuntime({ base: "_1a27bau" });
 //#endregion
 export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CalendarPreviousMonthButton.css.ts.vanilla-hgbJN7My.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CalendarPreviousMonthButton.css.ts.vanilla-f3ENjJ52.css";
 //#region src/calendar/CalendarPreviousMonthButton.css.ts
-var button = recipeRuntime({ base: "_1wkzy71" });
+var button = recipeRuntime({ base: "_1i1xoqt" });
 //#endregion
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Cover.css.ts.vanilla-B072yi42.css";
-import "./../../../../assets/Card.css.ts.vanilla-DGUHNWFB.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Cover.css.ts.vanilla-axEPGcvg.css";
+import "./../../../../assets/Card.css.ts.vanilla-DDV1iG8C.css";
 //#region src/card/Card.css.ts
 var card = recipeRuntime({ base: [
-	"_1v64ulh",
+	"greeqv",
 	{
 		alignItems: "start",
 		bg: "bg.default",
@@ -16,7 +16,7 @@ var card = recipeRuntime({ base: [
 		gap: "8",
 		p: "16"
 	},
-	"_18x42vn"
+	"_1yq8dj3"
 ] });
 //#endregion
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -5,7 +5,7 @@ import { card } from "./Card-css.js";
 import { CardProvider } from "./CardContext.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 //#region src/card/Card.tsx
 /**
 * Generic container for grouping related components together.
@@ -15,8 +15,8 @@ import { useId as useId$1 } from "@radix-ui/react-id";
 * @category container
 */
 const Card = forwardRef(({ children, className, ...props }, ref) => {
-	const descriptionId = useId$1();
-	const labelId = useId$1();
+	const descriptionId = useId();
+	const labelId = useId();
 	return /* @__PURE__ */ jsx(CardProvider, {
 		descriptionId,
 		labelId,

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CardCheckbox.css.ts.vanilla-C3DbaQmL.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CardCheckbox.css.ts.vanilla-BEDVD4qL.css";
 //#region src/card/CardCheckbox.css.ts
-var checkbox = recipeRuntime({ base: ["_19ugk13"] });
+var checkbox = recipeRuntime({ base: ["eezjgo"] });
 //#endregion
 export { checkbox };

package/dist/esm/packages/react/src/card/CardCheckbox.js

@@ -7,14 +7,14 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 //#region src/card/CardCheckbox.tsx
 /**
 * @extends Checkbox
 * @group Card
 */
 const CardCheckbox = forwardRef(({ className, onChange, ...props }, ref) => {
-	const labelPrefixId = useId$1();
+	const labelPrefixId = useId();
 	const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
 	const [checked, setChecked] = useControllableState({
 		caller: "@optiaxiom/react/CardCheckbox",

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CardHeader.css.ts.vanilla-lsFvjVOm.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CardHeader.css.ts.vanilla-DZxW7ZXI.css";
 //#region src/card/CardHeader.css.ts
 var addon = recipeRuntime({
 	base: [{
@@ -8,15 +8,15 @@ var addon = recipeRuntime({
 		gap: "8"
 	}],
 	variants: { slot: {
-		after: "rsh1mb",
-		before: "_1gk85za"
+		after: "_1bt9rag",
+		before: "_1urw1lo"
 	} }
 });
-var content = recipeRuntime({ base: [{ flex: "1" }, "phxdox"] });
+var content = recipeRuntime({ base: [{ flex: "1" }, "lhzm5p"] });
 var header = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	gap: "12",
 	justifyContent: "space-between"
-}, "yqy73x"] });
+}, "_3el141"] });
 //#endregion
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
 //#region src/card/CardImage.css.ts
 var image = recipeRuntime({ base: {
 	objectFit: "cover",

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CardPreview.css.ts.vanilla-BYjhwzdE.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CardPreview.css.ts.vanilla-Bg2_FoU7.css";
 //#region src/card/CardPreview.css.ts
 var overlay = recipeRuntime({ base: [{
 	display: "flex",
 	flexWrap: "wrap"
-}, "lpbnzw"] });
+}, "nk3vmg"] });
 var preview = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	display: "grid",
 	placeItems: "center"
-}, "_1ek4grj"] });
+}, "_1ncoghj"] });
 //#endregion
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,23 +1,23 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/ButtonGroup.css.ts.vanilla-A3sMS8iF.css";
-import "./../../../../assets/ToggleInput.css.ts.vanilla-DLshQmMB.css";
-import "./../../../../assets/CheckboxControl.css.ts.vanilla-BXhyNKGt.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/ButtonGroup.css.ts.vanilla-D20kX7Jg.css";
+import "./../../../../assets/ToggleInput.css.ts.vanilla-CuCEYKJw.css";
+import "./../../../../assets/CheckboxControl.css.ts.vanilla-Bleq06CD.css";
 //#region src/checkbox/CheckboxControl.css.ts
 var control = recipeRuntime({
-	base: [{ display: "grid" }, "ipfqyc"],
+	base: [{ display: "grid" }, "_27nvdt"],
 	variants: {
 		shift: {
 			false: {},
-			true: "_13m8prj"
+			true: "_1j70zw4"
 		},
 		size: {
-			sm: [{ rounded: "sm" }, "gybzd0"],
-			md: [{ rounded: "md" }, "c6qopl"]
+			sm: [{ rounded: "sm" }, "attsd7"],
+			md: [{ rounded: "md" }, "pryid9"]
 		}
 	}
 });
-var icon = recipeRuntime({ base: [{ transition: "all" }, "_1tthhcv"] });
+var icon = recipeRuntime({ base: [{ transition: "all" }, "_18g6bp3"] });
 var indicator = recipeRuntime({ base: [{
 	alignItems: "center",
 	display: "flex",

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Code.css.ts.vanilla-PEHRol6W.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Code.css.ts.vanilla-B84B9ZkU.css";
 //#region src/code/Code.css.ts
-var code = recipeRuntime({ base: [{ fontWeight: "600" }, "_18e6aik"] });
+var code = recipeRuntime({ base: [{ fontWeight: "600" }, "_1itxh5i"] });
 //#endregion
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/CommandItem.css.ts.vanilla-BXDneStA.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/CommandItem.css.ts.vanilla-BVEsYHWn.css";
 //#region src/command/CommandItem.css.ts
-var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "_1d0uwep"] });
+var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "_1qvcg"] });
 //#endregion
 export { detail };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Cover.css.ts.vanilla-B072yi42.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Cover.css.ts.vanilla-axEPGcvg.css";
 //#region src/cover/Cover.css.ts
 var cover = recipeRuntime({ variants: {
 	disabled: {
-		false: ["_6hv61n", "_173btrm"],
+		false: ["_8lrfhw", "fu34yi"],
 		true: {}
 	},
 	inset: {
-		false: "_17ew2tp",
-		true: "_1irmafn"
+		false: "yqxs8a",
+		true: "_7rghme"
 	}
 } });
 //#endregion

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,7 +1,7 @@
 "use client";
 import { Group } from "../group/Group.js";
 import { DataTableProvider } from "./DataTableContext.js";
-import { forwardRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/data-table/DataTable.tsx
 /**
@@ -13,6 +13,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const DataTable = forwardRef(({ children, table, ...props }, ref) => {
 	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const focusRequestRef = useRef(false);
 	return /* @__PURE__ */ jsx(Group, {
 		flexDirection: "column",
 		gap: "8",
@@ -21,6 +22,7 @@ const DataTable = forwardRef(({ children, table, ...props }, ref) => {
 		ref,
 		...props,
 		children: /* @__PURE__ */ jsx(DataTableProvider, {
+			focusRequestRef,
 			highlightedIndex,
 			setHighlightedIndex,
 			table,

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -1,39 +1,39 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/TableRow.css.ts.vanilla-CdLG6x1P.css";
-import "./../../../../assets/DataTableBody.css.ts.vanilla-DAPOpFEw.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/TableRow.css.ts.vanilla-BP4j389q.css";
+import "./../../../../assets/DataTableBody.css.ts.vanilla-BhNf6NLH.css";
 //#region src/data-table/DataTableBody.css.ts
 var cell = recipeRuntime({
 	base: [{
 		alignItems: "start",
 		display: "flex"
-	}, "tc9st7"],
+	}, "si1yhq"],
 	variants: {
 		pinned: {
-			left: "_1bj276q",
-			right: "mwlldm"
+			left: "gtr3mg",
+			right: "jpxgqk"
 		},
 		pinnedType: {
-			body: "ei5nfy",
+			body: "_1dtyonw",
 			header: {}
 		},
 		resizable: {
 			false: {},
-			true: "jval95"
+			true: "_1quayet"
 		}
 	}
 });
-var cellOffsetVar = "var(--h0lz08)";
-var cellSizeVar = "var(--crzapv)";
-var leftTotalSizeVar = "var(--hqy0dl)";
-var rightTotalSizeVar = "var(--_9f8h0y)";
+var cellOffsetVar = "var(--_156m1n6)";
+var cellSizeVar = "var(--ztf0e6)";
+var leftTotalSizeVar = "var(--cfonk)";
+var rightTotalSizeVar = "var(--_1nam0b4)";
 var root = recipeRuntime({ base: [{
 	display: "flex",
 	flexDirection: "column",
 	maxW: "full",
 	overflow: "hidden",
 	rounded: "lg"
-}, "qre1nt"] });
-var totalSizeVar = "var(--_1med8g2)";
+}, "rt0qnx"] });
+var totalSizeVar = "var(--_1muq0mr)";
 //#endregion
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

package/dist/esm/packages/react/src/data-table/DataTableBody.js

@@ -10,22 +10,23 @@ import { fakeRow } from "./DataTableRowContext.js";
 import { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar } from "./DataTableBody-css.js";
 import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
 import { DataTableRow } from "./DataTableRow.js";
-import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { flexRender } from "@tanstack/react-table";
 //#region src/data-table/DataTableBody.tsx
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const SKELETON_ROW_COUNT = 10;
 /**
 * @group DataTable
 */
 const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading, style, ...props }, outerRef) => {
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
-	const { table } = useDataTableContext("@optiaxiom/react/DataTableBody");
+	const { highlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableBody");
 	const { rows: rawRows } = table.getRowModel();
 	const rows = useMemo(() => {
 		let index = 0;
@@ -69,37 +70,62 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 		horizontal: true
 	});
 	const virtualColumns = columnVirtualizer.getVirtualItems();
-	const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+	/**
+	* Keep the highlighted row mounted while it is scrolled out of view so
+	* keyboard focus isn't dropped to the document body.
+	*/
+	const rangeExtractor = useCallback((range) => {
+		const indexes = defaultRangeExtractor(range);
+		return highlightedIndex >= 0 && highlightedIndex < range.count && !indexes.includes(highlightedIndex) ? [...indexes, highlightedIndex].sort((a, b) => a - b) : indexes;
+	}, [highlightedIndex]);
 	const rowVirtualizer = useVirtualizer({
 		count: rows.length,
 		enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
 		estimateSize: () => estimatedRowHeight,
 		getItemKey: (index) => rows[index].id,
-		getScrollElement: () => scrollContainerRef.current
+		getScrollElement: () => scrollContainerRef.current,
+		rangeExtractor
 	});
 	const virtualRows = rowVirtualizer.getVirtualItems();
+	/**
+	* Virtualized rows and columns are missing from the DOM, so assistive
+	* technology relies on these counts and indexes for the real table size.
+	*/
+	const headerGroups = table.getHeaderGroups();
+	const totalResizableSize = headerGroups[0]?.headers.reduce((sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0), 0) ?? 0;
+	const leadingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice(0, virtualColumns[0]?.index ?? 0), totalResizableSize) : void 0;
+	const trailingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice((virtualColumns.at(-1)?.index ?? centerColumns.length) + 1), totalResizableSize) : void 0;
+	const columnIndexes = new Map([
+		...table.getLeftVisibleLeafColumns(),
+		...centerColumns,
+		...table.getRightVisibleLeafColumns()
+	].map((column, index) => [column.id, index + 1]));
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		style: {
 			...assignInlineVars({
 				[leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
 				[rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
-				[totalSizeVar]: (table.getHeaderGroups()[0]?.headers.reduce((sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0), 0) ?? 0).toString()
+				[totalSizeVar]: totalResizableSize.toString()
 			}),
 			...style
 		},
 		...root({}, className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Table, {
+			"aria-colcount": columnIndexes.size,
+			"aria-rowcount": headerGroups.length + (loading === true ? SKELETON_ROW_COUNT : rows.length),
 			layout: "fixed",
 			onScroll: calculateScrollTimeline,
 			ref: scrollContainerRef,
 			children: [/* @__PURE__ */ jsx(TableHeader, {
 				display: "grid",
 				pinned: true,
-				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+				children: headerGroups.map((headerGroup, headerIndex) => /* @__PURE__ */ jsx(TableRow, {
+					"aria-rowindex": headerIndex + 1,
 					display: "flex",
 					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(DataTableHeaderCell, {
+						"aria-colindex": columnIndexes.get(header.column.id),
 						header,
 						pinned: !!header.column.getIsPinned(),
 						style: { ...assignInlineVars({
@@ -117,7 +143,7 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 			}), /* @__PURE__ */ jsx(TableBody, {
 				display: "grid",
 				style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-				children: (loading === true ? Array.from({ length: 10 }, (_, rowIndex) => ({
+				children: (loading === true ? Array.from({ length: SKELETON_ROW_COUNT }, (_, rowIndex) => ({
 					row: fakeRow(table, rowIndex),
 					virtualRow: void 0
 				})) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
@@ -130,6 +156,7 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 					row,
 					virtualRow: void 0
 				}))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(DataTableRow, {
+					"aria-rowindex": headerGroups.length + (virtualRow?.index ?? index) + 1,
 					"data-index": virtualRow?.index,
 					display: "flex",
 					index: virtualRow?.index ?? index,
@@ -140,40 +167,52 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 						transform: `translateY(${virtualRow.start}px)`
 					} : void 0,
 					children: [
-						row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(TableCell, {
+						row.getLeftVisibleCells().map((cell$2) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$2.column.id),
 							pinned: true,
 							style: { ...assignInlineVars({
-								[cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-								[cellSizeVar]: `${cell$1.column.getSize()}`
+								[cellOffsetVar]: `${cell$2.column.getStart("left")}px`,
+								[cellSizeVar]: `${cell$2.column.getSize()}`
 							}) },
 							...cell({
 								pinned: "left",
 								pinnedType: "body",
-								resizable: cell$1.column.getCanResize()
+								resizable: cell$2.column.getCanResize()
 							}),
-							children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-						}, cell$1.id)),
-						columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-						(columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-							return row.getCenterVisibleCells()[virtualCell.index];
-						}) : row.getCenterVisibleCells()).map((cell$2) => /* @__PURE__ */ jsx(TableCell, {
-							style: { ...assignInlineVars({ [cellSizeVar]: `${cell$2.column.getSize()}` }) },
-							...cell({ resizable: cell$2.column.getCanResize() }),
 							children: flexRender(cell$2.column.columnDef.cell, cell$2.getContext())
 						}, cell$2.id)),
-						row.getRightVisibleCells().map((cell$3) => /* @__PURE__ */ jsx(TableCell, {
+						leadingSpacerStyle && /* @__PURE__ */ jsx(TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: leadingSpacerStyle
+						}),
+						(columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+							return row.getCenterVisibleCells()[virtualCell.index];
+						}) : row.getCenterVisibleCells()).map((cell$3) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$3.column.id),
+							style: { ...assignInlineVars({ [cellSizeVar]: `${cell$3.column.getSize()}` }) },
+							...cell({ resizable: cell$3.column.getCanResize() }),
+							children: flexRender(cell$3.column.columnDef.cell, cell$3.getContext())
+						}, cell$3.id)),
+						trailingSpacerStyle && /* @__PURE__ */ jsx(TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: trailingSpacerStyle
+						}),
+						row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$1.column.id),
 							pinned: true,
 							style: { ...assignInlineVars({
-								[cellOffsetVar]: `${cell$3.column.getStart("right")}px`,
-								[cellSizeVar]: `${cell$3.column.getSize()}`
+								[cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+								[cellSizeVar]: `${cell$1.column.getSize()}`
 							}) },
 							...cell({
 								pinned: "right",
 								pinnedType: "body",
-								resizable: cell$3.column.getCanResize()
+								resizable: cell$1.column.getCanResize()
 							}),
-							children: flexRender(cell$3.column.columnDef.cell, cell$3.getContext())
-						}, cell$3.id))
+							children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+						}, cell$1.id))
 					]
 				}, row.id))
 			})]
@@ -181,5 +220,22 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 	});
 });
 DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
+/**
+* Sizes a cell standing in for unrendered center columns so body rows match
+* the header's width and split its free space in the same ratio.
+*/
+const getSpacerStyle = (columns, totalResizableSize) => {
+	if (columns.length === 0) return;
+	let size = 0;
+	let resizableSize = 0;
+	for (const column of columns) {
+		size += column.getSize();
+		resizableSize += column.getCanResize() ? column.getSize() : 0;
+	}
+	return {
+		flexGrow: totalResizableSize ? resizableSize / totalResizableSize : 0,
+		width: `${size}px`
+	};
+};
 //#endregion
 export { DataTableBody };

package/dist/esm/packages/react/src/data-table/DataTableCheckbox.js

@@ -7,7 +7,7 @@ import { forwardRef, useEffect, useRef } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 //#region src/data-table/DataTableCheckbox.tsx
 /**
@@ -16,7 +16,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 const DataTableCheckbox = forwardRef(({ children, disabled, visible, ...props }, outerRef) => {
 	const { table } = useDataTableContext("@optiaxiom/react/DataTableCheckbox");
 	const { labelId, row, setSelector } = useDataTableRowContext("@optiaxiom/react/DataTableCheckbox");
-	const labelPrefixId = useId$1();
+	const labelPrefixId = useId();
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
 	useEffect(() => {

package/dist/esm/packages/react/src/data-table/DataTableExpandableCell.js

@@ -7,7 +7,7 @@ import { IconAngleDown, IconChevronRight } from "@optiaxiom/icons";
 import "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 //#region src/data-table/DataTableExpandableCell.tsx
 /**
 * Table cell component with expandable row functionality.
@@ -16,7 +16,7 @@ import { useId as useId$1 } from "@radix-ui/react-id";
 * @experimental
 */
 function DataTableExpandableCell({ children, getValue, row }) {
-	const labelPrefixId = useId$1();
+	const labelPrefixId = useId();
 	const { labelId } = useDataTableRowContext("@optiaxiom/react/DataTableExpandableCell");
 	return /* @__PURE__ */ jsxs(Group, {
 		alignItems: "start",

package/dist/esm/packages/react/src/data-table/DataTableFooter-css.js

@@ -1,9 +1,9 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DataTableFooter.css.ts.vanilla-DJyeYcXl.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DataTableFooter.css.ts.vanilla-DbdQDqgy.css";
 //#region src/data-table/DataTableFooter.css.ts
 var addon = recipeRuntime({
-	base: "_19r1f36",
+	base: "_13mdqe7",
 	variants: { slot: {
 		after: { textAlign: "end" },
 		before: {}

package/dist/esm/packages/react/src/data-table/DataTableFooter.js

@@ -10,7 +10,7 @@ import { SelectTrigger } from "../select/SelectTrigger.js";
 import { addon } from "./DataTableFooter-css.js";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 //#region src/data-table/DataTableFooter.tsx
 const DEFAULT_PAGE_SIZES = [
 	"10",
@@ -28,7 +28,7 @@ const DEFAULT_PAGE_SIZES = [
 const DataTableFooter = forwardRef(({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
 	const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
 	const { pagination } = table.getState();
-	const pageSizeId = useId$1();
+	const pageSizeId = useId();
 	return /* @__PURE__ */ jsxs(Group, {
 		alignSelf: "stretch",
 		fontSize: "md",