@livenetworks/ashlar 2.1.13 → 2.2.0

package/package.json

@@ -1,95 +1,95 @@
-{
-  "name": "@livenetworks/ashlar",
-  "version": "2.1.13",
-  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
-  "license": "GPL-3.0-or-later",
-  "author": "Live Networks",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/livenetworks/ln-ashlar.git"
-  },
-  "homepage": "https://github.com/livenetworks/ln-ashlar#readme",
-  "bugs": "https://github.com/livenetworks/ln-ashlar/issues",
-  "keywords": [
-    "css",
-    "scss",
-    "design-system",
-    "frontend",
-    "components",
-    "vanilla-js"
-  ],
-  "main": "./dist/ln-ashlar.js",
-  "style": "./dist/ln-ashlar.css",
-  "web-types": "./web-types.json",
-  "files": [
-    "dist/",
-    "theme/",
-    "components/",
-    "ln-ashlar.html-data.json",
-    "web-types.json"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/ln-ashlar.js",
-      "default": "./dist/ln-ashlar.js"
-    },
-    "./core.css": "./dist/ln-ashlar-core.css",
-    "./theme.css": "./dist/ln-ashlar-theme.css",
-    "./full.css": "./dist/ln-ashlar.css",
-    "./landing.css": "./dist/ln-ashlar-landing.css",
-    "./presentation.css": "./dist/ln-ashlar-landing.css",
-    "./dev.css": "./dist/ln-ashlar-dev.css",
-    "./dev.js": "./dist/ln-ashlar-dev.js",
-    "./theme/*": "./theme/*",
-    "./components/*": "./components/*",
-    "./tailwind.css": "./dist/ln-ashlar-tailwind.css"
-  },
-  "scripts": {
-    "test": "npm run sync:ln-schemas:check && npm run sync:ln-events:check && npm run sync:css-tokens:check && node --test \"tests/*.test.js\"",
-    "test:p0": "node --test tests/p0-data-integrity.test.js",
-    "test:headless": "node tests/headless/run-all.mjs",
-    "dev": "node scripts/build.mjs --watch",
-    "build": "npm run sync:ln-schemas && npm run sync:ln-events && npm run sync:css-tokens && node scripts/build.mjs && npm run build:tailwind && npm run build:dev-css && npm run build:demos",
-    "build:tailwind": "node scripts/build-tailwind.mjs",
-    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow && npm run build:demo-spa && npm run build:demo-landing && npm run build:demo-corporate",
-    "build:dev-css": "sass theme/ln-ashlar-dev.scss demo/dist/ln-ashlar-dev.css --no-source-map --style=compressed",
-    "generate:brand-assets": "powershell -ExecutionPolicy Bypass -File scripts/generate-brand-assets.ps1 && node scripts/generate-svg-favicon.mjs",
-    "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
-    "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && node -e \"const fs = require('fs'); fs.copyFileSync('demo/admin/src/demo.js', 'demo/admin/dist/demo.js')\" && node demo/admin/src/build-pages.mjs",
-    "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed",
-    "build:demo-spa": "node demo/spa/build.mjs",
-    "build:demo-landing": "sass demo/landing/landing.scss demo/landing/landing.css --no-source-map --style=compressed",
-    "build:demo-corporate": "sass demo/corporate/corporate.scss demo/corporate/corporate.css --no-source-map --style=compressed",
-    "sync:ln-schemas": "node scripts/sync-ln-schemas.mjs",
-    "sync:ln-schemas:check": "node scripts/sync-ln-schemas.mjs --check",
-    "sync:ln-events": "node scripts/sync-ln-events.mjs",
-    "sync:ln-events:check": "node scripts/sync-ln-events.mjs --check",
-    "sync:ln-events:strict": "node scripts/sync-ln-events.mjs --strict",
-    "sync:css-tokens": "node scripts/sync-css-tokens.mjs",
-    "sync:css-tokens:check": "node scripts/sync-css-tokens.mjs --check",
-    "manifest": "node scripts/extract-manifest.mjs",
-    "manifest:file": "node scripts/extract-manifest.mjs --output=docs/manifest.txt",
-    "generate:llms": "node scripts/generate-llms.mjs",
-    "generate:llms:check": "node scripts/generate-llms.mjs --check",
-    "test:visual": "node tests/headless/visual-run.mjs",
-    "test:perf": "node tests/headless/perf-run.mjs",
-    "test:perf:history": "node tests/headless/perf-run.mjs --history",
-    "test:perf:compare": "node tests/headless/perf-run.mjs --compare",
-    "test:perf:density": "node tests/headless/perf-density.mjs",
-    "test:dual": "node tests/headless/dual-run.mjs"
-  },
-  "devDependencies": {
-    "@tabler/icons": "^3.41.1",
-    "@tailwindcss/cli": "^4.3.3",
-    "fake-indexeddb": "^6.2.4",
-    "flag-icons": "^7.5.0",
-    "puppeteer-core": "^25.1.0",
-    "sass-embedded": "^1.83.0",
-    "tailwindcss": "^4.3.3",
-    "vite": "^6.0.0"
-  }
-}
+{
+  "name": "@livenetworks/ashlar",
+  "version": "2.2.0",
+  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
+  "license": "GPL-3.0-or-later",
+  "author": "Live Networks",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livenetworks/ln-ashlar.git"
+  },
+  "homepage": "https://github.com/livenetworks/ln-ashlar#readme",
+  "bugs": "https://github.com/livenetworks/ln-ashlar/issues",
+  "keywords": [
+    "css",
+    "scss",
+    "design-system",
+    "frontend",
+    "components",
+    "vanilla-js"
+  ],
+  "main": "./dist/ln-ashlar.js",
+  "style": "./dist/ln-ashlar.css",
+  "web-types": "./web-types.json",
+  "files": [
+    "dist/",
+    "theme/",
+    "components/",
+    "ln-ashlar.html-data.json",
+    "web-types.json"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/ln-ashlar.js",
+      "default": "./dist/ln-ashlar.js"
+    },
+    "./core.css": "./dist/ln-ashlar-core.css",
+    "./theme.css": "./dist/ln-ashlar-theme.css",
+    "./full.css": "./dist/ln-ashlar.css",
+    "./landing.css": "./dist/ln-ashlar-landing.css",
+    "./presentation.css": "./dist/ln-ashlar-landing.css",
+    "./dev.css": "./dist/ln-ashlar-dev.css",
+    "./dev.js": "./dist/ln-ashlar-dev.js",
+    "./theme/*": "./theme/*",
+    "./components/*": "./components/*",
+    "./tailwind.css": "./dist/ln-ashlar-tailwind.css"
+  },
+  "scripts": {
+    "test": "npm run sync:ln-schemas:check && npm run sync:ln-events:check && npm run sync:css-tokens:check && node --test \"tests/*.test.js\"",
+    "test:p0": "node --test tests/p0-data-integrity.test.js",
+    "test:headless": "node tests/headless/run-all.mjs",
+    "dev": "node scripts/build.mjs --watch",
+    "build": "npm run sync:ln-schemas && npm run sync:ln-events && npm run sync:css-tokens && node scripts/build.mjs && npm run build:tailwind && npm run build:dev-css && npm run build:demos",
+    "build:tailwind": "node scripts/build-tailwind.mjs",
+    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow && npm run build:demo-spa && npm run build:demo-landing && npm run build:demo-corporate",
+    "build:dev-css": "sass theme/ln-ashlar-dev.scss demo/dist/ln-ashlar-dev.css --no-source-map --style=compressed",
+    "generate:brand-assets": "powershell -ExecutionPolicy Bypass -File scripts/generate-brand-assets.ps1 && node scripts/generate-svg-favicon.mjs",
+    "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
+    "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && sass demo/admin/src/admin-relaxed.scss demo/admin/dist/admin-relaxed.css --no-source-map --style=compressed && node -e \"const fs = require('fs'); fs.copyFileSync('demo/admin/src/demo.js', 'demo/admin/dist/demo.js')\" && node demo/admin/src/build-pages.mjs",
+    "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed",
+    "build:demo-spa": "node demo/spa/build.mjs",
+    "build:demo-landing": "sass demo/landing/landing.scss demo/landing/landing.css --no-source-map --style=compressed",
+    "build:demo-corporate": "sass demo/corporate/corporate.scss demo/corporate/corporate.css --no-source-map --style=compressed",
+    "sync:ln-schemas": "node scripts/sync-ln-schemas.mjs",
+    "sync:ln-schemas:check": "node scripts/sync-ln-schemas.mjs --check",
+    "sync:ln-events": "node scripts/sync-ln-events.mjs",
+    "sync:ln-events:check": "node scripts/sync-ln-events.mjs --check",
+    "sync:ln-events:strict": "node scripts/sync-ln-events.mjs --strict",
+    "sync:css-tokens": "node scripts/sync-css-tokens.mjs",
+    "sync:css-tokens:check": "node scripts/sync-css-tokens.mjs --check",
+    "manifest": "node scripts/extract-manifest.mjs",
+    "manifest:file": "node scripts/extract-manifest.mjs --output=docs/manifest.txt",
+    "generate:llms": "node scripts/generate-llms.mjs",
+    "generate:llms:check": "node scripts/generate-llms.mjs --check",
+    "test:visual": "node tests/headless/visual-run.mjs",
+    "test:perf": "node tests/headless/perf-run.mjs",
+    "test:perf:history": "node tests/headless/perf-run.mjs --history",
+    "test:perf:compare": "node tests/headless/perf-run.mjs --compare",
+    "test:perf:density": "node tests/headless/perf-density.mjs",
+    "test:dual": "node tests/headless/dual-run.mjs"
+  },
+  "devDependencies": {
+    "@tabler/icons": "^3.41.1",
+    "@tailwindcss/cli": "^4.3.3",
+    "fake-indexeddb": "^6.2.4",
+    "flag-icons": "^7.5.0",
+    "puppeteer-core": "^25.1.0",
+    "sass-embedded": "^1.83.0",
+    "tailwindcss": "^4.3.3",
+    "vite": "^6.0.0"
+  }
+}

