@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_circular-progress.scss

@@ -0,0 +1,71 @@
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'position' as *;
+@use 'motion' as *;
+
+// Circular progress ring — SVG-based progress indicator with center label.
+//
+// Usage:
+//   [data-ln-circular-progress] { @include circular-progress; }
+//
+// Size variants: circular-progress-sm, circular-progress-lg, circular-progress-xl
+// Color variants: override --color-primary on the element or a wrapper:
+//   [data-ln-circular-progress].success { --color-primary: var(--color-success); }
+
+@mixin circular-progress {
+	@include relative;
+	@include inline-flex;
+	@include flex-center;
+	@include size(4rem);
+
+	svg {
+		@include size(100%);
+	}
+
+	.ln-circular-progress__track {
+		stroke: var(--color-border);
+	}
+
+	.ln-circular-progress__fill {
+		stroke: var(--color-accent);
+		@include motion-safe {
+			transition: stroke-dashoffset var(--transition-base);
+		}
+	}
+
+	.ln-circular-progress__label {
+		@include absolute;
+		@include text-xs;
+		@include font-semibold;
+		color: var(--color-fg);
+	}
+}
+
+// ─── Size variants ─────────────────────────────────────
+@mixin circular-progress-sm {
+	@include size(2.5rem);
+
+	.ln-circular-progress__label {
+		font-size: 0.625rem;
+		line-height: 0.75rem;
+	}
+}
+
+@mixin circular-progress-lg {
+	@include size(6rem);
+
+	.ln-circular-progress__label {
+		@include text-base;
+	}
+}
+
+@mixin circular-progress-xl {
+	@include size(8rem);
+
+	.ln-circular-progress__label {
+		@include text-xl;
+	}
+}
+

package/scss/config/mixins/_collapsible.scss

@@ -0,0 +1,24 @@
+// Collapsible — grid-template-rows animation for expand/collapse
+//
+// Usage:
+//   .my-panel          { @include collapsible; }
+//   .my-panel > .inner { @include collapsible-content; }
+
+@use 'transitions' as *;
+@use 'motion' as *;
+
+@mixin collapsible {
+	display: grid;
+	grid-template-rows: 0fr;
+	@include motion-safe {
+		transition: grid-template-rows var(--transition-base);
+	}
+
+	&.open {
+		grid-template-rows: 1fr;
+	}
+}
+
+@mixin collapsible-content {
+	overflow: hidden;
+}

package/scss/config/mixins/_colors.scss

