@livenetworks/ashlar 1.4.1 → 1.6.0

package/scss/config/mixins/_table.scss

@@ -6,41 +6,114 @@
 @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. Default to a discrete tint of the primary color
+	// mixed with transparent to create a harmonious background shift across themes.
+	--bg-row-hover: var(--color-row-hover, color-mix(in srgb, var(--color-primary) 6%, transparent));
+
 	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 {
 		@include text-left;
-		padding: var(--padding-y) var(--padding-x);
+		padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
 		@include font-semibold;
-		font-size: var(--text-label-sm);
-		line-height: var(--line-height);
-		letter-spacing: 0.4px;
+		@include typography(label-sm);
+		letter-spacing: 0.06em;
 		@include uppercase;
 		color: var(--color-fg);
+		position: relative;
+		top: auto;
+		z-index: auto;
+
+		// 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) {
+			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 3.75rem);
+
+			.table-filter {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x, var(--size-md));
+				margin: 0;
+			}
+			[data-ln-sort] {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: calc(var(--padding-x, var(--size-md)) + 1.75rem);
+				margin: 0;
+			}
+		}
+
+		&:has([data-ln-sort]):not(:has(.table-filter)) {
+			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
+
+			[data-ln-sort] {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x, var(--size-md));
+				margin: 0;
+			}
+		}
+
+		&:has(.table-filter):not(:has([data-ln-sort])) {
+			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
+
+			.table-filter {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				right: var(--padding-x, var(--size-md));
+				margin: 0;
+			}
+		}
 	}
 
 	tbody tr {
@@ -48,16 +121,13 @@
 		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);
 		}
 	}
 
 	td {
-		padding: var(--padding-y) var(--padding-x);
+		padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
 		@include border-b;
 		font-size: var(--font-size);
 		line-height: var(--line-height);
@@ -83,6 +153,21 @@
 	th.nowrap {
 		@include whitespace-nowrap;
 	}
+
+	// Sticky section footer inside sticky/enhanced tables
+	@if $sticky {
+		> footer {
+			padding: var(--table-cell-padding-y) var(--table-cell-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);
+			@include typography(body-sm);
+			position: sticky;
+			z-index: var(--z-sticky);
+		}
+	}
 }
 
 // ─── Responsive (mobile stacked layout) ─────────────────────────
@@ -182,34 +267,143 @@
 	}
 }
 
-// ─── 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-header-btn-base {
+	width: 1.75rem;
+	height: 1.75rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	border-radius: 50%;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	box-shadow: none;
+	opacity: 0.45;
+	transition: all 0.15s ease-in-out;
+
+	&:hover {
+		background-color: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
+		opacity: 1;
+	}
+}
+
+@mixin table-filter {
+	@include table-header-btn-base;
+	vertical-align: middle;
+	position: 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);
 	}
+}
+
+
+
+
 
-	th [data-ln-dropdown] {
-		float: right;
+@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;
 	}
 
-	th[data-ln-filter-active] .filter {
+	&: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;
+	}
+}
+
+@mixin table-row-actions {
+	display: flex;
+	align-items: center;
+	gap: var(--size-xs);
+	position: absolute;
+	right: var(--padding-x, 1rem);
+	top: 50%;
+	transform: translateY(-50%);
+	opacity: 0;
+	pointer-events: none;
+	visibility: hidden;
+	transition: opacity var(--transition-fast, 0.15s) ease-in-out, visibility var(--transition-fast, 0.15s);
+	background: var(--bg-row-hover, var(--color-bg));
+	padding-left: var(--size-md);
+	margin: 0;
+	list-style: none;
+	z-index: 2;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: -2rem;
+		width: 2rem;
+		background: linear-gradient(to right, transparent, var(--bg-row-hover, var(--color-bg)));
+		pointer-events: none;
+	}
+
+	li {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	form {
+		display: inline-flex;
+		margin: 0;
+	}
+}
+
+

package/scss/config/mixins/_toast.scss

