@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_nav.scss

@@ -0,0 +1,273 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'motion' as *;
+@use 'interaction' as *;
+@use 'position' as *;
+
+// ─── Nav ────────────────────────────────────────────────────────────────────
+// Navigation structure reset. Layout (flex-col, h-full) and background come
+// from the parent container.
+//
+// Link appearance is controlled by a style preset mixin. The default is
+// nav-links-rounded. Override by applying a different preset after:
+//
+//   nav { @include nav; }                           ← rounded (default)
+//   nav { @include nav; @include nav-links-border-grow; }
+//   nav { @include nav; @include nav-links-border-left; }
+//   nav { @include nav; @include nav-links-border-top; }  ← horizontal navs
+
+@mixin nav {
+	@include select-none;
+
+	ul {
+		margin-inline: var(--nav-list-bleed, 0);
+	}
+
+	li {
+		margin: 0;
+	}
+
+	a {
+		--gap: var(--size-sm-up);
+		--color-fg: var(--fg-muted);
+		@include flex;
+		@include items-center;
+		gap: var(--gap);
+		padding-block: var(--padding-y);
+		font-size: var(--text-body-sm);
+		line-height: var(--lh-body-sm);
+		color: var(--color-fg);
+		text-decoration: none;
+		// Always-present 1px border slot. Color defaults to transparent
+		// (default theme = invisible). Themes that opt in (Glass) rebind
+		// --nav-link-border-color* at theme :root. Negative margin
+		// compensates so the slot doesn't shift adjacent siblings.
+		border: var(--border-width) solid var(--nav-link-border-color, transparent);
+		margin: calc(-1 * var(--border-width));
+	}
+
+	.nav-icon {
+		@include flex-shrink-0;
+		@include size(1.25rem);
+	}
+
+	.nav-label {
+		@include flex-1;
+		@include truncate;
+	}
+
+	.nav-section {
+		--color-fg: var(--fg-subtle);
+		--padding-y: var(--size-sm);
+		padding-block: var(--padding-y);
+		@include text-xs;
+		@include font-medium;
+		color: var(--color-fg);
+		@include normal-case;
+		letter-spacing: normal;
+		// Structural margin above section header.
+		--margin-block: var(--size-md);
+		margin-top: var(--margin-block);
+	}
+
+	.nav-divider {
+		@include border-t;
+		// Structural block margin around divider.
+		--margin-block: var(--size-sm);
+		margin-block: var(--margin-block);
+	}
+
+	// Default link style — override by applying a nav-links-* mixin after @include nav
+	@include nav-links-rounded;
+}
+
+
+// ─── Nav Link Style Presets ──────────────────────────────────────────────────
+
+@mixin _nav-link-active {
+	a {
+		&:hover {
+			color: var(--color-fg);
+			border-color: var(--nav-link-border-color-hover, transparent);
+		}
+
+		&.active {
+			color: var(--color-accent);
+			border-color: var(--nav-link-border-color-active, transparent);
+			@include font-semibold;
+		}
+	}
+}
+
+
+// ── 1. Rounded floating (default) ────────────────────────────────────────────
+
+@mixin nav-links-rounded {
+	@include _nav-link-active;
+
+	li {
+		&::before { display: none; }
+	}
+
+	// Structural spacing between floating pills.
+	li + li {
+		--margin-block: var(--size-2xs);
+		margin-top: var(--margin-block);
+	}
+
+	a {
+		padding-inline: var(--padding-x);
+		border-radius: var(--radius);
+		transition:
+			background-color 150ms ease,
+			color            150ms ease,
+			border-color     150ms ease;
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+		}
+
+		&.active {
+			// accent wash vocabulary (CLAUDE.md L532) — was reaching
+			// through to --color-primary-lighter scale.
+			background-color: var(--color-accent-tint);
+		}
+	}
+}
+
+
+// ── 2. Left border — instant (inset shadow) ───────────────────────────────────
+
+@mixin nav-links-border-left {
+	@include _nav-link-active;
+
+	li {
+		&::before { display: none; }
+	}
+
+	a {
+		margin-inline: 0;
+		--padding-x: var(--size-md);
+		padding-inline: var(--padding-x);
+		border-radius: 0;
+		transition: box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
+
+		&:hover {
+			box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-accent) 30%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
+		}
+
+		&.active {
+			box-shadow: inset 3px 0 0 var(--color-accent);
+			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+		}
+	}
+}
+
+
+// ── 3. Growing left bar — animated (spring easing) ──────────────────────────
+
+@mixin nav-links-border-grow {
+	@include _nav-link-active;
+
+	li {
+		@include relative;
+
+		&::before {
+			content: '';
+			@include absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 3px;
+			background-color: var(--color-accent);
+			border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+			transform: scaleY(0);
+			transform-origin: center;
+			opacity: 0;
+			@include motion-safe {
+				transition:
+					transform 220ms var(--easing-spring),
+					opacity   180ms ease;
+			}
+		}
+
+		&:has(a:hover)::before {
+			opacity: 0.4;
+		}
+
+		&:has(a.active)::before {
+			transform: scaleY(1);
+			opacity: 1;
+		}
+	}
+
+	a {
+		margin-inline: 0;
+		--padding-x: var(--size-md);
+		padding-inline: var(--padding-x);
+		border-radius: 0;
+		transition: background-color 150ms ease, color 150ms ease;
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
+		}
+
+		&.active {
+			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+		}
+	}
+}
+
+
+// ── 4. Top bar — grow from center (horizontal navs) ──────────────────────────
+
+@mixin nav-links-border-top {
+	@include _nav-link-active;
+
+	li {
+		@include relative;
+
+		&::before {
+			content: '';
+			@include absolute;
+			top: 0;
+			left: 50%;
+			right: 50%;
+			height: 2px;
+			background-color: var(--color-accent);
+			border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+			opacity: 0;
+			@include motion-safe {
+				transition:
+					left    200ms ease,
+					right   200ms ease,
+					opacity 150ms ease;
+			}
+		}
+
+		&:has(a:hover)::before {
+			left: 20%;
+			right: 20%;
+			opacity: 0.45;
+		}
+
+		&:has(a.active)::before {
+			left: 0;
+			right: 0;
+			opacity: 1;
+		}
+	}
+
+	a {
+		margin-inline: 0;
+		padding-inline: var(--padding-x);
+		border-radius: 0;
+		transition: color 150ms ease;
+	}
+}

