@galaxy-io/dls 2.0.1 → 2.1.0

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/ThemeSwitcher.d.ts

@@ -12,12 +12,28 @@ export declare enum ThemeSwitcherSize {
     /** 40px control. */
     X_LARGE = "X_LARGE"
 }
+/** Surface set; ThemeSwitcher passes the step to ToggleInput. */
+export declare enum ThemeSwitcherVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
 export interface ThemeSwitcherProps extends AriaAttributes {
     /**
      * Control rung: 20 / 24 / 32 / 36 / 40px tall.
      * @default ThemeSwitcherSize.MEDIUM
      */
     size?: ThemeSwitcherSize;
+    /**
+     * Track fill, one surface step.
+     * @default ThemeSwitcherVariant.PRIMARY
+     */
+    variant?: ThemeSwitcherVariant;
     /**
      * Show only the icons; each segment's name moves to its `aria-label` and tooltip. For tight spots such as a sidebar footer or a user menu.
      * @default false

package/dist/theme/ThemeSwitcher.js

@@ -1,6 +1,6 @@
 import { GalaxyTheme } from "./enums.js";
 import { useGalaxyTheme } from "./useGalaxyTheme.js";
-import ToggleInput, { ToggleInputSize } from "../inputs/ToggleInput.js";
+import ToggleInput, { ToggleInputSize, ToggleInputVariant } from "../inputs/ToggleInput.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MonitorIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
@@ -29,6 +29,18 @@ var ThemeSwitcherSize = /* @__PURE__ */ function(ThemeSwitcherSize) {
 	ThemeSwitcherSize["X_LARGE"] = "X_LARGE";
 	return ThemeSwitcherSize;
 }({});
+/** Surface set; ThemeSwitcher passes the step to ToggleInput. */
+var ThemeSwitcherVariant = /* @__PURE__ */ function(ThemeSwitcherVariant) {
+	/** `background.base`. */
+	ThemeSwitcherVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	ThemeSwitcherVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	ThemeSwitcherVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	ThemeSwitcherVariant["TERTIARY"] = "TERTIARY";
+	return ThemeSwitcherVariant;
+}({});
 /** The three built-in themes, in the 1.x order, each with its glyph. */
 var THEME_SWITCHER_OPTIONS = [
 	{
@@ -73,8 +85,15 @@ var THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP = {
 	["LARGE"]: ToggleInputSize.LARGE,
 	["X_LARGE"]: ToggleInputSize.X_LARGE
 };
+/** ThemeSwitcher's surface step is ToggleInput's surface step. */
+var THEME_SWITCHER_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP = {
+	["BASE"]: ToggleInputVariant.BASE,
+	["PRIMARY"]: ToggleInputVariant.PRIMARY,
+	["SECONDARY"]: ToggleInputVariant.SECONDARY,
+	["TERTIARY"]: ToggleInputVariant.TERTIARY
+};
 /** The System / Dark / Light control, bound to the nearest `GalaxyProvider`. */
-var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconOnly = false, label, ariaLabel = "Theme", fillWidth = false, className, style, ...rest }, ref) {
+var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", variant = "PRIMARY", isIconOnly = false, label, ariaLabel = "Theme", fillWidth = false, className, style, ...rest }, ref) {
 	const { selectedTheme, setTheme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(ToggleInput, {
 		ref,
@@ -82,6 +101,7 @@ var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconO
 		value: selectedTheme,
 		onChange: setTheme,
 		size: THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP[size],
+		variant: THEME_SWITCHER_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP[variant],
 		...label === void 0 ? { ariaLabel } : { label },
 		fillWidth,
 		...rest,
@@ -91,4 +111,4 @@ var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconO
 });
 ThemeSwitcher.displayName = "ThemeSwitcher";
 //#endregion
-export { ThemeSwitcherSize, ThemeSwitcher as default };
+export { ThemeSwitcherSize, ThemeSwitcherVariant, ThemeSwitcher as default };

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/dist/widget/Widget.d.ts

@@ -1,5 +1,6 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type MouseEvent, type ReactNode } from "react";
+import type { Space } from "../theme/enums.js";
 /** Card fill (Constitution V-A surface set). */
 export declare enum WidgetVariant {
     /** `background.base`. */
@@ -40,7 +41,7 @@ export interface WidgetGroupContextValue {
 export declare const WidgetGroupContext: import("react").Context<WidgetGroupContextValue | null>;
 /** Every Widget prop except the two coupled pairs (`isInteractive` / `onClick`, `isCollapsible` / `header`). */
 interface WidgetBaseProps extends AriaAttributes {
-    /** The body: a column with the size's inset (none with `isFlush`) and gap. */
+    /** The body: a column with the size's inset (none with `isFlush`) and `gap`. */
     children?: ReactNode;
     /**
      * Surface fill of the card.
@@ -52,6 +53,12 @@ interface WidgetBaseProps extends AriaAttributes {
      * @default WidgetSize.MEDIUM
      */
     size?: WidgetSize;
+    /**
+     * Space between the body's children, from the space scale. `0` stacks them edge to edge (a
+     * flush chart over a table).
+     * @default the size's gap: 8 / 12 / 16
+     */
+    gap?: Space;
     /**
      * The header row's title. A string renders as a medium `Text` at the size's step; a node renders
      * as-is and must not contain controls (put them in `actions`). Omit it for a body-only card.

package/dist/widget/Widget.js

@@ -1,5 +1,6 @@
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import { gapToCss } from "../utils/css.js";
 import Divider from "../layout/Divider.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import IconSlot from "../icons/internal/IconSlot.js";
@@ -113,7 +114,7 @@ var Panel = /*#__PURE__*/ styled("section")({
 	class: "gx-Widget-Panel-p1u3h98q",
 	propsAsIs: false
 });
-/** The body region: a column of the children. */
+/** The body region: a column of the children, spaced by `--gx-widget-gap`. */
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
 	class: "gx-Widget-Body-b1t0k6w8",
@@ -143,12 +144,18 @@ var WIDGET_SIZE_TO_ROW_CSS_MAP = {
 	["MEDIUM"]: "gx-Widget-MEDIUM-m14youd7",
 	["LARGE"]: "gx-Widget-LARGE-lmk1xrm"
 };
-/** Body inset and gap. */
+/** Body inset. */
 var WIDGET_SIZE_TO_BODY_CSS_MAP = {
 	["SMALL"]: "gx-Widget-SMALL-s1qcxaeu",
 	["MEDIUM"]: "gx-Widget-MEDIUM-m1niqf43",
 	["LARGE"]: "gx-Widget-LARGE-l1wi0lfv"
 };
+/** The body gap when `gap` is unset: the same step as the inset. */
+var WIDGET_SIZE_TO_GAP_MAP = {
+	["SMALL"]: 8,
+	["MEDIUM"]: 12,
+	["LARGE"]: 16
+};
 var WIDGET_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
 	["MEDIUM"]: TextSize.BODY_MD,
@@ -181,7 +188,7 @@ var INTERACTIVE_CSS = "gx-Widget-INTERACTIVE_CSS-i11hrzgx";
 var DISABLED_CSS = "gx-Widget-DISABLED_CSS-d27d11a";
 /** Chosen: a `text.primary` hairline, also on hover (declared after the hover states, so it wins). */
 var SELECTED_CSS = "gx-Widget-SELECTED_CSS-s13jeom8";
-/** `isFlush`: no body inset (the gap stays); the body clips its content inside the corners it shares. */
+/** `isFlush`: no body inset (`gap` stays); the body clips its content inside the corners it shares. */
 var FLUSH_CSS = "gx-Widget-FLUSH_CSS-f18mgbxd";
 /** A flush body with no header row above it rounds the card's top corners. */
 var FLUSH_TOP_CORNERS_CSS = "gx-Widget-FLUSH_TOP_CORNERS_CSS-f1djym4t";
@@ -217,7 +224,7 @@ var headerColors = (isOpen, isDisabled) => match({
 /** Whether a slot has something to render. */
 var hasContent = (node) => node !== void 0 && node !== null && node !== false;
 /** A card: a bordered surface with an optional (collapsible) header, actions, footer and states. */
-var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size = "MEDIUM", header, subheader, icon, actions, footer, isFlush = false, isCollapsible = false, hasCaret = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, isLoading = false, isSelected, isInteractive = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size = "MEDIUM", gap, header, subheader, icon, actions, footer, isFlush = false, isCollapsible = false, hasCaret = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, isLoading = false, isSelected, isInteractive = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
 	const baseId = useId();
 	const rootId = id ?? baseId;
 	const titleId = `${baseId}-title`;
@@ -259,6 +266,7 @@ var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size =
 		hasHeaderRow && /* @__PURE__ */ jsx(Divider, {}),
 		/* @__PURE__ */ jsx(Body, {
 			id: bodyId,
+			style: { "--gx-widget-gap": gapToCss(gap ?? WIDGET_SIZE_TO_GAP_MAP[size]) },
 			className: cx(WIDGET_SIZE_TO_BODY_CSS_MAP[size], isFlush && FLUSH_CSS, isFlush && !hasHeaderRow && FLUSH_TOP_CORNERS_CSS, isFlush && !hasFooter && FLUSH_BOTTOM_CORNERS_CSS),
 			children: isLoading ? /* @__PURE__ */ jsx(Loading, { children: /* @__PURE__ */ jsx(Spinner, {
 				variant: SpinnerVariant.SECONDARY,

package/package.json

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