@livenetworks/ashlar 2.1.6 → 2.1.8

package/components/ln-table/ln-table.schema.json

@@ -1,211 +1,211 @@
-{
-	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
-	"component": "ln-table",
-	"generator": "scripts/sync-ln-schemas.mjs",
-	"attributes": {
-		"data-ln-debug": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss"
-			]
-		},
-		"data-ln-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss",
-				"ln-table.scss"
-			]
-		},
-		"data-ln-sort-icon": {
-			"direction": null,
-			"sources": [
-				"ln-table.scss"
-			]
-		},
-		"data-ln-table": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss",
-				"ln-table.scss",
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"fallback": "",
-			"description": "Table instance name or identifier"
-		},
-		"data-ln-table-body": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-cell-attr": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Cell attribute template mapping"
-		},
-		"data-ln-table-col": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Column header identifier or field mapping"
-		},
-		"data-ln-table-col-select": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Header select-all checkbox trigger"
-		},
-		"data-ln-table-col-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss"
-			]
-		},
-		"data-ln-table-count": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "integer",
-			"min": 0,
-			"description": "Total record count override for virtual scrollbar calculation"
-		},
-		"data-ln-table-dict": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-empty": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "marker",
-			"description": "Container for table empty state"
-		},
-		"data-ln-table-empty-when": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-filtered": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-row": {
-			"direction": "both",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "marker",
-			"description": "Table row template element"
-		},
-		"data-ln-table-row-action": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Action trigger inside a table row"
-		},
-		"data-ln-table-row-id": {
-			"direction": "both",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Record identifier on row element"
-		},
-		"data-ln-table-row-select": {
-			"direction": "both",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Row selection checkbox trigger"
-		},
-		"data-ln-table-select-all-label": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Accessibility label for select-all header trigger"
-		},
-		"data-ln-table-selectable": {
-			"direction": null,
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "boolean",
-			"description": "Enables row selection check controls"
-		},
-		"data-ln-table-selected": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss"
-			]
-		},
-		"data-ln-table-source": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"fallback": "",
-			"description": "Source store or coordinator addressing"
-		},
-		"data-ln-table-total": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-window": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "integer",
-			"min": 10,
-			"description": "Virtual scrolling window size in rows"
-		},
-		"data-ln-table-window-page": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "integer",
-			"min": 5,
-			"description": "Virtual scrolling slice page size"
-		},
-		"data-ln-table-window-threshold": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "integer",
-			"fallback": 50,
-			"min": 0,
-			"description": "Scroll threshold margin in pixels to trigger page fetch"
-		}
-	}
-}
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-table",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss"
+			]
+		},
+		"data-ln-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss",
+				"ln-table.scss"
+			]
+		},
+		"data-ln-sort-icon": {
+			"direction": null,
+			"sources": [
+				"ln-table.scss"
+			]
+		},
+		"data-ln-table": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss",
+				"ln-table.scss",
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Table instance name or identifier"
+		},
+		"data-ln-table-body": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-cell-attr": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Cell attribute template mapping"
+		},
+		"data-ln-table-col": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Column header identifier or field mapping"
+		},
+		"data-ln-table-col-select": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Header select-all checkbox trigger"
+		},
+		"data-ln-table-col-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss"
+			]
+		},
+		"data-ln-table-count": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "integer",
+			"min": 0,
+			"description": "Total record count override for virtual scrollbar calculation"
+		},
+		"data-ln-table-dict": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-empty": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "marker",
+			"description": "Container for table empty state"
+		},
+		"data-ln-table-empty-when": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-filtered": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-row": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "marker",
+			"description": "Table row template element"
+		},
+		"data-ln-table-row-action": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Action trigger inside a table row"
+		},
+		"data-ln-table-row-id": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Record identifier on row element"
+		},
+		"data-ln-table-row-select": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Row selection checkbox trigger"
+		},
+		"data-ln-table-select-all-label": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Accessibility label for select-all header trigger"
+		},
+		"data-ln-table-selectable": {
+			"direction": null,
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "boolean",
+			"description": "Enables row selection check controls"
+		},
+		"data-ln-table-selected": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss"
+			]
+		},
+		"data-ln-table-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Source store or coordinator addressing"
+		},
+		"data-ln-table-total": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-window": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "integer",
+			"min": 10,
+			"description": "Virtual scrolling window size in rows"
+		},
+		"data-ln-table-window-page": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "integer",
+			"min": 5,
+			"description": "Virtual scrolling slice page size"
+		},
+		"data-ln-table-window-threshold": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "integer",
+			"fallback": 50,
+			"min": 0,
+			"description": "Scroll threshold margin in pixels to trigger page fetch"
+		}
+	}
+}

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

