@livenetworks/ashlar 2.2.1 → 2.2.3

package/package.json

@@ -1,96 +1,96 @@
-{
-  "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"
-  }
-}
+{
+  "name": "@livenetworks/ashlar",
+  "version": "2.2.3",
+  "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/_dropdown.scss

@@ -4,8 +4,11 @@
 	@include dropdown;
 }
 
+// The ln-dropdown coordinator marks its menu [data-ln-dropdown-menu] at
+// init; .dropdown is the same panel + items as a class (visual hook in
+// markup, or a menu the coordinator doesn't own).
 [data-ln-dropdown-menu],
-.menu-panel {
+.dropdown {
 	@include dropdown-menu;
 }
 

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

@@ -247,6 +247,7 @@
 	// because --border-block-start is read by ~10 other mixins
 	// (cards, tables, accordions) where the divider should NOT appear.
 	[data-ln-dropdown-menu],
+	.dropdown,
 	.menu-items {
 		--border-block-start: var(--border-width) solid var(--color-border);
 	}

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

@@ -13,7 +13,8 @@
 //
 // Usage:
 //   [data-ln-dropdown] { @include dropdown; }
-//   [data-ln-dropdown-menu] { @include dropdown-menu; }
+//   [data-ln-dropdown-menu], .dropdown { @include dropdown-menu; }
+//   (both global bindings in components/_dropdown.scss)
 //
 // Open/close state (display:none ↔ display:block + .open) is JS-driven
 // and lives in the co-located JS SCSS, not here.
@@ -53,6 +54,16 @@
 	}
 
 	:is(li, form) > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"]) {
+		// One row recipe, whatever the element. <button> rebinds --padding-*
+		// and --gap on itself (base/_global.scss), and ancestor scopes rebind
+		// them for their own buttons (@mixin app-header zeroes --btn-padding-*
+		// and mutes --color-fg; a popover inside .app-header is still in its
+		// DOM). Taking these from the list keeps a <form> submit row on the
+		// same geometry and ink as an <a> row.
+		--padding-y: inherit;
+		--padding-x: inherit;
+		--gap:       inherit;
+		--color-fg:  inherit;
 		width: 100%;
 		box-sizing: border-box;
 		display: flex;
@@ -67,12 +78,21 @@
 		box-shadow: none;
 		text-align: left;
 		text-decoration: none;
+		white-space: normal;    // button-base: nowrap
 		cursor: pointer;
 		font-family: inherit;
 		@include typography(body-sm);
+		@include font-normal;   // button-base: medium
 		color: var(--color-fg);
 		transition: background-color 120ms ease, color 120ms ease;
 
