@xenterprises/nuxt-x-marketing 1.4.15 → 1.5.0

package/CHANGELOG.md

@@ -30,6 +30,17 @@ 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.5.0] - 2026-10-12
+
+### Added
+
+- `XMarkHero` `overlay="heavier"`: flat 75% black (title about 8:1 on the worst measured desk-lamps image area, versus about 5.9:1 with `heavy`).
+- `XMarkHero` `overlay="scrim-left"` and `overlay="scrim-bottom"`: 90% black where the text sits, fading to 30%. White title holds 7:1 (subtitle 5.2:1) even over pure white image areas. `scrim-left` is a full 90% below `md`.
+- `XMarkHero` `height` prop: `full` (default, unchanged), `tall` (75svh), `short` (50svh).
+- `XMarkHero` `imagePosition` prop: CSS `object-position` for the background image or video, e.g. `left center`.
+
+Existing values are unchanged: `heavy` stays 60%, and the default height is still full viewport.
+
 ## [1.4.15] - 2026-10-12
 
 ### Fixed

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

@@ -1,7 +1,8 @@
 <template>
 	<section
-		class="relative min-h-[calc(100svh-var(--ui-header-height))] flex overflow-hidden"
+		class="relative flex overflow-hidden"
 		:class="[
+			heightClass,
 			alignmentClasses,
 			verticalAlignClasses,
 			{ 'pt-20': includeNavPadding },
@@ -21,6 +22,7 @@
 					muted
 					playsinline
 					class="absolute inset-0 w-full h-full object-cover xParallax"
+					:style="imagePositionStyle"
 					data-parallax-speed="0.3"
 				/>
 
@@ -31,6 +33,7 @@
 					:alt="img.alt || ''"
 					fetchpriority="high"
 					class="absolute inset-0 w-full h-full object-cover xParallax"
+					:style="imagePositionStyle"
 					data-parallax-speed="0.3"
 				/>
 			</slot>
@@ -137,7 +140,15 @@ const props = defineProps({
 	overlay: {
 		type: String,
 		default: "gradient",
-		validator: (v) => ["light", "heavy", "gradient", "none"].includes(v),
+		validator: (v) => [
+				"light",
+				"heavy",
+				"heavier",
+				"gradient",
+				"scrim-left",
+				"scrim-bottom",
+				"none",
+			].includes(v),
 	},
 	/** Small text above title */
 	eyebrow: {
@@ -177,6 +188,17 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	/** Section height: full (viewport minus header, default), tall (75svh), short (50svh) */
+	height: {
+		type: String,
+		default: "full",
+		validator: (v) => ["full", "tall", "short"].includes(v),
+	},
+	/** CSS object-position for the background image/video, e.g. "left center" */
+	imagePosition: {
+		type: String,
+		default: "",
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -188,11 +210,33 @@ const overlayClass = computed(() => {
 	const overlays = {
 		light: "bg-black/30",
 		heavy: "bg-black/60",
+		// 75% flat: white title >= 8:1 on image areas up to ~0.32 relative luminance
+		heavier: "bg-black/75",
 		gradient: "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
+		// 90% where text sits: white title >= 7:1 even over pure white image areas.
+		// Full 90% on small screens where text spans the width.
+		"scrim-left":
+			"bg-black/90 md:bg-transparent md:bg-gradient-to-r md:from-black/90 md:via-black/90 md:via-55% md:to-black/30",
+		// 90% across the bottom half; pair with verticalAlign="bottom"
+		"scrim-bottom":
+			"bg-gradient-to-t from-black/90 via-black/90 via-50% to-black/30",
 	};
 	return overlays[props.overlay] || "";
 });
 
+const heightClass = computed(() => {
+	const heights = {
+		full: "min-h-[calc(100svh-var(--ui-header-height))]",
+		tall: "min-h-[75svh]",
+		short: "min-h-[50svh]",
+	};
+	return heights[props.height] || heights.full;
+});
+
+const imagePositionStyle = computed(() =>
+	props.imagePosition ? { objectPosition: props.imagePosition } : undefined,
+);
+
 const alignmentClasses = computed(() => {
 	const aligns = {
 		left: "text-left",

package/package.json

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