@livenetworks/ashlar 1.6.0 → 2.0.0

package/{scss → theme}/config/mixins/_loader.scss

@@ -9,7 +9,7 @@
 	color: var(--color-accent);
 	// Spinner is drawn with em-based box-shadow; font-size is the intrinsic
 	// size knob. Callers override per-use (e.g. font-size: 32px) — see
-	// docs/css/loader.md. Page-level margin is a binding concern, not a
+	// docs-mcp/css/loader.md. Page-level margin is a binding concern, not a
 	// mixin concern, and lives on the consumer selector.
 	font-size: 90px;
 	text-indent: -9999em;

package/{scss → theme}/config/mixins/_modal.scss

@@ -1,149 +1,145 @@
-@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;
-	}
-}
+@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);
+		-webkit-backdrop-filter: blur(4px);
+		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);
+
+	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: flex;
+	flex-direction: column;
+	max-width: 600px;
+	width: 90%;
+	max-height: 90vh;
+	@include motion-safe {
+		animation: ln-modal-slideIn var(--transition-slow);
+	}
+
+	> header {
+		@include modal-header;
+		flex-shrink: 0;
+	}
+
+	> main {
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+		flex: 1 1 auto;
+	}
+
+	> footer {
+		flex-shrink: 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));
+			-webkit-backdrop-filter: blur(4px);
+			backdrop-filter: blur(4px);
+		}
+	}
+}

package/{scss → theme}/config/mixins/_motion.scss

@@ -17,3 +17,16 @@
 		@content;
 	}
 }
+
+// Entrance transitions (dropdowns, popovers, tooltips, dialogs)
+@mixin enter-scale-fade($duration: var(--transition-fast)) {
+	@include motion-safe {
+		animation: ln-scale-in $duration cubic-bezier(0.16, 1, 0.3, 1) both;
+	}
+}
+
+@mixin enter-slide-fade($duration: var(--transition-base)) {
+	@include motion-safe {
+		animation: ln-slide-in $duration cubic-bezier(0.16, 1, 0.3, 1) both;
+	}
+}

package/{scss → theme}/config/mixins/_nav.scss

@@ -33,7 +33,7 @@
 	}
 
 	a {
-		--gap: var(--size-sm-up);
+		--gap: var(--size-sm);
 		--color-fg: var(--fg-muted);
 		@include flex;
 		@include items-center;
@@ -61,7 +61,7 @@
 	}
 
 	.nav-section {
-		--color-fg: var(--fg-subtle);
+		--color-fg: var(--fg-muted);
 		--padding-y: var(--size-sm);
 		padding-block: var(--padding-y);
 		@include text-xs;
@@ -128,7 +128,7 @@
 			border-color     150ms ease;
 
 		&:hover {
-			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		}
 
 		&.active {
@@ -158,12 +158,12 @@
 
 		&: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);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		}
 
 		&.active {
 			box-shadow: inset 3px 0 0 var(--color-accent);
-			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-selected), transparent);
 		}
 	}
 }
@@ -214,11 +214,11 @@
 		transition: background-color 150ms ease, color 150ms ease;
 
 		&:hover {
-			background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		}
 
 		&.active {
-			background-color: color-mix(in srgb, var(--color-accent) 7%, transparent);
+			background-color: color-mix(in srgb, var(--color-accent) var(--tint-selected), transparent);
 		}
 	}
 }

package/theme/config/mixins/_picklist.scss

