@livenetworks/ashlar 1.6.1 → 2.0.0

package/package.json

@@ -1,61 +1,84 @@
-{
-  "name": "@livenetworks/ashlar",
-  "version": "1.6.1",
-  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
-  "license": "MIT",
-  "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"
-  ],
-  "files": [
-    "scss/",
-    "js/"
-  ],
-  "exports": {
-    "./scss/*": "./scss/*",
-    "./js/*": "./js/*"
-  },
-  "scripts": {
-    "test": "node --test \"tests/*.test.js\"",
-    "test:p0": "node --test tests/p0-data-integrity.test.js",
-    "dev": "node scripts/build.mjs --watch",
-    "build": "node scripts/build.mjs && npm run build:dev-css && npm run build:demos",
-    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow && npm run build:demo-spa",
-    "build:dev-css": "sass scss/ln-ashlar-dev.scss demo/dist/ln-ashlar-dev.css --no-source-map --style=compressed",
-    "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 && cp 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"
-  },
-  "devDependencies": {
-    "@tabler/icons": "^3.41.1",
-    "fake-indexeddb": "^6.2.4",
-    "flag-icons": "^7.5.0",
-    "puppeteer-core": "^25.1.0",
-    "sass-embedded": "^1.83.0",
-    "vite": "^6.0.0"
-  },
-  "peerDependencies": {
-    "tom-select": "^2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "tom-select": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "@livenetworks/ashlar",
+  "version": "2.0.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/*"
+  },
+  "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",
+    "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:dev-css && npm run build:demos",
+    "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"
+  },
+  "devDependencies": {
+    "@tabler/icons": "^3.41.1",
+    "fake-indexeddb": "^6.2.4",
+    "flag-icons": "^7.5.0",
+    "puppeteer-core": "^25.1.0",
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.0.0"
+  }
+}

package/{scss → theme}/base/_global.scss

@@ -3,8 +3,7 @@
 html,
 body {
 	@include w-full;
-	@include h-full;
-	overflow: hidden;
+	min-height: 100%;
 	background-color: var(--bg-recessed);
 	@include font-sans;
 	-webkit-tap-highlight-color: transparent;

package/{scss → theme}/base/_reset.scss

@@ -8,7 +8,7 @@
 	display: none !important;
 }
 
