@livenetworks/ashlar 1.5.1 → 1.6.1

package/scss/config/mixins/_filter.scss

@@ -20,7 +20,6 @@
 // Tunables (consumer-overridable via --var with sane defaults):
 //   --filter-dropdown-max-height  (default 20rem)
 //   --filter-dropdown-overflow-y  (default auto)
-//   --filter-dropdown-text        (default var(--text-xs))   ← sm density
 //   --filter-dropdown-item-pad-y  (default var(--size-3xs))
 //
 // Usage:
@@ -34,15 +33,14 @@
 	[data-ln-filter-search] {
 		@include form-input;
 		font-size: var(--filter-dropdown-text, var(--text-xs));
-		--padding-y: var(--size-xs);
+		--padding-y: var(--size-2xs);
 		--padding-x: var(--size-sm);
 		width: 100%;
-		margin-bottom: var(--size-sm);
+		margin-bottom: var(--size-xs);
 	}
 
 	[data-ln-filter-options] {
-		@include check-list;
-		font-size: var(--filter-dropdown-text, var(--text-xs));
+		@include check-list-nav;
 
 		li { padding: var(--filter-dropdown-item-pad-y, var(--size-3xs)) 0; }
 	}

package/scss/config/mixins/_footer.scss

@@ -25,8 +25,7 @@
 	padding: var(--padding-y) var(--padding-x);
 	border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
 	background: var(--color-bg);
-	font-size: var(--text-body-sm);
-	line-height: var(--lh-body-sm);
+	@include typography(body-sm);
 	color: var(--color-fg);
 	@include flex;
 	@include items-center;

package/scss/config/mixins/_form.scss

