@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_spacing.scss

@@ -0,0 +1,19 @@
+// Spacing — accepts CSS variable or value
+
+@mixin p($val)  { padding: $val; }
+@mixin px($val) { padding-left: $val; padding-right: $val; }
+@mixin py($val) { padding-top: $val; padding-bottom: $val; }
+@mixin pt($val) { padding-top: $val; }
+@mixin pb($val) { padding-bottom: $val; }
+@mixin pl($val) { padding-left: $val; }
+@mixin pr($val) { padding-right: $val; }
+
+@mixin m($val)  { margin: $val; }
+@mixin mx($val) { margin-left: $val; margin-right: $val; }
+@mixin my($val) { margin-top: $val; margin-bottom: $val; }
+@mixin mt($val) { margin-top: $val; }
+@mixin mb($val) { margin-bottom: $val; }
+@mixin ml($val) { margin-left: $val; }
+@mixin mr($val) { margin-right: $val; }
+
+@mixin gap($val) { gap: $val; }

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

@@ -0,0 +1,68 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+
+@mixin stat-card {
+	--shadow: var(--shadow-resting);
+	@include flex-col;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-lg);
+	--padding-x: var(--size-lg);
+	padding: var(--padding-y) var(--padding-x);
+	background: var(--color-bg);
+	--radius: var(--radius-lg);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow);
+	border-block-start:  var(--border-block-start,  var(--border-width) solid var(--color-border));
+	border-block-end:    var(--border-block-end,    var(--border-width) solid var(--color-border));
+	border-inline-start: var(--border-inline-start, var(--border-width) solid var(--color-border));
+	border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border));
+	@include transition;
+
+	> [data-ln-stat-label] {
+		--color-fg: var(--fg-muted);
+		@include typography(label-md);
+		color: var(--color-fg);
+		text-transform: uppercase;
+		letter-spacing: var(--tracking-wide);
+		margin: 0;
+	}
+
+	> [data-ln-stat-value] {
+		@include typography(heading-lg);
+		font-weight: var(--font-bold);
+		font-variant-numeric: tabular-nums;
+		color: var(--color-fg);
+		margin: 0;
+	}
+
+	> [data-ln-stat-trend] {
+		@include flex-row;
+		@include items-center;
+		--gap: var(--size-xs);
+		gap: var(--gap);
+		@include typography(body-sm);
+		--margin-block: var(--size-xs);
+		margin: var(--margin-block) 0 0;
+
+		svg.ln-icon {
+			width: 1rem;
+			height: 1rem;
+		}
+
+		&[data-ln-stat-trend="up"] {
+			color: hsl(var(--color-success));
+		}
+		&[data-ln-stat-trend="down"] {
+			color: hsl(var(--color-error));
+		}
+		&[data-ln-stat-trend="neutral"] {
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+		}
+	}
+}

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

@@ -0,0 +1,83 @@
+@use 'colors' as *;
+@use 'motion' as *;
+
+// Status Badge — inline semantic indicator with colored dot
+//
+// Usage:
+//   <span class="badge success">Active</span>
+//   <span class="badge warning live">Syncing</span>
+//   <button class="badge error">Blocked</button>
+//
+// Variants (override --color-primary):
+//   .success  → --color-success
+//   .warning  → --color-warning
+//   .error    → --color-error
+//   .info     → --color-info
+//   .neutral  → --color-neutral-400
+//
+// Live: .badge.live adds pulse animation to the dot
+
+// ─── Base ──────────────────────────────────────────────
+@mixin badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 0;
+	border-radius: var(--radius-full);
+	padding: 0.2em 0.65em;
+	font-size: var(--text-xs);
+	font-weight: var(--font-medium);
+	@include tinted-surface(0.12);
+	line-height: 1.5;
+
+	// Colored dot
+	&::before {
+		content: '';
+		display: block;
+		width: 0.45em;
+		height: 0.45em;
+		border-radius: 50%;
+		background: currentColor;
+		margin-right: 0.4em;
+		flex-shrink: 0;
+	}
+
+	// When on <button> — override global gray hover
+	&:is(button) {
+		cursor: pointer;
+		transition: background var(--transition-fast);
+		border: none;
+		font-family: inherit;
+
+		&:hover {
+			background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+		}
+
+		&:active {
+			background: color-mix(in srgb, var(--color-accent) 28%, transparent);
+		}
+	}
+}
+
+// ─── Live / pulse ──────────────────────────────────────
+// Ring radius in `em` so it scales with badge font-size.
+// 0.9em ≈ 2× the dot width — visibly extends beyond the dot.
+// `70%, 100%` holds the final (invisible) frame for a short
+// rest between beats, giving a heartbeat rhythm instead of
+// a constant fade.
+@mixin badge-live {
+	@keyframes badge-pulse {
+		0% {
+			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent);
+		}
+		70%,
+		100% {
+			box-shadow: 0 0 0 0.6em color-mix(in srgb, var(--color-accent) 0%, transparent);
+		}
+	}
+
+	&::before {
+		@include motion-safe {
+			animation: badge-pulse 1.8s ease-out infinite;
+		}
+	}
+}