package/scss/config/mixins/_page-header.scss

@@ -0,0 +1,69 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'breadcrumbs' as *;
+@use 'breakpoints' as *;
+
+@mixin page-header {
+	container-type: inline-size;
+	container-name: page-header;
+	display: grid;
+	grid-template-areas:
+		'breadcrumbs'
+		'title'
+		'actions';
+	--gap: var(--size-md);
+	gap: var(--gap);
+	--padding-y: var(--size-lg);
+	padding-bottom: var(--padding-y);
+	--margin-block: var(--size-lg);
+	margin-bottom: var(--margin-block);
+	border-block-end: var(--border-block-end, var(--border-width) solid var(--color-border));
+
+	@include cq-up(medium, page-header) {
+		grid-template-areas:
+			'breadcrumbs breadcrumbs'
+			'title       actions';
+		grid-template-columns: 1fr auto;
+		align-items: end;
+	}
+
+	> nav {
+		grid-area: breadcrumbs;
+		@include breadcrumbs;
+	}
+
+	> div:has(> h1) {
+		grid-area: title;
+
+		h1 {
+			@include typography(display-sm);
+			// Override the global h1 `mb(1rem)` from scss/base/_typography.scss —
+			// the page-header grid supplies vertical rhythm via `gap`, so a
+			// trailing margin on the title would stack on top of the gap.
+			margin: 0;
+		}
+
+		p {
+			--color-fg: var(--fg-muted);
+			@include typography(body-md);
+			color: var(--color-fg);
+			--margin-block: var(--size-xs);
+			margin: var(--margin-block) 0 0;
+		}
+	}
+
+	> div:has(> button),
+	> div:has(> a) {
+		grid-area: actions;
+		@include flex-row;
+		--gap: var(--size-sm);
+		gap: var(--gap);
+
+		@include cq-down(medium, page-header) {
+			justify-content: flex-start;
+		}
+	}
+}

package/scss/config/mixins/_popover.scss

@@ -0,0 +1,25 @@
+@use 'spacing' as *;
+@use 'borders' as *;
+@use 'motion' as *;
+@use 'card' as *;
+
+@mixin popover {
+	@include floating-panel;
+	display: none;
+	position: fixed;
+	min-width: 14rem;
+	max-width: 24rem;
+	padding: var(--padding-y) var(--padding-x);
+
+	&[data-ln-popover="open"] {
+		display: block;
+
+		@include motion-safe {
+			animation: ln-popover-fade var(--transition-fast);
+		}
+	}
+
+	&:focus {
+		outline: none;
+	}
+}

package/scss/config/mixins/_position.scss