@@ -17,9 +17,8 @@
 
 @mixin form-label {
 	@include block;
-	font-size: var(--text-label-md);
-	line-height: var(--lh-label-md);
-	@include font-medium;
+	@include typography(label-sm);
+	@include font-semibold;
 	color: var(--color-fg);
 	// Structural label-to-input gap (not shell rhythm).
 	--margin-block: var(--size-xs);
@@ -91,12 +90,13 @@
 
 @mixin form-input {
 	@include w-full;
-	--padding-y: var(--size-sm);
+	--padding-y: var(--input-padding-y, var(--size-sm));
 	--padding-x: var(--size-md);
 	padding: var(--padding-y) var(--padding-x);
 	font-size: var(--font-size);
 	line-height: var(--line-height);
 	color: var(--color-fg);
+	--color-bg: var(--input-bg, var(--bg-recessed));
 	background: var(--color-bg);
 	@include border;
 	border-radius: var(--radius);
@@ -211,6 +211,7 @@
 		padding: var(--size-xs) var(--size-sm);   // icon provides its own row spacing
 		--color-fg: var(--fg-subtle);
 		color: var(--color-fg);
+		box-sizing: content-box;
 	}
 
 	> input,
@@ -262,27 +263,93 @@
 @mixin form-input-icon-group {
 	@include form-field-group;
 
-	> input {
-		// Hide the clear button while the field is empty.
-		&:placeholder-shown ~ [data-ln-search-clear] {
-			@include hidden;
-		}
+	// Visually hide the clear button while the field is empty (visibility:hidden
+	// preserves layout space so the input width stays stable).
+	// Structural target: the only button in this group is the clear control.
+	> input:placeholder-shown ~ button {
+		@include invisible;
 	}
 
-	> [data-ln-search-clear] {
-		@include flex-shrink-0;
-		--padding-y: var(--size-2xs);
-		--padding-x: var(--size-2xs);
-		padding: var(--padding-y) var(--padding-x);
-		@include cursor-pointer;
-		--color-fg: var(--fg-subtle);
-		color: var(--color-fg);
+	// Clear control — square hit area, circular highlight on hover only.
+	// Overrides the flush date/submit-button styling inherited from
+	// form-field-group > button (equal specificity, emitted later → wins).
+	> button {
+		align-self: center;                    // cancel inherited stretch
+		aspect-ratio: 1;                       // square hit area
+		padding: var(--size-2xs);              // equal padding all sides (cancels L+R size-sm and T+B 0)
+		border-radius: var(--radius-full);     // circular highlight (square in flat theme)
+		background: transparent;               // transparent idle
 		@include transition-colors;
 
-		&:hover {
+		> .ln-icon {
+			--color-fg: var(--fg-subtle);      // idle icon color
 			color: var(--color-fg);
+			@include transition-colors;        // icon recolor must animate (parent transition won't drive child color)
+		}
+
+		&:hover {
+			background: var(--btn-bg-hover);   // circle highlight appears
+			> .ln-icon {
+				--color-fg: var(--fg-default);
+			}
 		}
 	}
+
+	// Fix C — pull the leading icon and the input text closer.
+	// Inherited from form-field-group at equal specificity; emitted later → wins per property.
+
+	// 1. Zero the input's OWN adjacent side padding (the user's explicit minimum).
+	//    Mirror form-field-group's :not() structure so the override lands at equal
+	//    specificity and replaces only the horizontal padding it set.
+	> input,
+	> select {
+		&:not(:first-child) {
+			padding-left: 0;
+		}
+		&:not(:last-child) {
+			padding-right: 0;
+		}
+	}
+
+	// 2. Reduce ONLY the leading icon's INNER (right) padding so the magnifier sits
+	//    close to the text. KEEP the left padding (inherited --size-sm outer breathing
+	//    room) and KEEP vertical padding. Set padding-right ONLY — never the `padding`
+	//    shorthand (it would clobber left + vertical).
+	> .ln-icon {
+		padding-right: var(--size-xs);   // 8px → 4px; left + vertical inherited from form-field-group
+	}
+}
+
+// ─── Search field — compact icon-group variant (delta-only) ───────
+//
+// Opt-in refinements layered on top of the icon-group chrome that the
+// global auto-bind (components/_form.scss: label:has(> .ln-icon):has(>
+// search/text input)) already supplies. PREREQUISITE: the consumer is an
+// icon + search-input <label> so the auto-bind provides the base shell;
+// on a plain label this emits only the tweaks below, no chrome.
+//
+// Usage (project/demo SCSS):
+//   label.search { @include search; }
+
+@mixin search {
+	width: min(100%, 20rem);          // intrinsic capped field width
+	--color-bg: var(--bg-recessed);   // recessed fill so the white clear-hover reads
+	--btn-bg-hover: var(--bg-base);   // clear button highlights white on hover (token rebind, no specificity override)
+
+	// Density-immune: pin to the dense base scale so the field is one size
+	// everywhere, regardless of ambient [data-density]. Mirror the values
+	// in config/_density.scss — keep in sync.
+	--size-xs: 0.125rem;
+	--size-sm: 0.375rem;
+	--font-size: 0.875rem;
+	--line-height: 1.5;
+
+	// Compact field — smaller vertical padding. form-input self-declares
+	// --padding-y on the input, so override it on the input directly.
+	> input { --padding-y: var(--size-xs); }
+
+	// Compact icons via the --icon-size primitive (no ln-icon--sm class in markup).
+	.ln-icon { --icon-size: 1rem; }
 }
 
 // ─── Checkbox & Radio ───────────────────────────────────────────
@@ -349,7 +416,7 @@
 	@include flex;
 	@include items-center;
 	gap: var(--gap);
-	--padding-y: var(--size-sm);
+	--padding-y: var(--input-padding-y, var(--size-sm));
 	--padding-x: var(--size-md);
 	padding: var(--padding-y) var(--padding-x);
 	@include cursor-pointer;
@@ -516,6 +583,71 @@
 	}
 }
 
+// Segmented track control pills
+@mixin pills-segmented {
+	@include inline-flex;
+	@include items-center;
+	list-style: none;
+	padding: 2px;
+	margin: 0;
+	background-color: var(--bg-recessed);
+	border-radius: var(--radius);
+	border: var(--border-width) solid var(--color-border);
+	width: 100%;
+
+	> li {
+		flex: 1 1 0%;
+		margin: 0;
+		padding: 0;
+		display: block;
+	}
+
+	> li > label:has(> input[type="checkbox"]),
+	> li > label:has(> input[type="radio"]) {
+		@include flex;
+		@include items-center;
+		@include justify-center;
+		padding: var(--size-xs) var(--size-md);
+		border-radius: calc(var(--radius) - 2px);
+		@include cursor-pointer;
+		@include text-sm;
+		@include font-medium;
+		color: var(--fg-muted);
+		@include transition;
+		user-select: none;
+		margin: 0;
+		text-align: center;
+		border: none;
+		background: transparent;
+
+		> input {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			border: 0;
+		}
+
+		&:hover {
+			color: var(--color-fg);
+		}
+
+		&:has(> input:checked) {
+			background-color: var(--bg-base);
+			color: var(--color-fg);
+			@include font-semibold;
+			box-shadow: var(--shadow-resting);
+		}
+
+		&:has(> input:focus-visible) {
+			@include focus-ring;
+		}
+	}
+}
+
 @mixin toggle-switch {
 	appearance: none;
 	position: relative;
@@ -616,6 +748,50 @@
 	li label { @include pill; }
 }
 
+// ─── Check list nav — filter list styled with the nav-link vocabulary ──
+// Same checkbox-filter list as check-list, but the selected item uses the
+// sidebar nav-link active treatment (accent-tint wash + accent text +
+// semibold) instead of the solid-accent pill fill. Shared by the filter
+// popover (@mixin popover) and the ln-table column-filter dropdown
+// (@mixin filter-dropdown) so every filter list matches the sidebar nav
+// (nav-links-rounded). Extends check-list to keep the hidden-input filled
+// structure; overrides only color, weight and size. Consumers that need
+// the checkbox kept keyboard-focusable (popover a11y) re-reveal the input
+// themselves after including this.
+@mixin check-list-nav {
+	@include check-list;
+
+	li label {
+		// Smaller — match the nav link (13px).
+		@include typography(body-sm);
+		// Muted idle text, transparent surface (nav idle).
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+		background: transparent;
+		border: none;
+		// Tighter vertical padding — match nav link height (~31px).
+		--padding-y: var(--size-xs-up);
+		padding: var(--padding-y) var(--padding-x);
+
+		// Hover (unchecked) — subtle accent wash (nav hover).
+		&:hover:not(:has(> input:checked)) {
+			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+		}
+
+		// Selected — nav active vocabulary (replaces solid-accent + white).
+		&:has(> input:checked) {
+			background-color: var(--color-accent-tint-strong);
+			color: var(--color-accent);
+			@include font-semibold;
+		}
+
+		// Selected + hover — keep the wash, don't darken (nav has no darken).
+		&:hover:has(> input:checked) {
+			background-color: var(--color-accent-tint-strong);
+		}
+	}
+}
+
 // ─── Validation states ─────────────────────────────────────────
 // Status colors (error/success) stay raw — no logical --color-status
 // token in scope (see parent plan §6.2).
@@ -642,7 +818,17 @@
 	// Structural error-list margin (not shell rhythm).
 	--margin-block: var(--size-xs);
 	margin-top: var(--margin-block);
-	font-size: var(--text-caption);
-	line-height: var(--lh-caption);
+	@include typography(caption);
 	color: hsl(var(--color-error));
+	min-height: 1.25rem; // Reserves space to prevent form layout shifts when errors appear
+	list-style: none;
+	padding: 0;
+	margin-bottom: 0;
+
+	li {
+		margin: 0;
+		&.hidden {
+			display: none;
+		}
+	}
 }

package/scss/config/mixins/_index.scss

@@ -31,6 +31,7 @@
 @forward 'loader';
 @forward 'tabs';
 @forward 'table';
+@forward 'sort';
 @forward 'avatar';
 @forward 'footer';
 @forward 'sidebar';
@@ -43,6 +44,7 @@
 @forward 'timeline';
 @forward 'stat-card';
 @forward 'prose';
+@forward 'editor';
 @forward 'kbd';
 @forward 'tooltip';
 @forward 'popover';

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

@@ -35,7 +35,15 @@
 	--radius: var(--radius-lg);
 	border-radius: var(--radius);
 	background: var(--color-bg);
-	overflow: clip;
+	// `clip` not `auto` — no scroll container, so the sticky thead/footer
+	// bind to the outer .app-main > section scroll surface (same doctrine
+	// as @mixin section-card).
+	overflow-x: clip;
+	max-width: 100%;
+
+	colgroup {
+		display: none !important;
+	}
 
 	// Table overrides inside component
 	table {
@@ -44,6 +52,8 @@
 		border-spacing: 0;
 		border-radius: 0;
 		box-shadow: none;
+		table-layout: auto !important;
+		min-width: var(--table-min-width, 768px);
 	}
 
 	// Whole thead sticky as one unit (toolbar row + column-headers row).
@@ -70,6 +80,8 @@
 
 @mixin ln-table-toolbar {
 	@include panel-header;
+	justify-content: flex-start;
+	gap: var(--size-md);
 	position: sticky;
 	top: 0;
 	z-index: var(--z-sticky);
@@ -103,11 +115,24 @@
 
 	> div {
 		@include panel-header;
+		justify-content: flex-start;
+		gap: var(--size-md);
 	}
 }
 
 @mixin ln-table-toolbar-search {
-	width: 10rem;
+	--padding-y: var(--size-2xs);   // lowers panel-header min-height floor for this label
+	width: auto;                    // hug the 10rem input; cancel .search's 20rem label cap inside toolbars
+
+	> .ln-icon {
+		padding-top: var(--size-2xs);     // tighten leading icon vertical padding (was var(--size-xs))
+		padding-bottom: var(--size-2xs);  // horizontal padding (size-sm) inherited from form-field-group
+	}
+
+	> input {
+		--padding-y: var(--size-2xs);  // tighten vertical padding on the input itself
+		width: 10rem;                  // preserve existing width cap
+	}
 }
 
 // ─── Count badge ──────────────────────────────────────────
@@ -149,6 +174,9 @@
 	@include text-sm;
 	--color-fg: var(--fg-muted);
 	color: var(--color-fg);
+	position: sticky;
+	bottom: 0;
+	z-index: var(--z-sticky);
 
 	strong {
 		color: var(--color-fg);
@@ -336,4 +364,15 @@
 	}
 }
 