@@ -291,8 +291,14 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 			// The source owns the query, so a query change reaches the view as a
 			// restart order, not as query state — the window drops to page 0 and
 			// the composed query is resolved at serve time.
-			this._onRequestInvalidate = function () {
+			this._onRequestInvalidate = function (e) {
 				if (!self._windowed || !self._cache) return;
+				if (e && e.detail && e.detail.query) {
+					const q = e.detail.query;
+					if (q.search !== undefined) self.currentSearch = q.search;
+					if (q.filters !== undefined) self.currentFilters = q.filters;
+					if (q.sort !== undefined) self.currentSort = q.sort;
+				}
 				self._requestData();
 			};
 			dom.addEventListener('ln-table:request-invalidate', this._onRequestInvalidate);
@@ -359,17 +365,20 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 				this._parseRows();
 			}
 
-			// Initial request-data
-			if (this._windowed) {
-				this._kickWindowInitial();
-			} else {
-				dispatch(dom, 'ln-table:request-data', {
-					table: this.name,
-					sort: this.currentSort,
-					filters: this.currentFilters,
-					search: this.currentSearch
-				});
-			}
+			// Initial request-data deferred so coordinators have attached listeners
+			setTimeout(function () {
+				if (!self.dom || !document.contains(self.dom)) return;
+				if (self._windowed) {
+					self._kickWindowInitial();
+				} else {
+					dispatch(dom, 'ln-table:request-data', {
+						table: self.name,
+						sort: self.currentSort,
+						filters: self.currentFilters,
+						search: self.currentSearch
+					});
+				}
+			}, 0);
 
 		} else {
 			// SSR Mode
@@ -814,6 +823,8 @@ import { calculateSelectionState, calculateVirtualWindow, toggleRowSelection, to
 		const startRow = vw.start;
 		const endRow = vw.end;
 
+		if (startRow === this._vStart && endRow === this._vEnd) return;
+
 		const colSpan = this.ths.length || 1;
 		const topH = vw.topPadding;
 		const bottomH = vw.bottomPadding;

package/package.json

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

package/theme/components/_sortable.scss

@@ -0,0 +1,19 @@
+@use '../config/mixins' as *;
+
+[data-ln-sortable] {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	> * {
+		transition: box-shadow var(--transition-fast) var(--easing-standard), opacity var(--transition-fast) var(--easing-standard);
+
+		&.ln-sortable--drop-before {
+			box-shadow: inset 0 2px 0 0 var(--color-accent);
+		}
+
+		&.ln-sortable--drop-after {
+			box-shadow: inset 0 -2px 0 0 var(--color-accent);
+		}
+	}
+}

package/theme/components/_table.scss

@@ -27,6 +27,7 @@ table {
 .table-container {
 	@include container(table);
 	overflow-x: auto;
+	overscroll-behavior-x: contain;
 
 	@container table (max-width: 640px) {
 		table { @include table-responsive; }

package/theme/config/mixins/_chart.scss

@@ -19,6 +19,7 @@
 	display: grid;
 	gap: var(--chart-gap);
 	min-inline-size: 0;
+	contain: layout style;
 
 	.chart__plot {
 		display: block;

package/theme/config/mixins/_dropdown.scss

@@ -150,6 +150,7 @@
 	ul[data-ln-search] {
 		max-height: 15rem;
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		scrollbar-width: thin;
 		scrollbar-color: var(--border-subtle) transparent;
 

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

@@ -52,7 +52,7 @@
 		border-spacing: 0;
 		border-radius: 0;
 		box-shadow: none;
-		table-layout: auto !important;
+		table-layout: var(--table-layout, auto);
 		min-width: var(--table-min-width, 768px);
 	}
 
@@ -61,6 +61,8 @@
 	// so per-th radius is unnecessary.
 	thead {
 		@include sticky-top;
+		will-change: transform;
+		transform: translateZ(0);
 	}
 
 	thead th {
@@ -198,6 +200,8 @@
 	position: sticky;
 	bottom: 0;
 	z-index: var(--z-sticky);
+	will-change: transform;
+	transform: translateZ(0);
 
 	strong {
 		color: var(--color-fg);

package/theme/config/mixins/_modal.scss

@@ -120,6 +120,7 @@
 		min-height: 0;
 		overflow-y: auto;
 		overflow-x: hidden;
+		overscroll-behavior: contain;
 		flex: 1 1 auto;
 	}
 

package/theme/config/mixins/_picklist.scss

@@ -46,6 +46,7 @@
 		--max-height: 20rem;
 		max-height: var(--max-height);
 		overflow-y: auto;
+		overscroll-behavior: contain;
 	}
 
 	// The input stays visible (pill-outline reverts pill's display:none),

package/theme/config/mixins/_popover.scss

@@ -43,6 +43,7 @@
 		margin: 0;
 		max-height: var(--filter-options-max-height, 15rem);
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		scrollbar-width: thin;
 		scrollbar-color: var(--border-subtle) transparent;
 

package/theme/config/mixins/_position.scss

@@ -9,7 +9,7 @@
 
 @mixin overflow-hidden { overflow: hidden; }
 @mixin overflow-auto   { overflow: auto; }
-@mixin overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+@mixin overflow-x-auto { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
 
 // Sticky pin to the top of the nearest scroll container.
 //

package/theme/config/mixins/_sidebar.scss

@@ -88,6 +88,7 @@
 	> main {
 		@include flex-1;
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		--padding-y: var(--size-xs);
 		padding-block: var(--padding-y);
 	}

package/theme/config/mixins/_stat-card.scss

@@ -22,6 +22,7 @@
 	border-inline-start: var(--border-inline-start, var(--border-width) solid var(--color-border));
 	border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border));
 	@include transition;
+	contain: layout style;
 
 	> [data-ln-stat-label] {
 		--color-fg: var(--fg-muted);

package/theme/config/mixins/_timeline.scss

@@ -23,6 +23,8 @@
 		padding-left: var(--padding-x);
 		--padding-y: var(--size-lg);
 		padding-bottom: var(--padding-y);
+		content-visibility: auto;
+		contain-intrinsic-size: auto 5rem;
 
 		&:last-child {
 			padding-bottom: 0;

package/theme/config/mixins/_toast.scss

@@ -61,7 +61,7 @@
 	opacity: 1;
 	@include motion-safe {
 		transform: translateX(0);
-		transition: all var(--transition-base) var(--easing-standard);
+		transition: transform var(--transition-base) var(--easing-standard), opacity var(--transition-base) var(--easing-standard);
 	}
 
 	& + & {
@@ -73,6 +73,7 @@
 @mixin toast-item-enter {
 	opacity: 0;
 	@include motion-safe {
+		will-change: transform, opacity;
 		transform: translateX(30px);
 	}
 }
@@ -80,8 +81,9 @@
 @mixin toast-item-out {
 	opacity: 0;
 	@include motion-safe {
+		will-change: transform, opacity;
 		transform: scale(0.95);
-		transition: all var(--transition-fast);
+		transition: transform var(--transition-fast), opacity var(--transition-fast);
 	}
 }
 

package/theme/ln-ashlar-core.scss

@@ -15,6 +15,7 @@
 @use '../components/ln-modal/ln-modal';
 @use '../components/ln-popover/ln-popover';
 @use '../components/ln-search/ln-search';
+@use '../components/ln-sortable/ln-sortable';
 @use '../components/ln-table/ln-table';
 @use '../components/ln-tabs/ln-tabs';
 @use '../components/ln-toast/ln-toast';