package/theme/README.md

@@ -22,6 +22,7 @@ theme/
 │   ├── components.css         # Component utility recipes
 │   └── entry.css              # Entrypoint bundle
 ├── ln-ashlar.scss             # Master bundle (Core + Theme)
+├── ln-ashlar-relaxed.scss     # Relaxed design bundle (Core + Theme + designs/relaxed/*)
 └── ln-ashlar-theme.scss       # Theme-only visual design system bundle
 ```
 
@@ -31,12 +32,11 @@ theme/
 
 To prevent browser style invalidation storms during interactive DOM mutations, all SCSS mixins and components adhere to the following rules:
 
-1. **Avoid Repeating `:has()` Inside Mixins:**
-   - Never embed complex `:has()` selectors inside mixins that are `@include`d across multiple component variants or classes.
-   - De-duplicate and hoist container-level `:has()` rules to global component scopes using `:is(...)` (e.g. `:is(.card, .section-card, [class*="card"]) > :is(main, a > main):has(...)`).
+1. **Consolidate Compound `:has()` Queries via `:is(...)`:**
+   - Within structural mixins (such as `panel-body` in `_card.scss`, `pills` in `_form.scss`, and numeric table cells in `_table.scss`), collapse chained `:has()` checks into a single `:has(> :is(...))` selector rather than authoring sequential `:has()` rules.
 
 2. **Prefer Natural Cascade over `:not(:has(...))`:**
-   - Negative `:not(:has(...))` selectors force the browser layout engine to traverse ancestor trees repeatedly to prove absence.
+   - Negative `:not(:has(...))` selectors force the browser layout engine into exhaustive negative ancestor traversals.
    - Use CSS source-order cascade instead:
      ```scss
      // ✅ RECOMMENDED: Natural cascade override
