@livenetworks/ashlar 2.1.13 → 2.2.0

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

@@ -40,6 +40,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 +51,8 @@
 		margin: calc(-1 * var(--border-width));
 	}
 
-	.nav-icon {
+	.nav-icon,
+	a > .ln-icon {
 		@include flex-shrink-0;
 		@include size(1.25rem);
 	}
@@ -60,15 +62,36 @@
 		@include truncate;
 	}
 
+	// Trailing counter — <data value="24">24</data> as the last child of a.
+	a > data {
+		@include flex-shrink-0;
+		margin-inline-start: auto;
+		padding: 0 var(--size-xs-up);
+		min-width: 1.5rem;
+		text-align: center;
+		border-radius: var(--radius-full);
+		@include text-xs;
+		@include font-semibold;
+		font-variant-numeric: tabular-nums;
+		background: color-mix(in srgb, var(--color-fg) 12%, transparent);
+	}
+
+	a[aria-current="page"] > data {
+		background: var(--color-accent);
+		color: var(--color-accent-fg);
+	}
+
+	// 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;

package/theme/designs/relaxed/_card.scss

@@ -0,0 +1,12 @@
+@use '../../config/mixins' as *;
+
+// Same bindings as components/_card.scss, except .section-card renders a
+// transparent titled group on the canvas (header = title row, no frame).
+.card {
+	@include card;
+	@include card-field-list;
+}
+
+.section-card {
+	@include section-card($group: true);
+}

package/theme/designs/relaxed/_layout.scss

@@ -0,0 +1,24 @@
+@use '../../config/mixins' as *;
+
+// Relaxed groupings — grid/flex layouts bound on markup the demo already
+// uses. Composition only: no tokens are declared here.
+
+// Cards placed directly in a section's body flow into an auto-fit grid.
+.section-card > main:has(> .card) {
+	@include grid-auto;
+}
+
+// Stat-card lists flow as a wrapping row; the cards drop their elevation.
+ul:has(> li > [data-ln-stat-card]) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--size-lg);
+
+	> li {
+		flex: 1 1 var(--grid-item-min-width);
+	}
+
+	[data-ln-stat-card] {
+		--shadow: none;
+	}
+}

package/theme/ln-ashlar-core.scss

@@ -10,6 +10,7 @@
 @use '../components/ln-confirm/ln-confirm';
 @use '../components/ln-dropdown/ln-dropdown';
 @use '../components/ln-editor/ln-editor';
+@use '../components/ln-external-links/ln-external-links';
 @use '../components/ln-filter/ln-filter';
 @use '../components/ln-list/ln-list';
 @use '../components/ln-modal/ln-modal';

package/theme/ln-ashlar-dev.scss

@@ -31,7 +31,6 @@
 @use '../components/ln-options/ln-options-dev';
 @use '../components/ln-picklist/ln-picklist-dev';
 @use '../components/ln-popover/ln-popover-dev';
-@use '../components/ln-progress/ln-progress-dev';
 @use '../components/ln-router/ln-router-dev';
 @use '../components/ln-search/ln-search-dev';
 @use '../components/ln-slug/ln-slug-dev';

package/theme/ln-ashlar-relaxed.scss

@@ -0,0 +1,67 @@
+// ==========================================================================
+// ln-ashlar relaxed design — mirrors ln-ashlar-theme.scss and adds the
+// designs/relaxed/* bindings after it. Same palette and tokens: a design
+// declares no tokens, only composition.
+// ==========================================================================
+
+@use 'ln-ashlar-core';
+
+@use 'config/tokens';
+@use 'config/breakpoints';
+@use 'config/density';
+@use 'config/theme';
+@use 'config/icons';
+
+@use 'base/reset';
+@use 'base/global';
+@use 'base/typography';
+
+@use 'components/button';
+@use 'components/form';
+@use 'components/date';
+@use 'components/layout';
+@use 'components/table';
+@use 'components/sort';
+@use 'components/sortable';
+@use 'components/tabs';
+@use 'components/toggle';
+@use 'components/accordion';
+@use 'designs/relaxed/card';
+@use 'components/sections';
+@use 'designs/relaxed/layout' as relaxed-layout;
+@use 'components/nav';
+@use 'components/sidebar';
+@use 'components/app-shell';
+@use 'components/breadcrumbs';
+@use 'components/avatar';
+@use 'components/status-badge';
+@use 'components/alert';
+@use 'components/empty-state';
+@use 'components/page-header';
+@use 'components/stepper';
+@use 'components/timeline';
+@use 'components/stat-card';
+@use 'components/prose';
+@use 'components/editor';
+@use 'components/scrollbar';
+@use 'components/tooltip';
+@use 'components/popover';
+@use 'components/filter';
+@use 'components/chip';
+@use 'components/loader';
+@use 'components/progress';
+@use 'components/link';
+@use 'components/confirm';
+@use 'components/circular-progress';
+@use 'components/modal';
+@use 'components/dropdown';
+@use 'components/toast';
+@use 'components/upload';
+@use 'components/picklist';
+@use 'components/translations';
+@use 'components/ln-table';
+@use 'components/chart';
+@use 'components/ajax';
+
+@use 'utilities/utilities';
+@use 'utilities/animations';