-ul, ol, ul li, ol li {
+ul, ol {
 	list-style: none;
 }
 

package/{scss → theme}/base/_typography.scss

@@ -82,6 +82,7 @@ code {
 	@include text-sm;
 	--color-bg: var(--bg-recessed);
 	background-color: var(--color-bg);
+	color: var(--color-fg);
 	padding: var(--size-2xs) var(--size-xs);
 	@include rounded-sm;
 }
@@ -91,6 +92,7 @@ pre {
 	@include text-sm;
 	--color-bg: var(--bg-recessed);
 	background-color: var(--color-bg);
+	color: var(--color-fg);
 	padding: var(--size-md);
 	@include rounded-md;
 	@include border;

package/theme/brand.css

@@ -0,0 +1,73 @@
+/**
+ * ============================================================================
+ * ln-ashlar — Brand Configuration Template (brand.css)
+ * ============================================================================
+ *
+ * This file allows client applications to override corporate brand colors
+ * and typography in a single place, without modifying or recompiling core
+ * library files. Brand is polarity-free by default: one :root declaration
+ * serves light and dark alike.
+ *
+ * HOW TO USE:
+ * 1. Copy this file into your project (e.g., as `assets/css/brand.css`).
+ * 2. Link this file in your HTML. Thanks to zero-specificity `:where()` selectors
+ *    in ln-ashlar, your definitions here will ALWAYS win regardless of stylesheet
+ *    loading order (even if loaded before `ln-ashlar.css`).
+ *
+ * IMPORTANT RULES:
+ * - Bare HSL Triplets: Values for `--brand-primary` and `--brand-secondary` MUST
+ *   be specified as bare HSL triplets (e.g. `221 83% 48%`), NEVER wrapped in `hsl(...)`.
+ *   The library internally composes alpha transparency over these values using CSS
+ *   color slash syntax: `hsl(var(--color-primary) / 0.2)`. Wrapping them in `hsl()`
+ *   would produce invalid syntax like `hsl(hsl(...) / 0.2)` and drop declarations.
+ *
+ * - Tint Overrides: By default, `--color-accent-tint` and `--color-accent-tint-strong`
+ *   are automatically computed via `color-mix()` against local surface backgrounds.
+ *   If your brand requires custom hand-tuned tint shades, uncomment and set
+ *   `--brand-primary-tint` and `--brand-primary-tint-strong`.
+ *
+ * - Additional Overrides: You may also customize font families (`--font-sans`, `--font-mono`)
+ *   or override any neutral color tokens (`--color-neutral-50` ... `--color-neutral-900`)
+ *   within the respective theme blocks below.
+ * ============================================================================
+ */
+
+/* -------------------------------------------------------------------------- */
+/* Light Mode Brand Values                                                    */
+/* -------------------------------------------------------------------------- */
+:root {
+	/* Primary brand color (bare HSL triplet: hue saturation% lightness%) */
+	--brand-primary:   221 83% 43%;
+
+	/* Secondary brand accent color (bare HSL triplet) */
+	--brand-secondary: 160 84% 36%;
+
+	/* Typography font stacks (optional) */
+	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+
+	/* Optional manual accent tint overrides (defaults are computed via color-mix) */
+	/* --brand-primary-tint:        hsl(221 83% 97%); */
+	/* --brand-primary-tint-strong: hsl(221 83% 94%); */
+}
+
+/* -------------------------------------------------------------------------- */
+/* Dark Mode Brand Values — OPT-IN, commented out by default                  */
+/* -------------------------------------------------------------------------- */
+/*
+ * Uncomment ONLY if your brand genuinely needs a different primary on dark
+ * surfaces. Be aware of the cost: a per-polarity brand override re-declares
+ * the token on EVERY nested [data-mode="dark"] island, and a declaration beats
+ * inheritance at any specificity. So a dark island nested inside a scoped
+ * [data-theme] region will clobber that region's brand and snap back to the
+ * value below. Declaring brand at :root only — the default above — lets
+ * [data-theme] islands rebind it cleanly.
+ *
+ * [data-mode="dark"] {
+ *     --brand-primary:   221 83% 48%;
+ *     --brand-secondary: 160 84% 36%;
+ *
+ *     --brand-primary-tint:        hsl(232 50% 15%);
+ *     --brand-primary-tint-strong: hsl(232 60% 22%);
+ * }
+ */

package/{scss → theme}/components/_app-shell.scss

@@ -13,3 +13,11 @@
 .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/_button.scss

@@ -0,0 +1,24 @@
+@use '../config/mixins' as *;
+
+// Prototype-tier classes.
+// These classes are provided for prototyping, inspector experimentation,
+// and demo HTML only. In production, apply the corresponding mixin to a
+// semantic selector:
+//
+//   #add-user        { @include btn; }
+//   #users-table ul  { @include btn-group; }
+//
+// Prototype-tier and universal button classes.
+// These classes apply to both <button> and <a> (link-buttons) ensuring
+// full button geometry, padding, alignment, and theme variables:
+.btn         { @include button-base; @include btn; }
+.btn-soft    { @include button-base; @include btn-soft; }
+.btn-ghost   { @include button-base; @include btn-ghost; }
+.btn-outline { @include button-base; @include btn-outline; }
+.btn-link    { @include button-base; @include btn-link; }
+.btn-sm      { @include btn-sm; }
+.btn-lg      { @include btn-lg; }
+
+.btn-group {
+	@include btn-group;
+}

package/theme/components/_chart.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+.chart {
+	@include chart;
+}

package/theme/components/_confirm.scss

@@ -0,0 +1,6 @@
+// Armed state — rebind the accent token so a button carrying @mixin btn turns
+// red while confirming and theme overrides keep applying. See
+// theme/base/_global.scss for this being the documented colour-variant hook.
+[data-ln-confirm-state="confirming"] {
+	--color-primary: var(--color-error);
+}

package/{scss → theme}/components/_date.scss

@@ -1,22 +1,30 @@
-@use '../config/mixins' as *;
-
-// ─── Date field — ln-date merged input ──────────────────────────
-// Applied to the wrapper <span> that ln-date generates around the
-// visible input, hidden submit input, native picker, and calendar button.
-// Uses the generic form-field-group mixin (bordered flex shell).
-
-[data-ln-date-field] {
-	@include form-field-group;
-	// The submit value input has no visual role — hide it entirely.
-	> input[type="hidden"] {
-		display: none;
-	}
-
-	// The native date picker stays rendered (position:absolute via inline style)
-	// so showPicker() can anchor the calendar popup to this element's position.
-	> input[type="date"] {
-		position: absolute;
-		pointer-events: none;
-	}
-}
-
+@use '../config/mixins' as *;
+
+// ─── Date field — ln-date merged input ──────────────────────────
+// Applied to the wrapper <span> that ln-date generates around the
+// visible input, hidden submit input, native picker, and calendar button.
+// Uses the generic form-field-group mixin (bordered flex shell).
+
+[data-ln-date-field] {
+	@include form-field-group;
+	@include w-full;
+	display: flex;
+	// The submit value input has no visual role — hide it entirely.
+	> input[type="hidden"] {
+		display: none;
+	}
+
+	// The native date picker stays rendered (position:absolute via inline style)
+	// so showPicker() can anchor the calendar popup to this element's position.
+	> input[type="date"] {
+		position: absolute;
+		pointer-events: none;
+	}
+}
+
+time,
+[data-ln-date],
+[data-ln-time] {
+	@include font-tabular;
+}
+

package/{scss → theme}/components/_dropdown.scss

@@ -4,10 +4,15 @@
 	@include dropdown;
 }
 
-[data-ln-dropdown-menu] {
+[data-ln-dropdown-menu],
+.menu-panel {
 	@include dropdown-menu;
 }
 
+.menu-items {
+	@include menu-items;
+}
+
 @keyframes ln-dropdown-in {
 	from {
 		opacity: 0;

package/theme/components/_form.scss

@@ -0,0 +1,140 @@
+@use '../config/mixins' as *;
+
+// ─── Inputs ─────────────────────────────────────────────────────
+
+input,
+textarea,
+select {
+	@include form-input;
+}
+
+textarea {
+	@include form-textarea;
+}
+
+select {
+	@include form-select;
+}
+
+output {
+	@include form-slot;
+	color: var(--fg-muted);
+	font-family: var(--font-mono);
+}
+
+// ─── Checkbox & Radio ───────────────────────────────────────────
+
+input[type="checkbox"] {
+	@include form-checkbox;
+}
+
+input[type="radio"] {
+	@include form-radio;
+}
+
+// ─── Icon input group ───────────────────────────────────────────
+// Semantic trigger: any <label>, <div>, <span> or <search> that directly
+// contains a <svg class="ln-icon"> AND a text-ish <input>. Excludes
+// checkbox/radio/file/button types via the :is() allowlist.
+//
+// Emitted twice, on purpose:
+//
+//   shell → :is(label,div,span,search):where(<structural test>)  = (0,0,1)
+//     The wrapper's chrome is a BASE. The :has() test is a guard, not a
+//     claim to weight, so it goes inside :where(). Every consumer binding
+//     now outranks it with a plain selector: @mixin search (0,1,2),
+//     the sidebar header search (0,2,3), @mixin panel-search (0,2,2), the ln-table
+//     toolbar (0,2,3). The wrapper list stays OUTSIDE :where() so the shell
+//     is (0,0,1), not (0,0,0) — it must beat the (0,0,0) form-slot rule at
+//     the bottom of this file by specificity, not by source order.
+//
+//   parts → :is(label,div,span,search):has(…):has(…)             = (0,2,2)
+//     Child resets and state chrome keep full weight: input:disabled and
+//     input:focus-visible are (0,1,1) and both set a background.
+//
+// One selector source — the two emissions cannot drift apart.
+
+$icon-group-wrapper: ':is(label, div, span, search)';
+$icon-group-test: ':has(> .ln-icon):has(> :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"]))';
+
+#{$icon-group-wrapper}:where(#{$icon-group-test}) {
+	@include form-field-group-shell;
+}
+
+#{$icon-group-wrapper}#{$icon-group-test} {
+	@include form-input-icon-group-parts;
+}
+
+// ─── Label & Actions ────────────────────────────────────────────
+
+// Non-wrapping labels only — the label sits above/beside its input, not
+// around it. The icon-group pattern owns its full styling and must not
+// inherit block + margin-bottom from here.
+label:not(:has(> input)) {
+	@include form-label;
+}
+
+// ─── Pill groups — radio & checkbox lists ──────────────────────────
+// Clean class-driven segmented controls and switch panels.
+// No <fieldset> tag dependency to prevent layout collisions.
+
+.pills {
+	@include pills;
+}
+
+.pills-outline {
+	@include pills-outline;
+}
+
+.pills-switch {
+	@include pills-switch;
+}
+
+.pills-segmented {
+	@include pills-segmented;
+}
+
+.pill {
+	@include pill;
+}
+
+.pill-outline {
+	@include pill-outline;
+}
+
+.pill-switch {
+	@include pill-switch;
+}
+
+// The <search> landmark used as a WIDGET: a search input as a DIRECT child.
+// A <search> REGION wrapping a whole form does not match — its input is
+// nested, not a direct child. Mirrors the binding shape already used by
+// components/_ln-table.scss for the toolbar search.
+search:has(> input[type="search"]) {
+	@include search;
+}
+
+.form-actions {
+	@include form-actions;
+}
+
+// ─── Validation states ─────────────────────────────────────────
+
+.ln-validate-invalid {
+	@include form-validate-invalid;
+}
+
+.ln-validate-valid {
+	@include form-validate-valid;
+}
+
+[data-ln-validate-errors] {
+	@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/{scss → theme}/components/_layout.scss

@@ -6,3 +6,9 @@
 .flat-stack {
 	@include flat-stack;
 }
+
+.grid       { @include grid; }
+.grid-2     { @include grid-2; }
+.grid-4     { @include grid-4; }
+.stack      { @include stack; }
+.row        { @include row; }

package/{scss → theme}/components/_ln-table.scss

@@ -13,7 +13,7 @@
 	@include ln-table-toolbar;
 }
 
-.ln-table__toolbar label:has(> input[type="search"]) {
+.ln-table__toolbar :is(label, search):has(> input[type="search"]) {
 	@include ln-table-toolbar-search;
 }
 
@@ -61,9 +61,4 @@
 	@include ln-table-placeholder-row;
 }
 
-.ln-table--loading tbody {
-	opacity: 0.5;
-	pointer-events: none;
-}
-
 

package/theme/components/_picklist.scss

@@ -0,0 +1,3 @@
+@use '../config/mixins' as *;
+
+[data-ln-picklist] { @include picklist; }

package/{scss → theme}/components/_sort.scss

@@ -1,10 +1,10 @@
-@use '../config/mixins' as *;
-
-[data-ln-sort] { @include sort; }
-
-th:hover [data-ln-sort] { opacity: 0.7; }
-
-[data-ln-sort][data-ln-sort-state="asc"],
-[data-ln-sort][data-ln-sort-state="desc"] {
-	@include sort-active;
-}
+@use '../config/mixins' as *;
+
+[data-ln-sort] { @include sort; }
+
+th:hover [data-ln-sort] { opacity: 0.7; }
+
+[data-ln-sort][data-ln-sort-state="asc"],
+[data-ln-sort][data-ln-sort-state="desc"] {
+	@include sort-active;
+}

package/theme/components/_status-badge.scss

@@ -0,0 +1,6 @@
+@use '../config/mixins' as *;
+
+.badge         { @include badge; }
+.badge.outline { @include badge-outline; }
+.badge-outline { @include badge-outline; }
+.badge.live    { @include badge-live; }

package/{scss → theme}/components/_table.scss

@@ -6,6 +6,22 @@ table {
 	tr.section-header td {
 		@include table-section-header;
 	}
+
+	td.numeric,
+	td.num,
+	td:has(time),
+	td:has([data-ln-number]) {
+		@include font-tabular;
+	}
+
+	input[type="checkbox"] {
+		accent-color: var(--color-accent);
+		cursor: pointer;
+		width: 1rem;
+		height: 1rem;
+		border-radius: var(--radius-xs, 3px);
+		vertical-align: middle;
+	}
 }
 
 .table-container {

package/{scss → theme}/components/_tabs.scss

@@ -15,7 +15,3 @@
 [data-ln-tabs] [data-ln-panel] {
 	@include tabs-panel;
 }
-
-[data-ln-tabs] [data-ln-panel].hidden {
-	@include hidden;
-}