@livenetworks/ashlar 2.1.13 → 2.2.1

package/theme/config/mixins/_form.scss

@@ -17,19 +17,18 @@
 
 @mixin form-label {
 	@include block;
-	@include typography(label-sm);
+	// label-md / medium — a 12px semibold caption over every field reads
+	// as dialog-box chrome; field labels sit one step under body text.
+	@include typography(label-md);
 	@include font-medium;
 	color: var(--color-fg);
 	// Structural label-to-input gap (not shell rhythm).
 	--margin-block: 0.375rem;
 	margin-bottom: var(--margin-block);
 
-	// Required indicator — red * after label text.
-	// Supports standard wrapping classes/tags (.form-element, .form-group, label)
-	// and general siblings preceding a required input.
-	:is(.form-element, .form-group, .form-field):has([required]) > &,
-	label:has([required]) &,
-	&:has(~ :is(input, select, textarea)[required]) {
+	// Required indicator — red * when any control under the label's parent is required
+	// (siblings, nested field shells).
+	:has([required]) > & {
 		&::after {
 			content: ' *';
 			color: hsl(var(--color-error));
@@ -38,6 +37,21 @@
 	}
 }
 
+// Field wrapper — zero-specificity rules so form-grid's `> * { margin: 0 }` wins.
+@mixin form-element {
+	// Stacked outside a form-grid (modal bodies, settings panels).
+	:where(&) + :where(&) {
+		--margin-block: var(--size-md);
+		margin-top: var(--margin-block);
+	}
+
+	// Trailing feedback after the control gets slot treatment.
+	:where(& > :is(input, select, textarea, [data-ln-date-field], search) ~ :not(input)) {
+		@include form-slot;
+		color: var(--fg-muted);
+	}
+}
+
 @mixin form-grid {
 	--gap: var(--size-md);
 	container-type: inline-size;
@@ -83,28 +97,42 @@
 
 @mixin _form-focus-style {
 	border-color: var(--color-accent);
-	@include focus-background-shift;
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 
 // ─── Text inputs, textareas, selects ────────────────────────────
 
 @mixin form-input {
 	@include w-full;
-	--padding-y: var(--input-padding-y, var(--size-sm));
-	--padding-x: var(--size-md);
+	--padding-y: var(--input-padding-y, var(--size-xs-up));
+	--padding-x: var(--size-sm-up);
 	padding: var(--padding-y) var(--padding-x);
 	font-size: var(--font-size);
-	line-height: var(--line-height);
+	// Shared control line box — same height as a sibling button.
+	line-height: var(--control-line-height);
 	color: var(--color-fg);
-	--color-bg: var(--bg-sunken);
+	// Enabled fields read as writable surfaces: base fill, hairline shadow.
+	// A grey fill is reserved for :disabled.
+	--color-bg: var(--input-bg, var(--bg-base));
 	background: var(--color-bg);
 	// Control boundary, not a divider — 1.4.11 wants 3:1 here.
-	--color-border: var(--border-ui);
+	--color-border: var(--input-border, var(--border-ui));
 	@include border;
 	border-radius: var(--radius);
-	@include transition;
+	box-shadow: var(--input-shadow, var(--shadow-xs));
+	// Colour + ring only — `all` would animate padding/font-size when the
+	// density tier switches, making fields visibly "breathe".
+	transition:
+		color var(--transition-base),
+		background-color var(--transition-base),
+		border-color var(--transition-base),
+		box-shadow var(--transition-base);
 	outline: none;
 
+	&:hover:not(:disabled):not(:focus-visible) {
+		--color-border: var(--input-border-hover, var(--border-strong-hover));
+	}
+
 	&:focus-visible {
 		@include _form-focus-style;
 	}
@@ -119,6 +147,7 @@
 		@include cursor-not-allowed;
 		--color-bg: var(--bg-sunken);
 		background: var(--color-bg);
+		box-shadow: none;
 	}
 
 	// Hide native UA clear button on <input type="search"> — we never use it;
@@ -130,6 +159,8 @@
 }
 
 @mixin form-textarea {
+	// Multi-line text keeps the reading line-height, not the control box.
+	line-height: var(--line-height);
 	min-height: 6rem;
 	resize: vertical;
 
@@ -440,12 +471,13 @@
 	@include flex;
 	@include items-center;
 	gap: var(--gap);
-	--padding-y: var(--input-padding-y, var(--size-sm));
+	--padding-y: var(--input-padding-y, var(--size-xs-up));
 	--padding-x: var(--size-md);
 	padding: var(--padding-y) var(--padding-x);
 	@include cursor-pointer;
 	@include transition;
 	@include text-sm;
+	line-height: var(--control-line-height);
 	@include font-medium;
 	margin-bottom: 0;
 	border-radius: var(--radius);
@@ -482,7 +514,7 @@
 	// Lets .error/.success/.warning/.info parents cascade to the checked-
 	// state hover via the .success { --color-primary } chain. See
 	// _btn.scss for the syntax rationale (number form, not percentage).
-	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	background-color: var(--color-bg);
 	border-color: transparent;

package/theme/config/mixins/_index.scss

@@ -22,6 +22,7 @@
 @forward 'accordion';
 @forward 'card';
 @forward 'chip';
+@forward 'count';
 @forward 'nav';
 @forward 'btn';
 @forward 'form';

package/theme/config/mixins/_layout.scss

@@ -4,6 +4,14 @@
 
 // Layout — grid, stack, container
 
+// Respond to available parent width, including sidebars and panel gutters.
+// The min() allows a single item to shrink below its preferred minimum.
+@mixin grid-auto($min: var(--grid-item-min-width)) {
+	display: grid;
+	gap: var(--gap);
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, #{$min}), 1fr));
+}
+
 @mixin _grid-base {
 	display: grid;
 	--gap: var(--size-lg);
@@ -110,6 +118,7 @@
 
 	> * {
 		--radius: 0;
+		--panel-radius: 0;
 		--shadow: none;
 	}
 

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

@@ -22,7 +22,7 @@
 //   .ln-table__toolbar { @include ln-table-toolbar; }
 //
 // Sort/filter button styling is SHARED via scss/components/_table.scss
-// (.table-sort / .table-filter structural helper classes + the :has() stack
+// (.table-sort helper class, [data-ln-table-col-filter] binding + 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.
@@ -53,10 +53,10 @@
 		min-width: var(--table-min-width, 768px);
 	}
 
-	// Whole thead sticky as one unit (toolbar row + column-headers row).
-	// Solid opaque background prevents underlying scrolled rows from bleeding through.
+	// Pinned under the sibling toolbar when one exists (ln-table-toolbar-stack).
+	// Opaque so scrolled rows never bleed through.
 	thead {
-		@include sticky-top;
+		@include sticky-top(var(--table-toolbar-block-size, 0));
 		background: var(--color-bg);
 		isolation: isolate;
 	}
@@ -89,7 +89,8 @@
 	gap: var(--size-md);
 	position: sticky;
 	top: 0;
-	z-index: var(--z-sticky);
+	// One step above the thead: at the table's end the thead slides under it.
+	z-index: calc(var(--z-sticky) + 1);
 	border-radius: 0;
 	background: var(--color-bg);
 	border-bottom: var(--border-width) solid var(--border-subtle);
@@ -99,6 +100,22 @@
 		font-size: 1rem;
 		font-weight: 600;
 		color: var(--color-fg);
+		// Single line keeps the toolbar at its token block-size.
+		@include truncate;
+		min-inline-size: 0;
+	}
+}
+
+// ─── Toolbar + sticky thead stack ─────────────────────────
+// Applied to the toolbar's parent. The toolbar is one control row, so its
+// block-size is known from tokens; every sticky thead below pins under it.
+// Declared on the parent: the thead is in a sibling subtree.
+
+@mixin ln-table-toolbar-stack {
+	--table-toolbar-block-size: calc(2 * var(--card-padding-y) + var(--control-line-height) + 2 * var(--size-xs) + 3 * var(--border-width));
+
+	> :has(+ table) {
+		min-block-size: var(--table-toolbar-block-size);
 	}
 }
 
@@ -173,16 +190,6 @@
 	}
 }
 