@@ -0,0 +1,46 @@
+// Colors — references --color-* tokens
+
+@mixin text-primary   { color: var(--color-fg); }
+@mixin text-white     { color: hsl(var(--color-white)); }
+@mixin text-error     { color: hsl(var(--color-error)); }
+@mixin text-success   { color: hsl(var(--color-success)); }
+@mixin text-warning   { color: hsl(var(--color-warning)); }
+
+@mixin bg-primary   { background-color: var(--color-bg); }
+
+// Tinted surface — semi-transparent primary fill + solid primary text.
+// Override --color-primary on the element/ancestor to restyle (e.g. error, success).
+@mixin tinted-surface($opacity: 0.08) {
+	background-color: hsl(var(--color-primary) / #{$opacity});
+	color: hsl(var(--color-primary));
+}
+
+// Semantic color recipe — re-binds the --color-primary family AND the
+// --color-accent vocabulary to a status family (success / warning /
+// error / info / secondary). Used by .success / .warning / .error /
+// .info / .secondary classes in _utilities.scss. Cascading both families
+// ensures every downstream consumer (btn, toast-side, card-accent,
+// alert, badge, etc.) picks up the status color through inherited
+// custom-property values — no per-mixin redeclare required.
+@mixin semantic-color($family) {
+	// Re-bind the base color and the theme-controlled tint companions.
+	// --color-primary-hover / -focus are NOT rebound — consumers derive
+	// hover/focus from --color-accent locally via CSS relative color
+	// syntax. See _btn.scss / _form.scss / _data-table.scss / _global.scss
+	// for the derivation pattern. --color-primary-light / -lighter ARE
+	// rebound because their values are theme-controlled (light themes
+	// use near-white tints, dark themes use subtle dark surfaces) and
+	// cannot be derived from the base.
+	--color-primary:         var(--color-#{$family});
+	--color-primary-light:   var(--color-#{$family}-light);
+	--color-primary-lighter: var(--color-#{$family}-lighter);
+
+	// Re-declare accent vocabulary at this scope so var() resolves
+	// here instead of staying frozen at :root. Without this, descendants
+	// reading --color-accent get :root's primary blue regardless of the
+	// semantic class. --color-accent-fg stays at :root (white) — text on
+	// any colored accent surface should stay white.
+	--color-accent:             hsl(var(--color-primary));
+	--color-accent-tint:        hsl(var(--color-primary-lighter));
+	--color-accent-tint-strong: hsl(var(--color-primary-light));
+}

package/scss/config/mixins/_confirm.scss

@@ -0,0 +1,31 @@
+@use 'spacing' as *;
+@use 'typography' as *;
+@use 'shadows' as *;
+@use 'tooltip' as *;
+
+// Confirm tooltip — visual tooltip for icon-only confirm buttons.
+//
+// Usage:
+//   .ln-confirm-tooltip { @include confirm-tooltip; }
+//
+// JS adds .ln-confirm-tooltip class and data-tooltip-text attribute
+// to icon-only buttons entering confirm state.
+
+@mixin confirm-tooltip {
+	position: relative;
+	overflow: visible !important;
+
+	// Confirm icon inherits this color
+	color: hsl(var(--color-error)) !important;
+
+	&::after {
+		@include tooltip-bubble;
+		content: attr(data-tooltip-text);
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		--margin-block: var(--size-sm);
+		margin-bottom: var(--margin-block);
+	}
+}

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

@@ -0,0 +1,346 @@
+@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 'form' as *;
+@use 'btn' as *;
+@use 'card' as *;
+@use 'ln-table';
+
+// Data Table -- enhanced table with toolbar, sort, filter, virtual scroll.
+//
+// Usage:
+//   [data-ln-data-table] { @include data-table; }
+//
+// State-driven CSS (loading, selected, focused, spacer) stays in
+// the co-located JS SCSS file.
+
+@mixin data-table {
+	@include relative;
+
+	// Row hover token — local to data-table so chrome (toolbar, thead,
+	// footer) reading --bg-sunken stays visually distinct from the row
+	// the cursor is on. --bg-elevated is unsuitable: it equals --bg-base
+	// in light theme, making hover invisible. Derive a 4-point lightness
+	// step from --bg-base via CSS relative color syntax (number form, see
+	// _btn.scss header for percentage-vs-number rationale).
+	//
+	// Light theme:  hsl(white)            → ~hsl(0 0% 96%)
+	// Dark theme:   hsl(220 16% 13%)      → hsl(220 16% 17%)  ≈ --bg-elevated dark
+	//
+	// The 4-point step is monotonically distinct from --bg-sunken
+	// (light: neutral-100 ≈ 95%; dark: 220 16% 20%) on both sides.
+	--bg-row-hover: hsl(from var(--bg-base) h s calc(l - 4));
+
+	// Override @mixin table-base's `tbody tr:hover` to use the local hover
+	// token instead of --bg-sunken. Default hover stays --bg-sunken for
+	// standalone tables; data-table re-binds so its hover disambiguates from
+	// chrome that also uses --bg-sunken.
+	> table tbody tr:hover {
+		--color-bg: var(--bg-row-hover);
+		background: var(--color-bg);
+	}
+
+	// Inner table — `border-collapse: separate` + `border-spacing: 0` is
+	// required for `position: sticky` on `<thead> th` to actually pin in
+	// Chrome. With the `border-collapse: collapse` that `@mixin table-base`
+	// sets by default, Chrome silently drops sticky behavior on table cells —
+	// the same reason `@mixin ln-table` applies this exact override. Borders
+	// are restored cell-by-cell via table-base's `td { @include border-b }`,
+	// so no visual change.
+	> table {
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+
+
+	// Sticky header - Pins the entire thead (including the in-thead toolbar) at top:0
+	thead {
+		@include sticky-top;
+	}
+
+	thead th {
+		position: relative;
+		top: auto;
+		z-index: auto;
+		background: var(--bg-sunken);
+
+		&[data-ln-col] {
+			// Maintain standard table-cell layout so columns don't break or stack vertically
+			white-space: normal;
+
+			// Add padding-inline-end to prevent text from overlapping absolute buttons
+			
+			// Case 1: Has both sort and filter buttons
+			&:has([data-ln-col-sort]):has([data-ln-col-filter]) {
+				padding-inline-end: calc(var(--padding-x) + 2.5rem);
+
+				[data-ln-col-filter] {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					right: var(--padding-x);
+					margin: 0;
+				}
+
+				[data-ln-col-sort] {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					right: calc(var(--padding-x) + 1.25rem);
+					margin: 0;
+				}
+			}
+
+			// Case 2: Has only sort button
+			&:has([data-ln-col-sort]):not(:has([data-ln-col-filter])) {
+				padding-inline-end: calc(var(--padding-x) + 1.25rem);
+
+				[data-ln-col-sort] {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					right: var(--padding-x);
+					margin: 0;
+				}
+			}
+
+			// Case 3: Has only filter button
+			&:has([data-ln-col-filter]):not(:has([data-ln-col-sort])) {
+				padding-inline-end: calc(var(--padding-x) + 1.25rem);
+
+				[data-ln-col-filter] {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					right: var(--padding-x);
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	// Support for the in-thead toolbar row inside ln-data-table
+	thead > tr:first-child:has(> th[colspan]) > th {
+		@include ln-table.ln-table-thead-toolbar;
+	}
+
+	// Section footer — sibling of <table>, NOT inside it. Moved out of
+	// <tfoot> because Chromium drops sticky on table cells when a
+	// virtual-scroll spacer <tr> sits between the data and the tfoot row.
+	// As a section-level <footer> sticky works reliably and shares the
+	// same scroll container as the toolbar.
+	//
+	// Chrome surface visually symmetric with panel-header: --bg-sunken
+	// fill, muted fg, body-sm text, border-block-start for separation.
+	> footer {
+		padding: var(--padding-y) var(--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);
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+		font-size: var(--text-body-sm);
+		position: sticky;
+		bottom: 0;
+		z-index: var(--z-sticky);
+	}
+}
+
+// ─── Sort indicators ──────────────────────────────────────
+
+@mixin data-table-sort-button {
+	opacity: 0.4;
+	@include motion-safe {
+		transition: opacity 0.15s;
+	}
+	@include cursor-pointer;
+	background: none;
+	border: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	--margin-inline: var(--size-xs);
+	margin-inline-start: var(--margin-inline);
+	vertical-align: middle;
+
+	// Icon-trio visibility — neutral state shows the dual-arrow icon.
+	// Active states (.ln-sort-asc / .ln-sort-desc on ancestor <th>)
+	// flip to a single directional icon. See component file for the
+	// active-state overrides.
+	[data-ln-sort-icon="asc"],
+	[data-ln-sort-icon="desc"] {
+		display: none;
+	}
+}
+
+@mixin data-table-sort-active {
+	opacity: 1;
+	color: var(--color-accent);
+}
+
+// ─── Filter button ────────────────────────────────────────
+
+@mixin data-table-filter-button {
+	opacity: 0.4;
+	@include motion-safe {
+		transition: opacity 0.15s;
+	}
+	@include cursor-pointer;
+	background: none;
+	border: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	--margin-inline: var(--size-2xs);
+	margin-inline-start: var(--margin-inline);
+	vertical-align: middle;
+	@include relative;
+}
+
+@mixin data-table-filter-active {
+	opacity: 1;
+	color: var(--color-accent);
+
+	&::after {
+		content: '';
+		@include absolute;
+		top: 0;
+		right: 0;
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: var(--radius-full);
+		background: var(--color-accent);
+	}
+}
+
+// ─── Row action buttons ───────────────────────────────────
+//
+// `[data-ln-row-action]` is the ln-data-table attribute for in-row
+// action buttons (edit, delete, custom). They're conventionally
+// icon-only and live in narrow `<td>` cells — full button chrome
+// inflates row height and visually competes with the row content.
+//
+// Style is ghost: no bg, no border, no shadow, dim opacity at rest,
+// full opacity on hover. Targets the BUTTON via its own attribute,
+// not via ancestor selectors — a `data-ln-row-action` button looks
+// the same anywhere.
+
+@mixin data-table-row-action {
+	background: none;
+	border: none;
+	--shadow: none;
+	--btn-padding-y: var(--size-2xs);
+	--btn-padding-x: var(--size-2xs);
+	opacity: 0.5;
+	@include motion-safe {
+		transition: opacity 0.15s;
+	}
+
+	&:hover:not(:disabled) {
+		background: none;
+		opacity: 1;
+	}
+}
+
+// Destructive variant — semantic-color cascade via --color-primary
+// rebind so the icon and any confirm-state overlay both read the
+// same source. Applied on top of `data-table-row-action`.
+@mixin data-table-row-action-delete {
+	--color-primary: var(--color-error);
+	color: hsl(var(--color-primary));
+}
+
+// ─── Filter dropdown ──────────────────────────────────────
+
+@mixin data-table-filter-dropdown {
+	@include absolute;
+	top: 100%;
+	left: 0;
+	z-index: var(--z-dropdown);
+	--color-bg: var(--bg-elevated);
+	background: var(--color-bg);
+	--shadow: var(--shadow-floating);
+	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));
+	border-radius: var(--radius);
+	box-shadow: var(--shadow);
+	--padding-y: var(--size-sm);
+	--padding-x: var(--size-sm);
+	padding: var(--padding-y) var(--padding-x);
+	min-width: 12rem;
+	max-height: 20rem;
+	overflow-y: auto;
+
+	[data-ln-filter-search] {
+		@include form-input;
+		width: 100%;
+		--margin-block: var(--size-sm);
+		margin-bottom: var(--margin-block);
+	}
+
+	ul {
+	}
+
+	li {
+		--padding-y: var(--size-xs);
+		padding: var(--padding-y) 0;
+	}
+
+	label {
+		display: flex;
+		align-items: center;
+		gap: var(--gap);
+		@include cursor-pointer;
+		font-size: var(--text-sm);
+	}
+
+	[data-ln-filter-clear] {
+		@include btn;
+		width: 100%;
+		--margin-block: var(--size-sm);
+		margin-top: var(--margin-block);
+		font-size: var(--text-sm);
+	}
+}
+
+// Row interaction state — applied to JS-marked clickable rows.
+
+@mixin data-table-row {
+	cursor: pointer;
+
+	&:hover {
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+}
+
+@mixin data-table-row-selected {
+	background: var(--color-accent-tint);
+}
+
+@mixin data-table-row-focused {
+	// Derive focus from --color-accent at this scope (same hue/saturation,
+	// lightness +8). Number form (not percentage) — see _btn.scss for the
+	// syntax rationale.
+	--color-accent-focus: hsl(from var(--color-accent) h s calc(l + 8));
+	outline: 2px solid var(--color-accent-focus);
+	outline-offset: -2px;
+}
+
+// Virtual-scroll spacer rows (JS-injected) — neutralize default cell padding/border.
+
+@mixin data-table-spacer-row {
+	td {
+		padding: 0 !important;
+		border: none !important;
+	}
+}

package/scss/config/mixins/_display.scss

@@ -0,0 +1,32 @@
+// Display & Flex
+
+@mixin flex          { display: flex; }
+@mixin inline-flex   { display: inline-flex; }
+@mixin block         { display: block; }
+@mixin inline-block  { display: inline-block; }
+@mixin hidden        { display: none; }
+
+@mixin flex-col      { display: flex; flex-direction: column; }
+@mixin flex-row      { display: flex; flex-direction: row; }
+@mixin flex-wrap     { flex-wrap: wrap; }
+@mixin flex-1        { flex: 1; }
+@mixin flex-shrink-0 { flex-shrink: 0; }
+
+@mixin items-center    { align-items: center; }
+@mixin items-start     { align-items: flex-start; }
+@mixin items-end       { align-items: flex-end; }
+@mixin justify-center  { justify-content: center; }
+@mixin justify-between { justify-content: space-between; }
+@mixin justify-end     { justify-content: flex-end; }
+
+@mixin flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+@mixin inline-flex-center {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}

package/scss/config/mixins/_dropdown.scss

@@ -0,0 +1,143 @@
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'shadows' as *;
+@use 'typography' as *;
+@use 'sizing' as *;
+@use 'position' as *;
+@use 'interaction' as *;
+@use 'transitions' as *;
+@use 'motion' as *;
+@use 'card' as *;
+
+// Dropdown menu — floating panel with menu items.
+//
+// Usage:
+//   [data-ln-dropdown] { @include dropdown; }
+//   [data-ln-dropdown-menu] { @include dropdown-menu; }
+//
+// Open/close state (display:none ↔ display:block + .open) is JS-driven
+// and lives in the co-located JS SCSS, not here.
+
+@mixin dropdown {
+	@include relative;
+}
+
+// ─── Menu items — shared recipe ────────────────────────
+// The "list of interactive menu items" recipe, without container
+// chrome or positioning. Composes with any floating container
+// (dropdown, popover-with-menu, other future surfaces).
+//
+// Expected HTML:
+//   <ul>
+//     <li><a>…</a></li>
+//     <li><button>…</button></li>
+//     <li><button aria-current="true">Active item</button></li>
+//     <li><hr></li>
+//     <li><form><button type="submit">Logout</button></form></li>
+//   </ul>
+//
+// Selection state — `aria-current="true"` (boolean flavor) marks the
+// active item in single-select pickers (theme, language). NOT the
+// `="page"` / `="step"` flavors — those belong to breadcrumbs /
+// stepper and have their own styling in those mixins.
+
+@mixin menu-items {
+	// ─── Row resets ────────────────────────────────────
+	li {
+		margin: 0;
+		padding: 0;
+	}
+
+	form {
+		margin: 0;
+		padding: 0;
+		display: contents;
+	}
+
+	// ─── Interactive items ─────────────────────────────
+	a,
+	button,
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"] {
+		@include w-full;
+		@include flex;
+		@include items-center;
+		justify-content: flex-start;
+		gap: var(--gap);
+		@include text-left;
+		@include text-sm;
+		@include cursor-pointer;
+		@include transition-fast;
+		background: none;
+		border: none;
+		border-radius: 0;
+		color: var(--color-fg);
+		text-decoration: none;
+
+		&:hover:not(:disabled),
+		&:active:not(:disabled) {
+			--color-bg: var(--bg-sunken);
+			background: var(--color-bg);
+			color: var(--color-fg);
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+
+		// Active item — single-select selection state.
+		// Scoped to the boolean flavor so we don't collide with
+		// breadcrumbs (`="page"`) or stepper (`="step"`).
+		&[aria-current="true"] {
+			background: var(--color-accent-tint);
+			color: var(--color-accent);
+		}
+	}
+
+	a {
+		--padding-y: var(--size-xs);
+		--padding-x: var(--size-sm);
+		padding: var(--padding-y) var(--padding-x);
+	}
+
+	:is(button, input[type="submit"], input[type="reset"], input[type="button"]) {
+		--btn-padding-y: var(--size-xs);
+		--btn-padding-x: var(--size-sm);
+	}
+
+	// Inter-item divider — SOFT --border-block-start primitive read with
+	// `none` fallback. Default theme: no divider. Themes that opt in
+	// (Glass) rebind --border-block-start in scope.
+	li + li {
+		border-block-start: var(--border-block-start, none);
+	}
+
+	// ─── Separator ─────────────────────────────────────
+	hr {
+		border: none;
+		border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
+		--margin-block: var(--size-xs);
+		margin-block: var(--margin-block);
+	}
+}
+
+// ─── Dropdown menu — floating panel + menu items ───────
+// Dropdown-specific chrome (anchor-positioned absolute panel) plus
+// the shared menu-items recipe.
+
+@mixin dropdown-menu {
+	@include floating-panel;
+	@include absolute;
+	right: 0;
+	top: 100%;
+	--margin-block: var(--size-xs);
+	margin-top: var(--margin-block);
+	--padding-y: var(--size-xs);
+	padding-block: var(--padding-y);
+	min-width: 10rem;
+
+	@include menu-items;
+}