@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_ajax.scss

@@ -0,0 +1,39 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'position' as *;
+@use 'borders' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+
+// Ajax loading overlay + spinner — visual treatment for JS-driven loading state.
+//
+// Usage:
+//   .ln-ajax--loading { @include ajax-loading; }
+//   .ln-ajax-spinner  { @include ajax-spinner; }
+
+@mixin ajax-loading {
+	@include relative;
+	pointer-events: none;
+	@include cursor-not-allowed;
+	// Alpha composition: blend the page surface at 60% opacity so the
+	// loading overlay tints the content beneath. color-mix produces the
+	// equivalent of the old hsl(triplet / 0.6) without needing a bare
+	// triplet. Adapts automatically via --color-bg cascade (dark/theme).
+	box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--color-bg) 60%, transparent);
+}
+
+@mixin ajax-spinner {
+	@include absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	@include size(1rem);
+	border: 2px solid var(--color-accent);
+	@include rounded-full;
+	border-top-color: transparent;
+	@include motion-safe {
+		animation: ln-ajax-spin 0.6s linear infinite;
+	}
+	@include z(2);
+}

package/scss/config/mixins/_alert.scss

@@ -0,0 +1,82 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'btn' as *;
+
+// Inline alert — contextual feedback element inside content.
+//
+// Usage (project SCSS — apply to semantic selector):
+//   .alert          { @include alert; }                                  ← info (default)
+//   .alert.success  { --color-primary: var(--color-success); }
+//   .alert.warning  { --color-primary: var(--color-warning); }
+//   .alert.error    { --color-primary: var(--color-error); }
+//
+// HTML:
+//   <div class="alert" role="alert">
+//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-info-circle"></use></svg>
+//       <p>Message text.</p>
+//       <button type="button" aria-label="Dismiss">
+//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>
+//       </button>
+//   </div>
+
+@mixin alert {
+	@include flex;
+	@include items-center;
+	gap: var(--gap);
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-md);
+	padding: var(--padding-y) var(--padding-x);
+	border-radius: var(--radius);
+	@include text-sm;
+	border-left: 3px solid var(--color-accent);
+	@include tinted-surface(0.08);
+	color: var(--color-fg);
+
+	.ln-icon {
+		color: var(--color-accent);
+		@include flex-shrink-0;
+	}
+
+	p {
+		@include flex-1;
+		@include m(0);
+		line-height: 1.5;
+	}
+
+	button {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-2xs);
+		@include flex-shrink-0;
+		margin-left: auto;
+	}
+}
+
+// Banner variant — full-width strip, bottom-border, no radius.
+// Apply ON TOP of @include alert (sets the structural delta only).
+//
+// Usage:
+//   .alert.banner { @include alert-banner; }
+//
+// HTML (dismissible via ln-toggle, dismissed state persists across reloads):
+//   <div class="alert banner" role="status" aria-live="polite"
+//        data-ln-toggle="open" data-ln-persist id="trial-notice">
+//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-info-circle"></use></svg>
+//       <p>Trial expires in 3 days.</p>
+//       <button type="button" aria-label="Dismiss"
+//               data-ln-toggle-for="trial-notice"
+//               data-ln-toggle-action="close">
+//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>
+//       </button>
+//   </div>
+
+@mixin alert-banner {
+	border-left: none;
+	border-radius: 0;
+	border-bottom: var(--border-width) solid color-mix(in srgb, var(--color-accent) 20%, transparent);
+	--padding-x: var(--size-lg);
+	padding-inline: var(--padding-x);
+	width: 100%;
+}

package/scss/config/mixins/_app-shell.scss

