@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/table/VirtualizedInfiniteTable.js

@@ -16,7 +16,7 @@ import { jsx } from "react/jsx-runtime";
 * no client-side sorting (the app re-queries when `sort` changes).
 *
 * Built on the shared table core (`TableCore`, `useTableColumnLayout`,
-* `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`) plus `useTableVirtualizer`
+* `useTableKeyboardNavigation`, `useEndReached`) plus `useTableVirtualizer`
 * (`@tanstack/react-virtual`, an optional peer). It imports nothing from `InfiniteTable`, so it
 * never needs `@tanstack/react-table`.
 */
@@ -53,7 +53,7 @@ function sortAnnouncement(sort, columns) {
 }
 /** InfiniteTable with a virtual body, for tens of thousands of rows. */
 var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable(props, ref) {
-	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, ariaLabel, id, className, style, ...rest } = props;
+	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, hasHeader = true, inset: insetProp, ariaLabel, id, className, style, ...rest } = props;
 	const error = errorProp === "" ? void 0 : errorProp;
 	const size = sizeProp ?? "MEDIUM";
 	const isLoading = isLoadingProp ?? false;
@@ -95,7 +95,8 @@ var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable
 		canCustomizeColumns,
 		leadingCount: 0,
 		hasTrailing: hasTrailingColumn,
-		syntheticWidthPx: metrics.rowHeightPx
+		syntheticWidthPx: metrics.rowHeightPx,
+		insetPx: insetProp ?? 0
 	});
 	const visibleColumns = layout.visibleColumns;
 	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
@@ -133,13 +134,14 @@ var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable
 		}
 	}, []);
 	const virtualizerRef = useRef(null);
+	const headerHeightPx = hasHeader ? metrics.headerHeightPx : 0;
 	const navigation = useTableKeyboardNavigation({
 		rowCount,
 		getPageSize: useCallback(() => {
 			const scroll = scrollRef.current;
 			if (scroll === null) return 1;
-			return Math.max(1, Math.floor((scroll.clientHeight - metrics.headerHeightPx) / metrics.rowHeightPx) - 1);
-		}, [metrics.rowHeightPx, metrics.headerHeightPx]),
+			return Math.max(1, Math.floor((scroll.clientHeight - headerHeightPx) / metrics.rowHeightPx) - 1);
+		}, [metrics.rowHeightPx, headerHeightPx]),
 		scrollToIndex: (index) => virtualizerRef.current?.scrollToIndex(index),
 		onKeyDown: handleKey
 	});
@@ -151,7 +153,7 @@ var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable
 		count: rowCount,
 		scrollRef,
 		rowHeightPx: metrics.rowHeightPx,
-		headerHeightPx: metrics.headerHeightPx,
+		headerHeightPx,
 		footerHeightPx: hasFooter ? metrics.headerHeightPx : 0,
 		getItemKey,
 		keepIndexes: rowCount > 0 ? [navigation.tabStopIndex] : []
