@xenterprises/nuxt-x-marketing 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -30,6 +30,19 @@ 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

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,17 @@
 
 			<!-- Overlay -->
 			<div
-				v-if="overlay !== 'none' && !softScrim"
+				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"
@@ -127,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: {
@@ -214,6 +249,17 @@ const props = defineProps({
 		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,
@@ -241,6 +287,10 @@ const overlayClass = computed(() => {
 
 // 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(() => {
@@ -270,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(() => {
@@ -295,6 +346,30 @@ const contentAlignmentClasses = computed(() => {
 		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 {

package/package.json

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