@@ -0,0 +1,32 @@
+// Position & Overflow
+
+@mixin relative { position: relative; }
+@mixin absolute { position: absolute; }
+@mixin fixed    { position: fixed; }
+@mixin sticky   { position: sticky; }
+
+@mixin inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+
+@mixin overflow-hidden { overflow: hidden; }
+@mixin overflow-auto   { overflow: auto; }
+@mixin overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
+// Sticky pin to the top of the nearest scroll container.
+//
+// Default $top: 0 — most common case (pin flush at scroll port top).
+// Pass a positive value to offset (e.g. when stacking sticky elements,
+// or when a sibling above this one is also pinned).
+//
+// Example:
+//   thead             { @include sticky-top; }                    // top: 0
+//   .sidebar-card     { @include sticky-top(var(--app-header-height)); }
+//   .below-toolbar    { @include sticky-top(2rem); }
+//
+// Z-index is fixed at var(--z-sticky) by design — sticky elements
+// across the system share the same z-layer.
+
+@mixin sticky-top($top: 0) {
+	position: sticky;
+	top: $top;
+	z-index: var(--z-sticky);
+}

package/scss/config/mixins/_progress.scss

@@ -0,0 +1,56 @@
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'borders' as *;
+@use 'colors' as *;
+@use 'motion' as *;
+
+// Progress bar — horizontal track with animated fill segments.
+//
+// Usage:
+//   .progress { @include progress; }
+//
+// HTML:
+//   <div class="progress">
+//       <div data-ln-progress="60" class="success"></div>
+//       <div data-ln-progress="20" class="error"></div>
+//   </div>
+//
+// Color variants: .success, .warning, .error override background-color
+// on the inner bar(s).
+
+@mixin progress {
+	height: var(--size-xs); // Intrinsic component dimension — track thickness.
+	@include w-full;
+	@include rounded-full;
+	--color-bg: var(--bg-recessed);
+	background-color: var(--color-bg);
+	overflow: hidden;
+	@include flex;
+
+	// Inner bar segments
+	> [data-ln-progress] {
+		width: 0;
+		@include motion-safe {
+			transition: width var(--transition-base);
+		}
+		border-radius: 0;
+
+		&:last-child {
+			border-top-right-radius: var(--radius-full);
+			border-bottom-right-radius: var(--radius-full);
+		}
+	}
+}
+
+// ─── Color variants ────────────────────────────────────
+@mixin progress-success {
+	background-color: hsl(var(--color-success));
+}
+
+@mixin progress-error {
+	background-color: hsl(var(--color-error));
+}
+
+@mixin progress-warning {
+	background-color: hsl(var(--color-warning));
+}

package/scss/config/mixins/_prose.scss

@@ -0,0 +1,127 @@
+@use 'spacing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+
+@mixin prose {
+	max-width: var(--max-w-prose);
+	color: var(--color-fg);
+
+	> * + * {
+		margin-top: 1em;
+	}
+
+	h1 { @include typography(heading-lg); margin-top: 2em; margin-bottom: 0.5em; }
+	h2 { @include typography(heading-md); margin-top: 1.5em; margin-bottom: 0.5em; }
+	h3 { @include typography(heading-sm); margin-top: 1.25em; margin-bottom: 0.5em; }
+	h4 { @include typography(title-md); margin-top: 1em; margin-bottom: 0.5em; }
+
+	p { @include typography(body-md); }
+
+	a {
+		color: var(--color-accent);
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+
+		&:hover {
+			text-decoration-thickness: 2px;
+		}
+	}
+
+	strong { font-weight: var(--font-semibold); }
+	em { font-style: italic; }
+
+	ul, ol {
+		padding-left: 1.5em;
+
+		li {
+			margin-top: 0.5em;
+		}
+	}
+
+	ul { list-style: disc; }
+	ol { list-style: decimal; }
+
+	blockquote {
+		border-left: 3px solid var(--color-accent);
+		--padding-x: var(--size-md);
+		padding-left: var(--padding-x);
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+		font-style: italic;
+	}
+
+	code {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+		--padding-x: var(--size-xs-up);
+		padding-inline: var(--padding-x);
+		--padding-y: var(--size-2xs);
+		padding-block: var(--padding-y);
+		@include rounded-sm;
+		font-family: var(--font-mono);
+		@include typography(body-sm);
+		color: var(--color-accent);
+	}
+
+	pre {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+		--padding-y: var(--size-md);
+		--padding-x: var(--size-md);
+		padding: var(--padding-y) var(--padding-x);
+		@include rounded-md;
+		overflow-x: auto;
+
+		code {
+			background: none;
+			padding: 0;
+			color: inherit;
+		}
+	}
+
+	img {
+		max-width: 100%;
+		height: auto;
+		@include rounded-md;
+	}
+
+	figure {
+		margin: 1.5em 0;
+
+		figcaption {
+			@include typography(caption);
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+			text-align: center;
+			margin-top: 0.5em;
+		}
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		margin-top: 1.5em;
+
+		th, td {
+			--padding-y: var(--size-sm);
+			--padding-x: var(--size-sm-up);
+			padding: var(--padding-y) var(--padding-x);
+			border-bottom: 1px solid var(--color-border);
+			text-align: left;
+		}
+
+		th {
+			@include typography(label-md);
+			color: var(--color-fg);
+			font-weight: var(--font-semibold);
+		}
+	}
+
+	hr {
+		border: none;
+		border-top: 1px solid var(--color-border);
+		margin: 2em 0;
+	}
+}

