@livenetworks/ashlar 1.4.0 → 1.5.1

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';

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

@@ -21,8 +21,14 @@
 //   [data-ln-table] { @include ln-table; }
 //   .ln-table__toolbar { @include ln-table-toolbar; }
 //
-// State-driven CSS (spacer rows, sort icon .hidden toggle, content overflow
-// fix) stays in the co-located JS SCSS file.
+// Sort/filter button styling is SHARED via scss/components/_table.scss
+// (.table-sort / .table-filter structural helper classes + the :has() stack
+// in @mixin table-base). No ln-table-specific sort/filter button mixins here.
+// Under D1 (Option A) the <th> is no longer the sort click target, so no
+// ln-table-specific cursor:pointer / select-none on the <th> is needed.
+//
+// State-driven CSS (spacer rows, content overflow fix) stays in
+// the co-located JS SCSS file.
 
 @mixin ln-table {
 	@include border;
@@ -126,95 +132,6 @@
 	}
 }
 
-// ─── Column filter dropdowns in th ────────────────────────
-
-@mixin ln-table-column-filter {
-	th [data-ln-dropdown] {
-		@include inline-flex;
-		@include items-center;
-	}
-
-	th [data-ln-dropdown] > button {
-		@include flex;
-		@include items-center;
-		--gap: var(--size-xs);
-		gap: var(--gap);
-		background: none;
-		border: none;
-		color: inherit;
-		font: inherit;
-		@include cursor-pointer;
-		--btn-padding-y: 0;
-		--btn-padding-x: 0;
-
-		.ln-icon-filter {
-			opacity: 0.4;
-			@include motion-safe {
-				transition: opacity var(--transition-fast);
-			}
-		}
-
-		&:hover .ln-icon-filter {
-			opacity: 1;
-		}
-	}
-
-	th [data-ln-dropdown-menu] button[data-ln-filter-key] {
-		@include w-full;
-		@include flex;
-		@include items-center;
-		@include text-left;
-		--btn-padding-y: var(--size-xs);
-		--btn-padding-x: var(--size-sm);
-		@include text-sm;
-		@include font-normal;
-		background: none;
-		border: none;
-		border-radius: 0;
-		color: var(--color-fg);
-		@include cursor-pointer;
-		@include transition-fast;
-
-		&:hover {
-			--color-bg: var(--bg-sunken);
-			background: var(--color-bg);
-		}
-
-		&[data-active] {
-			background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
-			color: var(--color-accent);
-			@include font-medium;
-		}
-	}
-}
-
-// ─── Sort indicators on th ────────────────────────────────
-
-@mixin ln-table-sort {
-	th[data-ln-sort] {
-		@include cursor-pointer;
-		@include select-none;
-
-		[data-ln-sort-icon] {
-			@include size(0.875rem);
-			--margin-inline: var(--size-xs);
-			margin-left: var(--margin-inline);
-			vertical-align: middle;
-			opacity: 0.4;
-			@include motion-safe {
-				transition: opacity var(--transition-fast);
-			}
-		}
-
-		&:hover [data-ln-sort-icon] {
-			opacity: 0.7;
-		}
-
-		&[data-ln-sort-active] [data-ln-sort-icon] {
-			opacity: 1;
-		}
-	}
-}
 
 // ─── Footer ───────────────────────────────────────────────
 
@@ -418,3 +335,5 @@
 		background: transparent !important;
 	}
 }
+
+

package/scss/config/mixins/_table.scss

@@ -6,30 +6,59 @@
 @use 'borders' as *;
 @use 'transitions' as *;
 @use 'position' as *;
+@use 'motion' as *;
+@use 'interaction' as *;
+@use 'form' as *;
+@use 'btn' as *;
+@use 'card' as *;
+@use 'ln-table';
 
 // ─── Base table ─────────────────────────────────────────────────
 
