@xenterprises/nuxt-x-marketing 1.5.2 → 1.7.0

package/CHANGELOG.md

@@ -30,6 +30,31 @@ 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.7.0] - 2026-10-12
+
+### Added
+
+- **`XMarkHero` `scrimMobile="bottom"`** (opt-in, `overlay="scrim-left"` only). Below md the scrim
+  becomes a bottom gradient (90% black over the bottom 55%, fading to clear by 70%) and the text is
+  bottom-aligned (`max-md:items-end max-md:pb-10`), so the top of the photo stays clear. md+ is
+  unchanged (with `scrimWidth`, the 1.6.0 soft scrim; without, the scrim-left gradient). Keep the
+  title and subtitle inside the bottom 55% of the hero on mobile.
+- **`XMarkHero` `img.sources`**: `[{ srcset, type, media?, sizes? }]` renders
+  `<picture><source>...<img>` (e.g. AVIF, then WebP, with `img.src` as the fallback).
+  Without `sources` the output is byte-identical to 1.6.0.
+
+## [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

@@ -26,6 +26,26 @@
 					data-parallax-speed="0.3"
 				/>
 
+				<!-- Image Background with format sources (opt-in, 1.7.0) -->
+				<picture v-else-if="img?.src && img.sources?.length">
+					<source
+						v-for="(source, i) in img.sources"
+						:key="i"
+						:srcset="source.srcset"
+						:type="source.type"
+						:media="source.media"
+						:sizes="source.sizes"
+					>
+					<img
+						:src="img.src"
+						:alt="img.alt || ''"
+						fetchpriority="high"
+						class="absolute inset-0 w-full h-full object-cover xParallax"
+						:style="imagePositionStyle"
+						data-parallax-speed="0.3"
+					>
+				</picture>
+
 				<!-- Image Background -->
 				<img
 					v-else-if="img?.src"
@@ -40,10 +60,23 @@
 
 			<!-- Overlay -->
 			<div
-				v-if="overlay !== 'none'"
+				v-if="overlay !== 'none' && !softScrim && !mobileBottom"
 				class="absolute inset-0"
 				:class="overlayClass"
 			/>
+			<!-- scrim-left + scrimMobile="bottom" (opt-in, 1.7.0) -->
+			<div
+				v-else-if="mobileBottom"
+				class="absolute inset-0 x-hero-scrim-mb"
+				:class="scrimWidth ? 'x-hero-scrim-w' : 'x-hero-scrim-55'"
+				v-bind="scrimWidth ? { style: { '--x-scrim-w': scrimWidth } } : {}"
+			/>
+			<!-- 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 -->
@@ -121,11 +154,19 @@
 
 <script setup>
 const props = defineProps({
-	/** Background image object { src: string, alt?: string } */
+	/**
+	 * Background image object { src: string, alt?: string, sources?: Array<{ srcset, type, media?, sizes? }> }.
+	 * With sources (1.7.0) it renders <picture><source>...<img>, e.g. AVIF then WebP with src as fallback.
+	 */
 	img: {
 		type: Object,
 		default: null,
-		validator: (v) => !v || typeof v.src === "string",
+		validator: (v) =>
+			!v ||
+			(typeof v.src === "string" &&
+				(v.sources === undefined ||
+					(Array.isArray(v.sources) &&
+						v.sources.every((x) => x && typeof x.srcset === "string")))),
 	},
 	/** Background video object { src: string, poster?: string } */
 	video: {
@@ -196,6 +237,29 @@ 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),
+	},
+	/**
+	 * scrim-left only, opt-in (1.7.0). "bottom": below md the scrim becomes a bottom
+	 * gradient behind the text (90% over the bottom 55%, clear from 70% up) and the text
+	 * is bottom-aligned, so the top of the photo stays clear. md+ is unchanged.
+	 * Empty (default) keeps 1.6.0 output.
+	 */
+	scrimMobile: {
+		type: String,
+		default: "",
+		validator: (v) => ["", "bottom"].includes(v),
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -221,6 +285,14 @@ 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 mobileBottom = computed(
+	() => props.overlay === "scrim-left" && props.scrimMobile === "bottom",
+);
+
+const softScrim = computed(() => props.overlay === "scrim-left" && !!props.scrimWidth);
+
 const heightClass = computed(() => {
 	const heights = {
 		full: "min-h-[calc(100svh-var(--ui-header-height))]",
@@ -248,7 +320,8 @@ const verticalAlignClasses = computed(() => {
 		center: "items-center",
 		bottom: "items-end pb-24",
 	};
-	return aligns[props.verticalAlign];
+	const base = aligns[props.verticalAlign];
+	return mobileBottom.value ? `${base} max-md:items-end max-md:pb-10` : base;
 });
 
 const contentAlignmentClasses = computed(() => {
@@ -260,3 +333,56 @@ 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%
+	);
+}
+/* scrimMobile="bottom" (1.7.0), below md: bottom gradient behind bottom-aligned
+ * text, top of the photo clear. md+ falls through to the rules below. */
+@media (max-width: 767.98px) {
+	.x-hero-scrim-mb {
+		background-image: linear-gradient(
+			to top,
+			rgb(0 0 0 / 0.9) 0%,
+			rgb(0 0 0 / 0.9) 55%,
+			rgb(0 0 0 / 0.5) 62%,
+			rgb(0 0 0 / 0) 70%
+		) !important;
+	}
+}
+/* scrimMobile without scrimWidth: md+ matches the 1.5.x scrim-left gradient. */
+@media (min-width: 768px) {
+	.x-hero-scrim-55 {
+		background-image: linear-gradient(
+			to right,
+			rgb(0 0 0 / 0.9) 0%,
+			rgb(0 0 0 / 0.9) 55%,
+			rgb(0 0 0 / 0.3) 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.7.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",