@livenetworks/ashlar 2.1.12 → 2.1.13

package/theme/config/_density.scss

@@ -1,191 +1,104 @@
-// ==========================================================================
-// Density — ln-ashlar v2.0
-// ==========================================================================
-// Inverted density system. The :root default is DENSE (DocuFlow scale:
-// 14px body, 52px header, 232px sidebar). Density goes UP via the
-// [data-density] attribute, mirroring how [data-mode] / [data-theme] works.
-//
-// Activation:
-//   <html>                              ← default: dense (DocuFlow look)
-//   <html data-density="compact">       ← explicit dense handle (same as base)
-//   <html data-density="comfortable">   ← pre-v2 default (16px / roomier)
-//   <html data-density="spacious">      ← large type, generous padding
-//   <main data-density="compact">       ← scope dense within comfortable page
-//
-// Density is an explicit user choice (settings toggle).
-// It is NEVER auto-switched by viewport — viewport breakpoints handle
-// layout, density handles information density inside that layout.
-//
-// What reacts: everything reading --padding-y, --gap, --text-body-*,
-// --text-label-*, --text-title-*, --text-heading-*, --text-display-sm,
-// --lh-*, --app-header-height, --app-sidebar-width, --density-row-h,
-// --btn-padding-y, --input-padding-y.
-//
-// Interactive controls (buttons, inputs, pills): density-reactive UPWARD.
-// Base (~38px) = WCAG AA. Comfortable (≥46px) and Spacious (≥54px) = AAA.
-// Controls rebind --btn-padding-y and --input-padding-y in up-tier scopes.
-// See docs-mcp/css/density.md §wcag for the height math.
-//
-// No parallel --density-* token scale. Density overrides existing base
-// tokens at the scope root, exactly like theme color overrides.
-// ==========================================================================
-
-:root {
-
-	// -----------------------------------------------------------------------
-	// Density — Row height
-	// Minimum row height for table rows and data lists. Kept density-named
-	// because it has no analogue in the base token scale.
-	// -----------------------------------------------------------------------
-	--density-row-h:    2.25rem;  // 36px — dense base
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="compact"] — explicit handle for the dense base.
-//
-// Identical to :root. Exists so:
-//   (a) a switcher can write a single attribute across all tiers including
-//       returning to base (rather than removing the attribute)
-//   (b) a region inside a comfortable page can be scoped dense:
-//       <table data-density="compact">
-//
-// Rebinds --density-row-h so a compact-scoped region keeps the dense row
-// floor inside a comfortable/spacious page. NOTE: only row-h is restored —
-// full dense region-scoping (type, padding) would re-declare the base
-// surface; deferred. The global switcher returns to base via :root (dense).
-// ---------------------------------------------------------------------------
-[data-density="compact"] {
-	--density-row-h:    2.25rem;  // 36px — restore dense base in scoped context
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="comfortable"] — pre-v2 default, now an explicit opt-in.
-//
-// Restores the roomy 16px / lh 1.6 scale that was the :root default before
-// design-v2. WCAG 2.5.5 AAA: buttons 46px, inputs/pills ≥44px.
-//
-// <html data-density="comfortable">   ← global comfortable
-// <aside data-density="comfortable">  ← scoped comfortable sidebar
-// ---------------------------------------------------------------------------
-[data-density="comfortable"] {
-
-	// -- Logical rhythm --------------------------------------------------
-	--padding-y:          var(--size-sm);       // 8px (was dense 6px)
-	--gap:                var(--size-sm);       // 8px (was dense 6px)
-
-	// -- Body text (restore 16px / 1.6 scale) ----------------------------
-	--text-body-md:       1rem;
-	--lh-body-md:         1.6;
-
-	--text-body-sm:       0.875rem;
-	--lh-body-sm:         1.5;
-
-	// Explicit rebind — form inputs consume --font-size and don't always
-	// cascade lazy var(--text-body-md) resolutions under a scope.
-	--font-size:          var(--text-body-md);
-	--line-height:        var(--lh-body-md);
-
-	// -- Labels ----------------------------------------------------------
-	--text-label-md:      0.875rem;
-	--lh-label-md:        1.4;
-
-	--text-label-sm:      0.8125rem;   // 13px (was dense 12px) — form-label, table th
-	--lh-label-sm:        1.4;
-
-	// -- Caption ---------------------------------------------------------
-	--text-caption:       0.8125rem;   // 13px — modal subtitle, validation errors
-	--lh-caption:         1.4;
-
-	// -- Titles ----------------------------------------------------------
-	--text-title-md:      1.125rem;
-	--lh-title-md:        1.4;
-
-	--text-title-sm:      1rem;
-	--lh-title-sm:        1.4;
-
-	// -- Headings --------------------------------------------------------
-	--text-heading-sm:    1.25rem;   --lh-heading-sm:  1.3;
-	--text-heading-md:    1.5rem;    --lh-heading-md:  1.25;
-	--text-heading-lg:    1.875rem;  --lh-heading-lg:  1.2;
-
-	// -- Display ---------------------------------------------------------
-	--text-display-sm:    2.25rem;   --lh-display-sm:  1.15;
-
-	// -- App shell -------------------------------------------------------
-	--app-header-height:  3.5rem;    // 56px (was dense 3.25rem)
-	--app-sidebar-width:  16rem;     // 256px (was dense 14.5rem)
-
-	// -- Row height ------------------------------------------------------
-	--density-row-h:      2.75rem;   // 44px (was dense 2.25rem)
-
-	// -- Interactive controls — Tailwind / shadcn standard (38px height) ---
-	--btn-padding-y:      var(--size-sm);       // 8px → buttons 38px
-	--btn-padding-x:      var(--size-md);       // 16px
-	--input-padding-y:    var(--size-sm);       // 8px → inputs/selects 38px
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="spacious"] — NEW tier above comfortable.
-//
-// For low-vision, touch-primary, or presentation contexts.
-// Body 18px, generous padding, larger shell. WCAG 2.5.5 AAA:
-// buttons 54px, inputs/pills ≥48px.
-//
-// <html data-density="spacious">
-// ---------------------------------------------------------------------------
-[data-density="spacious"] {
-
-	// -- Logical rhythm --------------------------------------------------
-	--padding-y:          var(--size-md);       // 16px
-	--gap:                var(--size-md);       // 16px
-
-	// -- Body text -------------------------------------------------------
-	--text-body-md:       1.125rem;             // 18px
-	--lh-body-md:         1.75;
-
-	--text-body-sm:       1rem;
-	--lh-body-sm:         1.6;
-
-	--font-size:          var(--text-body-md);
-	--line-height:        var(--lh-body-md);
-
-	// -- Labels ----------------------------------------------------------
-	--text-label-md:      1rem;
-	--lh-label-md:        1.5;
-
-	--text-label-sm:      0.9375rem;   // 15px (was dense 12px) — form-label, table th
-	--lh-label-sm:        1.45;
-
-	// -- Caption ---------------------------------------------------------
-	--text-caption:       0.9375rem;   // 15px — modal subtitle, validation errors
-	--lh-caption:         1.45;
-
-	// -- Titles ----------------------------------------------------------
-	--text-title-md:      1.25rem;
-	--lh-title-md:        1.5;
-
-	--text-title-sm:      1.125rem;
-	--lh-title-sm:        1.45;
-
-	// -- Headings --------------------------------------------------------
-	--text-heading-sm:    1.5rem;    --lh-heading-sm:  1.35;
-	--text-heading-md:    1.875rem;  --lh-heading-md:  1.3;
-	--text-heading-lg:    2.25rem;   --lh-heading-lg:  1.25;
-
-	// -- Display ---------------------------------------------------------
-	--text-display-sm:    2.75rem;   --lh-display-sm:  1.2;
-
-	// -- App shell -------------------------------------------------------
-	--app-header-height:  4rem;      // 64px
-	--app-sidebar-width:  17.5rem;   // 280px
-
-	// -- Row height ------------------------------------------------------
-	--density-row-h:      3rem;      // 48px
-
-	// -- Interactive controls — WCAG 2.5.5 AAA ≥48px --------------------
-	// btn-padding-y: 2×16px + 20px line-height + 2px borders = 54px
-	// input-padding-y: indirection token read by form-input + pill-outline
-	--btn-padding-y:      var(--size-md);       // 16px → buttons 54px
-	--btn-padding-x:      var(--size-lg);       // 24px — spacious width
-	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
-}
+// ==========================================================================
+// Density — ln-ashlar
+// ==========================================================================
+// Information density scaling via spatial compression.
+//
+// The :root default is dense base (DocuFlow scale: 36px row height floor,
+// 6px padding-y, 52px header, 232px sidebar). Density scales spacing upward
+// via the [data-density] attribute, mirroring how [data-mode] / [data-theme] works.
+//
+// Activation:
+//   <html>                              ← default: compact base
+//   <html data-density="compact">       ← explicit compact handle (same as base)
+//   <html data-density="comfortable">   ← roomy default (44px row floor, 8px padding)
+//   <html data-density="spacious">      ← generous touch/kiosk density (48px row floor, 16px padding)
+//   <main data-density="compact">       ← scope dense within comfortable page
+//
+// Density is an explicit user choice (settings toggle).
+// It is NEVER auto-switched by viewport — viewport breakpoints handle
+// layout, density handles information density inside that layout.
+//
+// What reacts: spatial rhythm and layout geometry:
+// --padding-y, --gap, --app-header-height, --app-sidebar-width,
+// --density-row-h, --btn-padding-y, --btn-padding-x, --input-padding-y.
+//
+// Typography (font-size, line-height) remains stable across density modes:
+//   (1) Prevents text disappearing/reappearing (glyph cache drop on variable fonts)
+//   (2) Eliminates layout thrashing during CSS transitions
+//   (3) Enables smooth, gentle CSS transitions on padding and row height
+// ==========================================================================
+
+:root {
+
+	// -----------------------------------------------------------------------
+	// Density — Row height
+	// Minimum row height for table rows and data lists. Kept density-named
+	// because it has no analogue in the base token scale.
+	// -----------------------------------------------------------------------
+	--density-row-h:    2.25rem;  // 36px — dense base
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="compact"] — explicit handle for the dense base.
+//
+// Identical to :root. Exists so:
+//   (a) a switcher can write a single attribute across all tiers including
+//       returning to base (rather than removing the attribute)
+//   (b) a region inside a comfortable page can be scoped dense:
+//       <table data-density="compact">
+// ---------------------------------------------------------------------------
+[data-density="compact"] {
+	--density-row-h:      2.25rem;            // 36px — restore dense base in scoped context
+	--input-padding-y:    var(--size-xs-up);  // 6px — compact input padding
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="comfortable"] — roomy spacing opt-in.
+//
+// WCAG 2.5.5 AAA: buttons 38-44px, inputs/pills ≥44px, table rows 44px.
+//
+// <html data-density="comfortable">   ← global comfortable
+// <aside data-density="comfortable">  ← scoped comfortable sidebar
+// ---------------------------------------------------------------------------
+[data-density="comfortable"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-sm);       // 8px (was dense 6px)
+	--gap:                var(--size-sm);       // 8px (was dense 6px)
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  3.5rem;               // 56px (was dense 3.25rem)
+	--app-sidebar-width:  16rem;                // 256px (was dense 14.5rem)
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      2.75rem;              // 44px (was dense 2.25rem)
+
+	// -- Interactive controls — roomy 44px inputs ------------------------
+	--input-padding-y:    var(--size-sm-up);    // 12px → inputs/selects roomy
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="spacious"] — generous spacing tier above comfortable.
+//
+// For low-vision, touch-primary, or presentation contexts.
+// Generous padding, larger shell. WCAG 2.5.5 AAA:
+// inputs/pills ≥48px, table rows 48px.
+//
+// <html data-density="spacious">
+// ---------------------------------------------------------------------------
+[data-density="spacious"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-md);       // 16px
+	--gap:                var(--size-md);       // 16px
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  4rem;                 // 64px
+	--app-sidebar-width:  17.5rem;              // 280px
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      3rem;                 // 48px
+
+	// -- Interactive controls — generous touch targets -------------------
+	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
+}

