@livenetworks/ashlar 2.1.13 → 2.2.1

package/ln-ashlar.html-data.json

@@ -562,7 +562,8 @@
 		},
 		{
 			"name": "data-ln-empty-state",
-			"description": "data-ln-empty-state attribute"
+			"description": "Visual / CSS styling attribute (theme/components/_empty-state.scss)",
+			"valueSet": "v"
 		},
 		{
 			"name": "data-ln-empty-when",
@@ -581,6 +582,11 @@
 				}
 			]
 		},
+		{
+			"name": "data-ln-external-links-hint",
+			"description": "Marks the visually hidden ",
+			"valueSet": "v"
+		},
 		{
 			"name": "data-ln-field",
 			"description": "data-ln-field attribute"
@@ -717,6 +723,10 @@
 			"name": "data-ln-key-for",
 			"description": "Target element ID that this shortcut badge is displayed for"
 		},
+		{
+			"name": "data-ln-key-map",
+			"description": "Container modifier context alias for external shortcut badges"
+		},
 		{
 			"name": "data-ln-key-modifier",
 			"description": "Platform modifier text representation override"
@@ -1259,7 +1269,7 @@
 		},
 		{
 			"name": "data-ln-stat-card",
-			"description": "Visual / CSS styling attribute (theme/components/_stat-card.scss)",
+			"description": "Visual / CSS styling attribute (theme/components/_stat-card.scss, theme/designs/relaxed/_layout.scss)",
 			"valueSet": "v"
 		},
 		{
@@ -1623,8 +1633,7 @@
 		},
 		{
 			"name": "data-ln-translatable",
-			"description": "Marks form control as translatable into multiple languages",
-			"valueSet": "v"
+			"description": "Marks form control container as translatable, value is field name"
 		},
 		{
 			"name": "data-ln-translatable-lang",
@@ -1632,7 +1641,7 @@
 		},
 		{
 			"name": "data-ln-translations",
-			"description": "Mounts multi-language translation manager on form container",
+			"description": "Mounts multi-language translation coordinator on form container",
 			"valueSet": "v"
 		},
 		{
@@ -1642,27 +1651,36 @@
 		},
 		{
 			"name": "data-ln-translations-add",
-			"description": "Trigger button action to add specified language translation fields"
+			"description": "Trigger button to open translation language menu"
 		},
 		{
 			"name": "data-ln-translations-default",
 			"description": "Default primary language code (e.g. en)"
 		},
+		{
+			"name": "data-ln-translations-dict",
+			"description": "Dictionary key prefix mapping for translatable labels"
+		},
 		{
 			"name": "data-ln-translations-lang",
-			"description": "Language code associated with active language badge"
+			"description": "Language code associated with active language badge or menu item"
 		},
 		{
 			"name": "data-ln-translations-locales",
 			"description": "JSON dictionary of supported locale codes and display labels"
 		},
+		{
+			"name": "data-ln-translations-menu",
+			"description": "Menu container holding available language items",
+			"valueSet": "v"
+		},
 		{
 			"name": "data-ln-translations-placeholder",
 			"description": "Placeholder label pattern for cloned translation inputs"
 		},
 		{
 			"name": "data-ln-translations-prefix",
-			"description": "Prefix format pattern for cloned translated field names"
+			"description": "Prefix format pattern for nested translatable field names"
 		},
 		{
 			"name": "data-ln-translations-remove-label",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livenetworks/ashlar",
-  "version": "2.1.13",
+  "version": "2.2.1",
   "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
   "license": "GPL-3.0-or-later",
   "author": "Live Networks",
@@ -29,6 +29,7 @@
     "dist/",
     "theme/",
     "components/",
+    "assets/",
     "ln-ashlar.html-data.json",
     "web-types.json"
   ],
@@ -59,7 +60,7 @@
     "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-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",

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;

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