@xenterprises/nuxt-x-marketing 1.15.4 → 1.15.5

package/CHANGELOG.md

@@ -30,6 +30,21 @@ 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.15.5] - 2026-10-21
+
+### Added (opt-in)
+
+- **`XMarkHero` `reserveIndicatorSpace`** (boolean, kebab `reserve-indicator-space`). With the
+  scroll indicator shown, the content column gets room so the CTA ends at least 2rem (32px)
+  above the indicator's top. Centred content gets equal top and bottom padding (6.5rem below
+  md, 6rem from md), so a hero whose content already fits does not move; content that would not
+  fit makes the hero taller (it is a min-height) instead of running into the indicator.
+  `verticalAlign="bottom"` and `scrimMobile="bottom"` get the bottom room they lack (8px and
+  64px below md). No effect with `hasScrollIndicator` false. Measured on the Aqualis hero
+  (unfinishedwoodfurniture Home): gap 8, 9.5 and -2px at 360x740, 375x667 and 1280x800 became
+  32px (hero 48, 45 and 68px taller); the other six sizes and cheaplawnmower Home are 0 px.
+  Unset: body HTML identical to 1.15.4 and 0 px difference at all nine test sizes.
+
 ## [1.15.4] - 2026-10-21
 
 ### Fixed

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

@@ -80,7 +80,10 @@
 		</div>
 
 		<!-- Content -->
-		<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div
+			class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+			:class="indicatorClasses"
+		>
 			<div
 				class="max-w-3xl pb-6 md:pb-8"
 				:class="[contentAlignmentClasses, { 'x-hero-cts-col': constrain }]"
@@ -277,6 +280,17 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Opt-in (1.15.5). With hasScrollIndicator, reserves room so the content (CTA) ends at
+	 * least 2rem above the scroll indicator. Centred content gets equal top and bottom
+	 * padding, so a hero whose content already fits keeps its position; content that would
+	 * not fit makes the hero taller instead of overlapping the indicator. No effect when
+	 * hasScrollIndicator is false. Unset (default): output identical to 1.15.4.
+	 */
+	reserveIndicatorSpace: {
+		type: Boolean,
+		default: false,
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -323,6 +337,16 @@ const constrainStyle = computed(() => {
 	return { "--x-cts-w": w.endsWith("%") ? `${parseFloat(w)}cqw` : w };
 });
 
+// reserveIndicatorSpace (1.15.5): only with the scroll indicator shown. The indicator's
+// top sits 6rem above the hero bottom (bottom-8 + 4rem tall); content ends 2rem above it.
+const indicatorClasses = computed(() => {
+	if (!props.reserveIndicatorSpace || !props.hasScrollIndicator) return undefined;
+	return [
+		props.verticalAlign === "bottom" ? "x-hero-ind-b" : "x-hero-ind",
+		mobileBottom.value ? "x-hero-ind-mb" : "",
+	];
+});
+
 const heightClass = computed(() => {
 	const heights = {
 		full: "min-h-[calc(100svh-var(--ui-header-height))]",
@@ -423,6 +447,34 @@ const contentAlignmentClasses = computed(() => {
 		--x-cts-pad: 2rem;
 	}
 }
+/* reserveIndicatorSpace (1.15.5). The scroll indicator's top is 6rem above the hero
+ * bottom; the text column ends with pb-6 (md: pb-8). These paddings put the CTA bottom
+ * 8rem above the hero bottom, a 2rem gap. Centred: equal top and bottom padding so the
+ * content centre does not move; the hero's min-height lets it grow when content does
+ * not fit. verticalAlign="bottom" already has pb-24 on the section. */
+.x-hero-ind {
+	padding-top: 6.5rem;
+	padding-bottom: 6.5rem;
+}
+.x-hero-ind-b {
+	padding-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+	.x-hero-ind {
+		padding-top: 6rem;
+		padding-bottom: 6rem;
+	}
+	.x-hero-ind-b {
+		padding-bottom: 0;
+	}
+}
+/* scrimMobile="bottom" below md: the section has pb-10 and bottom-aligned content. */
+@media (max-width: 767.98px) {
+	.x-hero-ind-mb {
+		padding-top: 0;
+		padding-bottom: 4rem;
+	}
+}
 /* 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.15.4",
+  "version": "1.15.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",