@livenetworks/ashlar 2.1.13 → 2.2.1

package/theme/config/_tokens.scss

@@ -1,5 +1,3 @@
-@use 'mixins/breakpoints' as *;
-
 // ==========================================================================
 // Design Tokens — ln-ashlar
 // ==========================================================================
@@ -53,23 +51,24 @@
 	--max-w-form:      32rem;
 	--max-w-content:   48rem;
 	--max-w-container: 80rem;
+	--grid-item-min-width: 14rem;   // intrinsic minimum for auto-fit card grids
 
 	// -----------------------------------------------------------------------
 	// Border Radius
 	// -----------------------------------------------------------------------
 	--radius-none: 0;
-	--radius-xs:   0.125rem;   // 2px
-	--radius-sm:   0.25rem;    // 4px
-	--radius-md:   0.375rem;   // 6px
-	--radius-lg:   0.5rem;     // 8px
-	--radius-xl:   0.75rem;    // 12px
-	--radius-2xl:  1rem;       // 16px
+	--radius-xs:   0.25rem;    // 4px
+	--radius-sm:   0.375rem;   // 6px
+	--radius-md:   0.625rem;   // 10px — controls (--radius)
+	--radius-lg:   1rem;       // 16px — panels, modals
+	--radius-xl:   1.375rem;   // 22px
+	--radius-2xl:  1.75rem;    // 28px
 	--radius-full: 9999px;
 
 	// -----------------------------------------------------------------------
 	// Transitions — durations
 	// -----------------------------------------------------------------------
-	--transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -85,7 +84,9 @@
 	// -----------------------------------------------------------------------
 	// Typography
 	// -----------------------------------------------------------------------
-	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	// Plus Jakarta Sans is not bundled — the page loads it, or the stack
+	// falls back to Inter / system UI.
+	--font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
 	--font-features: "cv02", "cv03", "cv04", "cv11", "tnum";
 
@@ -214,6 +215,21 @@
 	--btn-padding-x:    var(--size-sm-up);
 	--btn-padding-y:    var(--size-xs-up);
 
+	// Control size contract — buttons, text inputs, selects and pills share
+	// one line box and one vertical padding per density tier:
+	//   height = --control-line-height + 2 × padding-y + 2 × border
+	//   compact 22 + 2×6 + 2 = 36px · comfortable 44px · spacious 54px
+	// Density rebinds all three in _density.scss.
+	--control-line-height: 1.375rem;   // 22px
+	--input-padding-y:     var(--btn-padding-y);
+
+	// Card and table padding — structural rhythm, density-reactive via
+	// _density.scss (compact values here).
+	--card-padding-y:        var(--size-sm-up);   // 12px
+	--card-padding-x:        var(--size-md);      // 16px
+	--table-cell-padding-y:  var(--size-sm);      // 8px
+	--table-cell-padding-x:  var(--size-md);      // 16px
+
 	// -- Typography — primitives -----------------------------------------
 	// Mixins read these two primitives ONLY (via @include typography(role),
 	// which rebinds them per role on the consuming element's scope — mirror
@@ -267,19 +283,5 @@
 	// spacing — that is --gap.
 }
 
-// ---------------------------------------------------------------------------
-// Mobile rhythm — logical tokens tighten at ≤ md viewport.
-// Not the same as `[data-density]` (that's a user opt-in).
-// This is viewport-driven structural compression: content dominates chrome
-// at narrow widths. Components reading --padding-x/--padding-y/--gap
-// react via the cascade.
-//
-// Interaction with [data-density]: stacks. Compact density + mobile viewport =
-// both apply; the underlying --padding-y tightens further from the mobile rebind.
-// ---------------------------------------------------------------------------
-@include mq-down(md) {
-	:root {
-		--padding-y: var(--size-xs);     // 6px → 4px
-		--gap:       var(--size-xs-up);  // 6px → 6px (already tight)
-	}
-}
+// Mobile rhythm (viewport-driven tightening) lives at the end of
+// _density.scss so it stacks on top of every density tier.

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

@@ -12,6 +12,7 @@
 @use 'interaction' as *;
 @use 'sidebar' as *;
 @use 'card' as *;