@@ -46,12 +46,13 @@ To prevent browser style invalidation storms during interactive DOM mutations, a
        color: var(--color-accent);
      }
      ```
+   - For multi-action stacking (e.g. table header sorting and filtering in `_table.scss`), declare base single-action rules with `:has(:is(...))` and override with double-action `:has(...):has(...)` rather than mutual `:not(:has(...))` exclusions.
 
 3. **Use Logical Properties for Sizing and Spacing:**
    - Mixins for padding and margin use modern CSS logical properties (`padding-inline`, `padding-block`, `margin-inline`, `margin-block`), reducing generated rules by 50% compared to separate physical properties (`-left`, `-right`, `-top`, `-bottom`).
 
-4. **Anchor Pseudo-Elements to Direct Elements:**
-   - Apply active indicators (e.g. `::before`) directly to the target element (`a::before`) with `position: relative`, rather than querying parent containers (`li:has(a.active)::before`).
+4. **Scope Container State Checks to Direct Children:**
+   - For container-level state indicators (e.g. navigation item active/hover lines on `li::before`), scope state queries strictly to direct children using `>` (e.g. `li:has(> a:hover)::before`, `li:has(> a.active)::before`). This avoids recursive descendant tree searches while preserving full-item indicator positioning and animations.
 
 ---
 

package/theme/base/_global.scss

@@ -22,11 +22,11 @@ body {
 
 a {
 	// Derive hover from --color-accent at this scope. Same hue/saturation,
-	// lightness reduced by 8 (number form — see _btn.scss for the syntax
+	// lightness shifted by --accent-hover-shift (number form — see _btn.scss for the syntax
 	// rationale). Local derivation means a semantic-color parent (.error,
 	// .success, etc.) that rebinds --color-primary cascades to the hover
 	// because var(--color-accent) re-resolves on the anchor element.
-	--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)));
 
 	color: var(--color-accent);
 	text-decoration: none;

package/theme/base/_reset.scss

@@ -15,3 +15,14 @@ ul, ol {
 html {
 	font-size: 16px;
 }
+
+// Form controls do not inherit typography by default — textarea falls back
+// to the UA monospace face and buttons/inputs to the system UI font.
+button,
+input,
+select,
+textarea {
+	font: inherit;
+	letter-spacing: inherit;
+	color: inherit;
+}

package/theme/components/_app-shell.scss

@@ -13,11 +13,3 @@
 .header-right     { @include app-header-right; }
 .header-actions   { @include app-header-actions; }
 .header-avatar    { @include header-avatar; }
-
-// Lock root scroll exclusively for administrative shells
-html:has(.app-wrapper),
-body:has(.app-wrapper),
-.app-shell {
-	height: 100%;
-	overflow: hidden;
-}

package/theme/components/_form.scss

@@ -71,6 +71,12 @@ $icon-group-test: ':has(> .ln-icon):has(> :is(input[type="text"], input[type="se
 	@include form-input-icon-group-parts;
 }
 
+// ─── Field wrapper ──────────────────────────────────────────────
+
+.form-element {
+	@include form-element;
+}
+
 // ─── Label & Actions ────────────────────────────────────────────
 
 // Non-wrapping labels only — the label sits above/beside its input, not
@@ -138,9 +144,3 @@ search:has(> input[type="search"]) {
 	@include form-validate-errors;
 }
 
-// Any trailing feedback/metadata element inside .form-element automatically gets slot treatment with zero-specificity base styling
-:where(.form-element > :is(input, select, textarea, [data-ln-date-field], search, [class*="group"]) ~ :not(input)) {
-	@include form-slot;
-	color: var(--fg-muted);
-}
-

package/theme/components/_ln-table.scss

@@ -13,6 +13,12 @@
 	@include ln-table-toolbar;
 }
 
+// Toolbar sibling of the table: pin the thead under the toolbar.
+:is(main, section, article):has(> .ln-table__toolbar + :is(table, [data-ln-table])),
+[data-ln-table]:has(> header + table) {
+	@include ln-table-toolbar-stack;
+}
+
 .ln-table__toolbar :is(label, search):has(> input[type="search"]) {
 	@include ln-table-toolbar-search;
 }
@@ -21,9 +27,6 @@
 	@include ln-table-count;
 }
 
-.table-container {
-	@include ln-table-card-mode;
-}
 [data-ln-table] > footer,
 .ln-table__footer {
 	@include ln-table-footer;

package/theme/components/_scrollbar.scss

@@ -5,13 +5,14 @@
 	height: 8px;
 }
 
+// Overlay-style scrollbars: no gutter track; the thumb uses the strong
+// border tone so it stays findable without competing with content.
 ::-webkit-scrollbar-track {
-	--color-bg: var(--bg-sunken);
-	background: var(--color-bg);
+	background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: var(--color-border);
+	background-color: var(--border-strong);
 	border-radius: 4px;
 	border: 2px solid transparent;
 	background-clip: content-box;
@@ -28,5 +29,5 @@
 
 * {
 	scrollbar-width: thin;
-	scrollbar-color: var(--color-border) var(--bg-sunken);
+	scrollbar-color: var(--border-strong) transparent;
 }

package/theme/components/_sortable.scss

@@ -1,19 +1,19 @@
-@use '../config/mixins' as *;
-
-[data-ln-sortable] {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-
-	> * {
-		transition: box-shadow var(--transition-fast) var(--easing-standard), opacity var(--transition-fast) var(--easing-standard);
-
-		&.ln-sortable--drop-before {
-			box-shadow: inset 0 2px 0 0 var(--color-accent);
-		}
-
-		&.ln-sortable--drop-after {
-			box-shadow: inset 0 -2px 0 0 var(--color-accent);
-		}
-	}
-}
+@use '../config/mixins' as *;
+
+[data-ln-sortable] {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	> * {
+		transition: box-shadow var(--transition-fast) var(--easing-standard), opacity var(--transition-fast) var(--easing-standard);
+
+		&.ln-sortable--drop-before {
+			box-shadow: inset 0 2px 0 0 var(--color-accent);
+		}
+
+		&.ln-sortable--drop-after {
+			box-shadow: inset 0 -2px 0 0 var(--color-accent);
+		}
+	}
+}

package/theme/components/_stat-card.scss

@@ -2,4 +2,5 @@
 
 [data-ln-stat-card] {
 	@include stat-card;
+	@include stat-card-tone;
 }

package/theme/components/_table.scss

@@ -25,52 +25,29 @@ table {
 
 .table-container {
 	@include container(table);
-	overflow-x: auto;
-	overscroll-behavior-x: contain;
+	// `clip`, not `auto` — keeps the thead pinned to the page scroller;
+	// narrow containers stack records instead (below).
+	overflow-x: clip;
 
-	@container table (max-width: 640px) {
+	// Narrow container (e.g. a side column on desktop) — same card mode.
+	@include cq-down(md, table) {
 		table { @include table-responsive; }
-
-		.table-row-actions {
-			position: static !important;
-			opacity: 1 !important;
-			visibility: visible !important;
-			pointer-events: auto !important;
-			transform: none !important;
-			background: transparent !important;
-			padding-left: 0 !important;
-			justify-content: flex-end;
-			margin-top: var(--size-xs);
-
-			&::before {
-				display: none !important;
-			}
-		}
 	}
 }
 
 // ─── Shared Column Filter Button ─────────────────────────────────
-// CSS targets the unprefixed structural helper class on the button, NOT the data-ln-* JS
-// hook. .table-filter is a thin binding that mirrors the mixin; a consumer may instead
-// @include table-filter on their own selector (the class is a convenience, not a mandate).
+// Binding of @mixin table-filter to the column-filter hook; the th stack keys on the same attribute.
 // Sort lives in scss/components/_sort.scss — see [data-ln-sort].
 
-.table-filter { @include table-filter; }
-th:hover .table-filter { opacity: 0.7; }
-
-// Active filter — JS-state class set DIRECTLY on the button (self-selector), combined with
-// the structural helper class. Fixes the latent ln-data-table bug: JS toggles
-// .ln-filter-active on the button itself, but the old CSS used a descendant combinator
-// (.ln-filter-active [data-ln-col-filter]) that never matched, so the dot never rendered.
-// See D2.
-.table-filter.ln-filter-active { @include table-filter-active; }
+[data-ln-table-col-filter] { @include table-filter; }
 
 
 
 // ─── Data Table JS-State Classes ───────────────────────────────
 // JS-added state classes only. Row chrome (clickable cursor/hover, action
-// buttons, sticky header) is a CONSUMER concern — applied via semantic
-// selectors in project SCSS, never keyed off the data-ln-* JS hooks.
+// buttons) is a CONSUMER concern — applied via semantic selectors in project
+// SCSS, never keyed off the data-ln-* JS hooks. The sticky header is library
+// default (table-base).
 
 .ln-row-selected {
 	@include table-row-selected;