@livenetworks/ashlar 1.4.1 → 1.6.0

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

@@ -21,15 +21,29 @@
 //   [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.
+// Sort/filter button styling is SHARED via scss/components/_table.scss
+// (.table-sort / .table-filter structural helper classes + the :has() stack
+// in @mixin table-base). No ln-table-specific sort/filter button mixins here.
+// Under D1 (Option A) the <th> is no longer the sort click target, so no
+// ln-table-specific cursor:pointer / select-none on the <th> is needed.
+//
+// State-driven CSS (spacer rows, 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;
+	// `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 {
@@ -38,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).
@@ -64,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);
@@ -97,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 ──────────────────────────────────────────
@@ -126,95 +157,6 @@
 	}
 }
 
-// ─── 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 ───────────────────────────────────────────────
 
@@ -232,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);
@@ -418,3 +363,16 @@
 		background: transparent !important;
 	}
 }
+
+// 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);
 		}
 	}
 }

package/scss/config/mixins/_popover.scss

@@ -2,11 +2,15 @@
 @use 'borders' as *;
 @use 'motion' as *;
 @use 'card' as *;
+@use 'form' as *;
+@use 'focus' as *;
 
 @mixin popover {
 	@include floating-panel;
 	display: none;
 	position: fixed;
+	inset: auto;
+	margin: 0;
 	min-width: 14rem;
 	max-width: 24rem;
 	padding: var(--padding-y) var(--padding-x);
@@ -22,4 +26,39 @@
 	&:focus {
 		outline: none;
 	}
+
+	// Filter popover content: optional search + checkbox option list
+	> input[type="search"] {
+		width: 100%;
+		margin-bottom: var(--size-xs);
+		box-sizing: border-box;
+	}
+
+	> ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		max-height: var(--filter-options-max-height, 15rem);
+		overflow-y: auto;
+
+		// Nav-link treatment for filter options (accent-tint wash on checked).
+		// Visually-hidden input (below) keeps the checkbox keyboard-focusable.
+		@include check-list-nav;
+
+		> li > label > input {
+			// Override pill's display:none — keep in focus order for keyboard nav
+			display: revert;
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+
+		// Focus ring on label when the hidden input receives keyboard focus
+		> li > label:has(> input:focus-visible) {
+			@include focus-ring;
+		}
+	}
 }

package/scss/config/mixins/_sidebar.scss

@@ -75,7 +75,7 @@
 
 		// Search field drops to a full-width second row below the
 		// brand triad (enabled by `flex-wrap` above).
-		> [data-ln-search] {
+		> .sidebar-search {
 			@include w-full;
 			--margin-block: var(--size-xs);
 			@include mt(var(--margin-block));

package/scss/config/mixins/_sort.scss

@@ -0,0 +1,42 @@
+@use 'display' as *;
+@use 'table' as *;
+
+// ─── Sort control — 3-trigger cycle (none → asc → desc → none) ─────────
+// Only one <button data-ln-sort-dir> is visible at a time; the circular
+// order lives HERE in CSS, not in JS (js/ln-sort/README.md "No cycle
+// logic in JS"). [data-ln-sort-state] on the root decides which trigger
+// shows — the visible button is always the NEXT action, but the icon it
+// carries reports the CURRENT state, not that action (icon-per-button
+// mapping: js/ln-sort/README.md "Icon convention").
+
+@mixin sort {
+	@include inline-flex;
+	list-style: none !important;
+	list-style-type: none !important;
+	margin: 0;
+	padding: 0;
+	vertical-align: middle;
+
+	li {
+		list-style: none !important;
+		list-style-type: none !important;
+	}
+
+	button {
+		@include table-header-btn-base;
+		display: none;
+	}
+
+	&[data-ln-sort-state="none"] [data-ln-sort-dir="asc"],
+	&[data-ln-sort-state="asc"]  [data-ln-sort-dir="desc"],
+	&[data-ln-sort-state="desc"] [data-ln-sort-dir="none"] {
+		display: inline-flex;
+	}
+}
+
+@mixin sort-active {
+	[data-ln-sort-dir] {
+		opacity: 1;
+		color: var(--color-accent);
+	}
+}