@livenetworks/ashlar 1.4.1 → 1.5.1

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

@@ -1,168 +1,156 @@
-import { guardBody, dispatch } from '../../ln-core';
-import { persistGet, persistSet } from '../../ln-core';
-
-(function () {
-	const DOM_ATTRIBUTE = 'lnTableSort';
-	const SORT_ATTR = 'data-ln-sort';
-	const SORT_ACTIVE_ATTR = 'data-ln-sort-active';
-
-	if (window[DOM_ATTRIBUTE] !== undefined) return;
-
-	// ─── Constructor ───────────────────────────────────────────
-	// Auto-initializes any <table> that contains th[data-ln-sort] headers.
-
-	function constructor(domRoot) {
-		findElements(domRoot);
-	}
-
-	// Local findElements — intentional divergence from ln-core helper: tag selector ('table') + two-arg constructor (table, ths).
-	function findElements(root) {
-		const tables = Array.from(root.querySelectorAll('table'));
-		if (root.tagName === 'TABLE') tables.push(root);
-
-		tables.forEach(function (table) {
-			if (table[DOM_ATTRIBUTE]) return;
-			const ths = Array.from(table.querySelectorAll('th[' + SORT_ATTR + ']'));
-			if (ths.length) table[DOM_ATTRIBUTE] = new _component(table, ths);
-		});
-	}
-
-	// ─── Component ─────────────────────────────────────────────
-
-	function _setSortIcon(th, dir) {
-		const icons = th.querySelectorAll('[data-ln-sort-icon]');
-		icons.forEach(function (icon) {
-			const val = icon.getAttribute('data-ln-sort-icon');
-			if (dir === null || dir === undefined) {
-				// Neutral: show the no-value icon, hide asc/desc
-				icon.classList.toggle('hidden', val !== null && val !== '');
-			} else {
-				// Show matching direction, hide others
-				icon.classList.toggle('hidden', val !== dir);
-			}
-		});
-	}
-
-	function _component(table, ths) {
-		this.table = table;
-		this.ths = ths;
-		this._col = -1;
-		this._dir = null;
-		const self = this;
-
-		ths.forEach(function (th, index) {
-			if (th[DOM_ATTRIBUTE + 'Bound']) return;
-			th[DOM_ATTRIBUTE + 'Bound'] = true;
-
-			th._lnSortClick = function (e) {
-				// Don't sort when user clicks an interactive child (filter button, etc.)
-				const interactive = e.target.closest('button, a, input, select, textarea, [data-ln-dropdown]');
-				if (interactive && interactive !== th) return;
-				self._handleClick(index, th);
-			};
-			th.addEventListener('click', th._lnSortClick);
-		});
-
-		// ─── Restore persisted sort ───────────────────────────────
-		const persistRoot = table.closest('[data-ln-table][data-ln-persist]');
-		if (persistRoot) {
-			const saved = persistGet('table-sort', persistRoot);
-			if (saved && saved.dir && saved.col >= 0 && saved.col < ths.length) {
-				// Programmatically trigger the saved sort
-				this._handleClick(saved.col, ths[saved.col]);
-				if (saved.dir === 'desc') {
-					this._handleClick(saved.col, ths[saved.col]);
-				}
-			}
-		}
-
-		return this;
-	}
-
-	_component.prototype._handleClick = function (colIndex, th) {
-		let newDir;
-
-		if (this._col !== colIndex) {
-			newDir = 'asc';
-		} else if (this._dir === 'asc') {
-			newDir = 'desc';
-		} else if (this._dir === 'desc') {
-			newDir = null;
-		} else {
-			newDir = 'asc';
-		}
-
-		this.ths.forEach(function (t) {
-			t.removeAttribute(SORT_ACTIVE_ATTR);
-			_setSortIcon(t, null);
-		});
-
-		if (newDir === null) {
-			this._col = -1;
-			this._dir = null;
-		} else {
-			this._col = colIndex;
-			this._dir = newDir;
-			th.setAttribute(SORT_ACTIVE_ATTR, newDir);
-			_setSortIcon(th, newDir);
-		}
-
-		dispatch(this.table, 'ln-table:sort', {
-			column: colIndex,
-			sortType: th.getAttribute(SORT_ATTR),
-			direction: newDir
-		});
-		const persistRoot = this.table.closest('[data-ln-table][data-ln-persist]');
-		if (persistRoot) {
-			if (newDir === null) {
-				persistSet('table-sort', persistRoot, null);
-			} else {
-				persistSet('table-sort', persistRoot, { col: colIndex, dir: newDir });
-			}
-		}
-	};
-
-	_component.prototype.destroy = function () {
-		if (!this.table[DOM_ATTRIBUTE]) return;
-		this.ths.forEach(function (th) {
-			if (th._lnSortClick) {
-				th.removeEventListener('click', th._lnSortClick);
-				delete th._lnSortClick;
-			}
-			delete th[DOM_ATTRIBUTE + 'Bound'];
-		});
-		delete this.table[DOM_ATTRIBUTE];
-	};
-
-	// ─── DOM Observer ──────────────────────────────────────────
-
-	function _domObserver() {
-		guardBody(function () {
-			const observer = new MutationObserver(function (mutations) {
-				mutations.forEach(function (mutation) {
-					if (mutation.type === 'childList') {
-						mutation.addedNodes.forEach(function (node) {
-							if (node.nodeType === 1) findElements(node);
-						});
-					} else if (mutation.type === 'attributes') {
-						findElements(mutation.target);
-					}
-				});
-			});
-			observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [SORT_ATTR] });
-		}, 'ln-table-sort');
-	}
-
-	// ─── Init ──────────────────────────────────────────────────
-
-	window[DOM_ATTRIBUTE] = constructor;
-	_domObserver();
-
-	if (document.readyState === 'loading') {
-		document.addEventListener('DOMContentLoaded', function () {
-			constructor(document.body);
-		});
-	} else {
-		constructor(document.body);
-	}
-})();
+import { guardBody, dispatch } from '../../ln-core';
+import { persistGet, persistSet } from '../../ln-core';
+
+(function () {
+	const DOM_ATTRIBUTE = 'lnTableSort';
+	const SORT_ATTR = 'data-ln-sort';
+	const BUTTON_HOOK = 'data-ln-table-sort';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Constructor ───────────────────────────────────────────
+	// Auto-initializes any <table> that contains th[data-ln-sort] headers.
+
+	function constructor(domRoot) {
+		findElements(domRoot);
+	}
+
+	// Local findElements — intentional divergence from ln-core helper: tag selector ('table') + two-arg constructor (table, ths).
+	function findElements(root) {
+		const tables = Array.from(root.querySelectorAll('table'));
+		if (root.tagName === 'TABLE') tables.push(root);
+
+		tables.forEach(function (table) {
+			if (table[DOM_ATTRIBUTE]) return;
+			const ths = Array.from(table.querySelectorAll('th[' + SORT_ATTR + ']'));
+			if (ths.length) table[DOM_ATTRIBUTE] = new _component(table, ths);
+		});
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(table, ths) {
+		this.table = table;
+		this.ths = ths;
+		this._col = -1;
+		this._dir = null;
+		const self = this;
+
+		ths.forEach(function (th, index) {
+			if (th[DOM_ATTRIBUTE + 'Bound']) return;
+			th[DOM_ATTRIBUTE + 'Bound'] = true;
+
+			// D1/Option A: bind click to the sort button, not the whole <th>.
+			// Columns without a [data-ln-table-sort] button skip binding.
+			const btn = th.querySelector('[' + BUTTON_HOOK + ']');
+			if (!btn) return;
+
+			btn._lnSortClick = function () {
+				self._handleClick(index, th);
+			};
+			btn.addEventListener('click', btn._lnSortClick);
+		});
+
+		// ─── Restore persisted sort ───────────────────────────────
+		const persistRoot = table.closest('[data-ln-table][data-ln-persist]');
+		if (persistRoot) {
+			const saved = persistGet('table-sort', persistRoot);
+			if (saved && saved.dir && saved.col >= 0 && saved.col < ths.length) {
+				// Programmatically trigger the saved sort
+				this._handleClick(saved.col, ths[saved.col]);
+				if (saved.dir === 'desc') {
+					this._handleClick(saved.col, ths[saved.col]);
+				}
+			}
+		}
+
+		return this;
+	}
+
+	_component.prototype._handleClick = function (colIndex, th) {
+		let newDir;
+
+		if (this._col !== colIndex) {
+			newDir = 'asc';
+		} else if (this._dir === 'asc') {
+			newDir = 'desc';
+		} else if (this._dir === 'desc') {
+			newDir = null;
+		} else {
+			newDir = 'asc';
+		}
+
+		// JS-2: use state classes on <th>; CSS owns icon visibility.
+		this.ths.forEach(function (t) {
+			t.classList.remove('ln-sort-asc', 'ln-sort-desc');
+		});
+
+		if (newDir === null) {
+			this._col = -1;
+			this._dir = null;
+		} else {
+			this._col = colIndex;
+			this._dir = newDir;
+			th.classList.add(newDir === 'asc' ? 'ln-sort-asc' : 'ln-sort-desc');
+		}
+
+		dispatch(this.table, 'ln-table:sort', {
+			column: colIndex,
+			sortType: th.getAttribute(SORT_ATTR),
+			direction: newDir
+		});
+		const persistRoot = this.table.closest('[data-ln-table][data-ln-persist]');
+		if (persistRoot) {
+			if (newDir === null) {
+				persistSet('table-sort', persistRoot, null);
+			} else {
+				persistSet('table-sort', persistRoot, { col: colIndex, dir: newDir });
+			}
+		}
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.table[DOM_ATTRIBUTE]) return;
+		this.ths.forEach(function (th) {
+			const btn = th.querySelector('[' + BUTTON_HOOK + ']');
+			if (btn && btn._lnSortClick) {
+				btn.removeEventListener('click', btn._lnSortClick);
+				delete btn._lnSortClick;
+			}
+			delete th[DOM_ATTRIBUTE + 'Bound'];
+		});
+		delete this.table[DOM_ATTRIBUTE];
+	};
+
+	// ─── DOM Observer ──────────────────────────────────────────
+
+	function _domObserver() {
+		guardBody(function () {
+			const observer = new MutationObserver(function (mutations) {
+				mutations.forEach(function (mutation) {
+					if (mutation.type === 'childList') {
+						mutation.addedNodes.forEach(function (node) {
+							if (node.nodeType === 1) findElements(node);
+						});
+					} else if (mutation.type === 'attributes') {
+						findElements(mutation.target);
+					}
+				});
+			});
+			observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [SORT_ATTR] });
+		}, 'ln-table-sort');
+	}
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	window[DOM_ATTRIBUTE] = constructor;
+	_domObserver();
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', function () {
+			constructor(document.body);
+		});
+	} else {
+		constructor(document.body);
+	}
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livenetworks/ashlar",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
   "license": "MIT",
   "author": "Live Networks",