-@mixin table-base {
+@mixin table-base($sticky: false) {
 	@include w-full;
 	background: var(--color-bg);
 	--radius: var(--radius-lg);
 	border-radius: var(--radius);
 	// `overflow: clip` not `overflow: hidden` — clips at rounded corners
 	// without establishing a scroll container, so sticky descendants
-	// (e.g. `@mixin data-table` thead/tfoot) bind to the outer
-	// `.app-main > section` scroll surface instead of being trapped
-	// inside the <table> element. Same rationale as `@mixin section-card`
-	// and `@mixin ln-table`.
+	// bind to the outer scroll surface instead of being trapped inside.
 	overflow: clip;
 	--shadow: var(--shadow-resting);
 	box-shadow: var(--shadow);
-	border-collapse: collapse;
+	
+	@if $sticky {
+		@include relative;
+		border-collapse: separate;
+		border-spacing: 0;
+	} @else {
+		border-collapse: collapse;
+	}
 	font-variant-numeric: tabular-nums;
 
+	// Row hover transition color. Sticky/enhanced tables use a relative lightness calculation
+	// to make the hovered row visually distinct from --bg-sunken chrome headers/footers.
+	$bg-hover: var(--bg-sunken);
+	@if $sticky {
+		$bg-hover: hsl(from var(--bg-base) h s calc(l - 4));
+	}
+	--bg-row-hover: #{$bg-hover};
+
 	thead {
 		--color-bg: var(--bg-sunken);
 		background: var(--color-bg);
 		border-block-end: var(--border-block-end, var(--border-width-strong) solid var(--color-border));
+		
+		@if $sticky {
+			@include sticky-top;
+		}
+	}
+
+	// Support for in-thead toolbar inside sticky tables
+	@if $sticky {
+		thead > tr:first-child:has(> th[colspan]) > th {
+			@include ln-table.ln-table-thead-toolbar;
+		}
 	}
 
 	th {
@@ -41,6 +70,54 @@
 		letter-spacing: 0.4px;
 		@include uppercase;
 		color: var(--color-fg);
+		position: relative;
+		top: auto;
+		z-index: auto;
+
+		// Shared header-button stack — keyed off the unprefixed structural button classes,
+		// so table / ln-table / ln-data-table all share one positioning rule.
+		&:has(.table-sort):has(.table-filter) {
+			padding-inline-end: calc(var(--padding-x) + 2.5rem);
+
+			.table-filter {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x);
+				margin: 0;
+			}
+			.table-sort {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: calc(var(--padding-x) + 1.25rem);
+				margin: 0;
+			}
+		}
+
+		&:has(.table-sort):not(:has(.table-filter)) {
+			padding-inline-end: calc(var(--padding-x) + 1.25rem);
+
+			.table-sort {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x);
+				margin: 0;
+			}
+		}
+
+		&:has(.table-filter):not(:has(.table-sort)) {
+			padding-inline-end: calc(var(--padding-x) + 1.25rem);
+
+			.table-filter {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x);
+				margin: 0;
+			}
+		}
 	}
 
 	tbody tr {
@@ -48,10 +125,7 @@
 		min-height: var(--density-row-h);
 
 		&:hover {
-			// Default hover stays --bg-sunken for standalone tables. Data-table
-			// re-binds --color-bg locally (see _data-table.scss) so its hover
-			// disambiguates from chrome that also uses --bg-sunken.
-			--color-bg: var(--bg-sunken);
+			--color-bg: var(--bg-row-hover);
 			background: var(--color-bg);
 		}
 	}
@@ -83,6 +157,21 @@
 	th.nowrap {
 		@include whitespace-nowrap;
 	}
+
+	// Sticky section footer inside sticky/enhanced tables
+	@if $sticky {
+		> footer {
+			padding: var(--padding-y) var(--padding-x);
+			border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
+			--color-bg: var(--bg-sunken);
+			background: var(--color-bg);
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			font-size: var(--text-body-sm);
+			position: sticky;
+			z-index: var(--z-sticky);
+		}
+	}
 }
 
 // ─── Responsive (mobile stacked layout) ─────────────────────────
@@ -182,34 +271,114 @@
 	}
 }
 
