@livenetworks/ashlar 2.1.12 → 2.2.0

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,24 +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(> table),
-	&:has(> .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%;
 	}
@@ -192,9 +202,7 @@
 	// If main has mixed content (intro <p>, demo-split, <h4>,
 	// then <table>), :only-child doesn't match, padding stays,
 	// and the table keeps its own inset.
-	&:has(> table:only-child),
-	&:has(> .table-container:only-child),
-	&:has(> [data-ln-table]:only-child) {
+	&:has(> :is(table, .table-container, [data-ln-table]):only-child) {
 		padding: 0;
 
 		> table,
@@ -208,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);
@@ -254,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);
 	}
 }
@@ -312,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/_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;

package/theme/config/mixins/_form.scss

@@ -17,19 +17,18 @@
 
 @mixin form-label {
 	@include block;
-	@include typography(label-sm);
+	// label-md / medium — a 12px semibold caption over every field reads
+	// as dialog-box chrome; field labels sit one step under body text.
+	@include typography(label-md);
 	@include font-medium;
 	color: var(--color-fg);
 	// Structural label-to-input gap (not shell rhythm).
 	--margin-block: 0.375rem;
 	margin-bottom: var(--margin-block);
 
-	// Required indicator — red * after label text.
-	// Supports standard wrapping classes/tags (.form-element, .form-group, label)
-	// and general siblings preceding a required input.
-	:is(.form-element, .form-group, .form-field):has([required]) > &,
-	label:has([required]) &,
-	&:has(~ :is(input, select, textarea)[required]) {
+	// Required indicator — red * when any control under the label's parent is required
+	// (siblings, nested field shells).
+	:has([required]) > & {
 		&::after {
 			content: ' *';
 			color: hsl(var(--color-error));
@@ -38,6 +37,21 @@
 	}
 }
 
+// Field wrapper — zero-specificity rules so form-grid's `> * { margin: 0 }` wins.
+@mixin form-element {
+	// Stacked outside a form-grid (modal bodies, settings panels).
+	:where(&) + :where(&) {
+		--margin-block: var(--size-md);
+		margin-top: var(--margin-block);
+	}
+
+	// Trailing feedback after the control gets slot treatment.
+	:where(& > :is(input, select, textarea, [data-ln-date-field], search) ~ :not(input)) {
+		@include form-slot;
+		color: var(--fg-muted);
+	}
+}
+
 @mixin form-grid {
 	--gap: var(--size-md);
 	container-type: inline-size;
@@ -83,28 +97,42 @@
 
 @mixin _form-focus-style {
 	border-color: var(--color-accent);
-	@include focus-background-shift;
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 
 // ─── Text inputs, textareas, selects ────────────────────────────
 
 @mixin form-input {
 	@include w-full;
-	--padding-y: var(--input-padding-y, var(--size-sm));
-	--padding-x: var(--size-md);
+	--padding-y: var(--input-padding-y, var(--size-xs-up));
+	--padding-x: var(--size-sm-up);
 	padding: var(--padding-y) var(--padding-x);
 	font-size: var(--font-size);
-	line-height: var(--line-height);
+	// Shared control line box — same height as a sibling button.
+	line-height: var(--control-line-height);
 	color: var(--color-fg);
-	--color-bg: var(--bg-sunken);
+	// Enabled fields read as writable surfaces: base fill, hairline shadow.
+	// A grey fill is reserved for :disabled.
+	--color-bg: var(--input-bg, var(--bg-base));
 	background: var(--color-bg);
 	// Control boundary, not a divider — 1.4.11 wants 3:1 here.
-	--color-border: var(--border-ui);
+	--color-border: var(--input-border, var(--border-ui));
 	@include border;
 	border-radius: var(--radius);
-	@include transition;
+	box-shadow: var(--input-shadow, var(--shadow-xs));
+	// Colour + ring only — `all` would animate padding/font-size when the
+	// density tier switches, making fields visibly "breathe".
+	transition:
+		color var(--transition-base),
+		background-color var(--transition-base),
+		border-color var(--transition-base),
+		box-shadow var(--transition-base);
 	outline: none;
 
+	&:hover:not(:disabled):not(:focus-visible) {
+		--color-border: var(--input-border-hover, var(--border-strong-hover));
+	}
+
 	&:focus-visible {
 		@include _form-focus-style;
 	}
@@ -119,6 +147,7 @@
 		@include cursor-not-allowed;
 		--color-bg: var(--bg-sunken);
 		background: var(--color-bg);
+		box-shadow: none;
 	}
 
 	// Hide native UA clear button on <input type="search"> — we never use it;
@@ -130,6 +159,8 @@
 }
 
 @mixin form-textarea {
+	// Multi-line text keeps the reading line-height, not the control box.
+	line-height: var(--line-height);
 	min-height: 6rem;
 	resize: vertical;
 
@@ -205,9 +236,7 @@
 	}
 
 	// Propagate disabled states to the parent visual shell
-	&:has(> input:disabled),
-	&:has(> select:disabled),
-	&:has(> button:disabled) {
+	&:has(> :is(input, select, button):disabled) {
 		@include opacity-50;
 		@include cursor-not-allowed;
 		--color-bg: var(--bg-sunken);
@@ -442,12 +471,13 @@
 	@include flex;
 	@include items-center;
 	gap: var(--gap);
-	--padding-y: var(--input-padding-y, var(--size-sm));
+	--padding-y: var(--input-padding-y, var(--size-xs-up));
 	--padding-x: var(--size-md);
 	padding: var(--padding-y) var(--padding-x);
 	@include cursor-pointer;
 	@include transition;
 	@include text-sm;
+	line-height: var(--control-line-height);
 	@include font-medium;
 	margin-bottom: 0;
 	border-radius: var(--radius);
@@ -461,16 +491,16 @@
 	// pill's `display: none` when pill-outline is applied as an override.
 	> input { display: revert; }
 
-	&:has(> input:checked) {
+	&:hover {
 		border-color: var(--color-accent);
-		color: var(--color-accent);
-		// Reset pill's accent fill on checked — outline stays transparent.
-		background: transparent;
 		z-index: 1;
 	}
 
-	&:hover:not(:has(> input:checked)) {
+	&:has(> input:checked) {
 		border-color: var(--color-accent);
+		color: var(--color-accent);
+		// Reset pill's accent fill on checked — outline stays transparent.
+		background: transparent;
 		z-index: 1;
 	}
 }
@@ -484,24 +514,24 @@
 	// Lets .error/.success/.warning/.info parents cascade to the checked-
 	// state hover via the .success { --color-primary } chain. See
 	// _btn.scss for the syntax rationale (number form, not percentage).
-	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	background-color: var(--color-bg);
 	border-color: transparent;
 
 	> input { display: none; }
 
+	&:hover {
+		border-color: var(--color-border);
+	}
+
 	&:has(> input:checked) {
 		background-color: var(--color-accent);
 		color: var(--color-accent-fg);
-	}
 
-	&:hover:not(:has(> input:checked)) {
-		border-color: var(--color-border);
-	}
-
-	&:hover:has(> input:checked) {
-		background-color: var(--color-accent-hover);
+		&:hover {
+			background-color: var(--color-accent-hover);
+		}
 	}
 }
 
@@ -549,24 +579,20 @@
 @mixin pills {
 	@include inline-flex;
 
-	> li > label:has(> input[type="checkbox"]),
-	> li > label:has(> input[type="radio"]) {
+	> li > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		@include pill;
 		border-radius: 0;
 	}
 
-	> li:first-child > label:has(> input[type="checkbox"]),
-	> li:first-child > label:has(> input[type="radio"]) {
+	> li:first-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: var(--radius) 0 0 var(--radius);
 	}
 
-	> li:last-child > label:has(> input[type="checkbox"]),
-	> li:last-child > label:has(> input[type="radio"]) {
+	> li:last-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: 0 var(--radius) var(--radius) 0;
 	}
 
-	> li:only-child > label:has(> input[type="checkbox"]),
-	> li:only-child > label:has(> input[type="radio"]) {
+	> li:only-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: var(--radius);
 	}
 }
@@ -587,24 +613,20 @@
 		}
 	}
 
-	> li > label:has(> input[type="checkbox"]),
-	> li > label:has(> input[type="radio"]) {
+	> li > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		@include pill-outline;
 		border-radius: 0;
 	}
 
-	> li:first-child > label:has(> input[type="checkbox"]),
-	> li:first-child > label:has(> input[type="radio"]) {
+	> li:first-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: var(--radius) 0 0 var(--radius);
 	}
 
-	> li:last-child > label:has(> input[type="checkbox"]),
-	> li:last-child > label:has(> input[type="radio"]) {
+	> li:last-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: 0 var(--radius) var(--radius) 0;
 	}
 
-	> li:only-child > label:has(> input[type="checkbox"]),
-	> li:only-child > label:has(> input[type="radio"]) {
+	> li:only-child > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		border-radius: var(--radius);
 	}
 }
@@ -628,8 +650,7 @@
 		display: block;
 	}
 
-	> li > label:has(> input[type="checkbox"]),
-	> li > label:has(> input[type="radio"]) {
+	> li > label:has(> input:is([type="checkbox"], [type="radio"])) {
 		@include flex;
 		@include items-center;
 		@include justify-center;
@@ -799,8 +820,7 @@
 		--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)) {
+		&:hover {
 			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 		}
 
@@ -809,11 +829,10 @@
 			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);
+			&:hover {
+				background-color: var(--color-accent-tint-strong);
+			}
 		}
 	}
 }

package/theme/config/mixins/_layout.scss

@@ -4,6 +4,14 @@
 
 // Layout — grid, stack, container
 
+// Respond to available parent width, including sidebars and panel gutters.
+// The min() allows a single item to shrink below its preferred minimum.
+@mixin grid-auto($min: var(--grid-item-min-width)) {
+	display: grid;
+	gap: var(--gap);
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, #{$min}), 1fr));
+}
+
 @mixin _grid-base {
 	display: grid;
 	--gap: var(--size-lg);
@@ -110,6 +118,7 @@
 
 	> * {
 		--radius: 0;
+		--panel-radius: 0;
 		--shadow: none;
 	}