@livenetworks/ashlar 2.1.9 → 2.1.11

package/components/ln-table/src/table-model.js

@@ -27,6 +27,37 @@ export function calculateVirtualWindow(scrollTop, viewportHeight, rowHeight, tot
 	return { start, end, topPadding, bottomPadding };
 }
 
+/**
+ * Computes the required row pool size based on viewport height, row height, and buffer.
+ * @param {number} viewportHeight
+ * @param {number} rowHeight
+ * @param {number} [bufferRows=15]
+ * @returns {number}
+ */
+export function calculatePoolSize(viewportHeight, rowHeight, bufferRows = 15) {
+	if (rowHeight <= 0) return 0;
+	const safeViewportHeight = Math.max(0, viewportHeight || 0);
+	const visibleCount = Math.ceil(safeViewportHeight / rowHeight);
+	return visibleCount + (bufferRows * 2);
+}
+
+/**
+ * Parses raw JSON seed string for a table into an array of records.
+ * @param {string} raw
+ * @returns {Array<Record<string, any>> | null}
+ */
+export function parseTableSeed(raw) {
+	if (!raw || typeof raw !== 'string') return null;
+	const trimmed = raw.trim();
+	if (!trimmed) return null;
+	try {
+		const parsed = JSON.parse(trimmed);
+		return Array.isArray(parsed) ? parsed : null;
+	} catch (_) {
+		return null;
+	}
+}
+
 /**
  * Computes selection state metadata across a dataset.
  * @param {string[]|number[]} allIds

package/ln-ashlar.html-data.json

@@ -329,6 +329,10 @@
 			"name": "data-ln-data-store-search-fields",
 			"description": "Record fields to index for client-side search"
 		},
+		{
+			"name": "data-ln-data-store-seed",
+			"description": "Selector or element ID of an external seed script block"
+		},
 		{
 			"name": "data-ln-data-store-stale",
 			"description": "Cache staleness threshold in seconds, or -1/never"
@@ -1341,18 +1345,13 @@
 			"description": "Mounts table coordinator mediating between table, search, filter, and pagination",
 			"valueSet": "v"
 		},
-		{
-			"name": "data-ln-table-count",
-			"description": "Total record count override for virtual scrollbar calculation"
-		},
 		{
 			"name": "data-ln-table-dict",
 			"description": "data-ln-table-dict attribute"
 		},
 		{
 			"name": "data-ln-table-empty",
-			"description": "Container for table empty state",
-			"valueSet": "v"
+			"description": "data-ln-table-empty attribute"
 		},
 		{
 			"name": "data-ln-table-empty-when",
@@ -1366,6 +1365,10 @@
 			"name": "data-ln-table-filtered",
 			"description": "data-ln-table-filtered attribute"
 		},
+		{
+			"name": "data-ln-table-loading",
+			"description": "data-ln-table-loading attribute"
+		},
 		{
 			"name": "data-ln-table-row",
 			"description": "Table row template element",
@@ -1410,15 +1413,7 @@
 		},
 		{
 			"name": "data-ln-table-window",
-			"description": "Virtual scrolling window size in rows"
-		},
-		{
-			"name": "data-ln-table-window-page",
-			"description": "Virtual scrolling slice page size"
-		},
-		{
-			"name": "data-ln-table-window-threshold",
-			"description": "Scroll threshold margin in pixels to trigger page fetch"
+			"description": "data-ln-table-window attribute"
 		},
 		{
 			"name": "data-ln-tabs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livenetworks/ashlar",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
   "license": "GPL-3.0-or-later",
   "author": "Live Networks",

package/theme/components/_ln-table.scss

@@ -61,4 +61,13 @@
 	@include ln-table-placeholder-row;
 }
 
+[data-ln-table-loading],
+.table-loading {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	color: var(--fg-muted);
+}
+
+
 

package/theme/config/mixins/_ln-table.scss

@@ -39,12 +39,9 @@
 	// bind to the outer .app-main > section scroll surface (same doctrine
 	// as @mixin section-card).
 	overflow-x: clip;
+	overflow-anchor: none;
 	max-width: 100%;
 
-	colgroup {
-		display: none !important;
-	}
-
 	// Table overrides inside component
 	table {
 		overflow: visible;
@@ -57,18 +54,24 @@
 	}
 
 	// Whole thead sticky as one unit (toolbar row + column-headers row).
-	// Wrapper's `overflow: clip` + `rounded-lg` clip the top corners,
-	// so per-th radius is unnecessary.
+	// Solid opaque background prevents underlying scrolled rows from bleeding through.
 	thead {
 		@include sticky-top;
-		will-change: transform;
-		transform: translateZ(0);
+		background: var(--color-bg);
+		isolation: isolate;
 	}
 
 	thead th {
 		background: var(--bg-sunken);
 	}
 
+	// Prevent height fluctuation on recycled virtual table rows
+	tbody tr[data-ln-table-row] td {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	// First td override -- remove global bold/bg
 	table td:first-child {
 		background: transparent;
@@ -200,8 +203,7 @@
 	position: sticky;
 	bottom: 0;
 	z-index: var(--z-sticky);
-	will-change: transform;
-	transform: translateZ(0);
+	isolation: isolate;
 
 	strong {
 		color: var(--color-fg);
@@ -382,10 +384,13 @@
 // Virtual-scroll spacer rows (JS-injected) — neutralize cell chrome including bg.
 
 @mixin ln-table-spacer-row {
+	overflow-anchor: none;
+
 	td {
 		padding: 0 !important;
 		border: none !important;
 		background: transparent !important;
+		overflow-anchor: none;
 	}
 }
 
@@ -393,10 +398,13 @@
 // only. No shimmer (window-cache.md §4); height stays JS-owned via inline
 // px, spacer geometry depends on the exact value so nothing here may touch it.
 @mixin ln-table-placeholder-row {
+	overflow-anchor: none;
+
 	td {
 		padding: 0 !important;
 		border: none !important;
 		background: var(--bg-sunken);
+		overflow-anchor: none;
 	}
 }
 

package/theme/config/mixins/_table.scss

@@ -73,11 +73,15 @@
 		top: auto;
 		z-index: auto;
 		vertical-align: middle;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 
 		// Shared header-button stack — keyed off the unprefixed structural filter button
 		// class and the [data-ln-sort] JS-component selector, so table / ln-table /
 		// ln-data-table all share one positioning rule.
 		&:has([data-ln-sort]):has(.table-filter) {
+			min-width: var(--th-double-action-min-width, 8.5rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 3.75rem);
 
 			.table-filter {
@@ -97,6 +101,7 @@
 		}
 
 		&:has([data-ln-sort]):not(:has(.table-filter)) {
+			min-width: var(--th-single-action-min-width, 6rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
 
 			[data-ln-sort] {
@@ -109,6 +114,7 @@
 		}
 
 		&:has(.table-filter):not(:has([data-ln-sort])) {
+			min-width: var(--th-single-action-min-width, 6rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
 
 			.table-filter {
@@ -281,8 +287,8 @@
 // ─── Column sort & filter buttons ──────────────────────────────
 
 @mixin table-header-btn-base {
-	width: 1.75rem;
-	height: 1.75rem;
+	width: var(--table-header-btn-size, 1.75rem);
+	height: var(--table-header-btn-size, 1.75rem);
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -296,6 +302,10 @@
 	opacity: 0.45;
 	transition: all 0.15s ease-in-out;
 
+	.ln-icon {
+		--icon-size: var(--table-header-icon-size, 1.125rem);
+	}
+
 	&:hover {
 		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		color: var(--color-accent);
@@ -371,9 +381,12 @@
 }
 
 @mixin table-spacer-row {
+	overflow-anchor: none;
+
 	td {
 		padding: 0 !important;
 		border: none !important;
+		overflow-anchor: none;
 	}
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/web-types",
 	"name": "@livenetworks/ashlar",
-	"version": "2.1.9",
+	"version": "2.1.11",
 	"framework": "html",
 	"contributions": {
 		"html": {
@@ -513,6 +513,13 @@
 						"type": "string[]"
 					}
 				},
+				{
+					"name": "data-ln-data-store-seed",
+					"description": "Selector or element ID of an external seed script block",
+					"value": {
+						"type": "string"
+					}
+				},
 				{
 					"name": "data-ln-data-store-stale",
 					"description": "Cache staleness threshold in seconds, or -1/never",
@@ -1739,13 +1746,6 @@
 						"type": "boolean"
 					}
 				},
-				{
-					"name": "data-ln-table-count",
-					"description": "Total record count override for virtual scrollbar calculation",
-					"value": {
-						"type": "number"
-					}
-				},
 				{
 					"name": "data-ln-table-dict",
 					"description": "data-ln-table-dict attribute",
@@ -1755,9 +1755,9 @@
 				},
 				{
 					"name": "data-ln-table-empty",
-					"description": "Container for table empty state",
+					"description": "data-ln-table-empty attribute",
 					"value": {
-						"type": "boolean"
+						"type": "string"
 					}
 				},
 				{
@@ -1781,6 +1781,13 @@
 						"type": "string"
 					}
 				},
+				{
+					"name": "data-ln-table-loading",
+					"description": "data-ln-table-loading attribute",
+					"value": {
+						"type": "string"
+					}
+				},
 				{
 					"name": "data-ln-table-row",
 					"description": "Table row template element",
@@ -1853,23 +1860,9 @@
 				},
 				{
 					"name": "data-ln-table-window",
-					"description": "Virtual scrolling window size in rows",
-					"value": {
-						"type": "number"
-					}
-				},
-				{
-					"name": "data-ln-table-window-page",
-					"description": "Virtual scrolling slice page size",
+					"description": "data-ln-table-window attribute",
 					"value": {
-						"type": "number"
-					}
-				},
-				{
-					"name": "data-ln-table-window-threshold",
-					"description": "Scroll threshold margin in pixels to trigger page fetch",
-					"value": {
-						"type": "number"
+						"type": "string"
 					}
 				},
 				{