@livenetworks/ashlar 2.2.0 → 2.2.1

package/package.json

@@ -1,95 +1,96 @@
-{
-  "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"
-  }
-}
+{
+  "name": "@livenetworks/ashlar",
+  "version": "2.2.1",
+  "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/",
+    "assets/",
+    "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/components/_translations.scss

@@ -1,111 +1,118 @@
-@use '../config/mixins' as *;
-
-[data-ln-translatable-lang] {
-	@include translations-flag-input;
-}
-
-[data-ln-toggle] button[data-ln-translations-lang] {
-	@include translations-dropdown-flag;
-}
-
-// ─── Flag icons per language ─────────────────────────────────────
-// Lang code (ISO 639-1) -> country flag (ISO 3166-1 alpha-2).
-
-$lang-flag-overrides: (
-	en: 'gb',
-	sq: 'al',
-	sr: 'rs',
-	ja: 'jp',
-	ko: 'kr',
-	zh: 'cn',
-	cs: 'cz',
-	da: 'dk',
-	el: 'gr',
-	he: 'il',
-	hi: 'in',
-	uk: 'ua',
-	vi: 'vn',
-	sv: 'se',
-	nb: 'no',
-	nn: 'no',
-	ca: 'es',
-	eu: 'es',
-	gl: 'es',
-	fa: 'ir',
-	ar: 'sa',
-	ms: 'my',
-	sl: 'si',
-	et: 'ee',
-	ka: 'ge',
-	hy: 'am',
-	be: 'by',
-	bs: 'ba',
-	hr: 'hr',
-	ga: 'ie',
-	cy: 'gb',
-	sw: 'ke',
-	bn: 'bd',
-	ur: 'pk',
-	ta: 'lk',
-	te: 'in',
-	ml: 'in',
-	kn: 'in',
-	mr: 'in',
-	gu: 'in',
-	pa: 'in',
-	ne: 'np',
-	km: 'kh',
-	lo: 'la',
-	my: 'mm',
-	af: 'za',
-	zu: 'za',
-);
-
-$lang-auto: mk, de, fr, it, bg, pt, ro, nl, pl, fi, hu, lt, lv, tr, az, is, mt, lb, no, ru, th, id;
-
-@each $lang, $country in $lang-flag-overrides {
-	[data-ln-translatable-lang="#{$lang}"],
-	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
-	[data-ln-toggle] button[data-ln-translations-lang="#{$lang}"]::before {
-		background-image: url('/assets/flags/#{$country}.svg');
-	}
-}
-
-@each $lang in $lang-auto {
-	[data-ln-translatable-lang="#{$lang}"],
-	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
-	[data-ln-toggle] button[data-ln-translations-lang="#{$lang}"]::before {
-		background-image: url('/assets/flags/#{$lang}.svg');
-	}
-}
-
-// ─── Header actions ──────────────────────────────────────────────
-
-.ln-translations__actions {
-	@include translations-actions;
-}
-
-[data-ln-translations-active] {
-	@include translations-active-list;
-}
-
-[data-ln-translations-active] p {
-	@include translations-badge;
-}
-
-[data-ln-translations-active] button {
-	@include translations-badge-remove;
-}
-
-[data-ln-translations-add] {
-	@include translations-add-button;
-}
-
-// ─── Reduced motion ─────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-	[data-ln-translations-add],
-	[data-ln-translations-active] button {
-		transition: none;
-	}
-}
+@use '../config/mixins' as *;
+
+// Configurable base path for flags (resolves relative to compiled CSS)
+$flag-base-path: '../../assets/flags' !default;
+
+[data-ln-translatable-lang] {
+	@include translations-flag-input;
+}
+
+textarea[data-ln-translatable-lang] {
+	background-position: var(--size-sm-up) calc(var(--size-sm) + (var(--size-lg) - var(--size-md-up) * 3 / 4) / 2);
+}
+
+button[data-ln-translations-lang] {
+	@include translations-dropdown-flag;
+}
+
+// ─── Flag icons per language ─────────────────────────────────────
+// Lang code (ISO 639-1) -> country flag (ISO 3166-1 alpha-2).
+
+$lang-flag-overrides: (
+	en: 'gb',
+	sq: 'al',
+	sr: 'rs',
+	ja: 'jp',
+	ko: 'kr',
+	zh: 'cn',
+	cs: 'cz',
+	da: 'dk',
+	el: 'gr',
+	he: 'il',
+	hi: 'in',
+	uk: 'ua',
+	vi: 'vn',
+	sv: 'se',
+	nb: 'no',
+	nn: 'no',
+	ca: 'es',
+	eu: 'es',
+	gl: 'es',
+	fa: 'ir',
+	ar: 'sa',
+	ms: 'my',
+	sl: 'si',
+	et: 'ee',
+	ka: 'ge',
+	hy: 'am',
+	be: 'by',
+	bs: 'ba',
+	hr: 'hr',
+	ga: 'ie',
+	cy: 'gb',
+	sw: 'ke',
+	bn: 'bd',
+	ur: 'pk',
+	ta: 'lk',
+	te: 'in',
+	ml: 'in',
+	kn: 'in',
+	mr: 'in',
+	gu: 'in',
+	pa: 'in',
+	ne: 'np',
+	km: 'kh',
+	lo: 'la',
+	my: 'mm',
+	af: 'za',
+	zu: 'za',
+);
+
+$lang-auto: mk, de, fr, it, bg, pt, ro, nl, pl, fi, hu, lt, lv, tr, az, is, mt, lb, no, ru, th, id;
+
+@each $lang, $country in $lang-flag-overrides {
+	[data-ln-translatable-lang="#{$lang}"],
+	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
+	button[data-ln-translations-lang="#{$lang}"]::before {
+		background-image: var(--ln-flag-#{$lang}, url('#{$flag-base-path}/#{$country}.svg'));
+	}
+}
+
+@each $lang in $lang-auto {
+	[data-ln-translatable-lang="#{$lang}"],
+	[data-ln-translations-active] [data-ln-translations-lang="#{$lang}"],
+	button[data-ln-translations-lang="#{$lang}"]::before {
+		background-image: var(--ln-flag-#{$lang}, url('#{$flag-base-path}/#{$lang}.svg'));
+	}
+}
+
+// ─── Header actions ──────────────────────────────────────────────
+
+.ln-translations__actions {
+	@include translations-actions;
+}
+
+[data-ln-translations-active] {
+	@include translations-active-list;
+}
+
+[data-ln-translations-active] p {
+	@include translations-badge;
+}
+
+[data-ln-translations-active] button {
+	@include translations-badge-remove;
+}
+
+[data-ln-translations-add] {
+	@include translations-add-button;
+}
+
+// ─── Reduced motion ─────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+	[data-ln-translations-add],
+	[data-ln-translations-active] button {
+		transition: none;
+	}
+}

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.
@@ -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;
+		}
 	}
 }
 

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/_index.scss

@@ -22,6 +22,7 @@
 @forward 'accordion';
 @forward 'card';
 @forward 'chip';
+@forward 'count';
 @forward 'nav';
 @forward 'btn';
 @forward 'form';

package/theme/config/mixins/_nav.scss

@@ -8,6 +8,7 @@
 @use 'motion' as *;
 @use 'interaction' as *;
 @use 'position' as *;
+@use 'count' as *;
 
 // ─── Nav ────────────────────────────────────────────────────────────────────
 // Navigation structure reset. Layout (flex-col, h-full) and background come
@@ -64,21 +65,12 @@
 
 	// Trailing counter — <data value="24">24</data> as the last child of a.
 	a > data {
-		@include flex-shrink-0;
+		@include count;
 		margin-inline-start: auto;
-		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);
 	}
 
 	a[aria-current="page"] > data {
-		background: var(--color-accent);
-		color: var(--color-accent-fg);
+		@include count-solid;
 	}
 
 	// Section heading — small uppercase eyebrow, clearly not a link.