package/scss/config/mixins/_shadows.scss

@@ -0,0 +1,8 @@
+// Shadows — references --shadow-* tokens
+
+@mixin shadow-none { box-shadow: var(--shadow-none); }
+@mixin shadow-xs   { box-shadow: var(--shadow-xs); }
+@mixin shadow-sm   { box-shadow: var(--shadow-sm); }
+@mixin shadow-md   { box-shadow: var(--shadow-md); }
+@mixin shadow-lg   { box-shadow: var(--shadow-lg); }
+@mixin shadow-xl   { box-shadow: var(--shadow-xl); }

package/scss/config/mixins/_sidebar.scss

@@ -0,0 +1,95 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'position' as *;
+@use 'footer' as *;
+
+// ─── Sidebar ───────────────────────────────────────────────────────
+// Structural shell for a sidebar layout. Provides flex column, right
+// border, background, and consistent horizontal padding via
+// --padding-x. Projects add width, position, animation.
+//
+// Expected HTML:
+//   <aside>
+//     <header>...</header>
+//     <main>...</main>
+//     <footer>...</footer>
+//   </aside>
+//
+// Usage:
+//   #my-sidebar { @include sidebar; width: 16rem; @include fixed; }
+//
+// Project override — same-rhythm adjustment:
+//   #my-sidebar { @include sidebar; --padding-x: var(--size-lg); }
+
+@mixin sidebar {
+	// Sidebar-wide horizontal rhythm. All direct children inherit this.
+	--padding-x: var(--size-md);
+	@include flex-col;
+	background: var(--color-bg);
+	@include border-r;
+	overflow: hidden;
+
+	> * {
+		padding-inline: var(--padding-x);
+	}
+
+	> header {
+		--gap: var(--size-sm-up);
+		@include relative;
+		@include flex;
+		@include items-center;
+		@include flex-wrap;
+		gap: var(--gap);
+		--padding-y: var(--size-sm-up);
+		padding-block: var(--padding-y);
+		@include border-b;
+		@include shadow-b;
+
+		// Brand row: logo + name, with optional drawer close button
+		// absolutely positioned top-right. Library owns the
+		// data-ln-toggle-action and data-ln-search attributes.
+		> img {
+			@include flex-shrink-0;
+			@include size(2rem);
+		}
+
+		> .app-name {
+			@include text-lg;
+			@include font-bold;
+			@include text-primary;
+			@include truncate;
+		}
+
+		> [data-ln-toggle-action="close"] {
+			--padding-y: var(--size-2xs);
+			--padding-x: var(--size-2xs);
+			@include absolute;
+			// Geometric — close button positioned inside header padding.
+			top: var(--size-sm);
+			right: var(--size-sm);
+		}
+
+		// Search field drops to a full-width second row below the
+		// brand triad (enabled by `flex-wrap` above).
+		> [data-ln-search] {
+			@include w-full;
+			--margin-block: var(--size-xs);
+			@include mt(var(--margin-block));
+		}
+	}
+
+	> main {
+		@include flex-1;
+		overflow-y: auto;
+		--padding-y: var(--size-xs);
+		padding-block: var(--padding-y);
+	}
+
+	> footer {
+		@include app-footer;
+	}
+}

package/scss/config/mixins/_sizing.scss

@@ -0,0 +1,6 @@
+// Width & Height
+
+@mixin w-full    { width: 100%; }
+@mixin h-full    { height: 100%; }
+@mixin min-h-screen { min-height: 100vh; }
+@mixin size($val) { width: $val; height: $val; }