@@ -32,8 +32,9 @@
   },
   "scripts": {
     "dev": "node scripts/build.mjs --watch",
-    "build": "node scripts/build.mjs && npm run build:demos",
+    "build": "node scripts/build.mjs && npm run build:dev-css && npm run build:demos",
     "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow",
+    "build:dev-css": "sass scss/ln-ashlar-dev.scss demo/dist/ln-ashlar-dev.css --no-source-map --style=compressed",
     "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
     "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && cp demo/admin/src/demo.js demo/admin/dist/demo.js && node demo/admin/src/build-pages.mjs",
     "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed"

package/scss/components/_filter.scss

@@ -0,0 +1,25 @@
+@use '../config/mixins' as *;
+
+// Filter dropdown content chrome (search input + options list; NO clear button —
+// the data-ln-filter-reset "All" sentinel is the reset affordance).
+// Floating shell is supplied separately:
+//   • popover-driven (ln-filter static): @mixin popover on the [data-ln-popover] wrapper
+//   • ln-data-table dynamic clone: floating-panel + box below
+.column-filter-dropdown {
+	@include filter-dropdown;
+}
+
+// ln-data-table appends its cloned dropdown directly into the <th> and
+// manages its own open/close — it does NOT route through ln-popover, so it
+// needs the floating shell applied here (the popover path gets it from
+// @mixin popover instead).
+[data-ln-data-table] .column-filter-dropdown {
+	@include floating-panel;
+	position: absolute;
+	top: 100%;
+	right: 0;
+	left: auto;
+	margin-top: var(--size-xs);
+	min-width: 14rem;
+	padding: var(--size-sm);
+}

package/scss/components/_ln-table.scss

@@ -2,8 +2,6 @@
 
 [data-ln-table] {
 	@include ln-table;
-	@include ln-table-column-filter;
-	@include ln-table-sort;
 }
 
 // In-thead toolbar — first thead row's colspan th.
@@ -58,3 +56,4 @@
 .ln-table__spacer {
 	@include ln-table-spacer-row;
 }
+

package/scss/components/_table.scss

@@ -2,7 +2,6 @@
 
 table {
 	@include table-base;
-	@include table-filter-button;
 
 	tr.section-header td {
 		@include table-section-header;
@@ -17,3 +16,58 @@ table {
 		table { @include table-responsive; }
 	}
 }
+
+// ─── Shared Column Sort & Filter Buttons ────────────────────────
+// CSS targets the unprefixed structural helper class on the button, NOT the data-ln-* JS
+// hook. .table-sort / .table-filter are thin bindings that mirror the mixins; a consumer
+// may instead @include table-sort / table-filter on their own selector (the class is a
+// convenience, not a mandate — see "Naming & class architecture"). Behavior hooks
+// (data-ln-col-sort / data-ln-table-sort / data-ln-popover-for / data-ln-col-filter) are
+// the per-system functional layer and intentionally differ.
+
+.table-sort { @include table-sort; }
+th:hover .table-sort { opacity: 0.7; }
+
+// Active sort — JS-state class on the <th>, set by sort JS (client) or server.
+.ln-sort-asc .table-sort,
+.ln-sort-desc .table-sort { @include table-sort-active; }
+
+.ln-sort-asc .table-sort {
+	[data-ln-sort-icon="none"] { display: none; }
+	[data-ln-sort-icon="asc"]  { display: inline-block; }
+}
+.ln-sort-desc .table-sort {
+	[data-ln-sort-icon="none"] { display: none; }
+	[data-ln-sort-icon="desc"] { display: inline-block; }
+}
+
+.table-filter { @include table-filter; }
+th:hover .table-filter { opacity: 0.7; }
+
+// Active filter — JS-state class set DIRECTLY on the button (self-selector), combined with
+// the structural helper class. Fixes the latent ln-data-table bug: JS toggles
+// .ln-filter-active on the button itself, but the old CSS used a descendant combinator
+// (.ln-filter-active [data-ln-col-filter]) that never matched, so the dot never rendered.
+// See D2.
+.table-filter.ln-filter-active { @include table-filter-active; }
+
+
+
+// ─── Data Table JS-State Classes ───────────────────────────────
+// JS-added state classes only. Row chrome (clickable cursor/hover, action
+// buttons, sticky header) is a CONSUMER concern — applied via semantic
+// selectors in project SCSS, never keyed off the data-ln-* JS hooks.
+
+.ln-row-selected {
+	@include table-row-selected;
+}
+
+.ln-row-focused {
+	@include table-row-focused;
+}
+
+// Virtual-scroll spacer
+.ln-data-table__spacer {
+	@include table-spacer-row;
+}
+

package/scss/config/mixins/_diagnostics.scss

@@ -0,0 +1,37 @@
+@use 'colors' as *;
+@use 'spacing' as *;
+@use 'position' as *;
+
+// ─── DOM Diagnostics & Linter Mixins ───────────────────────────
+// These mixins are for developer-only diagnostic overlays and validations.
+// They should be completely isolated from production bundles.
+
+// Generic block element DOM diagnostic error
+// Applies a red dashed border and a prominent warning banner at the top.
+@mixin dev-dom-error($message) {
+	outline: 2px dashed hsl(var(--color-error));
+	@include relative;
+
+	&::before {
+		content: " ⚠ #{$message}";
+		display: block;
+		background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
+		color: hsl(var(--color-error));
+		padding: var(--size-xs) var(--size-sm);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: bold;
+		border-bottom: 1px solid hsl(var(--color-strong));
+	}
+}
+
+// Generic inline/element-level DOM diagnostic warning
+// Appends a red inline text warning adjacent to the targeted element.
+@mixin dev-inline-error($message) {
+	&::after {
+		content: " ⚠ #{$message}";
+		color: hsl(var(--color-error));
+		font-weight: normal;
+		white-space: nowrap;
+		margin-inline-start: var(--size-xs, 0.5rem);
+	}
+}

package/scss/config/mixins/_filter.scss

@@ -0,0 +1,49 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'interaction' as *;
+@use 'transitions' as *;
+@use 'form' as *;
+
+// ─── Filter dropdown — content chrome only ─────────────────────────
+// The floating shell (chrome, fixed positioning, min-width, show/hide)
+// comes from `@mixin popover` on the popover-driven path, OR from
+// `@mixin floating-panel` + scroll box on the ln-data-table dynamic
+// path (see components/_filter.scss). This mixin styles ONLY the inner
+// content: scrollable options box, search input, and the options list
+// (pills via check-list).
+//
+// NOTE: there is intentionally NO clear-button block. The redundant
+// "Clear Filter" button was removed library-wide — the `data-ln-filter-reset`
+// "All" sentinel checkbox already performs the reset. Do not re-introduce a
+// `[data-ln-filter-clear]` selector here.
+//
+// Tunables (consumer-overridable via --var with sane defaults):
+//   --filter-dropdown-max-height  (default 20rem)
+//   --filter-dropdown-overflow-y  (default auto)
+//   --filter-dropdown-text        (default var(--text-xs))   ← sm density
+//   --filter-dropdown-item-pad-y  (default var(--size-3xs))
+//
+// Usage:
+//   .column-filter-dropdown { @include filter-dropdown; }
+
+@mixin filter-dropdown {
+	max-height: var(--filter-dropdown-max-height, 20rem);
+	overflow-y: var(--filter-dropdown-overflow-y, auto);
+	text-transform: none; // reset inherited header uppercase
+
+	[data-ln-filter-search] {
+		@include form-input;
+		font-size: var(--filter-dropdown-text, var(--text-xs));
+		--padding-y: var(--size-xs);
+		--padding-x: var(--size-sm);
+		width: 100%;
+		margin-bottom: var(--size-sm);
+	}
+
+	[data-ln-filter-options] {
+		@include check-list;
+		font-size: var(--filter-dropdown-text, var(--text-xs));
+
+		li { padding: var(--filter-dropdown-item-pad-y, var(--size-3xs)) 0; }
+	}
+}

package/scss/config/mixins/_index.scss

@@ -25,6 +25,7 @@
 @forward 'nav';
 @forward 'btn';
 @forward 'form';
+@forward 'filter';
 @forward 'modal';
 @forward 'breadcrumbs';
 @forward 'loader';
@@ -53,6 +54,6 @@
 @forward 'toast';
 @forward 'upload';
 @forward 'translations';
-@forward 'data-table';
 @forward 'ln-table';
 @forward 'ajax';
+@forward 'diagnostics';