package/scss/config/mixins/_stepper.scss

@@ -0,0 +1,78 @@
+@use 'display' as *;
+@use 'typography' as *;
+
+@mixin stepper {
+	display: flex;
+	gap: 0;
+	counter-reset: ln-step;
+
+	> li {
+		counter-increment: ln-step;
+		flex: 1;
+		position: relative;
+		@include flex-col;
+		@include items-center;
+		gap: var(--gap);
+		min-width: 0;
+
+		// Numbered circle bullet
+		&::before {
+			content: counter(ln-step);
+			@include flex-center;
+			width: 2rem;
+			height: 2rem;
+			border-radius: 50%;
+			background: var(--color-border);
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			@include typography(label-md);
+			font-weight: var(--font-semibold);
+			z-index: 1;
+		}
+
+		// Connector line to next step
+		&:not(:last-child)::after {
+			content: '';
+			position: absolute;
+			top: var(--size-md); // Geometric — connector vertical center matches bullet radius.
+			// Geometric — connector horizontal endpoints clear bullet edge.
+			left: calc(50% + var(--size-md));
+			right: calc(-50% + var(--size-md));
+			height: 2px;
+			background: var(--color-border);
+		}
+
+		> [data-ln-step-label] {
+			@include typography(label-md);
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			text-align: center;
+		}
+
+		// States
+		&[data-ln-step="complete"] {
+			&::before {
+				background: var(--color-accent);
+				color: var(--color-accent-fg);
+			}
+			&::after {
+				background: var(--color-accent);
+			}
+			> [data-ln-step-label] {
+				color: var(--color-fg);
+			}
+		}
+
+		&[data-ln-step="current"] {
+			&::before {
+				background: var(--color-accent);
+				color: var(--color-accent-fg);
+				box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent);
+			}
+			> [data-ln-step-label] {
+				color: var(--color-fg);
+				font-weight: var(--font-semibold);
+			}
+		}
+	}
+}

package/scss/config/mixins/_table.scss