-// ─── Card mode container query ────────────────────────────
-
-@mixin ln-table-card-mode {
-	@container table (max-width: 640px) {
-		colgroup { display: none; }
-		table { table-layout: auto !important; }
-	}
-}
-
-
 // ─── Footer ───────────────────────────────────────────────
 
 @mixin ln-table-footer {

package/theme/config/mixins/_modal.scss

@@ -99,6 +99,9 @@
 @mixin modal-panel {
 	@include section-card;
 	margin-bottom: 0;
+	// Overlays take the larger radius step — the same corner as a resting
+	// card would make the dialog read as another panel, not a layer above.
+	border-radius: var(--modal-radius, var(--radius-lg));
 	// Explicit role-scale read — modals use max elevation (deeper than
 	// the --shadow-floating default used by floating panels).
 	box-shadow: var(--shadow-xl);

package/theme/config/mixins/_nav.scss

@@ -8,6 +8,7 @@
 @use 'motion' as *;
 @use 'interaction' as *;
 @use 'position' as *;
+@use 'count' as *;
 
 // ─── Nav ────────────────────────────────────────────────────────────────────
 // Navigation structure reset. Layout (flex-col, h-full) and background come
@@ -40,6 +41,7 @@
 		gap: var(--gap);
 		padding-block: var(--padding-y);
 		@include typography(body-sm);
+		@include font-medium;
 		color: var(--color-fg);
 		text-decoration: none;
 		// Always-present 1px border slot. Color defaults to transparent
@@ -50,7 +52,8 @@
 		margin: calc(-1 * var(--border-width));
 	}
 
-	.nav-icon {
+	.nav-icon,
+	a > .ln-icon {
 		@include flex-shrink-0;
 		@include size(1.25rem);
 	}
@@ -60,15 +63,27 @@
 		@include truncate;
 	}
 
+	// Trailing counter — <data value="24">24</data> as the last child of a.
+	a > data {
+		@include count;
+		margin-inline-start: auto;
+	}
+
+	a[aria-current="page"] > data {
+		@include count-solid;
+	}
+
+	// Section heading — small uppercase eyebrow, clearly not a link.
 	.nav-section {
 		--color-fg: var(--fg-muted);
 		--padding-y: var(--size-sm);
 		padding-block: var(--padding-y);
+		padding-inline: var(--padding-x);
 		@include text-xs;
-		@include font-medium;
+		@include font-semibold;
 		color: var(--color-fg);
-		@include normal-case;
-		letter-spacing: normal;
+		@include uppercase;
+		letter-spacing: var(--tracking-wider);
 		// Structural margin above section header.
 		--margin-block: var(--size-md);
 		margin-top: var(--margin-block);

package/theme/config/mixins/_sidebar.scss

@@ -60,7 +60,8 @@
 		> .app-name {
 			@include text-lg;
 			@include font-bold;
-			@include text-primary;
+			@include tracking-tight;
+			color: var(--color-fg);
 			@include truncate;
 		}
 

package/theme/config/mixins/_stat-card.scss

@@ -4,9 +4,11 @@
 @use 'colors' as *;
 @use 'borders' as *;
 @use 'transitions' as *;
+@use 'position' as *;
 
 @mixin stat-card {
 	--shadow: var(--shadow-resting);
+	@include relative;
 	@include flex-col;
 	--gap: var(--size-xs);
 	gap: var(--gap);
@@ -27,12 +29,31 @@
 	> [data-ln-stat-label] {
 		--color-fg: var(--fg-muted);
 		@include typography(label-md);
+		@include font-medium;
 		color: var(--color-fg);
-		text-transform: uppercase;
-		letter-spacing: var(--tracking-wide);
 		margin: 0;
 	}
 
+	// Icon tile — a direct-child <svg class="ln-icon"> pinned top-right,
+	// tinted with the card's accent (tone).
+	> .ln-icon {
+		position: absolute;
+		inset-block-start: var(--padding-y);
+		inset-inline-end: var(--padding-x);
+		width: 1.25rem;
+		height: 1.25rem;
+		padding: var(--size-xs-up);
+		box-sizing: content-box;
+		border-radius: var(--radius);
+		background: var(--color-accent-tint-strong);
+		color: var(--color-accent);
+	}
+
+	&:has(> .ln-icon) > [data-ln-stat-label] {
+		padding-inline-end: 2.75rem;
+		min-block-size: 2rem;
+	}
+
 	> [data-ln-stat-value] {
 		@include typography(heading-lg);
 		font-weight: var(--font-bold);
@@ -67,3 +88,13 @@
 		}
 	}
 }
+
+// ─── Tone ────────────────────────────────────────────────────────
+// Accent strip on the leading edge in the card's accent colour. The
+// tone itself comes from the semantic-color cascade (--color-primary →
+// --color-accent), e.g. [data-ln-stat-card].success.
+@mixin stat-card-tone {
+	--border-inline-start: var(--size-2xs) solid var(--color-accent);
+	--color-accent:             hsl(var(--color-primary));
+	--color-accent-tint-strong: hsl(var(--color-primary-light));
+}

package/theme/config/mixins/_status-badge.scss

@@ -29,6 +29,7 @@
 	border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 20%, transparent);
 	@include tinted-surface(0.09);
 	line-height: 1.5;