@@ -1,152 +1,179 @@
-@use 'display' as *;
-@use 'spacing' as *;
-@use 'sizing' as *;
-@use 'typography' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'shadows' as *;
-@use 'position' as *;
-@use 'transitions' as *;
-@use 'interaction' as *;
-@use 'motion' as *;
-@use 'btn' as *;
-@use 'card' as *;
-
-// Toast notification -- side-accent card with icon, title, body, close button.
-//
-// Usage:
-//   [data-ln-toast] { @include toast-container; }
-//   .ln-toast__card { @include toast-card; }
-//
-// Color: attach .success/.error/.warning/.info utility class on the card to cascade --color-accent.
-
-@mixin toast-container {
-	@include fixed;
-	@include z-toast;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	pointer-events: none;
-	// Viewport-edge offsets — toast container distance from viewport,
-	// not shell rhythm.
-	right: var(--size-lg);
-	bottom: var(--size-lg);
-	display: flex;
-	flex-direction: column-reverse;
-}
-
-@mixin toast-item {
-	list-style: none;
-	opacity: 0;
-	pointer-events: auto;
-	@include motion-safe {
-		transform: translateX(30px);
-		transition: all var(--transition-base) var(--easing-standard);
-	}
-
-	& + & {
-		--margin-block: var(--size-md);
-		margin-bottom: var(--margin-block);
-	}
-}
-
-@mixin toast-item-in {
-	opacity: 1;
-	@include motion-safe {
-		transform: translateX(0);
-	}
-}
-
-@mixin toast-item-out {
-	opacity: 0 !important;
-	@include motion-safe {
-		transform: scale(0.95) !important;
-		transition: all var(--transition-fast) !important;
-	}
-}
-
-@mixin toast-card {
-	@include floating-panel;
-	@include flex;
-	min-width: 320px;
-	max-width: 450px;
-	@include overflow-hidden;
-}
-
-@mixin toast-side {
-	--color-accent:    hsl(var(--color-primary));
-	--color-accent-fg: hsl(var(--color-white));
-	flex: 0 0 44px;
-	@include flex;
-	align-items: flex-start;
-	@include justify-center;
-	--padding-y: var(--size-md);
-	padding-top: var(--padding-y);
-	background: var(--color-accent);
-	color: var(--color-accent-fg);
-
-	&::before {
-		width: 2rem;
-		height: 2rem;
-	}
-}
-
-@mixin toast-content {
-	@include flex-1;
-	--padding-y: var(--size-md);
-	--padding-x: var(--size-md);
-	padding: var(--padding-y) var(--padding-x) var(--padding-y) var(--size-sm);  // 4th arm: icon-side gutter, component-design intrinsic.
-	@include relative;
-
-	.ln-toast__close {
-		--btn-padding-y: var(--size-2xs);
-		--btn-padding-x: var(--size-2xs);
-		@include absolute;
-		// Geometric — close button positioned inside content padding.
-		top: var(--size-sm);
-		right: var(--size-sm);
-	}
-}
-
-// ─── Header & close ────────────────────────────────────
-
-@mixin toast-head {
-	@include flex;
-	align-items: flex-start;
-	@include justify-between;
-	--gap: var(--size-md);
-	gap: var(--gap);
-}
-
-@mixin toast-title {
-	@include font-bold;
-	@include text-base;
-	color: var(--color-fg);
-	line-height: 1.25;
-}
-
-// ─── Body ──────────────────────────────────────────────
-
-@mixin toast-body {
-	--color-fg: var(--fg-muted);
-	--margin-block: var(--size-sm);
-	margin-top: var(--margin-block);
-	font-size: var(--text-base);
-	color: var(--color-fg);
-	line-height: 1.5;
-
-	p { @include m(0); }
-
-	ul {
-		--margin-block: var(--size-sm);
-		margin: var(--margin-block) 0 0 0;
-		--padding-x: var(--size-md-up);
-		padding-left: var(--padding-x);
-		@include text-sm;
-	}
-
-	li + li {
-		--margin-block: var(--size-xs);
-		margin-top: var(--margin-block);
-	}
-}
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'shadows' as *;
+@use 'position' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+@use 'btn' as *;
+@use 'card' as *;
+@use 'breakpoints' as *;
+
+// Toast notification -- side-accent card with icon, title, body, close button.
+// The <li> IS the card; the type IS its class (.success/.error/.warn/.info).
+//
+// Usage:
+//   [data-ln-toast]      { @include toast-container; }
+//   [data-ln-toast] > li { @include toast-item; @include toast-card; }
+//
+// Tone: the type class on the <li> rebinds --color-primary/--color-accent via
+// semantic-color() — see components/_toast.scss. SSR authors the class; the
+// dynamic path fills it (data-ln-attr="class:type"). warn maps to the warning
+// family in that binding.
+
+@mixin toast-container {
+	@include fixed;
+	@include z-toast;
+	border: none;
+	background: transparent;
+	inset: auto;
+	right: var(--size-lg);
+	bottom: var(--size-lg);
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column-reverse;
+	overflow: visible;
+
+	&:popover-open {
+		display: flex;
+	}
+
+	@include mq-down(md) {
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+}
+
+// Base = final visible resting state, so SSR-authored <li> render with
+// zero JS. .ln-enter (below) is a transient pre-mount override applied
+// only to JS-created items — see ln-toast.js _buildItem/_append.
+@mixin toast-item {
+	list-style: none;
+	pointer-events: auto;
+	opacity: 1;
+	@include motion-safe {
+		transform: translateX(0);
+		transition: all var(--transition-base) var(--easing-standard);
+	}
+
+	& + & {
+		--margin-block: var(--size-md);
+		margin-bottom: var(--margin-block);
+	}
+}
+
+@mixin toast-item-enter {
+	opacity: 0;
+	@include motion-safe {
+		transform: translateX(30px);
+	}
+}
+
+@mixin toast-item-out {
+	opacity: 0 !important;
+	@include motion-safe {
+		transform: scale(0.95) !important;
+		transition: all var(--transition-fast) !important;
+	}
+}
+
+@mixin toast-card {
+	@include floating-panel;
+	@include flex;
+	min-width: 320px;
+	max-width: 450px;
+	@include overflow-hidden;
+
+	@include mq-down(md) {
+		min-width: 0;
+		max-width: none;
+		width: 100%;
+		border-radius: 0;
+		border-inline: 0;
+		border-block-end: 0;
+	}
+}
+
+@mixin toast-icon {
+	--color-accent:    hsl(var(--color-primary));
+	--color-accent-fg: hsl(var(--color-white));
+	flex: 0 0 44px;
+	@include flex;
+	align-items: flex-start;
+	@include justify-center;
+	--padding-y: var(--size-md);
+	padding-top: var(--padding-y);
+	background: var(--color-accent);
+	color: var(--color-accent-fg);
+
+	&::before {
+		width: 2rem;
+		height: 2rem;
+	}
+}
+
+// The icon variant list — 4 authored icons, CSS shows the one matching the
+// card's type class (see components/_toast.scss for the when-toggle).
+// display:contents dissolves the <ul> box so the visible <li> becomes a direct
+// flex child of .icon (parity with the SSR path's direct <svg> child).
+@mixin toast-icon-list {
+	display: contents;
+
+	> li { @include hidden; }
+}
+
+@mixin toast-content {
+	@include flex-1;
+	--padding-y: var(--size-md);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x) var(--padding-y) var(--size-sm);  // 4th arm: icon-side gutter, component-design intrinsic.
+	@include relative;
+
+	button[data-ln-toast-close] {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-2xs);
+		@include absolute;
+		// Geometric — close button positioned inside content padding.
+		top: var(--size-sm);
+		right: var(--size-sm);
+	}
+}
+
+@mixin toast-title {
+	@include font-bold;
+	@include text-base;
+	color: var(--color-fg);
+	line-height: 1.25;
+}
+
+@mixin toast-body {
+	--color-fg: var(--fg-muted);
+	--margin-block: var(--size-sm);
+	margin-top: var(--margin-block);
+	font-size: var(--text-base);
+	color: var(--color-fg);
+	line-height: 1.5;
+
+	p { @include m(0); }
+
+	ul {
+		--margin-block: var(--size-sm);
+		margin: var(--margin-block) 0 0 0;
+		--padding-x: var(--size-md-up);
+		padding-left: var(--padding-x);
+		@include text-sm;
+	}
+
+	li + li {
+		--margin-block: var(--size-xs);
+		margin-top: var(--margin-block);
+	}
+}