@xenterprises/nuxt-x-marketing 1.15.3 → 1.15.5

package/CHANGELOG.md

@@ -30,6 +30,33 @@ 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
+
+- **`XMarkHero` subtitle centring with `align="center"`.** The subtitle's `max-w-2xl` box sat at
+  the left of the `max-w-3xl` text column, so a centred subtitle was 48px left of centre at
+  1024px and up (24px at 768px). The subtitle now gets `mx-auto` when `align="center"` (prop or
+  `#subtitle` slot), so its box and text are centred on the column. Title and CTA were already
+  centred and are unchanged. `align="left"` (default) and `align="right"`: body HTML identical to
+  1.15.3 and 0 px difference at 1440x900, 1024x768, 768x1024, 390x844 and 375x667. Centred heroes
+  below about 720px wide are also 0 px (the box already fills the column).
+
 ## [1.15.3] - 2026-10-20
 
 ### Added (opt-in)

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 }]"
@@ -102,6 +105,7 @@
 				<p
 					v-if="subtitle || $slots.subtitle"
 					class="mt-6 text-xl text-white/80 max-w-2xl"
+					:class="{ 'mx-auto': align === 'center' }"
 				>
 					<slot name="subtitle">{{ subtitle }}</slot>
 				</p>
@@ -276,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,
@@ -322,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))]",
@@ -422,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.3",
+  "version": "1.15.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",