@xenterprises/nuxt-x-marketing 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -30,6 +30,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   section and its sample product data were dropped with them. Every other section of the
   demo page is unchanged.
 
+## [1.6.0] - 2026-10-12
+
+### Added
+
+- **`XMarkHero` `scrimWidth` prop** (opt-in, `overlay="scrim-left"` only). CSS length such as
+  `"40%"` or `"36rem"`. On md+ the scrim is 90% black up to `scrimWidth`, then fades out over a
+  further ~34% of the width so the photo on the right stays vivid. Below md it darkens a 90% band
+  from 18% to 82% of the hero height (35% at the top and bottom edges) instead of a flat 90%.
+  Without `scrimWidth`, `scrim-left` and every other default render byte-identical to 1.5.2.
+  Keep the whole text column inside the 90% zone: white title over 90% black on a pure-white
+  pixel is 17.8:1, white/80 subtitle 11.6:1; outside the zone contrast drops fast.
+
 ## [1.5.2] - 2026-10-12
 
 ### Fixed

package/app/components/X/Mark/Hero/index.vue

@@ -40,10 +40,16 @@
 
 			<!-- Overlay -->
 			<div
-				v-if="overlay !== 'none'"
+				v-if="overlay !== 'none' && !softScrim"
 				class="absolute inset-0"
 				:class="overlayClass"
 			/>
+			<!-- scrim-left + scrimWidth (opt-in, 1.6.0) -->
+			<div
+				v-else-if="softScrim"
+				class="absolute inset-0 x-hero-scrim-w"
+				:style="{ '--x-scrim-w': scrimWidth }"
+			/>
 		</div>
 
 		<!-- Content -->
@@ -196,6 +202,18 @@ const props = defineProps({
 		type: String,
 		default: "",
 	},
+	/**
+	 * scrim-left only, opt-in. CSS length for the 90% black zone, e.g. "40%" or "36rem".
+	 * When set: desktop (md+) keeps 90% up to this width, then a long soft fade so the
+	 * photo on the right stays vivid; mobile darkens a band behind the text instead of
+	 * a flat 90% over the whole hero. Keep the text column inside the 90% zone.
+	 * Unset (default): scrim-left renders exactly as in 1.5.x.
+	 */
+	scrimWidth: {
+		type: String,
+		default: "",
+		validator: (v) => v === "" || /^\d+(\.\d+)?(%|px|rem|em|vw)$/.test(v),
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -221,6 +239,10 @@ const overlayClass = computed(() => {
 	return overlays[props.overlay] || "";
 });
 
+// scrim-left with scrimWidth renders a separate overlay element; without it the
+// 1.5.x overlay element renders unchanged (no extra class or style attribute).
+const softScrim = computed(() => props.overlay === "scrim-left" && !!props.scrimWidth);
+
 const heightClass = computed(() => {
 	const heights = {
 		full: "min-h-[calc(100svh-var(--ui-header-height))]",
@@ -260,3 +282,32 @@ const contentAlignmentClasses = computed(() => {
 	return aligns[props.align];
 });
 </script>
+
+<style>
+/* scrim-left + scrimWidth (1.6.0). Mobile: 90% band behind the text column,
+ * lighter at the top and bottom edges of the hero. */
+.x-hero-scrim-w {
+	background-image: linear-gradient(
+		to bottom,
+		rgb(0 0 0 / 0.35) 0%,
+		rgb(0 0 0 / 0.9) 18%,
+		rgb(0 0 0 / 0.9) 82%,
+		rgb(0 0 0 / 0.35) 100%
+	);
+}
+/* md+: 90% up to --x-scrim-w, then a long eased fade to clear. */
+@media (min-width: 768px) {
+	.x-hero-scrim-w {
+		background-image: linear-gradient(
+			to right,
+			rgb(0 0 0 / 0.9) 0,
+			rgb(0 0 0 / 0.9) var(--x-scrim-w),
+			rgb(0 0 0 / 0.72) calc(var(--x-scrim-w) + 4%),
+			rgb(0 0 0 / 0.45) calc(var(--x-scrim-w) + 10%),
+			rgb(0 0 0 / 0.2) calc(var(--x-scrim-w) + 18%),
+			rgb(0 0 0 / 0.06) calc(var(--x-scrim-w) + 26%),
+			rgb(0 0 0 / 0) calc(var(--x-scrim-w) + 34%)
+		);
+	}
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",