+@use 'count' as *;
 
 // ─── App Shell ──────────────────────────────────────────────────────────────
 // Mobile-ready application shell: fixed header, sidebar drawer, scrim overlay.
@@ -125,13 +126,13 @@
 
 	// 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
+	// the shared control line box (--control-line-height) 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));
+		min-height: calc(var(--control-line-height) + 2 * var(--padding-y) + 2 * var(--border-width));
 	}
 
 	button {
@@ -159,6 +160,19 @@
 				border: 0;
 			}
 		}
+
+		// Unread counter — <data value="3">3</data> as a direct child,
+		// pinned over the corner. Solid accent; tone via status class
+		// (<data value="3" class="error">3</data>).
+		&:has(> data) {
+			@include relative;
+		}
+
+		> data {
+			@include count;
+			@include count-solid;
+			@include count-overlay;
+		}
 	}
 }
 
@@ -190,20 +204,12 @@
 	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;
+	// Open drawer on desktop: reserve its width on the parent so content
+	// and footer shift together (padding, not child margin — no overflow).
+	// On mobile the drawer overlays the content instead.
+	@include mq-up(md) {
+		&:has(> aside[data-ln-toggle="open"]) {
+			padding-left: var(--app-sidebar-width);
 		}
 	}
 
@@ -222,10 +228,13 @@
 		// `> *: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);
+		padding-inline: clamp(var(--size-md), 3vw, var(--size-xl));
 		@include overflow-auto;
 		@include w-full;
-		@include stack(var(--gap));
+		@include stack(var(--size-lg));
+		// The stack gap owns vertical rhythm here — section-cards drop
+		// their own bottom margin so the two do not add up.
+		--panel-margin-block: 0;
 		@include transition;
 
 		// Children keep intrinsic height — wrapper's overflow-auto
@@ -243,11 +252,11 @@
 		// 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);
+			margin-block-start: clamp(var(--size-md), 3vw, var(--size-xl));
 		}
 
 		> *:last-child {
-			margin-block-end: var(--padding-x);
+			margin-block-end: clamp(var(--size-md), 3vw, var(--size-xl));
 		}
 	}
 }
@@ -309,6 +318,7 @@
 	max-width: var(--max-w-container);
 	@include mx(auto);
 	@include w-full;
-	@include stack(var(--gap));
+	@include stack(var(--size-lg));
+	--panel-margin-block: 0;
 }
 

package/theme/config/mixins/_btn.scss

@@ -37,6 +37,8 @@
 	--padding-x: var(--btn-padding-x, var(--size-md));
 	padding: var(--padding-y) var(--padding-x);
 	@include text-sm;
+	// Shared control line box — aligns with inputs/selects (see _tokens.scss).
+	line-height: var(--control-line-height);
 	@include font-medium;
 	border-radius: var(--radius);
 	white-space: nowrap;
