@galaxy-io/dls 2.0.1 → 2.0.2

package/dist/table/InfiniteSpreadsheet.js

@@ -754,7 +754,7 @@ var InfiniteSpreadsheetInner = forwardRef(function InfiniteSpreadsheet(props, re
 		}), showAddRow && isMounted && /* @__PURE__ */ jsx(AddRow, {
 			role: "row",
 			"aria-rowindex": rowCount + 2,
-			className: "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t",
+			className: "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo",
 			style: startStyle(totalSize),
 			children: /* @__PURE__ */ jsx(AddRowCell, {
 				role: "gridcell",

package/dist/table/TableCore.js

@@ -289,26 +289,71 @@ var ROW_SELECTED_CSS = "gx-TableCore-ROW_SELECTED_CSS-r1g7lrfg";
 var ROW_ACTIVE_CSS = "gx-TableCore-ROW_ACTIVE_CSS-r10dstoh";
 /** @internal The last row, or a row whose panel is open: no bottom hairline. */
 var ROW_NO_BORDER_CSS = "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs";
+/**
+* The rows end above the bottom of the scroll box (a full-height table with a few rows): the last
+* row keeps its hairline, so the list reads as finished instead of floating in empty space. Set by
+* `useRowsEndAboveBottom`; it outranks `ROW_NO_BORDER_CSS` and the panel rule by specificity, and
+* sits inside each row's fixed height, so nothing moves when it toggles.
+*/
+var ROWS_END_ABOVE_BOTTOM_CSS = "gx-TableCore-ROWS_END_ABOVE_BOTTOM_CSS-rwbqwrq";
+/**
+* Whether the table's rows end above the bottom of its scroll box. The last row drops its hairline
+* only when it lands on the box's bottom edge, where the container's frame (or a scrolled table's
+* end) already draws the line; above the edge, the hairline closes the list. Watches the scroll box
+* and every row group, so rows loading, expanding or the box resizing re-measure it.
+*/
+function useRowsEndAboveBottom(scrollRef, tableRef, isEnabled, bodyKey) {
+	const [isAbove, setIsAbove] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const scroll = scrollRef.current;
+		const table = tableRef.current;
+		if (!isEnabled || scroll === null || table === null) {
+			setIsAbove(false);
+			return;
+		}
+		const measure = () => {
+			const rows = table.querySelectorAll(":scope > tbody > tr");
+			const last = rows[rows.length - 1];
+			if (last === void 0) {
+				setIsAbove(false);
+				return;
+			}
+			setIsAbove(last.getBoundingClientRect().bottom - scroll.getBoundingClientRect().top + scroll.scrollTop < scroll.clientHeight - 1);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroll);
+		for (const body of Array.from(table.tBodies)) observer.observe(body);
+		return () => observer.disconnect();
+	}, [
+		scrollRef,
+		tableRef,
+		isEnabled,
+		bodyKey
+	]);
+	return isAbove;
+}
 /** The last expanded panel: no bottom hairline. */
-var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-ewbqwrq";
+var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-e1jxalmm";
 /** The dragged header while reordering. 0.5 is a state, not a color token. */
-var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1jxalmm";
+var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1fx3qlj";
 /** The label wrapper grows when a trailing control (column actions) follows it. */
-var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l1fx3qlj";
-var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-d2nd1ne";
-var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-darqcf0";
+var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l2nd1ne";
+var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-darqcf0";
+var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-d132cb1v";
 /** Shows on hover, while dragged and on keyboard focus; straddles the column edge. */
-var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c132cb1v";
+var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c1vn45v6";
 /** Hovering a header cell reveals its resize handle. */
-var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h1vn45v6";
+var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h14za3v2";
 /** The expand caret button: a square of its rung. */
-var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e14za3v2";
+var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e1w0t3ir";
 /** @internal A virtual body: as tall as every row, which are positioned inside it. */
-var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-v1w0t3ir";
+var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-vb9km4t";
 /** @internal A virtual row, placed at `--gx-table-row-start`. */
-var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t";
+var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo";
 /** @internal Default cells and footer strings: shrink to truncate. */
-var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-c1emgwoo";
+var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-cw38cm1";
 /** "Oct 3, 2026": the DateInput default. */
 var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
 /** @internal The default cell renderer: one truncating line of formatted text. */
@@ -744,6 +789,9 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 	const colCount = leadingCount + visibleColumns.length + (hasTrailingColumn ? 1 : 0);
 	const surface = useTableSurface(ownRootRef);
 	const { width: viewportWidth } = useElementClientSize(scrollRef);
+	const tableRef = useRef(null);
+	const hasFooterRow = columnLayout.visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const doRowsEndAboveBottom = useRowsEndAboveBottom(scrollRef, tableRef, !hasFooterRow && (rowCount > 0 || isLoading), `${rowCount}:${isLoading}:${error ?? ""}`);
 	const sentinelRef = useInfiniteScrollSentinel({
 		scrollRef,
 		onEndReached,
@@ -872,7 +920,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		if (drag.beforeId === null && ids.at(-1) === columnId) return "end";
 		return null;
 	};
-	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const hasFooter = hasFooterRow;
 	const footerRowIndex = ariaRowCount;
 	const variables = { ...columnLayout.variables };
 	if (viewportWidth !== void 0) variables["--gx-table-viewport-width"] = `${viewportWidth}px`;
@@ -948,6 +996,8 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		children: [/* @__PURE__ */ jsxs(Scroll, {
 			ref: scrollRef,
 			children: [/* @__PURE__ */ jsxs(TableElement, {
+				ref: tableRef,
+				className: cx(doRowsEndAboveBottom && ROWS_END_ABOVE_BOTTOM_CSS),
 				...tableAria,
 				role,
 				...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
@@ -1043,7 +1093,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 										size: metrics.textSize,
 										weight: TextWeight.MEDIUM,
 										lineClamp: 1,
-										className: "gx-TableCore-CELL_TEXT_CSS-c1emgwoo",
+										className: "gx-TableCore-CELL_TEXT_CSS-cw38cm1",
 										children: column.footer
 									}) : column.footer
 								}, column.id)),

package/dist/theme/tokens/light.js

@@ -30,12 +30,12 @@ var LIGHT_THEME = {
 		background: {
 			base: "#ffffff",
 			primary: "#fafafb",
-			secondary: "#f1f1f2",
-			tertiary: "#ededee",
+			secondary: "#f3f3f4",
+			tertiary: "#efeff0",
 			hovered: "#f5f5f5",
 			pressed: "#eeeeee",
 			selected: "#e2e2e2",
-			disabled: "#f1f1f2",
+			disabled: "#f3f3f4",
 			success: "#ecfcf0",
 			warning: "#fff8eb",
 			error: "#fff2f2",
@@ -119,7 +119,7 @@ var LIGHT_THEME = {
 				pressed: "#494949"
 			},
 			neutral: {
-				background: "#f1f1f2",
+				background: "#f3f3f4",
 				text: "#101010",
 				hovered: "#e5e5e6",
 				pressed: "#dcdcdd"

package/dist/tokens.css

@@ -386,12 +386,12 @@
 [data-gx-theme="light"] {
   --gx-color-background-base: #ffffff;
   --gx-color-background-primary: #fafafb;
-  --gx-color-background-secondary: #f1f1f2;
-  --gx-color-background-tertiary: #ededee;
+  --gx-color-background-secondary: #f3f3f4;
+  --gx-color-background-tertiary: #efeff0;
   --gx-color-background-hovered: #f5f5f5;
   --gx-color-background-pressed: #eeeeee;
   --gx-color-background-selected: #e2e2e2;
-  --gx-color-background-disabled: #f1f1f2;
+  --gx-color-background-disabled: #f3f3f4;
   --gx-color-background-success: #ecfcf0;
   --gx-color-background-warning: #fff8eb;
   --gx-color-background-error: #fff2f2;
@@ -466,7 +466,7 @@
   --gx-color-solid-primary-text: #ffffff;
   --gx-color-solid-primary-hovered: #2d2d2d;
   --gx-color-solid-primary-pressed: #494949;
-  --gx-color-solid-neutral-background: #f1f1f2;
+  --gx-color-solid-neutral-background: #f3f3f4;
   --gx-color-solid-neutral-text: #101010;
   --gx-color-solid-neutral-hovered: #e5e5e6;
   --gx-color-solid-neutral-pressed: #dcdcdd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",