@@ -0,0 +1,215 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'position' as *;
+
+// ─── Base table ─────────────────────────────────────────────────
+
+@mixin table-base {
+	@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`.
+	overflow: clip;
+	--shadow: var(--shadow-resting);
+	box-shadow: var(--shadow);
+	border-collapse: collapse;
+	font-variant-numeric: tabular-nums;
+
+	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));
+	}
+
+	th {
+		@include text-left;
+		padding: var(--padding-y) var(--padding-x);
+		@include font-semibold;
+		font-size: var(--text-label-sm);
+		line-height: var(--line-height);
+		letter-spacing: 0.4px;
+		@include uppercase;
+		color: var(--color-fg);
+	}
+
+	tbody tr {
+		@include transition;
+		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);
+			background: var(--color-bg);
+		}
+	}
+
+	td {
+		padding: var(--padding-y) var(--padding-x);
+		@include border-b;
+		font-size: var(--font-size);
+		line-height: var(--line-height);
+		vertical-align: top;
+	}
+
+	tr:last-child td {
+		@include border-none;
+	}
+
+	td.numeric,
+	th.numeric {
+		@include text-right;
+		font-variant-numeric: tabular-nums;
+	}
+
+	td.center,
+	th.center {
+		@include text-center;
+	}
+
+	td.nowrap,
+	th.nowrap {
+		@include whitespace-nowrap;
+	}
+}
+
+// ─── Responsive (mobile stacked layout) ─────────────────────────
+// Requires data-label attribute on <td> for column headers.
+
+@mixin table-responsive {
+	th {
+		@include hidden;
+	}
+
+	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;
+	}
+
+	td {
+		@include block;
+		@include text-right;
+		// Stacked rows need taller vertical rhythm than desktop table cells.
+		--padding-y: var(--size-sm-up);
+		--padding-x: var(--size-md);
+		padding: var(--padding-y) var(--padding-x);
+		@include border-b;
+		@include relative;
+		padding-left: 50%;
+
+		&:last-child {
+			@include border-none;
+		}
+
+		&::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));
+			@include flex;
+			@include items-center;
+			@include text-left;
+			@include font-semibold;
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			@include text-xs;
+			@include uppercase;
+			@include truncate;
+		}
+	}
+}
+
+// ─── Variants ───────────────────────────────────────────────────
+
+@mixin table-striped {
+	tbody tr:nth-child(odd) {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+}
+
+@mixin table-section-header {
+	--color-bg: var(--bg-sunken);
+	background: var(--color-bg);
+	@include font-semibold;
+	@include text-sm;
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+	letter-spacing: 0.3px;
+
+	&:hover {
+		background-color: var(--bg-sunken);
+	}
+}
+
+@mixin table-action {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	--padding-y: var(--size-xs);
+	--padding-x: var(--size-sm);
+	padding: var(--padding-y) var(--padding-x);
+	@include text-sm;
+	@include transition-colors;
+
+	&:hover {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+
+	svg {
+		@include size(1.5rem);
+	}
+}
+
+// ─── 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;
+
+		&:hover {
+			opacity: 1;
+			--color-bg: var(--bg-sunken);
+			background: var(--color-bg);
+		}
+	}
+
+	th [data-ln-dropdown] {
+		float: right;
+	}
+
+	th[data-ln-filter-active] .filter {
+		opacity: 1;
+		color: var(--color-accent);
+	}
+}

package/scss/config/mixins/_tabs.scss

@@ -0,0 +1,64 @@
+@use 'display' as *;
+@use 'typography' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+
+// Tabs — underline style
+
+@mixin tabs-nav {
+	@include flex;
+	@include border-b;
+
+	[data-ln-tab][data-active] {
+		color: var(--color-accent);
+		border-bottom-color: var(--color-accent);
+		background: none;
+	}
+
+	[data-ln-tab][disabled] {
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+		@include cursor-not-allowed;
+		@include opacity-50;
+
+		&:hover {
+			background: none;
+			border-bottom-color: transparent;
+		}
+	}
+}
+
+@mixin tabs-tab {
+	--color-fg: var(--fg-muted);
+	all: unset;
+	box-sizing: border-box;
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	@include text-sm;
+	@include font-medium;
+	color: var(--color-fg);
+	@include cursor-pointer;
+	@include transition;
+	border-bottom: 2px solid transparent;
+	margin-bottom: -1px;
+
+	&:hover {
+		color: var(--color-accent);
+		background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
+		border-bottom-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
+	}
+
+	&:focus,
+	&:active,
+	&:visited {
+		background: none;
+	}
+}
+
+@mixin tabs-panel {
+	--padding-y: var(--size-lg);
+	--padding-x: var(--size-lg);
+	padding: var(--padding-y) var(--padding-x);
+}

package/scss/config/mixins/_timeline.scss

@@ -0,0 +1,69 @@
+@use 'display' as *;
+@use 'typography' as *;
+
+@mixin timeline {
+	position: relative;
+
+	// Vertical rail — concentric with the bullet on both axes.
+	// X: bullet center = 0.125rem + 0.375rem = 0.5rem; rail = 0.5rem - 1px.
+	// Y: start/end at the first/last bullet center = 0.525rem from li edge.
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(var(--lh-caption) * var(--text-caption) / 2);
+		bottom: calc(var(--lh-caption) * var(--text-caption) / 2);
+		left: calc(var(--size-sm) - var(--border-width)); // Geometric — rail x-position aligned with bullet center.
+		width: 2px;
+		background: var(--color-border);
+	}
+
+	> li {
+		position: relative;
+		--padding-x: var(--size-xl);
+		padding-left: var(--padding-x);
+		--padding-y: var(--size-lg);
+		padding-bottom: var(--padding-y);
+
+		&:last-child {
+			padding-bottom: 0;
+		}
+
+		// Bullet — centered on the first line of <time> (caption role).
+		// Line-box height = var(--lh-caption) * var(--text-caption) = 1.05rem.
+		// Line center = 0.525rem; bullet is 0.75rem tall so top = 0.15rem.
+		&::before {
+			content: '';
+			position: absolute;
+			top: calc((var(--lh-caption) * var(--text-caption) - var(--size-sm-up)) / 2); // Geometric — bullet vertical alignment to caption baseline.
+			left: var(--size-2xs); // Geometric — bullet x-position inside li padding.
+			width: 0.75rem;
+			height: 0.75rem;
+			border-radius: 50%;
+			background: var(--color-accent);
+			box-shadow: 0 0 0 3px var(--color-bg);
+		}
+
+		> time {
+			display: block;
+			@include typography(caption);
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+			--margin-block: var(--size-xs);
+			margin-bottom: var(--margin-block);
+		}
+
+		> h4 {
+			@include typography(title-sm);
+			color: var(--color-fg);
+			margin: 0;
+		}
+
+		> p {
+			@include typography(body-sm);
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			--margin-block: var(--size-xs);
+			margin: var(--margin-block) 0 0;
+		}
+	}
+}