@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_layout.scss

@@ -0,0 +1,117 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'breakpoints' as *;
+
+// Layout — grid, stack, container
+
+@mixin grid {
+	display: grid;
+	--gap: var(--size-lg);
+	gap: var(--gap);
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include mq-up(md) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include mq-up(lg) {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+@mixin grid-2 {
+	display: grid;
+	--gap: var(--size-lg);
+	gap: var(--gap);
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include mq-up(md) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@mixin grid-4 {
+	display: grid;
+	--gap: var(--size-lg);
+	gap: var(--gap);
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include mq-up(md) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include mq-up(lg) {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
+@mixin stack($gap: var(--gap)) {
+	@include flex-col;
+	@include gap($gap);
+}
+
+@mixin row($gap: var(--gap)) {
+	@include flex-row;
+	@include items-center;
+	@include gap($gap);
+}
+
+@mixin row-between($gap: var(--gap)) {
+	@include row($gap);
+	@include justify-between;
+}
+
+@mixin row-center($gap: var(--gap)) {
+	@include row($gap);
+	@include justify-center;
+}
+
+// Container Queries
+// Parent: @include container(name)
+// Child:  @include cq-up(compact, name) { ... }
+//
+// IMPORTANT: Do NOT combine container-type with overflow:hidden on the same element
+//
+// Breakpoints: 480px, 580px, 880px, 1120px
+@mixin container($name: null) {
+	// Nameless form is intentional — models native anonymous @container queries.
+	// See docs/css/layout.md ("Anonymous container") and demo/admin/mixins.html.
+	container-type: inline-size;
+	@if $name { container-name: $name; }
+}
+
+// ─── Flat stack ────────────────────────────────────────
+// Vertical joined-panel pattern: children sit flush with a single
+// shared horizontal rule between them. Consumes the per-side border
+// soft token `--border-block-start` (no :root default) to suppress
+// each child's top edge after the first.
+//
+// Works on any child that reads --radius and --shadow for
+// its own chrome (card, section-card, stat-card, bare <article>
+// with @include card). Self-contained: also re-binds --radius: 0
+// and --shadow: none on direct children so rounded corners
+// and elevation shadows do not conflict with the flat shared rule.
+//
+// Cascade note: the --radius / --shadow re-binds cascade
+// into grandchildren. If a consumer nests a rounded card inside a
+// flat-stack panel, re-bind --radius on that nested element.
+//
+// Block-axis only. For horizontal joined controls use btn-group or
+// pill-group — they use border-radius tricks on first/last children
+// instead of border-block-* suppression.
+//
+// Usage:
+//   .flat-stack { @include flat-stack; }       // prototype class
+//   #users > ul { @include flat-stack; }       // project selector
+@mixin flat-stack {
+	--gap: 0;
+
+	> * {
+		--radius: 0;
+		--shadow: none;
+	}
+
+	> * + * {
+		--border-block-start: none;
+	}
+}

package/scss/config/mixins/_link.scss

@@ -0,0 +1,55 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'position' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+
+// Clickable rows — cursor + selection prevention for data-ln-link containers.
+//
+// Usage:
+//   [data-ln-link] tr { @include link-row; }
+
+@mixin link-row {
+	@include cursor-pointer;
+	@include select-none;
+}
+
+// Status bar — mimics browser's native URL preview at bottom-left.
+//
+// Usage:
+//   .ln-link-status { @include link-status; }
+//
+// JS toggles .ln-link-status--visible to show/hide.
+
+@mixin link-status {
+	@include fixed;
+	bottom: 0;
+	left: 0;
+	--padding-y: var(--size-xs);
+	--padding-x: var(--size-sm-up);
+	padding: var(--padding-y) var(--padding-x);
+	background: var(--color-bg);
+	@include border-t;
+	@include border-r;
+	@include text-xs;
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+	@include rounded-sm;
+	border-bottom-left-radius: 0;
+	border-top-left-radius: 0;
+	max-width: 50vw;
+	@include truncate;
+	@include z-toast;
+	opacity: 0;
+	pointer-events: none;
+	@include motion-safe {
+		transition: opacity var(--transition-fast);
+	}
+
+	&--visible {
+		opacity: 1;
+	}
+}

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

@@ -0,0 +1,420 @@
+@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 'layout' as *;
+@use 'card' as *;
+
+// ln-table -- Enhanced data table wrapper component.
+//
+// Provides toolbar, sticky headers, column filter dropdowns, sort
+// indicators, footer, filter chips, empty state, timing badge.
+//
+// Usage:
+//   [data-ln-table] { @include ln-table; }
+//   .ln-table__toolbar { @include ln-table-toolbar; }
+//
+// State-driven CSS (spacer rows, sort icon .hidden toggle, content overflow
+// fix) stays in the co-located JS SCSS file.
+
+@mixin ln-table {
+	@include border;
+	--radius: var(--radius-lg);
+	border-radius: var(--radius);
+	background: var(--color-bg);
+	overflow: clip;
+
+	// Table overrides inside component
+	table {
+		overflow: visible;
+		border-collapse: separate;
+		border-spacing: 0;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	// Whole thead sticky as one unit (toolbar row + column-headers row).
+	// Wrapper's `overflow: clip` + `rounded-lg` clip the top corners,
+	// so per-th radius is unnecessary.
+	thead {
+		@include sticky-top;
+	}
+
+	thead th {
+		background: var(--bg-sunken);
+	}
+
+	// First td override -- remove global bold/bg
+	table td:first-child {
+		background: transparent;
+		font-weight: normal;
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+	}
+}
+
+// ─── Toolbar ──────────────────────────────────────────────
+
+@mixin ln-table-toolbar {
+	@include panel-header;
+	position: sticky;
+	top: 0;
+	z-index: var(--z-sticky);
+	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+// ─── In-thead toolbar (first thead row, single colspan th) ───────
+//
+// Applied to the <th colspan="N"> in the first thead row of an
+// ln-table. Expected HTML:
+//
+//   <tr><th colspan="N"><div> ...toolbar content... </div></th></tr>
+//
+// The <th> stays display:table-cell so colspan participates in
+// table layout normally. The wrapper <div> carries the panel-header
+// chrome (flex layout, padding, border-bottom, sunken bg). The
+// <th> itself gets padding:0 plus explicit resets to break the
+// @mixin table-base cascade (uppercase / text-label-sm /
+// letter-spacing / semibold) so the toolbar's <h3>, <span>, <label>
+// children render with normal text styling, not column-header
+// styling.
+
+@mixin ln-table-thead-toolbar {
+	// <th> resets — chrome lives on the inner <div>.
+	padding: 0;
+	text-align: left;
+	text-transform: none;
+	letter-spacing: normal;
+	font-size: var(--font-size);
+	font-weight: normal;
+
+	> div {
+		@include panel-header;
+	}
+}
+
+@mixin ln-table-toolbar-search {
+	width: 10rem;
+}
+
+// ─── Count badge ──────────────────────────────────────────
+
+@mixin ln-table-count {
+	@include text-sm;
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+
+	strong {
+		color: var(--color-fg);
+		@include font-semibold;
+	}
+}
+
+// ─── Card mode container query ────────────────────────────
+
+@mixin ln-table-card-mode {
+	@container table (max-width: 640px) {
+		colgroup { display: none; }
+		table { table-layout: auto !important; }
+	}
+}
+
+// ─── Column filter dropdowns in th ────────────────────────
+
+@mixin ln-table-column-filter {
+	th [data-ln-dropdown] {
+		@include inline-flex;
+		@include items-center;
+	}
+
+	th [data-ln-dropdown] > button {
+		@include flex;
+		@include items-center;
+		--gap: var(--size-xs);
+		gap: var(--gap);
+		background: none;
+		border: none;
+		color: inherit;
+		font: inherit;
+		@include cursor-pointer;
+		--btn-padding-y: 0;
+		--btn-padding-x: 0;
+
+		.ln-icon-filter {
+			opacity: 0.4;
+			@include motion-safe {
+				transition: opacity var(--transition-fast);
+			}
+		}
+
+		&:hover .ln-icon-filter {
+			opacity: 1;
+		}
+	}
+
+	th [data-ln-dropdown-menu] button[data-ln-filter-key] {
+		@include w-full;
+		@include flex;
+		@include items-center;
+		@include text-left;
+		--btn-padding-y: var(--size-xs);
+		--btn-padding-x: var(--size-sm);
+		@include text-sm;
+		@include font-normal;
+		background: none;
+		border: none;
+		border-radius: 0;
+		color: var(--color-fg);
+		@include cursor-pointer;
+		@include transition-fast;
+
+		&:hover {
+			--color-bg: var(--bg-sunken);
+			background: var(--color-bg);
+		}
+
+		&[data-active] {
+			background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+			color: var(--color-accent);
+			@include font-medium;
+		}
+	}
+}
+
+// ─── Sort indicators on th ────────────────────────────────
+
+@mixin ln-table-sort {
+	th[data-ln-sort] {
+		@include cursor-pointer;
+		@include select-none;
+
+		[data-ln-sort-icon] {
+			@include size(0.875rem);
+			--margin-inline: var(--size-xs);
+			margin-left: var(--margin-inline);
+			vertical-align: middle;
+			opacity: 0.4;
+			@include motion-safe {
+				transition: opacity var(--transition-fast);
+			}
+		}
+
+		&:hover [data-ln-sort-icon] {
+			opacity: 0.7;
+		}
+
+		&[data-ln-sort-active] [data-ln-sort-icon] {
+			opacity: 1;
+		}
+	}
+}
+
+// ─── Footer ───────────────────────────────────────────────
+
+@mixin ln-table-footer {
+	@include flex;
+	@include items-center;
+	@include justify-between;
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	@include border-t;
+	--color-bg: var(--bg-sunken);
+	background: var(--color-bg);
+	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+	@include text-sm;
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+
+	strong {
+		color: var(--color-fg);
+		@include font-semibold;
+	}
+}
+
+// ─── Timing badge ─────────────────────────────────────────
+
+@mixin ln-table-timing {
+	@include text-xs;
+	--color-fg: var(--fg-subtle);
+	color: var(--color-fg);
+	font-family: var(--font-mono);
+}
+
+// ─── Quick filter bar ─────────────────────────────────────
+
+@mixin ln-table-filters {
+	@include flex;
+	@include flex-wrap;
+	@include items-center;
+	--gap: var(--size-lg);
+	gap: var(--gap);
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	@include border-b;
+
+	fieldset {
+		border: none;
+		padding: 0;
+		margin: 0;
+		@include flex;
+		@include items-center;
+		--gap: var(--size-xs-up);
+		gap: var(--gap);
+
+		legend {
+			@include text-xs;
+			@include font-medium;
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+			float: left;
+			--margin-inline: var(--size-sm);
+			margin-right: var(--margin-inline);
+			line-height: 1.75rem;
+		}
+
+		ul {
+			@include inline-flex;
+		}
+
+		li button {
+			--btn-padding-y: var(--size-2xs);
+			--btn-padding-x: var(--size-sm);
+			@include text-xs;
+			@include font-medium;
+			@include rounded-full;
+			@include transition-fast;
+			background: transparent;
+			--color-fg: var(--fg-muted);
+			color: var(--color-fg);
+			border: none;
+
+			&:hover {
+				--color-bg: var(--bg-sunken);
+				background-color: var(--color-bg);
+				color: var(--color-fg);
+			}
+
+			&[data-active] {
+				background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+				color: var(--color-accent);
+			}
+		}
+	}
+}
+
+// ─── Active filter chips ──────────────────────────────────
+
+@mixin ln-table-chips {
+	@include flex;
+	@include items-center;
+	@include flex-wrap;
+	--gap: var(--size-xs-up);
+	gap: var(--gap);
+	--padding-y: var(--size-xs-up);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	@include border-b;
+	background-color: color-mix(in srgb, var(--color-accent) 3%, transparent);
+}
+
+@mixin ln-table-chip {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-2xs);
+	--padding-x: var(--size-sm);
+	padding: var(--padding-y) var(--padding-x);
+	@include rounded-full;
+	@include text-xs;
+	@include tinted-surface(0.1);
+
+	strong {
+		@include font-semibold;
+	}
+
+	button {
+		background: none;
+		border: none;
+		color: var(--color-accent);
+		@include cursor-pointer;
+		@include text-sm;
+		@include font-bold;
+		line-height: 1;
+		--btn-padding-y: 0;
+		--btn-padding-x: 0;
+		--margin-inline: var(--size-2xs);
+		margin-left: var(--margin-inline);
+
+		&:hover {
+			color: hsl(var(--color-error));
+		}
+	}
+}
+
+@mixin ln-table-clear-all {
+	@include text-xs;
+	@include font-medium;
+	--color-fg: var(--fg-subtle);
+	color: var(--color-fg);
+	background: none;
+	border: none;
+	@include cursor-pointer;
+	--margin-inline: var(--size-xs);
+	margin-left: var(--margin-inline);
+
+	&:hover {
+		color: hsl(var(--color-error));
+	}
+}
+
+// ─── Empty state ──────────────────────────────────────────
+
+@mixin ln-table-empty-state {
+	--padding-y: var(--size-2xl);
+	padding-block: var(--padding-y);
+	@include text-center;
+
+	svg.ln-icon {
+		@include block;
+		@include mx(auto);
+		--margin-block: var(--size-md);
+		margin-bottom: var(--margin-block);
+		opacity: 0.3;
+	}
+
+	h3 {
+		@include text-lg;
+		@include font-semibold;
+		color: var(--color-fg);
+		--margin-block: var(--size-sm);
+		margin: 0 0 var(--margin-block);
+	}
+
+	p {
+		@include text-sm;
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+		--margin-block: var(--size-lg);
+		margin: 0 0 var(--margin-block);
+	}
+}
+
+// Virtual-scroll spacer rows (JS-injected) — neutralize cell chrome including bg.
+
+@mixin ln-table-spacer-row {
+	td {
+		padding: 0 !important;
+		border: none !important;
+		background: transparent !important;
+	}
+}

package/scss/config/mixins/_loader.scss

@@ -0,0 +1,26 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'position' as *;
+@use 'colors' as *;
+@use 'motion' as *;
+
+@mixin loader {
+	color: var(--color-accent);
+	// Spinner is drawn with em-based box-shadow; font-size is the intrinsic
+	// size knob. Callers override per-use (e.g. font-size: 32px) — see
+	// docs/css/loader.md. Page-level margin is a binding concern, not a
+	// mixin concern, and lives on the consumer selector.
+	font-size: 90px;
+	text-indent: -9999em;
+	@include overflow-hidden;
+	width: 1em;
+	height: 1em;
+	border-radius: 50%;
+	@include mx(auto);
+	@include relative;
+	transform: translateZ(0);
+	@include motion-safe {
+		animation: loader-spin 1.7s infinite ease, loader-round 1.7s infinite ease;
+	}
+}

package/scss/config/mixins/_modal.scss

@@ -0,0 +1,66 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'position' as *;
+@use 'motion' as *;
+@use 'card' as *;
+
+// Modal size mixins
+// Usage: #my-modal > form { @include modal-lg; }
+
+@mixin modal-sm { max-width: 28rem; }
+@mixin modal-md { max-width: 32rem; }
+@mixin modal-lg { max-width: 42rem; }
+@mixin modal-xl { max-width: 48rem; }
+
+// ─── Modal layout ──────────────────────────────────────
+
+// Overlay backdrop — covers viewport, darkened + blurred.
+// Default: hidden (display:none). JS sets [data-ln-modal="open"]
+// to show — that state rule lives in the co-located JS SCSS.
+@mixin modal-overlay {
+	display: none;
+	@include fixed;
+	@include inset-0;
+	background-color: var(--color-scrim);
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	z-index: var(--z-modal);
+	@include items-center;
+	@include justify-center;
+	opacity: 0;
+	@include motion-safe {
+		transition: opacity var(--transition);
+	}
+}
+
+// Content panel — the <form> inside .ln-modal.
+// Structurally IS a section-card: reuse its chrome and its nested
+// > header / > main / > footer recipes. Add only the modal-specific
+// behaviour on top: fixed size envelope, scrollable body, sticky
+// footer, slide-in animation, deeper shadow.
+@mixin modal-panel {
+	@include section-card;
+	margin-bottom: 0;
+	// Explicit role-scale read — modals use max elevation (deeper than
+	// the --shadow-floating default used by floating panels).
+	box-shadow: var(--shadow-xl);
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	max-width: 600px;
+	width: 90%;
+	max-height: 90vh;
+	@include motion-safe {
+		animation: ln-modal-slideIn var(--transition-slow);
+	}
+
+	> main {
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	> footer {
+		position: sticky;
+		bottom: 0;
+	}
+}

package/scss/config/mixins/_motion.scss

@@ -0,0 +1,19 @@
+// Motion safety — gate animation-only declarations behind
+// prefers-reduced-motion: no-preference.
+//
+// Usage:
+//   .ln-modal__overlay {
+//       @include motion-safe {
+//           animation: fadeIn var(--transition-base);
+//       }
+//   }
+//
+// Color transitions on hover are fine unwrapped — they do not trigger
+// vestibular issues. Only wrap transform, opacity, translate, scale,
+// rotate, and keyframe animations.
+
+@mixin motion-safe {
+	@media (prefers-reduced-motion: no-preference) {
+		@content;
+	}
+}