@@ -0,0 +1,312 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'position' as *;
+@use 'motion' as *;
+@use 'layout' as *;
+@use 'breakpoints' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'sidebar' as *;
+
+// ─── App Shell ──────────────────────────────────────────────────────────────
+// Mobile-ready application shell: fixed header, sidebar drawer, scrim overlay.
+//
+// Intrinsic tokens (component design, not spacing rhythm):
+//   --app-header-height: 3.5rem   — fixed bar height; hard-code acceptable
+//   --app-sidebar-width: 16rem    — sidebar width; intrinsic to design
+//   --app-scrim-bg                — semi-transparent overlay behind drawer
+//
+// Expected HTML:
+//   <div class="app-wrapper">
+//     <header class="app-header">…</header>
+//     <main class="app-main">
+//       <aside class="app-sidebar" id="…" data-ln-toggle="open">…</aside>
+//       <section>…content…</section>
+//       <footer class="app-footer">…</footer>
+//       <div class="app-scrim"></div>
+//     </main>
+//   </div>
+//
+// Usage (project):
+//   #shell         { @include app-wrapper; }
+//   #shell > header { @include app-header; }
+//   #shell > main   { @include app-main; }
+//   #my-sidebar    { @include sidebar; @include sidebar-drawer; }
+//   #my-scrim      { @include app-scrim; }
+//   .app-footer   { @include app-footer; }   (global binding — no project work needed)
+// ────────────────────────────────────────────────────────────────────────────
+
+@mixin app-wrapper {
+	@include flex-col;
+	// Bounded shell — body never scrolls. The .app-main child is the
+	// inner viewport (viewport − fixed header). dvh tracks live viewport
+	// so mobile URL bar collapse/expand stays in sync.
+	height: 100dvh;
+	overflow: hidden;
+	background: var(--bg-recessed);
+}
+
+@mixin app-header {
+	--color-border: var(--border-subtle);
+	--shadow: var(--shadow-resting);
+	@include fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: var(--app-header-height);
+	z-index: var(--z-sticky);
+	padding: var(--padding-y) var(--padding-x);
+	background: var(--color-bg);
+	border-block-end: var(--border-block-end, var(--border-width) solid var(--color-border));
+	box-shadow: var(--shadow);
+	@include flex;
+	@include items-center;
+	@include justify-between;
+	gap: var(--gap);
+
+	// Ghost surface by default for every button in the bar. Variants
+	// (e.g. @mixin app-header-actions) re-bind --btn-border and padding
+	// on top of this default. Padding is rebound via primitives (not a
+	// literal `padding: 0`) so variants' --padding-* rebinds resolve
+	// through button-base's `padding: var(--padding-y) var(--padding-x)`.
+	button {
+		--btn-bg: transparent;
+		--btn-border: transparent;
+		--color-fg: var(--fg-muted);
+		--btn-padding-y: 0;
+		--btn-padding-x: 0;
+		color: var(--color-fg);
+		box-shadow: none;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}
+
+@mixin app-header-left {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-sm-up);
+	gap: var(--gap);
+
+	.menu-toggle {
+		@include flex-center;
+		@include size(2rem);
+		@include rounded-sm;
+	}
+
+	h1 {
+		@include text-xl;
+		@include font-bold;
+		@include text-primary;
+		margin: 0;
+	}
+}
+
+@mixin app-header-right {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-md);
+	gap: var(--gap);
+}
+
+@mixin app-header-actions {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-sm);
+	gap: var(--gap);
+
+	// Equalize height across icon-only and text-only siblings AND
+	// search-icon labels. Geometric — locks the border-box chrome to
+	// the icon-content height (1.25rem) plus rebound --padding-y and
+	// border-width on both edges. Buttons rebind --padding-y below;
+	// search labels read --padding-y from @mixin form-input-icon-group
+	// (same var(--size-xs) value), so the formula resolves identically
+	// for both. Border-box is the project default (scss/base/_reset.scss).
+	:is(button, label) {
+		min-height: calc(1.25rem + 2 * var(--padding-y) + 2 * var(--border-width));
+	}
+
+	button {
+		// Bordered variant re-bound over @mixin app-header's ghost
+		// default. --color-border is already a composed hsl() value;
+		// read directly (no extra hsl() wrap).
+		--btn-border: var(--color-border);
+		--btn-padding-y: var(--size-xs);
+		--btn-padding-x: var(--size-sm-up);
+		@include text-xs;
+		font-weight: var(--font-medium);
+		border-radius: var(--radius-sm);
+
+		// Label visually-hidden on small viewports — icon remains.
+		> span {
+			@include mq-down(sm) {
+				position: absolute;
+				width: 1px;
+				height: 1px;
+				padding: 0;
+				margin: -1px;
+				overflow: hidden;
+				clip: rect(0, 0, 0, 0);
+				white-space: nowrap;
+				border: 0;
+			}
+		}
+	}
+}
+
+@mixin header-avatar {
+	// Plain 2rem circular thumbnail. Distinct from @mixin avatar
+	// (profile-button with ring + hover) — this is a non-interactive
+	// image circle used as a popover trigger target.
+	@include size(2rem);
+	@include rounded-full;
+	@include overflow-hidden;
+	@include cursor-pointer;
+
+	img {
+		@include w-full;
+		@include h-full;
+		object-fit: cover;
+	}
+}
+
+@mixin app-main {
+	@include flex-col;
+	@include flex-1;
+	margin-top: var(--app-header-height);
+	// Bounded inner viewport: exactly the space below the fixed
+	// .app-header. The `> section` child flex-fills and becomes the
+	// scroll surface (its overflow-auto finally activates here).
+	// Footer sits below section as a sibling, intrinsic height,
+	// pinned to bottom by flex distribution.
+	height: calc(100dvh - var(--app-header-height));
+	overflow: hidden;
+
+	// When the sidebar drawer is open on desktop, reserve its space
+	// on THIS element (the parent) so both content and footer shift
+	// together. Padding on the parent keeps child widths at 100% and
+	// avoids the horizontal overflow caused by margin-left on
+	// width:100% children.
+	&:has(.app-sidebar[data-ln-toggle="open"]) {
+		padding-left: var(--app-sidebar-width);
+	}
+
+	// On mobile the sidebar overlays (scrim covers content) —
+	// no content shift.
+	@include mq-down(md) {
+		&:has(.app-sidebar[data-ln-toggle="open"]) {
+			padding-left: 0;
+		}
+	}
+
+	// Content column: centred, capped, padded, vertical stack.
+	// flex-1 + min-height: 0 — bounded parent + flex-shrink past content
+	// height activates @include overflow-auto. Without min-height: 0,
+	// flex items default to min-height: auto and refuse to shrink below
+	// intrinsic content size, defeating the bounded scroll contract.
+	> section {
+		@include flex-1;
+		min-height: 0;
+		// NO padding-block — sticky descendants (e.g. ln-table's <thead>
+		// at top:0, ln-data-table's <footer> at bottom:0) pin flush at the
+		// section edges instead of at the inner padding edge. The lost
+		// breathing room is restored INSIDE the scroll flow via
+		// `> *:first-child` / `> *:last-child` margins below — those
+		// margins scroll past with the content, leaving sticky to pin
+		// against the actual section edges.
+		padding-inline: var(--padding-x);
+		@include overflow-auto;
+		@include w-full;
+		@include stack(var(--gap));
+		@include transition;
+
+		// Children keep intrinsic height — wrapper's overflow-auto
+		// handles the scroll. Without this, section-cards (which set
+		// overflow: clip, making their min-height: auto resolve to 0)
+		// get flex-shrunk to fit the bounded parent before scroll
+		// activates — visible as "briefly open, then collapse" on load.
+		> * {
+			flex-shrink: 0;
+		}
+
+		// First / last children carry the visual breathing room that used to
+		// be padding-block-start / padding-block-end. As margin, it lives
+		// inside the scroll flow — scrolls past, doesn't push sticky
+		// descendants (sticky top:0 toolbar/thead, sticky bottom:0 footer)
+		// to the inside of the padding edge.
+		> *:first-child {
+			margin-block-start: var(--padding-x);
+		}
+
+		> *:last-child {
+			margin-block-end: var(--padding-x);
+		}
+	}
+}
+
+@mixin sidebar-drawer {
+	// Layered on top of @mixin sidebar. Adds drawer positioning and
+	// open/close transform. Apply AFTER @include sidebar.
+	@include fixed;
+	top: var(--app-header-height);
+	left: 0;
+	height: calc(100vh - var(--app-header-height));
+	width: var(--app-sidebar-width);
+	z-index: var(--z-sticky);
+	transform: translateX(-100%);
+
+	@include motion-safe {
+		transition: transform var(--transition);
+	}
+
+	&[data-ln-toggle="open"] {
+		transform: translateX(0);
+	}
+
+	@include mq-down(md) {
+		z-index: var(--z-overlay);
+	}
+}
+
+@mixin app-scrim {
+	@include fixed;
+	@include inset-0;
+	background: var(--app-scrim-bg);
+	z-index: calc(var(--z-overlay) - 1);
+	opacity: 0;
+	pointer-events: none;
+
+	@include motion-safe {
+		transition: opacity var(--transition);
+	}
+
+	// State-driven via sibling combinator — no JS wiring needed.
+	// The scrim reacts to the sidebar drawer's existing toggle attribute,
+	// which is owned by the ln-toggle JS component.
+	aside[data-ln-toggle="open"] ~ & {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	@include mq-up(md) {
+		display: none;
+	}
+}
+
+// @mixin app-footer — extracted to _footer.scss.
+// Forwarded by _index.scss. Consumers: `.app-footer` (components/_app-shell.scss)
+// and `<aside> > footer` (via @mixin sidebar in _sidebar.scss).
+
+@mixin app-content-wrapper {
+	max-width: var(--max-w-container);
+	@include mx(auto);
+	@include w-full;
+	@include stack(var(--gap));
+}
+

package/scss/config/mixins/_avatar.scss

@@ -0,0 +1,109 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'shadows' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'focus' as *;
+
+// Avatar — profile image or initials, with optional name/role text
+//
+// Standalone:  <span class="avatar"><img src="..." alt=""></span>
+// Initials:    <abbr class="avatar">SO</abbr>
+// With text:   <button class="avatar"><img ...><span>Name<small>Role</small></span></button>
+// Sizes:       avatar-sm (2rem), avatar (2.5rem), avatar-lg (3rem), avatar-xl (5rem)
+// Ring:        double box-shadow (bg + border) — Tabler-inspired
+
+// ─── Shared ring ───────────────────────────────────────
+@mixin _avatar-ring {
+	box-shadow: 0 0 0 var(--border-width-strong) var(--color-bg),
+	            0 0 0 calc(var(--border-width-strong) + var(--border-width)) var(--color-border);
+}
+
+// ─── Shared image / initials base ──────────────────────
+@mixin _avatar-media {
+	@include size(2.5rem);
+	border-radius: var(--radius);
+	@include flex-shrink-0;
+	@include _avatar-ring;
+}
+
+// ─── Base ──────────────────────────────────────────────
+@mixin avatar {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-sm-up);
+	gap: var(--gap);
+	--padding-y: var(--size-xs-up);
+	--padding-x: var(--size-xs-up);
+	padding: var(--padding-y) var(--padding-x);
+	border-radius: var(--radius);
+	@include cursor-pointer;
+	@include transition-fast;
+	@include select-none;
+	@include border-none;
+	background: transparent;
+	text-decoration: none;
+	color: inherit;
+	font: inherit;
+
+	&:hover {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+
+	&:focus-visible {
+		@include focus-ring;
+	}
+
+	// Photo
+	img {
+		@include _avatar-media;
+		object-fit: cover;
+	}
+
+	// Initials fallback — <abbr class="avatar">SO</abbr>
+	&:not(:has(img)):not(:has(span)) {
+		@include _avatar-media;
+		@include flex-center;
+		@include text-sm;
+		@include font-semibold;
+		background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
+		color: var(--color-accent);
+		padding: 0;
+	}
+
+	// Name + role
+	span {
+		@include flex-col;
+		@include text-sm;
+		@include font-medium;
+		color: var(--color-fg);
+		@include text-left;
+		line-height: 1.3;
+
+		small {
+			@include text-xs;
+			@include font-normal;
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+		}
+	}
+}
+
+// ─── Sizes ─────────────────────────────────────────────
+@mixin _avatar-size($size, $font-size, $line-height) {
+	img { @include size($size); }
+	&:not(:has(img)):not(:has(span)) {
+		@include size($size);
+		font-size: $font-size;
+		line-height: $line-height;
+	}
+}
+
+@mixin avatar-sm { @include _avatar-size(2rem, var(--text-xs), 1rem); }
+@mixin avatar-lg { @include _avatar-size(3rem, var(--text-base), 1.5rem); }
+@mixin avatar-xl { @include _avatar-size(5rem, var(--text-xl), 1.75rem); }

package/scss/config/mixins/_borders.scss

@@ -0,0 +1,36 @@
+// Borders — references --color-border and --radius-* tokens
+
+@mixin border {
+	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));
+}
+
+@mixin border-t { border-block-start:  var(--border-block-start,  var(--border-width) solid var(--color-border)); }
+@mixin border-b { border-block-end:    var(--border-block-end,    var(--border-width) solid var(--color-border)); }
+@mixin border-l { border-inline-start: var(--border-inline-start, var(--border-width) solid var(--color-border)); }
+@mixin border-r { border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border)); }
+
+@mixin border-none { border: none; }
+
+@mixin shadow-b {
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: calc(-1 * var(--size-sm-up)); // Geometric — shadow-b decoration offset, not spacing rhythm.
+		left: 0;
+		right: 0;
+		height: var(--size-sm-up); // Intrinsic shadow-decoration height, not spacing rhythm.
+		background: linear-gradient(to bottom, hsl(var(--color-neutral-200) / 0.5), transparent);
+		pointer-events: none;
+	}
+}
+
+@mixin rounded-sm   { border-radius: var(--radius-sm); }
+@mixin rounded-md   { border-radius: var(--radius-md); }
+@mixin rounded-lg   { border-radius: var(--radius-lg); }
+@mixin rounded-xl   { border-radius: var(--radius-xl); }
+@mixin rounded-full { border-radius: var(--radius-full); }

