@svelte-lean/table 0.13.3 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @svelte-lean/table
 
+## 0.14.0
+
+### Minor Changes
+
+- 6e9ed18: The theme hooks follow the palette names: `--slean-table-accent` is renamed `--slean-table-primary` and `--slean-table-danger` is renamed `--slean-table-error` (breaking in 0.x; no alias).
+- ab929e6: `DataTable` takes `refreshing` for a quiet background refresh (a poll, an invalidation): the root carries `data-refreshing` and the stylesheet draws a thin line along the top edge (`--slean-table-refreshing-color`, the accent; `--slean-table-refreshing-height`, 2px), which pulses only when the user has not asked for reduced motion. Rows stay as they are: no skeleton, no dimming, no `aria-busy`, no status text, and the page clamp stays active. `loading` and `fetching` win over it. New token `--slean-table-skeleton-delay` (default `0s`) keeps skeleton rows invisible for that long with a CSS animation delay and no timer, so an answer faster than the delay shows no skeleton flash.
+  
+  Size budget raised for this feature: the table stylesheet from 7950 B to 8250 B gzip (8102 B measured, was 7873 B). The renderer stays within its budget (22734 B of 22800 B).
+
+### Patch Changes
+
+- a9d1e1f: Follows the renamed `@svelte-lean/styles` tokens (`--slean-primary-main`, `--slean-error-main`, `--slean-elevation-*`, …; fallbacks kept) and writes `data-size="small"` on the page-size select (ADR 0011 §3.3).
+
+## 0.13.4
+
+### Patch Changes
+
+- c97ea03: A grid-layout table with grouped columns draws its header rows straight again: a header row kept the cells that span down to it after the grouped ones, and grid auto-placement, which never moves back along a row, pushed the grouped leaves onto a second line. The cells are now in column order, and the room a spanning cell leaves above it takes the header's surface.
+
 ## 0.13.3
 
 ### Patch Changes

package/README.md

@@ -70,7 +70,8 @@ Composition hooks:
 - Server tables: `manual` with `rowCount`, or `pageCount` when the total is unknown; `searchDelay`
   debounces the search box and the filter inputs; `searchText` replaces what a row is searched by;
   `state.search` applies without the table's own search box. `loading` without rows draws
-  `skeletonRows`; `fetching` dims the body.
+  `skeletonRows` (held invisible for `--slean-table-skeleton-delay`); `fetching` dims the body;
+  `refreshing` (a poll, an invalidation) only draws a thin line along the top edge.
 - `pageSizeOptions`, numbered pages, `placeholder` for empty values, `headerClass`, per-row `class`.
 
 ## Below the component
@@ -117,7 +118,7 @@ import '@svelte-lean/table/style.css';
 
 `style.css` styles the `slean-table-` classes. Its rules sit in the `slean.components` cascade layer
 with `:where()` selectors, so unlayered application CSS overrides them without `!important`. It reads
-`@svelte-lean/styles` tokens (`--slean-surface`, `--slean-fg`, `--slean-border`, `--slean-accent`,
+`@svelte-lean/styles` tokens (`--slean-surface`, `--slean-fg`, `--slean-border`, `--slean-primary-main`,
 `--slean-radius-*`, …) when they are defined; the fallbacks are the same defaults written with
 `light-dark()`, so they follow the page's `color-scheme`. Override any `--slean-table-*` property
 (`--slean-table-header-bg`, `--slean-table-row-hover`, `--slean-table-cell-padding-y`, … listed on

package/dist/style.css

@@ -13,7 +13,7 @@
 		inline-size: 1rem;
 		block-size: 1rem;
 		margin: 0;
-		accent-color: var(--slean-table-accent);
+		accent-color: var(--slean-table-primary);
 		vertical-align: middle;
 		cursor: pointer;
 	}
@@ -35,15 +35,18 @@
 			--slean-muted,
 			light-dark(oklch(95.8% 0.004 260), oklch(26% 0.011 260))
 		);
-		--slean-table-accent: var(--slean-accent, light-dark(oklch(54% 0.19 258), oklch(56% 0.18 258)));
+		--slean-table-primary: var(
+			--slean-primary-main,
+			light-dark(oklch(54% 0.19 258), oklch(56% 0.18 258))
+		);
 		--slean-table-selected: var(
-			--slean-accent-soft,
+			--slean-primary-soft,
 			light-dark(oklch(95% 0.03 258), oklch(28% 0.07 258))
 		);