package/theme/config/mixins/_avatar.scss

@@ -66,7 +66,7 @@
 	}
 
 	// Initials fallback — <abbr class="avatar">SO</abbr>
-	&:not(:has(img)):not(:has(span)) {
+	&:not(:has(img, span)) {
 		@include _avatar-media;
 		@include flex-center;
 		@include text-sm;
@@ -97,7 +97,7 @@
 // ─── Sizes ─────────────────────────────────────────────
 @mixin _avatar-size($size, $font-size, $line-height) {
 	img { @include size($size); }
-	&:not(:has(img)):not(:has(span)) {
+	&:not(:has(img, span)) {
 		@include size($size);
 		font-size: $font-size;
 		line-height: $line-height;

package/theme/config/mixins/_card.scss

@@ -165,8 +165,7 @@
 @mixin panel-body {
 	padding: var(--padding-y) var(--padding-x);
 
-	&:has(> table),
-	&:has(> .table-container) {
+	&:has(> :is(table, .table-container)) {
 		overflow-x: auto;
 		max-width: 100%;
 		-webkit-overflow-scrolling: touch;
@@ -192,9 +191,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,

package/theme/config/mixins/_form.scss

@@ -205,9 +205,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);
@@ -461,16 +459,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;
 	}
 }
@@ -491,17 +489,17 @@
 
 	> 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 +547,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 +581,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 +618,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 +788,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 +797,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/_nav.scss

@@ -196,11 +196,11 @@
 			}
 		}
 
-		&:has(a:hover)::before {
+		&:has(> a:hover)::before {
 			opacity: 0.4;
 		}
 
-		&:has(a.active)::before {
+		&:has(> a.active)::before {
 			transform: scaleY(1);
 			opacity: 1;
 		}
@@ -250,13 +250,13 @@
 			}
 		}
 
-		&:has(a:hover)::before {
+		&:has(> a:hover)::before {
 			left: 20%;
 			right: 20%;
 			opacity: 0.45;
 		}
 
-		&:has(a.active)::before {
+		&:has(> a.active)::before {
 			left: 0;
 			right: 0;
 			opacity: 1;

package/theme/config/mixins/_spacing.scss

@@ -1,16 +1,16 @@
 // Spacing — accepts CSS variable or value
 
 @mixin p($val)  { padding: $val; }
-@mixin px($val) { padding-left: $val; padding-right: $val; }
-@mixin py($val) { padding-top: $val; padding-bottom: $val; }
+@mixin px($val) { padding-inline: $val; }
+@mixin py($val) { padding-block: $val; }
 @mixin pt($val) { padding-top: $val; }
 @mixin pb($val) { padding-bottom: $val; }
 @mixin pl($val) { padding-left: $val; }
 @mixin pr($val) { padding-right: $val; }
 
 @mixin m($val)  { margin: $val; }
-@mixin mx($val) { margin-left: $val; margin-right: $val; }
-@mixin my($val) { margin-top: $val; margin-bottom: $val; }
+@mixin mx($val) { margin-inline: $val; }
+@mixin my($val) { margin-block: $val; }
 @mixin mt($val) { margin-top: $val; }
 @mixin mb($val) { margin-bottom: $val; }
 @mixin ml($val) { margin-left: $val; }

package/theme/config/mixins/_table.scss

@@ -77,33 +77,12 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 
-		// Shared header-button stack — keyed off the unprefixed structural filter button
-		// class and the [data-ln-sort] JS-component selector, so table / ln-table /
-		// ln-data-table all share one positioning rule.
-		&:has([data-ln-sort]):has(.table-filter) {
-			min-width: var(--th-double-action-min-width, 8.5rem);
-			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 3.75rem);
-
-			.table-filter {
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				right: var(--padding-x, var(--size-md));
-				margin: 0;
-			}
-			[data-ln-sort] {
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				right: calc(var(--padding-x, var(--size-md)) + 1.75rem);
-				margin: 0;
-			}
-		}
-
-		&:has([data-ln-sort]):not(:has(.table-filter)) {
+		// Shared header-button stack — cascading single vs double action
+		&:has(:is([data-ln-sort], .table-filter)) {
 			min-width: var(--th-single-action-min-width, 6rem);
 			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
 
+			.table-filter,
 			[data-ln-sort] {
 				position: absolute;
 				top: 50%;
@@ -113,22 +92,19 @@
 			}
 		}
 
-		&:has(.table-filter):not(:has([data-ln-sort])) {
-			min-width: var(--th-single-action-min-width, 6rem);
-			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 2rem);
+		&:has([data-ln-sort]):has(.table-filter) {
+			min-width: var(--th-double-action-min-width, 8.5rem);
+			padding-inline-end: calc(var(--padding-x, var(--size-md)) + 3.75rem);
 
-			.table-filter {
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				right: var(--padding-x, var(--size-md));
-				margin: 0;
+			[data-ln-sort] {
+				right: calc(var(--padding-x, var(--size-md)) + 1.75rem);
 			}
 		}
 	}
 
 	tbody tr {
 		@include transition;
+		height: var(--density-row-h);
 		min-height: var(--density-row-h);
 
 		&:hover {