package/scss/config/mixins/_breadcrumbs.scss

@@ -0,0 +1,72 @@
+@use 'display' as *;
+@use 'borders' as *;
+@use 'focus' as *;
+@use 'interaction' as *;
+
+// ─── Breadcrumbs ────────────────────────────────────────────────────────────
+// CSS-only navigation trail. No JS involvement.
+//
+// Applied to the semantic `<nav>` container (WAI-ARIA breadcrumb pattern).
+// The mixin internally targets the inner `> ol` so the browser's default
+// ordered-list styling (decimal markers, padding-left, li margins from
+// base typography) gets reset at the right depth. Applying the mixin
+// directly to an `<ol>` would not reset the parent `<nav>` and would
+// also not compose with the semantic a11y root.
+//
+// Usage:
+//   .breadcrumbs { @include breadcrumbs; }
+//
+//   <nav class="breadcrumbs" aria-label="Breadcrumb">
+//       <ol>
+//           <li><a href="/">Home</a></li>
+//           <li><a href="/users">Users</a></li>
+//           <li aria-current="page">Edit</li>
+//       </ol>
+//   </nav>
+
+@mixin breadcrumbs {
+	@include select-none;
+
+	> ol {
+		@include flex;
+		@include items-center;
+		@include flex-wrap;
+		gap: var(--gap);
+
+		> li {
+			@include flex;
+			@include items-center;
+			gap: var(--gap);
+			font-size: var(--text-body-sm);
+			line-height: var(--lh-body-sm);
+			margin: 0;
+
+			+ li::before {
+				content: '\00BB';
+				// Pseudo-element announces as text by some screen readers.
+				// Breadcrumb separators are decorative — the list order
+				// carries the meaning.
+				speak: never;
+			}
+		}
+
+		a {
+			@include inline-flex;
+			@include items-center;
+			--padding-y: var(--size-2xs);
+			--padding-x: var(--size-xs);
+			padding: var(--padding-y) var(--padding-x);
+			@include rounded-sm;
+
+			&:focus-visible {
+				@include focus-ring;
+			}
+		}
+
+		[aria-current="page"] {
+			--padding-y: var(--size-2xs);
+			--padding-x: var(--size-xs);
+			padding: var(--padding-y) var(--padding-x);
+		}
+	}
+}