-		--slean-table-danger: var(--slean-danger, light-dark(oklch(55% 0.2 25), oklch(58% 0.19 25)));
-		--slean-table-focus: var(--slean-focus-ring-color, var(--slean-table-accent));
+		--slean-table-error: var(--slean-error-main, light-dark(oklch(55% 0.2 25), oklch(58% 0.19 25)));
+		--slean-table-focus: var(--slean-focus-ring-color, var(--slean-table-primary));
 		--slean-table-shadow: var(
-			--slean-shadow-lg,
+			--slean-elevation-4,
 			0 16px 40px oklch(0% 0 0 / 0.18),
 			0 2px 6px oklch(0% 0 0 / 0.08)
 		);
@@ -78,11 +81,14 @@
 		--slean-table-row-selected: var(--slean-table-selected);
 		--slean-table-pin-shadow: light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.45));
 		--slean-table-row-lifted-shadow: var(
-			--slean-shadow-md,
+			--slean-elevation-3,
 			0 4px 12px light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.5)),
 			0 1px 3px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.4))
 		);
 		--slean-table-fetching-opacity: 0.55;
+		--slean-table-skeleton-delay: 0s;
+		--slean-table-refreshing-color: var(--slean-table-primary);
+		--slean-table-refreshing-height: 2px;
 		/* Set per row by hover, stripes, selection or `rowClass`; reset here so it never leaks into a
 		   table nested in a detail row. */
 		--slean-table-row-bg: initial;
@@ -162,10 +168,7 @@
 	:where(.slean-table-input:focus-visible) {
 		border-color: var(--slean-table-focus);
 		outline: 2px solid transparent;
-		box-shadow: var(
-			--slean-control-ring,
-			0 0 0 3px color-mix(in oklab, var(--slean-table-focus) 22%, transparent)
-		);
+		box-shadow: 0 0 0 3px color-mix(in oklab, var(--slean-table-focus) 22%, transparent);
 	}
 	:where(
 		.slean-table-button,
@@ -451,7 +454,7 @@
 		touch-action: none;
 	}
 	:where(.slean-table-resize:hover, .slean-table-resize:focus-visible) {
-		background: linear-gradient(var(--slean-table-accent), var(--slean-table-accent)) center / 2px
+		background: linear-gradient(var(--slean-table-primary), var(--slean-table-primary)) center / 2px
 			100% no-repeat;
 	}
 	:where(.slean-table-filter) {
@@ -500,7 +503,7 @@
 		stroke-width: 2.5;
 	}
 
-	/* Row controls: 24px ghost icon buttons. */
+	/* Row controls: 24px borderless icon buttons. */
 	:where(.slean-table-expand, .slean-table-edit, .slean-table-grip) {
 		min-inline-size: 1.5rem;
 		min-block-size: 1.5rem;
@@ -652,7 +655,7 @@
 	}
 	:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
 		background: var(--slean-table-selected);
-		box-shadow: inset 0 0 0 1px var(--slean-table-accent);
+		box-shadow: inset 0 0 0 1px var(--slean-table-primary);
 	}
 
 	/* A dragged row (row-drag.ts): opaque and raised over the body, below the sticky header (5);
@@ -713,13 +716,31 @@
 	:where(.slean-table[data-fetching] > .slean-table-scroll > table > tbody) {
 		opacity: var(--slean-table-fetching-opacity);
 	}
+	/* Skeleton rows stay invisible for the delay (no timer); `refreshing` draws a top line. */
+	:where(.slean-table-skeleton-row) {
+		animation: slean-table-appear 0s var(--slean-table-skeleton-delay) both;
+	}
+	:where(.slean-table[data-refreshing]) {
+		position: relative;
+	}
+	:where(.slean-table[data-refreshing])::after {
+		content: '';
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline: var(--slean-table-radius);
+		z-index: 6;
+		block-size: var(--slean-table-refreshing-height);
+		background: var(--slean-table-refreshing-color);
+		opacity: 0.6;
+		pointer-events: none;
+	}
 	:where(.slean-table-error) {
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.625rem 0.75rem;
-		color: var(--slean-table-danger);
-		background: color-mix(in oklab, var(--slean-table-danger) 8%, var(--slean-table-bg));
+		color: var(--slean-table-error);
+		background: color-mix(in oklab, var(--slean-table-error) 8%, var(--slean-table-bg));
 	}
 	:where(.slean-table-editor) {
 		display: flex;
@@ -732,7 +753,7 @@
 		min-width: 4.5rem;
 	}
 	:where(.slean-table-editor > [role='alert']) {
-		color: var(--slean-table-danger);
+		color: var(--slean-table-error);
 		width: 100%;
 		font-size: 0.75rem;
 	}
@@ -863,6 +884,20 @@
 				0 0 / 200% 100% var(--slean-table-soft);
 			animation: slean-table-shimmer 1.6s linear infinite;
 		}