-// ─── Column filter button ──────────────────────────────────────
-// Button inside <th> that triggers a filter popover/dropdown.
-// Convention: add class="filter" to the trigger button.
-// ln-table.js sets data-ln-filter-active on the <th> when active.
-
-@mixin table-filter-button {
-	th .filter {
-		@include inline-flex;
-		@include items-center;
-		float: right;
-		--btn-padding-y: var(--size-2xs);
-		--btn-padding-x: var(--size-2xs);
-		@include rounded-sm;
-		opacity: 0.5;
+// ─── Column sort & filter buttons ──────────────────────────────
 
-		&:hover {
-			opacity: 1;
-			--color-bg: var(--bg-sunken);
-			background: var(--color-bg);
-		}
+@mixin table-sort {
+	opacity: 0.4;
+	@include motion-safe {
+		transition: opacity 0.15s;
 	}
+	@include cursor-pointer;
+	background: none;
+	border: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	--margin-inline: var(--size-xs);
+	margin-inline-start: var(--margin-inline);
+	vertical-align: middle;
 
-	th [data-ln-dropdown] {
-		float: right;
+	[data-ln-sort-icon="asc"],
+	[data-ln-sort-icon="desc"] {
+		display: none;
 	}
+}
+
+@mixin table-sort-active {
+	opacity: 1;
+	color: var(--color-accent);
+}
 
-	th[data-ln-filter-active] .filter {
+@mixin table-filter {
+	opacity: 0.4;
+	@include motion-safe {
+		transition: opacity 0.15s;
+	}
+	@include cursor-pointer;
+	background: none;
+	border: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	--margin-inline: var(--size-2xs);
+	margin-inline-start: var(--margin-inline);
+	vertical-align: middle;
+	@include relative;
+}
+
+@mixin table-filter-active {
+	opacity: 1;
+	color: var(--color-accent);
+
+	&::after {
+		content: '';
+		@include absolute;
+		top: 0;
+		right: 0;
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: var(--radius-full);
+		background: var(--color-accent);
+	}
+}
+
+
+
+
+
+@mixin table-row-action {
+	background: none;
+	border: none;
+	--shadow: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	opacity: 0.5;
+	@include motion-safe {
+		transition: opacity 0.15s;
+	}
+
+	&:hover:not(:disabled) {
+		background: none;
 		opacity: 1;
-		color: var(--color-accent);
 	}
 }
+
+@mixin table-row-action-delete {
+	--color-primary: var(--color-error);
+	color: hsl(var(--color-primary));
+}
+
+@mixin table-row {
+	cursor: pointer;
+
+	&:hover {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+}
+
+@mixin table-row-selected {
+	background: var(--color-accent-tint);
+}
+
+@mixin table-row-focused {
+	--color-accent-focus: hsl(from var(--color-accent) h s calc(l + 8));
+	outline: 2px solid var(--color-accent-focus);
+	outline-offset: -2px;
+}
+
+@mixin table-spacer-row {
+	td {
+		padding: 0 !important;
+		border: none !important;
+	}
+}
+

package/scss/ln-ashlar-dev.scss

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Dev & Validation Diagnostics — ln-ashlar
+// ==========================================================================
+// This stylesheet contains diagnostic CSS tools to validate correct HTML 
+// structure, missing integration attributes, and accessibility warnings during 
+// development. Do not compile or deploy this file to production.
+// ==========================================================================
+
+@use 'config/mixins' as *;
+
+// 1. Table Sort: missing sort button warning
+// Detects when a th[data-ln-sort] is sortable but doesn't contain a <button data-ln-table-sort>
+th[data-ln-sort]:not(:has([data-ln-table-sort])) {
+	@include dev-inline-error("missing sort button");
+}
+
+// 2. Table Integration: missing ID warning
+// Warns if a table wrapper [data-ln-table] is missing an ID, which breaks search/filter integration
+[data-ln-table]:not([id]) {
+	@include dev-dom-error("[data-ln-table] is missing a required 'id' attribute for filter mapping.");
+}

package/scss/ln-ashlar.scss

@@ -34,6 +34,7 @@
 @use 'components/scrollbar';
 @use 'components/tooltip';
 @use 'components/popover';
+@use 'components/filter';
 @use 'components/chip';
 @use 'components/loader';
 @use 'components/progress';
@@ -45,7 +46,6 @@
 @use 'components/toast';
 @use 'components/upload';
 @use 'components/translations';
-@use 'components/data-table';
 @use 'components/ln-table';
 @use 'components/ajax';