+		// Semantic item (e.g. a destructive "Delete"): ink and wash both
+		// follow the status color. Same shape as btn-ghost / btn-outline.
+		&:is(.success, .error, .warning, .info) {
+			--color-accent: hsl(var(--color-primary));
+			--color-fg:     var(--color-accent);
+		}
+
 		&:hover:not(:disabled) {
 			background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 			color: var(--color-fg);
@@ -141,7 +161,6 @@
 	@include fixed;
 	inset: auto;
 	margin: 0;
-	padding: var(--padding-y);
 	min-width: var(--dropdown-min-width, 14rem);
 	@include enter-scale-fade;
 
@@ -167,4 +186,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/_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,23 @@
 		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. An item
+	// may sit in a <form> (POST/DELETE action), as @mixin menu-items allows.
+	&:has(
+		> ul > li > :is(a, button),
+		> ul > li > form > button,
+		> nav > ul > li > :is(a, button),
+		> nav > ul > li > form > 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;
@@ -68,8 +85,12 @@
 			margin-top: var(--size-2xs);
 		}
 
-		// When containing interactive actions/buttons (menus, pickers)
-		&:has(> li > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"])) {
+		// When containing interactive actions/buttons (menus, pickers),
+		// directly or inside a <form> (POST/DELETE action).
+		&:has(
+			> li > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"]),
+			> li > form > :is(button, input[type="submit"], input[type="reset"], input[type="button"])
+		) {
 			@include menu-items;
 		}
 

package/theme/presentation/_effects.scss

@@ -97,6 +97,74 @@
 	@include glass-panel;
 }
 
+// ---------------------------------------------------------------------------
+// Photo Backdrop (full-bleed photograph behind a region's content)
+// ---------------------------------------------------------------------------
+// The region's FIRST child is a <figure><img></figure>; it fills the region
+// behind everything that follows. The scrim is mixed from the region's own
+// --bg-base, so the region's text tokens stay legible in light mode, dark
+// mode and scoped theme islands — set data-mode / data-theme on the region,
+// never a hardcoded text color.
+//
+//   <section id="hero" class="hero-section photo-backdrop" data-mode="dark">
+//       <figure><img src="…" alt="…"></figure>
+//       <div class="landing-container">…</div>
+//   </section>
+//
+//   #hero  { @include photo-backdrop; }                              // default scrim
+//   #cta   { @include photo-backdrop(photo-scrim(180deg, 85%, 40%)); }
+//   #story { @include photo-backdrop(linear-gradient(…brand tint…)); }
+//   #plain { @include photo-backdrop(null); }                        // no scrim
+//
+// photo-scrim($angle, $from, $to): $from / $to are the --bg-base share at
+// the start / end of the gradient (100% = opaque surface).
+// ---------------------------------------------------------------------------
+@function photo-scrim($angle: 90deg, $from: 92%, $to: 30%) {
+	$mid: ($from + $to) * 0.5;
+
+	@return linear-gradient(
+		$angle,
+		color-mix(in srgb, var(--bg-base) #{$from}, transparent) 0%,
+		color-mix(in srgb, var(--bg-base) #{$mid}, transparent) 45%,
+		color-mix(in srgb, var(--bg-base) #{$to}, transparent) 100%
+	);
+}
+
+@mixin photo-backdrop($scrim: photo-scrim()) {
+	position: relative;
+	isolation: isolate;
+	// [data-mode] re-derives --color-fg on the region, but `color` itself is
+	// inherited already resolved from <body>; re-read it here.
+	color: var(--color-fg);
+
+	> figure:first-child {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		margin: 0;
+
+		img {
+			display: block;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		@if $scrim {
+			&::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: $scrim;
+			}
+		}
+	}
+}
+
+.photo-backdrop {
+	@include photo-backdrop;
+}
+
 // ---------------------------------------------------------------------------
 // Hover Glow & Elevation
 // ---------------------------------------------------------------------------

package/theme/presentation/_navbar.scss

@@ -2,8 +2,29 @@
 // Presentation Header & Navigation — ln-ashlar
 // ==========================================================================
 // Sticky frosted glass header, brand mark, navigation links, and action bar.
+//
+// Below the `nav` breakpoint the inline .nav-menu collapses: .menu-toggle
+// in .nav-actions opens a <nav> that is a direct child of .site-header
+// (ln-toggle + .collapsible). Above it, the toggle and the panel are hidden.
+//
+//   <header class="site-header">
+//       <div class="landing-container">
+//           <nav class="site-nav">
+//               …brand, ul.nav-menu…
+//               <div class="nav-actions">
+//                   <button type="button" class="btn btn-ghost btn-sm menu-toggle"
+//                           data-ln-toggle-for="site-menu" aria-label="Menu">…</button>
+//               </div>
+//           </nav>
+//       </div>
+//       <nav id="site-menu" data-ln-toggle class="collapsible" aria-label="Menu">
+//           <div class="collapsible-body"><ul><li><a href="…">…</a></li></ul></div>
+//       </nav>
+//   </header>
 // ==========================================================================
 
+@use '../config/mixins' as *;
+
 .site-header {
 	position: sticky;
 	top: 0;
@@ -60,7 +81,7 @@
 		margin: 0;
 		padding: 0;
 
-		@media (max-width: 820px) {
+		@include mq-down(nav) {
 			display: none;
 		}
 
@@ -97,6 +118,56 @@
 		align-items: center;
 		gap: var(--size-sm);
 	}
+
+	// Collapsed-menu trigger — only while .nav-menu is hidden.
+	.menu-toggle {
+		@include mq-up(nav) {
+			display: none;
+		}
+	}
+
+	// Collapsed-menu panel. The .collapsible parent stays padding-free;
+	// the list inside .collapsible-body carries the spacing.
+	> nav {
+		@include mq-up(nav) {
+			display: none;
+		}
+
+		ul {
+			display: flex;
+			flex-direction: column;
+			gap: var(--size-2xs);
+			list-style: none;
+			margin: 0;
+			padding: var(--size-sm) var(--container-padding-x) var(--size-md);
+			border-top: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
+		}
+
+		li {
+			margin: 0;
+			padding: 0;
+		}
+
+		a {
+			display: block;
+			padding: var(--size-sm-up) var(--size-sm);
+			border-radius: var(--radius-md);
+			font-weight: 600;
+			color: var(--color-fg);
+			text-decoration: none;
+			transition: color var(--transition-fast), background-color var(--transition-fast);
+
+			&:hover {
+				background-color: var(--bg-hover);
+			}
+
+			&.active,
+			&[aria-current="page"] {
+				color: hsl(var(--color-primary));
+				background-color: color-mix(in srgb, hsl(var(--color-primary)) 10%, transparent);
+			}
+		}
+	}
 }
 
 // ---------------------------------------------------------------------------

package/theme/presentation/_typography.scss

@@ -161,3 +161,16 @@
 		text-decoration-color: hsl(var(--color-primary));
 	}
 }
+
+// A link inside a heading is a title link (card, article, news item), not an
+// inline text link: it keeps the heading color and only tints on hover. Same
+// specificity as the rule above and declared after it, so it wins for
+// `li h3 a` without touching inline links in the same list item.
+.landing-section :is(h1, h2, h3, h4, h5, h6) a:not(.btn) {
+	color: inherit;
+	text-decoration: none;
+
+	&:hover {
+		color: hsl(var(--color-primary));
+	}
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/web-types",
 	"name": "@livenetworks/ashlar",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"framework": "html",
 	"contributions": {
 		"html": {