@livenetworks/ashlar 1.5.1 → 1.6.1

package/scss/config/mixins/_popover.scss

@@ -2,11 +2,15 @@
 @use 'borders' as *;
 @use 'motion' as *;
 @use 'card' as *;
+@use 'form' as *;
+@use 'focus' as *;
 
 @mixin popover {
 	@include floating-panel;
 	display: none;
 	position: fixed;
+	inset: auto;
+	margin: 0;
 	min-width: 14rem;
 	max-width: 24rem;
 	padding: var(--padding-y) var(--padding-x);
@@ -22,4 +26,39 @@
 	&:focus {
 		outline: none;
 	}
+
+	// Filter popover content: optional search + checkbox option list
+	> input[type="search"] {
+		width: 100%;
+		margin-bottom: var(--size-xs);
+		box-sizing: border-box;
+	}
+
+	> ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		max-height: var(--filter-options-max-height, 15rem);
+		overflow-y: auto;
+
+		// Nav-link treatment for filter options (accent-tint wash on checked).
+		// Visually-hidden input (below) keeps the checkbox keyboard-focusable.
+		@include check-list-nav;
+
+		> li > label > input {
+			// Override pill's display:none — keep in focus order for keyboard nav
+			display: revert;
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+
+		// Focus ring on label when the hidden input receives keyboard focus
+		> li > label:has(> input:focus-visible) {
+			@include focus-ring;
+		}
+	}
 }

package/scss/config/mixins/_sidebar.scss

@@ -75,7 +75,7 @@
 
 		// Search field drops to a full-width second row below the
 		// brand triad (enabled by `flex-wrap` above).
-		> [data-ln-search] {
+		> .sidebar-search {
 			@include w-full;
 			--margin-block: var(--size-xs);
 			@include mt(var(--margin-block));

package/scss/config/mixins/_sort.scss

@@ -0,0 +1,42 @@
+@use 'display' as *;
+@use 'table' as *;
+
+// ─── Sort control — 3-trigger cycle (none → asc → desc → none) ─────────
+// Only one <button data-ln-sort-dir> is visible at a time; the circular
+// order lives HERE in CSS, not in JS (js/ln-sort/README.md "No cycle
+// logic in JS"). [data-ln-sort-state] on the root decides which trigger
+// shows — the visible button is always the NEXT action, but the icon it
+// carries reports the CURRENT state, not that action (icon-per-button
+// mapping: js/ln-sort/README.md "Icon convention").
+
+@mixin sort {
+	@include inline-flex;
+	list-style: none !important;
+	list-style-type: none !important;
+	margin: 0;
+	padding: 0;
+	vertical-align: middle;
+
+	li {
+		list-style: none !important;
+		list-style-type: none !important;
+	}
+
+	button {
+		@include table-header-btn-base;
+		display: none;
+	}
+
+	&[data-ln-sort-state="none"] [data-ln-sort-dir="asc"],
+	&[data-ln-sort-state="asc"]  [data-ln-sort-dir="desc"],
+	&[data-ln-sort-state="desc"] [data-ln-sort-dir="none"] {
+		display: inline-flex;
+	}
+}
+
+@mixin sort-active {
+	[data-ln-sort-dir] {
+		opacity: 1;
+		color: var(--color-accent);
+	}
+}

package/scss/config/mixins/_table.scss

@@ -36,13 +36,9 @@
 	}
 	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};
+	// 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);
@@ -63,58 +59,58 @@
 
 	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 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);
+		// 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);
+				right: var(--padding-x, var(--size-md));
 				margin: 0;
 			}
-			.table-sort {
+			[data-ln-sort] {
 				position: absolute;
 				top: 50%;
 				transform: translateY(-50%);
-				right: calc(var(--padding-x) + 1.25rem);
+				right: calc(var(--padding-x, var(--size-md)) + 1.75rem);
 				margin: 0;
 			}
 		}
 
-		&:has(.table-sort):not(:has(.table-filter)) {
-			padding-inline-end: calc(var(--padding-x) + 1.25rem);
+		&:has([data-ln-sort]):not(:has(.table-filter)) {
+			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
 
-			.table-sort {
+			[data-ln-sort] {
 				position: absolute;
 				top: 50%;
 				transform: translateY(-50%);
-				right: var(--padding-x);
+				right: var(--padding-x, var(--size-md));
 				margin: 0;
 			}
 		}
 
-		&:has(.table-filter):not(:has(.table-sort)) {
-			padding-inline-end: calc(var(--padding-x) + 1.25rem);
+		&: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);
+				right: var(--padding-x, var(--size-md));
 				margin: 0;
 			}
 		}
@@ -131,7 +127,7 @@
 	}
 
 	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);
@@ -161,13 +157,13 @@
 	// Sticky section footer inside sticky/enhanced tables
 	@if $sticky {
 		> footer {
-			padding: var(--padding-y) var(--padding-x);
+			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);
-			font-size: var(--text-body-sm);
+			@include typography(body-sm);
 			position: sticky;
 			z-index: var(--z-sticky);
 		}
@@ -273,45 +269,33 @@
 
 // ─── Column sort & filter buttons ──────────────────────────────
 
-@mixin table-sort {
-	opacity: 0.4;
-	@include motion-safe {
-		transition: opacity 0.15s;
-	}
-	@include cursor-pointer;
-	background: none;
+@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;
-	--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;
+	color: inherit;
+	cursor: pointer;
+	box-shadow: none;
+	opacity: 0.45;
+	transition: all 0.15s ease-in-out;
 
-	[data-ln-sort-icon="asc"],
-	[data-ln-sort-icon="desc"] {
-		display: none;
+	&:hover {
+		background-color: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
+		opacity: 1;
 	}
 }
 
-@mixin table-sort-active {
-	opacity: 1;
-	color: var(--color-accent);
-}
-
 @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);
+	@include table-header-btn-base;
 	vertical-align: middle;
-	@include relative;
+	position: relative;
 }
 
 @mixin table-filter-active {
@@ -382,3 +366,44 @@
 	}
 }
 
+@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);
+	}
+}