@@ -209,6 +211,7 @@ var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable
 	const scrollMargin = virtualizer.options.scrollMargin;
 	return /* @__PURE__ */ jsx(TableFrame, {
 		metrics,
+		hasHeader,
 		columnLayout: layout,
 		leadingHeaders: [],
 		trailingHeader: canCustomizeColumns ? /* @__PURE__ */ jsx(TableColumnsMenu, {

package/dist/table/useInfiniteScrollSentinel.d.ts

@@ -1,17 +1,14 @@
 /**
- * @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
- * InfiniteSpreadsheet.
- *
- * The `onEndReached` sentinel: a 1px element after the table, observed with an
- * `IntersectionObserver` whose bottom margin is `marginPx` (`TABLE_END_REACHED_MARGIN_PX`). The root is the
- * scroll container when it overflows, otherwise the viewport, so a table in an unbounded parent
- * pages on page scroll. Armed only while enabled (not loading, no error), re-armed when the row
- * count changes, and calls `onEndReached` at most once per row count: an app with no next page
- * adds no rows, so it is not called again. Without `IntersectionObserver` it falls back to a
- * passive `scroll` listener. Nothing runs at module scope.
+ * @internal
+ * @deprecated Use `@galaxy-io/dls/hooks/useEndReached`, which this wraps (the same observer, with
+ * `rowCount` named `itemCount` and `scrollRef` and `marginPx` optional). Kept so the published
+ * subpath keeps working; it goes in 3.0.
+ */
+import type { RefObject } from "react";
+/**
+ * @internal Options for `useInfiniteScrollSentinel`.
+ * @deprecated Use `UseEndReachedOptions` from `@galaxy-io/dls/hooks/useEndReached`.
  */
-import { type RefObject } from "react";
-/** @internal Options for `useInfiniteScrollSentinel`. */
 export interface UseInfiniteScrollSentinelOptions {
     /** The table's scroll container. */
     scrollRef: RefObject<HTMLElement | null>;
@@ -24,5 +21,8 @@ export interface UseInfiniteScrollSentinelOptions {
     /** How far below the visible area the end counts as reached, in pixels. */
     marginPx: number;
 }
-/** @internal Observes the sentinel and calls `onEndReached`; returns the sentinel's ref. */
+/**
+ * @internal Observes the zero-size sentinel and calls `onEndReached`; returns the sentinel's ref.
+ * @deprecated Use `useEndReached` from `@galaxy-io/dls/hooks/useEndReached`.
+ */
 export declare function useInfiniteScrollSentinel({ scrollRef, onEndReached, isEnabled, rowCount, marginPx, }: UseInfiniteScrollSentinelOptions): RefObject<HTMLDivElement | null>;

package/dist/table/useInfiniteScrollSentinel.js

@@ -1,61 +1,17 @@
-import { useEffect, useRef } from "react";
+import { useEndReached } from "../hooks/useEndReached.js";
 //#region src/table/useInfiniteScrollSentinel.ts
 /**
-* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
-* InfiniteSpreadsheet.
-*
-* The `onEndReached` sentinel: a 1px element after the table, observed with an
-* `IntersectionObserver` whose bottom margin is `marginPx` (`TABLE_END_REACHED_MARGIN_PX`). The root is the
-* scroll container when it overflows, otherwise the viewport, so a table in an unbounded parent
-* pages on page scroll. Armed only while enabled (not loading, no error), re-armed when the row
-* count changes, and calls `onEndReached` at most once per row count: an app with no next page
-* adds no rows, so it is not called again. Without `IntersectionObserver` it falls back to a
-* passive `scroll` listener. Nothing runs at module scope.
+* @internal Observes the zero-size sentinel and calls `onEndReached`; returns the sentinel's ref.
+* @deprecated Use `useEndReached` from `@galaxy-io/dls/hooks/useEndReached`.
 */
-/** @internal Observes the sentinel and calls `onEndReached`; returns the sentinel's ref. */
 function useInfiniteScrollSentinel({ scrollRef, onEndReached, isEnabled, rowCount, marginPx }) {
-	const sentinelRef = useRef(null);
-	const onEndReachedRef = useRef(onEndReached);
-	onEndReachedRef.current = onEndReached;
-	const calledForCountRef = useRef(null);
-	const hasHandler = onEndReached !== void 0;
-	useEffect(() => {
-		const scroll = scrollRef.current;
-		const sentinel = sentinelRef.current;
-		if (!hasHandler || !isEnabled || scroll === null || sentinel === null) return;
-		if (calledForCountRef.current === rowCount) return;
-		const reach = () => {
-			if (calledForCountRef.current === rowCount) return;
-			calledForCountRef.current = rowCount;
-			onEndReachedRef.current?.();
-		};
-		const isScrollRoot = scroll.scrollHeight > scroll.clientHeight;
-		if (typeof IntersectionObserver === "undefined") {
-			const target = isScrollRoot ? scroll : window;
-			const check = () => {
-				const bottom = isScrollRoot ? scroll.getBoundingClientRect().bottom : window.innerHeight;
-				if (sentinel.getBoundingClientRect().top - bottom < marginPx) reach();
-			};
-			check();
-			target.addEventListener("scroll", check, { passive: true });
-			return () => target.removeEventListener("scroll", check);
-		}
-		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) reach();
-		}, {
-			root: isScrollRoot ? scroll : null,
-			rootMargin: `0px 0px ${marginPx}px 0px`
-		});
-		observer.observe(sentinel);
-		return () => observer.disconnect();
-	}, [
+	return useEndReached({
 		scrollRef,
-		hasHandler,
+		onEndReached,
 		isEnabled,
-		rowCount,
+		itemCount: rowCount,
 		marginPx
-	]);
-	return sentinelRef;
+	});
 }
 //#endregion
 export { useInfiniteScrollSentinel };

package/dist/table/useTableColumnLayout.d.ts

@@ -63,6 +63,12 @@ export interface UseTableColumnLayoutOptions<TData> {
     hasTrailing: boolean;
     /** Width of a synthetic column, in pixels (the row height). */
     syntheticWidthPx: number;
+    /**
+     * The table's `inset`, in pixels: added to the first and last cell of every row (padding and
+     * width), so the content moves in while rows, fills and hairlines keep the full width.
+     * @default 0
+     */
+    insetPx?: number;
 }
 /** @internal What `useTableColumnLayout` returns. */
 export interface TableColumnLayoutResult<TData> {
@@ -72,7 +78,7 @@ export interface TableColumnLayoutResult<TData> {
     visibleColumns: TableResolvedColumn<TData>[];
     /** Every column in display order with its visibility, for the Columns menu. */
     menuEntries: TableColumnsMenuEntry[];
-    /** Custom properties for the table root: per-column flex, min, max and pinned offset, and the table min width. */
+    /** Custom properties for the table root: per-column flex, min, max and pinned offset, the table min width and `--gx-table-inset`. */
     variables: Record<`--gx-${string}`, string>;
     /** Width of a resizable column for the resize handle: its resolved or measured width. */
     getColumnWidth: (id: string) => number;
@@ -90,4 +96,4 @@ export interface TableColumnLayoutResult<TData> {
     resetLayout: () => void;
 }
 /** Column arrangement state and the column custom properties. */
-export declare function useTableColumnLayout<TData>({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, }: UseTableColumnLayoutOptions<TData>): TableColumnLayoutResult<TData>;
+export declare function useTableColumnLayout<TData>({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, insetPx, }: UseTableColumnLayoutOptions<TData>): TableColumnLayoutResult<TData>;

package/dist/table/useTableColumnLayout.js

@@ -33,7 +33,7 @@ function pinGroup(pin) {
 	return 1;
 }
 /** Column arrangement state and the column custom properties. */
-function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx }) {
+function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, insetPx = 0 }) {
 	const [layout, setLayout] = useControlledState({
 		value: columnLayout,
 		defaultValue: defaultColumnLayout,
@@ -100,44 +100,55 @@ function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onCo
 			console.warn(`[@galaxy-io/dls] Table column "${column.id}" is pinned without a \`width\`; it falls back to 150px.`);
 		}
 	}, [visibleColumns]);
+	/** The inset a column's cells carry: `insetPx` at each end of the row it sits on. */
+	const edgeInsetFor = useCallback((position) => ((leadingCount === 0 && position === 0 ? 1 : 0) + (!hasTrailing && position === visibleColumns.length - 1 ? 1 : 0)) * insetPx, [
+		leadingCount,
+		hasTrailing,
+		visibleColumns.length,
+		insetPx
+	]);
 	const variables = useMemo(() => {
 		const result = {};
-		let minTotal = (leadingCount + (hasTrailing ? 1 : 0)) * syntheticWidthPx;
-		let leftOffset = leadingCount * syntheticWidthPx;
+		let minTotal = (leadingCount + (hasTrailing ? 1 : 0)) * syntheticWidthPx + 2 * insetPx;
+		let leftOffset = leadingCount * syntheticWidthPx + (leadingCount > 0 ? insetPx : 0);
 		const rightColumns = [];
 		for (const resolved of visibleColumns) {
 			const { column, position, minWidth, pin } = resolved;
 			const width = resolvedWidths.get(column.id);
+			const edge = edgeInsetFor(position);
 			const prefix = `--gx-table-col-${position}`;
 			if (width !== void 0) {
-				result[`${prefix}-flex`] = `0 0 ${width}px`;
-				result[`${prefix}-min`] = `${width}px`;
-				result[`${prefix}-max`] = `${width}px`;
+				result[`${prefix}-flex`] = `0 0 ${width + edge}px`;
+				result[`${prefix}-min`] = `${width + edge}px`;
+				result[`${prefix}-max`] = `${width + edge}px`;
 				minTotal += width;
 			} else {
-				result[`${prefix}-flex`] = "1 1 0px";
-				result[`${prefix}-min`] = `${minWidth}px`;
+				result[`${prefix}-flex`] = `1 1 ${edge}px`;
+				result[`${prefix}-min`] = `${minWidth + edge}px`;
 				result[`${prefix}-max`] = "none";
 				minTotal += minWidth;
 			}
 			if (pin === Side.LEFT) {
 				result[`${prefix}-offset`] = `${leftOffset}px`;
-				leftOffset += width ?? 150;
+				leftOffset += (width ?? 150) + edge;
 			} else if (pin === Side.RIGHT) rightColumns.push(resolved);
 		}
-		let rightOffset = hasTrailing ? syntheticWidthPx : 0;
+		let rightOffset = hasTrailing ? syntheticWidthPx + insetPx : 0;
 		for (const { column, position } of [...rightColumns].reverse()) {
 			result[`--gx-table-col-${position}-offset`] = `${rightOffset}px`;
-			rightOffset += resolvedWidths.get(column.id) ?? 150;
+			rightOffset += (resolvedWidths.get(column.id) ?? 150) + edgeInsetFor(position);
 		}
 		result["--gx-table-min-width"] = `${minTotal}px`;
+		if (insetPx > 0) result["--gx-table-inset"] = `${insetPx}px`;
 		return result;
 	}, [
 		visibleColumns,
 		resolvedWidths,
 		leadingCount,
 		hasTrailing,
-		syntheticWidthPx
+		syntheticWidthPx,
+		insetPx,
+		edgeInsetFor
 	]);
 	const menuEntries = useMemo(() => {
 		const hidden = new Set(hiddenKey === "" ? [] : hiddenKey.split("\0"));
@@ -190,7 +201,19 @@ function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onCo
 		observerRef.current.observe(element);
 	}, [measure]);
 	useEffect(() => () => observerRef.current?.disconnect(), []);
-	const getColumnWidth = useCallback((id) => resolvedWidths.get(id) ?? measured[id] ?? 60, [resolvedWidths, measured]);
+	const getColumnWidth = useCallback((id) => {
+		const resolved = resolvedWidths.get(id);
+		if (resolved !== void 0) return resolved;
+		const width = measured[id];
+		if (width === void 0) return 60;
+		const position = visibleColumns.findIndex(({ column }) => column.id === id);
+		return position === -1 ? width : width - edgeInsetFor(position);
+	}, [
+		resolvedWidths,
+		measured,
+		visibleColumns,
+		edgeInsetFor
+	]);
 	const resizeColumn = useCallback((id, width) => {
 		const current = layoutRef.current;
 		setLayout({

package/dist/theme/tokens/dark.js

@@ -3,7 +3,7 @@ import { TYPE_SCALE } from "./scales.js";
 /**
 * Dark theme, resolved hex. Everything is Galaxy monochrome: `solid.primary` is `text.primary`
 * with `background.base` on it, `background.selected` is `text.primary` at 12% over
-* `background.base`.
+* `background.base` (Light uses 10%).
 *
 * Families (`<family>` below is any of the 17; the palette steps are `PALETTE`):
 * - `text`: brighter and more vivid than Tailwind's 400: OKLCH lightness ~0.03 above it, at the

package/dist/theme/tokens/light.js

@@ -2,8 +2,9 @@ import { TYPE_SCALE } from "./scales.js";
 //#region src/theme/tokens/light.ts
 /**
 * Light theme, resolved hex. Everything is Galaxy monochrome: `solid.primary` is `text.primary`
-* with `background.base` on it, `background.selected` is `text.primary` at 12% over
-* `background.base`.
+* with `background.base` on it, `background.selected` is `text.primary` at 10% over
+* `background.base` (Dark uses 12%: a lift off near-black reads quieter than a darkening of white,
+* and at 12% Light's selected row jumped well past `pressed`).
 *
 * Families (`<family>` below is any of the 17; the palette steps are `PALETTE`):
 * - `text`: the lightest OKLCH lightness, at the largest in-gamut chroma for the hue, that reaches
@@ -37,7 +38,7 @@ var LIGHT_THEME = {
 			tertiary: "#efeff0",
 			hovered: "#f5f5f5",
 			pressed: "#eeeeee",
-			selected: "#e2e2e2",
+			selected: "#e7e7e7",
 			disabled: "#f3f3f4",
 			success: "#ecfcf0",
 			warning: "#fff8eb",

package/dist/theme/tokens/types.d.ts

@@ -42,7 +42,7 @@ export type SolidColor = {
     /** The fill while pressed. */
     pressed: string;
 };
-/** Type-scale steps (Constitution III-A.1). */
+/** Type-scale steps (AGENTS.md "Type scale"). */
 export type TypeStep = "caption" | "body_sm" | "body_md" | "body_lg" | "heading_sm" | "heading_md" | "heading_lg" | "display_sm" | "display_lg";
 /** Serif (Cardo) is editorial only: it has no `caption`, `body_sm` or `body_md` step. */
 type SerifStep = Exclude<TypeStep, "caption" | "body_sm" | "body_md">;
@@ -50,7 +50,7 @@ type SerifStep = Exclude<TypeStep, "caption" | "body_sm" | "body_md">;
 export type FontScale<S extends TypeStep = TypeStep> = {
     /** CSS `font-family` stack. */
     family: string;
-    /** The only two weights (Constitution II.4). */
+    /** The only two weights (AGENTS.md "Type"). */
     weight: {
         regular: number;
         medium: number;
@@ -82,7 +82,7 @@ export type Theme = {
             hovered: string;
             /** A neutral row or control while pressed. */
             pressed: string;
-            /** The chosen item (menus, trees, tabs, nav, tables): `text.primary` at 12% over `base`. */
+            /** The chosen item (menus, trees, tabs, nav, tables): `text.primary` over `base`, 12% in Dark and 10% in Light. */
             selected: string;
             /** Disabled controls. */
             disabled: string;
@@ -161,16 +161,16 @@ export type Theme = {
 };
 /** Theme-independent scales, emitted once on `:root`. */
 export type Scales = {
-    /** Gap and padding (Constitution II.5). */
+    /** Gap and padding (AGENTS.md "Spacing"). */
     space: Record<Space, string>;
-    /** Corner radii (Constitution II.6). */
+    /** Corner radii (AGENTS.md "Radius"). */
     radius: {
         sm: string;
         md: string;
         lg: string;
         pill: string;
     };
-    /** Transition durations (Constitution II.7). */
+    /** Transition durations (AGENTS.md "Motion"). */
     duration: {
         fast: string;
         base: string;
@@ -183,7 +183,7 @@ export type Scales = {
         toast: number;
         tooltip: number;
     };
-    /** Control heights: the canonical size rungs (Constitution III-A.4). */
+    /** Control heights: the canonical size rungs (AGENTS.md "Control rungs"). */
     size: {
         control: {
             xSmall: string;

package/dist/timeline/Timeline.d.ts

@@ -19,7 +19,7 @@ export declare enum TimelineMarkerShape {
     /** No box: the dot or icon sits on the rail, 4px clear of the line above and below it. */
     NONE = "NONE"
 }
-/** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
+/** Marker color of one item (AGENTS.md "Variant": color set). */
 export declare enum TimelineVariant {
     /** `text.primary` marker in a `border.primary` box. */
     PRIMARY = "PRIMARY",

package/dist/timeline/Timeline.js

@@ -1,4 +1,5 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 /* empty css                   */
@@ -41,7 +42,7 @@ var TimelineMarkerShape = /* @__PURE__ */ function(TimelineMarkerShape) {
 	TimelineMarkerShape["NONE"] = "NONE";
 	return TimelineMarkerShape;
 }({});
-/** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
+/** Marker color of one item (AGENTS.md "Variant": color set). */
 var TimelineVariant = /* @__PURE__ */ function(TimelineVariant) {
 	/** `text.primary` marker in a `border.primary` box. */
 	TimelineVariant["PRIMARY"] = "PRIMARY";
@@ -211,29 +212,10 @@ var TIMELINE_VARIANT_TO_CSS_MAP = {
 /**
 * Categorical `color` on the marker: `text.<family>`, which an icon marker (`IconVariant.INHERIT`)
 * takes, and `border.<family>` and the `background.<family>` fill on the box.
+* Reads the shared `--gx-role-*` variables that `ROLE_COLOR_TO_CSS_MAP` sets per family, so the
+* twenty families are written once (`styles/internal/roleColor`).
 */
-var TIMELINE_COLOR_TO_CSS_MAP = {
-	success: "gx-Timeline-success-s1khc5e9",
-	warning: "gx-Timeline-warning-wob0jun",
-	error: "gx-Timeline-error-ecpz10x",
-	red: "gx-Timeline-red-r1arc1uv",
-	orange: "gx-Timeline-orange-o1x7dvj6",
-	amber: "gx-Timeline-amber-a1fx1m3c",
-	yellow: "gx-Timeline-yellow-y1gy5gqm",
-	lime: "gx-Timeline-lime-ltyv4re",
-	green: "gx-Timeline-green-g1506u15",
-	emerald: "gx-Timeline-emerald-e2f8n55",
-	teal: "gx-Timeline-teal-t1bza0tc",
-	cyan: "gx-Timeline-cyan-c1vbt6lr",
-	sky: "gx-Timeline-sky-sjtm0e",
-	blue: "gx-Timeline-blue-bek3kdh",
-	indigo: "gx-Timeline-indigo-i13hn3pe",
-	violet: "gx-Timeline-violet-vdf3rdi",
-	purple: "gx-Timeline-purple-pjv99mk",
-	fuchsia: "gx-Timeline-fuchsia-f4wvpbo",
-	pink: "gx-Timeline-pink-p1qqjpue",
-	rose: "gx-Timeline-rose-r183jhdd"
-};
+var TIMELINE_COLOR_CSS = "gx-Timeline-TIMELINE_COLOR_CSS-t1khc5e9";
 /** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
 var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", markerShape = "SQUARE", isFilled = false, className, style, ...rest }, ref) {
 	const textSize = TIMELINE_SIZE_TO_TEXT_SIZE_MAP[size];
@@ -252,7 +234,7 @@ var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", markerShap
 				children: [/* @__PURE__ */ jsxs(Rail, {
 					"aria-hidden": true,
 					children: [/* @__PURE__ */ jsx(Marker, {
-						className: cx(color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_CSS_MAP[variant], TIMELINE_MARKER_SHAPE_TO_CSS_MAP[markerShape], isFilled && markerShape !== "NONE" && FILLED_CSS),
+						className: cx(color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], TIMELINE_COLOR_CSS) : TIMELINE_VARIANT_TO_CSS_MAP[variant], TIMELINE_MARKER_SHAPE_TO_CSS_MAP[markerShape], isFilled && markerShape !== "NONE" && FILLED_CSS),
 						children: item.icon === void 0 ? /* @__PURE__ */ jsx(Beacon, {
 							size: TIMELINE_SIZE_TO_BEACON_SIZE_MAP[size],
 							...color !== void 0 ? { color } : { variant: TIMELINE_VARIANT_TO_BEACON_VARIANT_MAP[variant] },

package/dist/tokens.css

@@ -410,7 +410,7 @@
   --gx-color-background-tertiary: #efeff0;
   --gx-color-background-hovered: #f5f5f5;
   --gx-color-background-pressed: #eeeeee;
-  --gx-color-background-selected: #e2e2e2;
+  --gx-color-background-selected: #e7e7e7;
   --gx-color-background-disabled: #f3f3f4;
   --gx-color-background-success: #ecfcf0;
   --gx-color-background-warning: #fff8eb;

package/dist/utils/format.d.ts

@@ -1,19 +1,31 @@
 /**
- * Display formatting for numbers, byte sizes, durations, relative times and percentages
- * (Constitution VIII-A.2). Pure functions on `Intl`, no dependencies, safe at module scope and
- * under SSR. Number parts default to the `en-US` locale (not the runtime's) so server and client
- * render the same string.
+ * Display formatting for numbers, byte sizes, durations, relative times, dates and percentages
+ * (`docs/components.md`, Hooks and utils). Pure functions on `Intl`, no dependencies, safe at
+ * module scope and under SSR. Number parts default to the `en-US` locale (not the runtime's) so
+ * server and client render the same string.
  *
  * `precision` is always the maximum number of fraction digits; trailing zeros are dropped
  * (`formatPercent(0.5)` → `"50%"`, not `"50.0%"`). Non-finite input (`NaN`, `±Infinity`) is
  * returned as `formatNumber` prints it (`"NaN"`, `"∞"`, `"-∞"`).
+ *
+ * Every formatter also takes a `bigint` (a database count, a unix-millisecond timestamp), so call
+ * sites never wrap one in `Number()`. `formatNumber` prints a bigint exactly (`Intl` formats it
+ * natively); compact numbers, byte sizes, durations and relative times scale and round anyway, so
+ * they convert it to a number first (exact up to 2^53).
+ */
+/**
+ * What a missing value prints as: an em dash, in a table cell, a description list or a chart
+ * tooltip. One constant so every "no value" in an app reads the same. Render it in
+ * `TextVariant.TERTIARY`.
  */
+export declare const EMPTY_VALUE = "\u2014";
 /**
  * Formats a number with grouping. `1234` → `"1,234"`; `{ compact: true }` → `"1.2k"`
  * (suffixes `k M B T`). `precision` is the maximum fraction digits (default `1` when compact,
- * otherwise the `Intl` default of `3`). `locale` defaults to `"en-US"`.
+ * otherwise the `Intl` default of `3`). `locale` defaults to `"en-US"`. A `bigint` prints exactly
+ * (`12345678901234567890n` → `"12,345,678,901,234,567,890"`).
  */
-export declare function formatNumber(n: number, opts?: {
+export declare function formatNumber(input: number | bigint, opts?: {
     compact?: boolean;
     precision?: number;
     locale?: string;
@@ -23,7 +35,7 @@ export declare function formatNumber(n: number, opts?: {
  * `{ binary: true }` uses IEC units (`KiB`, base 1024). Whole bytes have no fraction digits.
  * `precision` is the maximum fraction digits (default `1`).
  */
-export declare function formatBytes(bytes: number, opts?: {
+export declare function formatBytes(input: number | bigint, opts?: {
     precision?: number;
     binary?: boolean;
 }): string;
@@ -34,21 +46,34 @@ export declare function formatBytes(bytes: number, opts?: {
  * finite); zero units are omitted and the
  * remainder is truncated. Zero is `"0s"` / `"0 seconds"`. `style` defaults to `"compact"`.
  */
-export declare function formatDuration(ms: number, opts?: {
+export declare function formatDuration(input: number | bigint, opts?: {
     style?: "compact" | "long";
     maxUnits?: number;
 }): string;
 /**
- * Formats a date relative to `now` (default: the current time, read at call time).
+ * Formats a date (or a unix-millisecond timestamp, `number` or `bigint`) relative to `now`
+ * (default: the current time, read at call time).
  * `{ style: "short" }` (default) → `"3m ago"`, `"in 2d"`, `"now"` (units `s m h d w mo y`);
  * `{ style: "long" }` → `Intl.RelativeTimeFormat` with `numeric: "auto"` (`"3 minutes ago"`,
  * `"in 2 days"`, `"yesterday"`, `"now"`). Uses the largest unit that fits, truncated;
  * months are 30 days, years 365 days. Under 1 second is `"now"`.
  */
-export declare function formatRelativeTime(date: Date | number, opts?: {
+export declare function formatRelativeTime(date: Date | number | bigint, opts?: {
     now?: Date;
     style?: "short" | "long";
 }): string;
+/**
+ * Formats a date (or a unix-millisecond timestamp, `number` or `bigint`). `{ style: "date" }`
+ * (default) → `"Oct 3, 2026"`, the DateInput and table default; `{ style: "dateTime" }` →
+ * `"Oct 10, 3:04:05 PM"`, an event in the recent past. `locale` defaults to `"en-US"`;
+ * `timeZone` defaults to the runtime's (pass `"UTC"` when server and client must agree). An
+ * invalid date is returned as `formatNumber` prints `NaN`.
+ */
+export declare function formatDate(date: Date | number | bigint, opts?: {
+    style?: "date" | "dateTime";
+    locale?: string;
+    timeZone?: string;
+}): string;
 /**
  * Formats a ratio as a percentage. `0.1234` → `"12.3%"`. `precision` is the maximum fraction
  * digits (default `1`).