@livenetworks/ashlar 1.4.1 → 1.5.1

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

package/scss/components/_data-table.scss

@@ -1,83 +0,0 @@
-@use '../config/mixins' as *;
-
-[data-ln-data-table] {
-	@include data-table;
-}
-
-// ─── Sort indicators ──────────────────────────────────────
-
-[data-ln-col-sort] {
-	@include data-table-sort-button;
-}
-
-th:hover [data-ln-col-sort] {
-	opacity: 0.7;
-}
-
-.ln-sort-asc [data-ln-col-sort],
-.ln-sort-desc [data-ln-col-sort] {
-	@include data-table-sort-active;
-}
-
-// Active-state icon swap — hide the neutral dual-arrow, show the
-// matching directional icon. Mixin defaults all three to "none shown,
-// asc/desc hidden"; we override per active class.
-.ln-sort-asc [data-ln-col-sort] {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="asc"]  { display: inline-block; }
-}
-
-.ln-sort-desc [data-ln-col-sort] {
-	[data-ln-sort-icon="none"] { display: none; }
-	[data-ln-sort-icon="desc"] { display: inline-block; }
-}
-
-// ─── Filter button ────────────────────────────────────────
-
-[data-ln-col-filter] {
-	@include data-table-filter-button;
-}
-
-th:hover [data-ln-col-filter] {
-	opacity: 0.7;
-}
-
-.ln-filter-active {
-	@include data-table-filter-active;
-}
-
-// ─── Filter dropdown ──────────────────────────────────────
-
-.column-filter-dropdown {
-	@include data-table-filter-dropdown;
-}
-
-// ─── Row action buttons ─────────────────────────────────
-
-[data-ln-row-action] {
-	@include data-table-row-action;
-}
-
-[data-ln-row-action="delete"] {
-	@include data-table-row-action-delete;
-}
-
-// ─── Row interaction states ─────────────────────────────
-
-[data-ln-row] {
-	@include data-table-row;
-}
-
-.ln-row-selected {
-	@include data-table-row-selected;
-}
-
-.ln-row-focused {
-	@include data-table-row-focused;
-}
-
-// ─── Virtual-scroll spacer ──────────────────────────────
-
-.ln-data-table__spacer {
-	@include data-table-spacer-row;
-}