@livenetworks/ashlar 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livenetworks/ashlar",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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"
   ],

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

@@ -28,6 +28,12 @@ $bp-xl:  1280px;
 $bp-2xl: 1536px;
 $bp-3xl: 1920px;
 
+// -----------------------------------------------------------------------
+// Presentation navbar collapse (for @media — presentation/_navbar.scss)
+// -----------------------------------------------------------------------
+// Below this width .site-header hides .nav-menu and shows .menu-toggle.
+$bp-nav: 820px;
+
 // -----------------------------------------------------------------------
 // Container-query breakpoints (for @container — components)
 // -----------------------------------------------------------------------
@@ -46,6 +52,7 @@ $cq-wide:    1120px;
 	--bp-xl:  #{$bp-xl};
 	--bp-2xl: #{$bp-2xl};
 	--bp-3xl: #{$bp-3xl};
+	--bp-nav: #{$bp-nav};
 
 	--cq-narrow:  #{$cq-narrow};
 	--cq-compact: #{$cq-compact};
@@ -65,6 +72,7 @@ $breakpoints: (
 	xl:      $bp-xl,
 	2xl:     $bp-2xl,
 	3xl:     $bp-3xl,
+	nav:     $bp-nav,
 	narrow:  $cq-narrow,
 	compact: $cq-compact,
 	medium:  $cq-medium,

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

@@ -30,13 +30,16 @@
 
 	// Only whole-card links/buttons signal interaction. Passive containers
 	// must not respond merely because the pointer crosses their content.
+	// A whole-card link is the card's ONLY child (`> a:only-child`); a link
+	// that sits next to other content (a "Read more" under a paragraph) is
+	// an ordinary link and leaves the card alone.
 	&:is(a, button):hover:not(:disabled),
-	&:has(> a:hover) {
+	&:has(> a:only-child:hover) {
 		--color-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
 	}
 
 	&:is(a, button):focus-visible,
-	&:has(> a:focus-visible) {
+	&:has(> a:only-child:focus-visible) {
 		@include focus-ring;
 	}
 
@@ -56,7 +59,7 @@
 	}
 
 	// Whole-card-as-link: <a> wraps card content and fills the card.
-	> a {
+	> a:only-child {
 		@include flex-col;
 		@include flex-1;
 		text-decoration: none;
@@ -263,7 +266,7 @@
 
 @mixin _card-accent-base {
 	&:is(a, button):hover:not(:disabled),
-	&:has(> a:hover) {
+	&:has(> a:only-child:hover) {
 		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 	}
 }

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

@@ -141,7 +141,6 @@
 	@include fixed;
 	inset: auto;
 	margin: 0;
-	padding: var(--padding-y);
 	min-width: var(--dropdown-min-width, 14rem);
 	@include enter-scale-fade;
 
@@ -167,4 +166,9 @@
 	}
 
 	@include menu-items;
+
+	// Panel inset — after menu-items on purpose: the panel IS the <ul>,
+	// and menu-items' list reset (padding: 0) would otherwise zero it,
+	// leaving the item highlight flush against the panel border.
+	padding: var(--padding-y);
 }

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.

package/theme/config/mixins/_popover.scss

@@ -5,6 +5,7 @@
 @use 'form' as *;
 @use 'focus' as *;
 @use 'dropdown' as *;
+@use 'typography' as *;
 
 @mixin popover {
 	@include floating-panel;
@@ -37,7 +38,17 @@
 		margin: var(--size-xs) 0;
 	}
 
-	> ul {
+	// Menu popover caption (profile menu: <p> + <hr> + <nav><ul>) — sits on
+	// the item labels' inline grid instead of the bare panel inset.
+	&:has(> ul > li > :is(a, button), > nav > ul > li > :is(a, button)) > p {
+		margin: 0;
+		padding: var(--padding-y) var(--padding-x);
+		@include typography(body-sm);
+	}
+
+	// `nav > ul` is the canonical profile-menu shape (see ln-popover markup).
+	> ul,
+	> nav > ul {
 		list-style: none;
 		padding: 0;
 		margin: 0;