@@ -0,0 +1,66 @@
+@use 'layout' as *;
+@use 'form' as *;
+@use 'display' as *;
+@use 'borders' as *;
+@use 'focus' as *;
+@use 'interaction' as *;
+
+// ─── Picklist ──────────────────────────────────────────────────
+// Two lists side by side: available on the left, selected on the
+// right. Checking an item moves it across (ln-picklist), so both
+// lists look the same — a vertical stack of checkbox pills.
+//
+// Structure:
+//   [data-ln-picklist]
+//     > *                              a pane (author's own markup)
+//       > ul[data-ln-picklist-list]    the items
+//         > li > label > input         one checkbox pill
+//
+// Deliberately `check-list-outline`, NOT `check-list`: @mixin pill
+// hides the input with `display: none`, which drops the checkbox out
+// of the tab order — and here the checkbox IS the control, not a
+// decorative marker. `pill-outline` keeps it visible and focusable.
+//
+// Usage:
+//   [data-ln-picklist] { @include picklist; }
+
+@mixin picklist {
+	@include grid-2;
+	--gap: var(--size-md);
+
+	[data-ln-picklist-list] {
+		@include check-list-outline;
+		@include flex-col;
+		@include border;
+
+		// pill-outline draws a border per item; this keeps them apart.
+		--row-gap: var(--size-2xs);
+		gap: var(--row-gap);
+
+		border-radius: var(--radius);
+		--padding-y: var(--size-xs);
+		--padding-x: var(--size-xs);
+		padding: var(--padding-y) var(--padding-x);
+
+		// A hundred items must not stretch the page.
+		--max-height: 20rem;
+		max-height: var(--max-height);
+		overflow-y: auto;
+	}
+
+	// The input stays visible (pill-outline reverts pill's display:none),
+	// so the ring belongs on the pill that surrounds it.
+	[data-ln-picklist-list] li label:has(> input:focus-visible) {
+		@include focus-ring;
+	}
+
+	// The component's own state, expressed as the attribute value it writes.
+	&[data-ln-picklist="disabled"] [data-ln-picklist-list] {
+		--color-fg: var(--fg-muted);
+		color: var(--color-fg);
+
+		li label {
+			@include cursor-not-allowed;
+		}
+	}
+}

package/theme/config/mixins/_popover.scss

@@ -0,0 +1,96 @@
+@use 'spacing' as *;
+@use 'borders' as *;
+@use 'motion' as *;
+@use 'card' as *;
+@use 'form' as *;
+@use 'focus' as *;
+@use 'dropdown' as *;
+
+@mixin popover {
+	@include floating-panel;
+	display: none;
+	position: fixed;
+	inset: auto;
+	margin: 0;
+	min-width: 14rem;
+	max-width: 24rem;
+	padding: var(--padding-y);
+
+	&[data-ln-popover="open"] {
+		display: block;
+
+		@include motion-safe {
+			animation: ln-popover-fade var(--transition-fast);
+		}
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	// Filter popover content: optional search + checkbox/radio option list
+	@include panel-search;
+
+	hr {
+		border: none;
+		border-top: var(--border-width) solid var(--color-border);
+		margin: var(--size-xs) 0;
+	}
+
+	> ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		max-height: var(--filter-options-max-height, 15rem);
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: var(--border-subtle) transparent;
+
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--border-subtle);
+			border-radius: var(--radius-sm);
+		}
+
+		li {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+
+		li + li {
+			margin-top: var(--size-2xs);
+		}
+
+		// When containing interactive actions/buttons (menus, pickers)
+		&:has(> li > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"])) {
+			@include menu-items;
+		}
+
+		// When containing checkbox/radio filter options
+		&:has(> li > label) {
+			@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 → theme}/config/mixins/_sidebar.scss

@@ -27,7 +27,7 @@
 
 @mixin sidebar {
 	// Sidebar-wide horizontal rhythm. All direct children inherit this.
-	--padding-x: var(--size-md);
+	--padding-x: var(--size-sm);
 	@include flex-col;
 	background: var(--color-bg);
 	@include border-r;
@@ -38,13 +38,13 @@
 	}
 
 	> header {
-		--gap: var(--size-sm-up);
+		--gap: var(--size-sm);
 		@include relative;
 		@include flex;
 		@include items-center;
 		@include flex-wrap;
 		gap: var(--gap);
-		--padding-y: var(--size-sm-up);
+		--padding-y: var(--size-sm);
 		padding-block: var(--padding-y);
 		@include border-b;
 		@include shadow-b;
@@ -75,7 +75,10 @@
 
 		// Search field drops to a full-width second row below the
 		// brand triad (enabled by `flex-wrap` above).
-		> .sidebar-search {
+		// :has() carries the weight — plain `> search` would tie with the
+		// widget base and fall to emission order. It also keeps a <search>
+		// region (input not a direct child) out of this rule.
+		> search:has(> input[type="search"]) {
 			@include w-full;
 			--margin-block: var(--size-xs);
 			@include mt(var(--margin-block));

package/{scss → theme}/config/mixins/_sort.scss

@@ -1,42 +1,43 @@
-@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);
-	}
-}
+@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;
+	}
+
+	&:not([data-ln-sort-state]) [data-ln-sort-dir="asc"],
+	&[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);
+	}
+}