+// Windowed-virtualization placeholder row — static fill, row-height chrome
+// only. No shimmer (window-cache.md §4); height stays JS-owned via inline
+// px, spacer geometry depends on the exact value so nothing here may touch it.
+@mixin ln-table-placeholder-row {
+	td {
+		padding: 0 !important;
+		border: none !important;
+		background: var(--bg-sunken);
+	}
+}
+
 

package/scss/config/mixins/_modal.scss

@@ -1,66 +1,149 @@
-@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;
-	}
-}
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'position' as *;
+@use 'motion' as *;
+@use 'card' as *;
+@use 'typography' 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;
+	z-index: var(--z-modal);
+	@include items-center;
+	@include justify-center;
+
+	&::backdrop {
+		background-color: var(--color-scrim);
+		backdrop-filter: blur(4px);
+		-webkit-backdrop-filter: blur(4px);
+		opacity: 1;
+
+		@include motion-safe {
+			transition: opacity var(--transition);
+			transition-behavior: allow-discrete;
+		}
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+}
+
+// ─── Modal header ──────────────────────────────────────
+// Rich modal header recipe: optional tinted icon square + title/subtitle
+// hgroup + close-button reset. Applied by modal-panel to its > header.
+@mixin modal-header {
+	// Modal-specific: white bg overrides section-card's gray panel-header.
+	// Section-cards and cards are unaffected (this is modal-panel scope only).
+	--color-bg: var(--bg-base);
+	gap: var(--size-sm-up);
+
+	:is(h1, h2, h3, h4, h5, h6) {
+		@include typography(heading-sm);
+		font-weight: var(--font-semibold);
+	}
+
+	button[data-ln-modal-close] {
+		--btn-bg: transparent;
+		--btn-border: transparent;
+	}
+
+	// Optional icon square — tinted rounded square with primary-colored icon.
+	// Usage: <span class="icon"><svg class="ln-icon" aria-hidden="true">…</svg></span>
+	.icon {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: var(--radius);
+		background: var(--color-accent-tint);
+
+		.ln-icon {
+			color: var(--color-accent);
+		}
+	}
+
+	// Optional title+subtitle group — <hgroup><h3>…</h3><p>…</p></hgroup>.
+	hgroup {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-xs);
+		flex: 1;
+		min-width: 0;
+		margin: 0;
+
+		p {
+			margin: 0;
+			@include typography(caption);
+			color: var(--fg-muted);
+		}
+	}
+}
+
+// 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;
+
+		// Destructive footer split: add class="delete-action" to the first
+		// button to push it left. The footer gap still applies between all buttons.
+		// Color: --color-primary cascades through @mixin btn (same pattern as
+		// .delete-action documented in _global.scss).
+		.delete-action {
+			margin-inline-end: auto;
+			--btn-bg:           hsl(var(--color-error) / 0.08);
+			--btn-fg:           hsl(var(--color-error));
+			--btn-border:       hsl(var(--color-error) / 0.4);
+			--btn-bg-hover:     hsl(var(--color-error) / 0.16);
+			--btn-fg-hover:     hsl(var(--color-error));
+			--btn-border-hover: hsl(var(--color-error));
+			backdrop-filter: blur(4px);
+			-webkit-backdrop-filter: blur(4px);
+		}
+	}
+
+	> header {
+		@include modal-header;
+	}
+}

package/scss/config/mixins/_nav.scss

@@ -39,8 +39,7 @@
 		@include items-center;
 		gap: var(--gap);
 		padding-block: var(--padding-y);
-		font-size: var(--text-body-sm);
-		line-height: var(--lh-body-sm);
+		@include typography(body-sm);
 		color: var(--color-fg);
 		text-decoration: none;
 		// Always-present 1px border slot. Color defaults to transparent
@@ -97,7 +96,7 @@
 		}
 
 		&.active {
-			color: var(--color-accent);
+			color: var(--color-accent-hover);
 			border-color: var(--nav-link-border-color-active, transparent);
 			@include font-semibold;
 		}
@@ -135,7 +134,7 @@
 		&.active {
 			// accent wash vocabulary (CLAUDE.md L532) — was reaching
 			// through to --color-primary-lighter scale.
-			background-color: var(--color-accent-tint);
+			background-color: var(--color-accent-tint-strong);
 		}
 	}
 }