+		/* The line pulses; with reduced motion it stays still. */
+		:where(.slean-table[data-refreshing])::after {
+			animation: slean-table-pulse 0.8s ease-in-out infinite alternate;
+		}
+	}
+	@keyframes slean-table-appear {
+		from {
+			opacity: 0;
+		}
+	}
+	@keyframes slean-table-pulse {
+		from {
+			opacity: 0.2;
+		}
 	}
 	@keyframes slean-table-shimmer {
 		from {
@@ -936,6 +971,10 @@
 	}
 	/* Each body row its own stacking context: sticky pinned cells then layerize per row, not per
 	   cell, which keeps compositing cheap while a long page scrolls. */
+	/* A header row is a grid too: the room a spanning cell leaves above it is the head's surface. */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > thead > tr) {
+		background: var(--slean-table-header-bg);
+	}
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr) {
 		isolation: isolate;
 	}

package/dist/table/data-table.svelte

@@ -111,6 +111,7 @@
 		onExpandedRowsChange,
 		loading = false,
 		fetching = false,
+		refreshing = false,
 		skeletonRows,
 		measureKey,
 		error,
@@ -776,7 +777,8 @@
 	/**
 	 * Header rows. In grid layout every row is a grid of its own, so a cell spanning rows sits in
 	 * the lowest row it spans, placed at its first column; the leading control headers sit there
-	 * too.
+	 * too. A row's cells are kept in column order: auto-placement never moves back along a row, so
+	 * a cell placed before one to its left would push that one onto a second grid row.
 	 */
 	const leafIndex = $derived(new Map(cols.map((col, i) => [col.id, i])));
 	function firstLeaf(column: Column<T>): number {
@@ -787,15 +789,19 @@
 		const levels = table.headers;
 		if (!grid) return levels.map((row) => row.map((cell) => ({ cell })));
 		const lead = leads.length;
-		const result: { cell: HeaderCell<T>; place?: string }[][] = levels.map(() => []);
+		const result: { cell: HeaderCell<T>; place?: string; start: number }[][] = levels.map(() => []);
 		levels.forEach((row, level) =>
 			row.forEach((cell) => {
 				const target = Math.min(levels.length - 1, level + cell.rowSpan - 1);
 				const start = lead + firstLeaf(cell.column) + 1;
-				result[target]!.push({ cell, place: `grid-column:${start} / span ${cell.colSpan};` });
+				result[target]!.push({
+					cell,
+					start,
+					place: `grid-column:${start} / span ${cell.colSpan};`
+				});
 			})
 		);
-		return result;
+		return result.map((row) => row.sort((a, b) => a.start - b.start));
 	});
 	const leadLevel = $derived(grid ? table.headers.length - 1 : 0);
 	/**
@@ -1603,6 +1609,7 @@
 	data-bordered={bordered}
 	data-hoverable={rowHoverable}
 	data-fetching={fetching || undefined}
+	data-refreshing={(refreshing && !loading && !fetching) || undefined}
 	{...dir ? { dir } : {}}
 >
 	{#if title}<div class="slean-table-title">{@render title(model)}</div>{/if}
@@ -1874,7 +1881,7 @@
 					· <span class="slean-table-selected">{m.selected(s.selection.length)}</span>{/if}</span
 			>{#if pageSizeSelect === 'custom'}<span class="slean-table-page-size"
 					><span id="{uid}-page-size">{m.pageSize}</span>
-					<div class="slean-table-page-select" {...SELECT_ROOT} data-size="sm">
+					<div class="slean-table-page-select" {...SELECT_ROOT} data-size="small">
 						<select
 							data-slean-part="native"
 							aria-labelledby="{uid}-page-size"

package/dist/types.d.ts

@@ -274,9 +274,17 @@ export interface TableProps<T> {
     onExpandedRowsChange?: (rows: RowId[]) => void;
     loading?: boolean;
     fetching?: boolean;
+    /**
+     * A quiet background refresh (a poll, an invalidation): a thin line along the top edge, nothing
+     * else. Rows are never replaced by skeletons or dimmed, no `aria-busy`, no status text, and page
+     * clamping stays active. Ignored while `loading` or `fetching` is set, which say more.
+     */
+    refreshing?: boolean;
     /**
      * Skeleton rows drawn while `loading` and no row is present. Default: the page size, at most
      * 25, when paginated (so nothing below the table moves when the rows arrive); otherwise 5.
+     * `--slean-table-skeleton-delay` holds them invisible for a moment (CSS only, no timer), so a
+     * fast first answer shows no skeleton flash.
      */
     skeletonRows?: number;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",