+	white-space: nowrap;   // a status is one token — never wrap mid-label
 
 	// Colored dot
 	&::before {

package/theme/config/mixins/_table.scss

@@ -6,16 +6,16 @@
 @use 'borders' as *;
 @use 'transitions' as *;
 @use 'position' as *;
+@use 'breakpoints' as *;
 @use 'motion' as *;
 @use 'interaction' as *;
 @use 'form' as *;
 @use 'btn' as *;
 @use 'card' as *;
-@use 'ln-table';
 
 // ─── Base table ─────────────────────────────────────────────────
 
-@mixin table-base($sticky: false) {
+@mixin table-base($sticky: true, $responsive: true) {
 	@include w-full;
 	background: var(--color-bg);
 	--radius: var(--radius-lg);
@@ -46,23 +46,23 @@
 	thead {
 		--color-bg: var(--bg-sunken);
 		background: var(--color-bg);
-		border-block-end: var(--border-block-end, var(--border-width) solid var(--border-subtle));
-		
+
 		@if $sticky {
-			@include sticky-top;
+			@include sticky-top(var(--table-toolbar-block-size, 0));
 		}
-	}
 
-	// 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;
+		// Opaque, so scrolled rows never show through the pinned header.
+		th { background: var(--color-bg); }
+
+		// On the cells: the separate border model ignores row-group borders.
+		> tr:last-child > th {
+			border-block-end: var(--border-block-end, var(--border-width) solid var(--border-subtle));
 		}
 	}
 
 	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-xs);
 		letter-spacing: 0.05em;
@@ -78,11 +78,11 @@
 		text-overflow: ellipsis;
 
 		// Shared header-button stack — cascading single vs double action
-		&:has(:is([data-ln-sort], .table-filter)) {
+		&:has(:is([data-ln-sort], [data-ln-table-col-filter])) {
 			min-width: var(--th-single-action-min-width, 6rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
 
-			.table-filter,
+			[data-ln-table-col-filter],
 			[data-ln-sort] {
 				position: absolute;
 				top: 50%;
@@ -92,7 +92,11 @@
 			}
 		}
 
-		&:has([data-ln-sort]):has(.table-filter) {
+		&:hover [data-ln-table-col-filter] {
+			opacity: 0.7;
+		}
+
+		&:has([data-ln-sort]):has([data-ln-table-col-filter]) {
 			min-width: var(--th-double-action-min-width, 8.5rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 3.75rem);
 
@@ -119,7 +123,7 @@
 	}
 
 	td {
-		padding: var(--padding-y) var(--padding-x);
+		padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
 		border-block-end: var(--border-width) solid var(--border-subtle);
 		font-size: var(--text-sm);
 		line-height: var(--line-height);
@@ -150,7 +154,7 @@
 	// 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);
@@ -161,52 +165,72 @@
 			z-index: var(--z-sticky);
 		}
 	}
+
+	// Narrow viewports: one record per card. Viewport, not container — a table
+	// box cannot be a size container (inner display type table).
+	@if $responsive {
+		@include mq-down(md) {
+			@include table-responsive;
+		}
+	}
 }
 
-// ─── Responsive (mobile stacked layout) ─────────────────────────
-// Requires data-label attribute on <td> for column headers.
+// ─── Responsive (stacked record cards) ──────────────────────────
+// Applied ON the table. Label column comes from td[data-label]; cells
+// without it span the card (section headers, empty state, checkboxes).
 
 @mixin table-responsive {
-	th {
+	// Drop column geometry: wrapper min-widths, row-height clamp, and
+	// ln-table's inline fixed layout + locked colgroup.
+	--table-min-width: 0px;
+	--density-row-h: auto;
+	table-layout: auto !important;
+
+	// Column-header row only: an in-thead toolbar row (first row) stays.
+	> colgroup,
+	> thead > tr:last-child {
 		@include hidden;
 	}
 
-	tbody tr {
+	// Flush records: separation lives inside offsetHeight, so ln-table's
+	// virtual row-height maths stays exact.
+	> tbody > tr {
 		@include block;
-		// Structural gap between stacked row-cards.
-		--margin-block: var(--size-md);
-		margin-bottom: var(--margin-block);
-		@include border;
-		border-radius: var(--radius);
-		@include overflow-hidden;
+		border-block-end: var(--border-width-strong) solid var(--color-border);
+
+		&:last-child {
+			border-block-end: none;
+		}
 	}
 
 	td {
 		@include block;
-		@include text-right;
-		// Stacked rows need taller vertical rhythm than desktop table cells.
+		text-align: start;
 		--padding-y: var(--size-sm-up);
 		--padding-x: var(--size-md);
 		padding: var(--padding-y) var(--padding-x);
-		@include border-b;
+		border-block-end: none;
 		@include relative;
-		padding-left: 50%;
+	}
 
-		&:last-child {
-			@include border-none;
-		}
+	// Outranks table-base's `tr:last-child td` by source order.
+	tr > td:not(:last-child) {
+		@include border-b;
+	}
+
+	td[data-label] {
+		text-align: end;
+		padding-inline-start: 50%;
 
 		&::before {
 			content: attr(data-label);
 			@include absolute;
-			top: 0;
-			bottom: 0;
-			left: var(--size-md); // Geometric — ::before label inset matches td padding-x.
-			// Geometric — label width less the gutter to value column.
-			width: calc(50% - var(--size-lg));
+			inset-block: 0;
+			inset-inline-start: var(--padding-x);
+			inline-size: calc(50% - var(--size-lg));
 			@include flex;
 			@include items-center;
-			@include text-left;
+			text-align: start;
 			@include font-semibold;
 			--color-fg: var(--fg-muted);
 			color: var(--color-fg);
@@ -215,6 +239,22 @@
 			@include truncate;
 		}
 	}
+
+	.table-row-actions {
+		position: static !important;
+		opacity: 1 !important;
+		visibility: visible !important;
+		pointer-events: auto !important;
+		transform: none !important;
+		background: transparent !important;
+		padding-inline-start: 0 !important;
+		justify-content: flex-end;
+		margin-block-start: var(--size-xs);
+
+		&::before {
+			display: none !important;
+		}
+	}
 }
 
 // ─── Variants ───────────────────────────────────────────────────
@@ -293,6 +333,8 @@
 	@include table-header-btn-base;
 	vertical-align: middle;
 	position: relative;
+
+	&.ln-filter-active { @include table-filter-active; }
 }
 
 @mixin table-filter-active {

package/theme/config/mixins/_tabs.scss

@@ -57,6 +57,37 @@
 	}
 }
 
+// ─── Segmented variant ──────────────────────────────────────────
+// Pill track for compact panel-level switches (e.g. in a panel header).
+// Usage: #register-tabs > nav { @include tabs-nav-segmented; }
+@mixin tabs-nav-segmented {
+	display: inline-flex;
+	gap: var(--size-2xs);
+	padding: var(--size-2xs);
+	border: 0;
+	border-radius: var(--radius);
+	background: var(--bg-recessed);
+
+	[data-ln-tab] {
+		--padding-y: var(--size-xs);
+		--padding-x: var(--size-sm-up);
+		margin: 0;
+		border-block-end: 0;
+		border-radius: calc(var(--radius) - var(--size-2xs));
+
+		&:hover {
+			background: transparent;
+			color: var(--color-fg);
+		}
+	}
+
+	[data-ln-tab][data-active] {
+		background: var(--bg-elevated);
+		color: var(--color-accent);
+		box-shadow: var(--shadow-xs);
+	}
+}
+
 @mixin tabs-panel {
 	--padding-y: var(--size-lg);
 	--padding-x: var(--size-lg);

package/theme/config/mixins/_toast.scss

@@ -106,7 +106,6 @@
 
 @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;