@@ -69,14 +71,14 @@
 @mixin btn {
 	// Accent variant — rebinds the --btn-* token surface to accent values.
 	--color-accent:       hsl(var(--color-primary));
-	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	--btn-bg:           var(--color-accent-bg,       var(--color-accent));
 	--btn-fg:           var(--color-accent-bg-fg,    var(--color-accent-fg));
 	--btn-border:       hsl(from var(--color-accent) h s calc(l - 4));
 	--btn-bg-hover:     var(--color-accent-bg-hover, var(--color-accent-hover));
 	--btn-fg-hover:     var(--color-accent-bg-fg,    var(--color-accent-fg));
-	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 }
 
 @mixin btn-soft {

package/theme/config/mixins/_card.scss

@@ -7,6 +7,7 @@
 @use 'shadows' as *;
 @use 'transitions' as *;
 @use 'position' as *;
+@use 'focus' as *;
 
 // Card & Section — composite mixins
 
@@ -18,31 +19,25 @@
 	@include border;
 	@include w-full;
 	@include flex-col;
-	border-radius: var(--radius);
-	@include overflow-hidden;
+	border-radius: var(--panel-radius, var(--radius));
+	// `clip`, not `hidden`: no scroll container, so a table's sticky thead
+	// binds to the page scroller. min-inline-size keeps the grid/flex shrink
+	// that `hidden` gave for free.
+	overflow: clip;
+	min-inline-size: 0;
 	@include transition;
 	box-shadow: var(--shadow), var(--surface-highlight, inset 0 0 0 0 transparent);
 
-	&:hover {
+	// Only whole-card links/buttons signal interaction. Passive containers
+	// must not respond merely because the pointer crosses their content.
+	&:is(a, button):hover:not(:disabled),
+	&:has(> a:hover) {
 		--color-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
-		--shadow: var(--nested-card-shadow-hover, var(--shadow-floating));
-	}
-
-	// Nesting ladder: when nested inside a section-card or another card,
-	// climb to elevated surface to preserve visual depth.
-	.section-card &,
-	.section &,
-	.card & {
-		--color-bg: var(--bg-elevated);
-		--shadow:   var(--shadow-floating);
 	}
 
-	// Bulletproof nesting support for custom/semantic selectors:
-	// sets the elevated background variables on all descendants.
-	& * {
-		--nested-card-bg: var(--bg-elevated);
-		--nested-card-shadow: var(--shadow-floating);
-		--nested-card-shadow-hover: var(--shadow-floating);
+	&:is(a, button):focus-visible,
+	&:has(> a:focus-visible) {
+		@include focus-ring;
 	}
 
 	// Direct-child selectors only — nested <header>/<main>/<footer>
@@ -81,37 +76,65 @@
 	// without a <header> wrapper, the global h3 cascade (heading-sm)
 	// is too large for tile context. Tighten to tile-title sizing.
 	> main h3 {
-		@include typography(body-sm);
+		@include typography(title-sm);
 		@include font-semibold;
 		color: inherit;
 		margin: 0;
 	}
 }
 
-@mixin panel-header {
+// $group: true — title row of a transparent group: no inline padding, no
+// divider, no surface (it sits on the canvas).
+@mixin panel-header($group: false) {
 	@include flex;
 	@include items-center;
 	@include justify-between;
-	padding: var(--size-xs-up) var(--padding-x);
+	@if $group {
+		padding: var(--card-padding-y) 0;
+	} @else {
+		padding: var(--card-padding-y) var(--card-padding-x);
+	}
 	min-height: 2.5rem;
-	@include border-b;
-	--color-bg: var(--bg-sunken);
-	background: var(--color-bg);
+	@if $group {
+		background: transparent;
+	} @else {
+		@include border-b;
+		// Header shares the panel surface (inherited --color-bg) — a tinted
+		// caption bar reads as legacy window chrome. Themes may opt in to a
+		// tint via --panel-header-bg. Opaque, so sticky toolbars stay solid.
+		background: var(--panel-header-bg, var(--color-bg));
+	}
 	@include transition;
 	margin-bottom: 0;
 
 	:is(h1, h2, h3, h4, h5, h6) {
-		@include typography(body-sm);
-		@include font-medium;
+		@include typography(title-sm);
+		@include font-semibold;
 		color: var(--color-fg);
 		margin: 0;
 	}
 
+	// Title + description: <hgroup><h3>…</h3><p>…</p></hgroup>
+	hgroup {
+		@include flex-col;
+		gap: var(--size-2xs);
+		min-inline-size: 0;
+		margin: 0;
+
+		> p {
+			@include typography(caption);
+			color: var(--fg-muted);
+			margin: 0;
+		}
+	}
+
 	label {
 		--padding-y: var(--size-xs);
+		min-height: calc(var(--control-line-height) + 2 * var(--padding-y) + 2 * var(--border-width));
 	}
 
-	// Header actions compact to a 28px button. This is a DESCENDANT selector,
+	// Header actions lock to the control height: --control-line-height +
+	// 2 × --padding-y + 2 × border-width. This is a DESCENDANT selector,
 	// so it also reaches a button that belongs to a nested field — that button
 	// is the field's own chrome, not a header action, and form-field-group
 	// stretches it to the field's full height. An explicit height beats
@@ -135,19 +158,9 @@
 	//           rule to (0,1,3) and silently outrank consumers that override it
 	//           at equal weight by source order.
 	// Wrapped, the rule stays exactly (0,1,2); only its match set narrows.
-	//
-	// NOT written as [class*="group"]: that spelling means "field group" in
-	// components/_form.scss only because it is scoped under .form-element there.
-	// Unscoped it would also catch .btn-group and stop compacting a segmented
-	// group in a header — a regression, and those buttons already outrank this.
 	button:where(:not(:where([data-ln-date-field]) > button)) {
-		--btn-padding-y: var(--size-2xs);
-		--btn-padding-x: var(--size-xs);
-		font-size: var(--text-xs);
-		height: 1.75rem;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
+		--btn-padding-y: var(--size-xs);
+		min-height: calc(var(--control-line-height) + 2 * var(--padding-y) + 2 * var(--border-width));
 	}
 
 	// Close/dismiss and toggle buttons inside the header should be tight and flat.
@@ -157,23 +170,21 @@
 		--btn-padding-y: var(--size-2xs);
 		--btn-padding-x: var(--size-2xs);
 		--shadow: none;
+		min-height: 0;
 		height: 1.75rem;
 		width: 1.75rem;
 	}
 }
 
 @mixin panel-body {
-	padding: var(--padding-y) var(--padding-x);
+	padding: var(--card-padding-y) var(--card-padding-x);
 
-	&:has(> :is(table, .table-container)) {
-		overflow-x: auto;
-		max-width: 100%;
-		-webkit-overflow-scrolling: touch;
-	}
+	// A card in a panel body sits on a surface — climb to elevated.
+	--nested-card-bg:     var(--bg-elevated);
+	--nested-card-shadow: none;
 
-	// ln-table brings its own chrome and sticky thead/footer — `clip` keeps
-	// this cell from becoming the scroll container that would trap them.
-	&:has(> [data-ln-table]) {
+	// `clip`, not `auto` — a scrolling cell would trap the sticky thead.
+	&:has(> :is(table, .table-container, [data-ln-table])) {
 		overflow-x: clip;
 		max-width: 100%;
 	}
@@ -205,10 +216,10 @@
 }
 
 @mixin panel-footer {
-	padding: var(--padding-y) var(--padding-x);
+	padding: var(--card-padding-y) var(--card-padding-x);
 	@include border-t;
-	--color-bg: var(--bg-sunken);
-	background: var(--color-bg);
+	// Same surface as the panel; opt-in tint via --panel-footer-bg.
+	background: var(--panel-footer-bg, var(--color-bg));
 	@include flex;
 	@include justify-end;
 	gap: var(--gap);
@@ -251,7 +262,8 @@
 // Usage: #my-card { @include card; @include card-accent-top; }
 
 @mixin _card-accent-base {
-	&:hover {
+	&:is(a, button):hover:not(:disabled),
+	&:has(> a:hover) {
 		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 	}
 }
@@ -309,27 +321,35 @@
 	}
 }
 
-@mixin section-card {
-	background: var(--color-bg);
-	@include border;
-	border-radius: var(--radius);
-	// `overflow: clip` not `overflow: hidden` — clips at rounded corners
-	// without establishing a scroll container, so sticky descendants
-	// (e.g. ln-table's <thead>) bind to the outer .app-main > section
-	// scroll surface instead of being trapped inside this card.
-	overflow: clip;
-	@include transition;
-	--shadow: var(--shadow-resting);
-	box-shadow: var(--shadow);
-	--margin-block: var(--size-md);
+// $group: true — a transparent titled group: no surface, border, shadow or
+// radius; content sits directly on the canvas.
+@mixin section-card($group: false) {
+	@if not $group {
+		background: var(--color-bg);
+		@include border;
+		border-radius: var(--panel-radius, var(--radius));
+		// `overflow: clip` not `overflow: hidden` — clips at rounded corners
+		// without establishing a scroll container, so sticky descendants
+		// (e.g. ln-table's <thead>) bind to the outer .app-main > section
+		// scroll surface instead of being trapped inside this card.
+		overflow: clip;
+		@include transition;
+		--shadow: var(--shadow-resting);
+		box-shadow: var(--shadow);
+	}
+	--margin-block: var(--panel-margin-block, var(--size-md));
 	margin-bottom: var(--margin-block);
 
 	// Direct-child selectors only — nested <header>/<main>/<footer>
 	// elements inside the card's content are consumer-owned and
 	// must not inherit the card's own chrome styles.
-	> header { @include panel-header; }
+	> header { @include panel-header($group); }
 	> main   { @include panel-body; }
 	> footer { @include panel-footer; }
+
+	@if $group {
+		> main { padding: 0; }
+	}
 }
 
 // ─── Frosted Glass ──────────────────────────────────────

package/theme/config/mixins/_colors.scss

@@ -33,7 +33,8 @@
 	// Re-declare accent vocabulary at this scope so var() resolves
 	// here instead of staying frozen at an ancestor scope. Without this, descendants
 	// reading --color-accent get the ancestor's primary blue regardless of the
-	// semantic class. --color-accent-fg resolves to white from the derivation chain.
+	// semantic class. --color-accent-fg stays inherited — white in light
+	// polarity, ink in the dark lift.
 	--color-accent:             hsl(var(--color-primary));
 	--color-accent-tint:        hsl(var(--color-#{$family}-lighter));
 	--color-accent-tint-strong: hsl(var(--color-#{$family}-light));

package/theme/config/mixins/_count.scss

@@ -0,0 +1,48 @@
+@use 'display' as *;
+@use 'typography' as *;
+@use 'position' as *;
+
+// ─── Count ──────────────────────────────────────────────────────────────────
+// Numeric counter pill — unread items, queue sizes, list totals. The
+// element is <data value="24">24</data>: the value attribute carries the
+// machine-readable number, the text the formatted one.
+//
+//   @include count;          ← neutral pill, tinted from --color-fg
+//   @include count-solid;    ← delta: solid accent fill. Tone follows the
+//                              semantic-color cascade — <data class="error">
+//   @include count-overlay;  ← delta: pinned over the top-end corner of the
+//                              nearest positioned ancestor (icon buttons).
+//                              The host must be positioned.
+//
+// Bound structurally by @mixin nav (a > data) and @mixin app-header-actions
+// (button > data).
+// ────────────────────────────────────────────────────────────────────────────
+
+@mixin count {
+	@include flex-shrink-0;
+	padding: 0 var(--size-xs-up);
+	min-width: 1.5rem;
+	text-align: center;
+	border-radius: var(--radius-full);
+	@include text-xs;
+	@include font-semibold;
+	font-variant-numeric: tabular-nums;
+	background: color-mix(in srgb, var(--color-fg) 12%, transparent);
+}
+
+@mixin count-solid {
+	background: var(--color-accent);
+	color: var(--color-accent-fg);
+}
+
+@mixin count-overlay {
+	@include absolute;
+	// em, not rem — the offsets and the circle track the counter's own
+	// font-size, so a rebound size keeps the same geometry.
+	inset-block-start: -0.5em;
+	inset-inline-end: -0.5em;
+	min-width: 1.5em;
+	padding-inline: var(--size-2xs);
+	line-height: 1.5em;
+	pointer-events: none;
+}

package/theme/config/mixins/_display.scss

@@ -7,6 +7,18 @@
 @mixin hidden        { display: none; }
 @mixin invisible     { visibility: hidden; }
 
+@mixin sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
 @mixin flex-col      { display: flex; flex-direction: column; }
 @mixin flex-row      { display: flex; flex-direction: row; }
 @mixin flex-wrap     { flex-wrap: wrap; }

package/theme/config/mixins/_footer.scss

@@ -24,7 +24,9 @@
 	--color-border: var(--border-subtle);
 	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);
+	// Sits on the surrounding canvas — an opaque white strip pinned to the
+	// bottom edge reads as a desktop status bar. Opt in via --app-footer-bg.
+	background: var(--app-footer-bg, transparent);
 	@include typography(body-sm);
 	color: var(--color-fg);
 	@include flex;