@xenterprises/nuxt-x-marketing 1.15.2 → 1.15.3

package/CHANGELOG.md

@@ -30,6 +30,20 @@ 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.3] - 2026-10-20
+
+### Added (opt-in)
+
+- **`XMarkHero` `constrainToScrim`** (boolean, kebab `constrain-to-scrim`). With
+  `overlay="scrim-left"` and `align="left"`, at md and up the text column is capped so it stays
+  inside the 90% scrim zone: max width = effective scrim width (`scrimWidth`, or 55% when unset)
+  minus the container's left offset and a 2rem inner gap, never wider than the default
+  `max-w-3xl` and never narrower than 14rem. A `%` scrimWidth resolves against the hero width
+  (the section becomes an inline-size container at md+ only). Below md nothing changes,
+  including `scrimMobile="bottom"`. Lets a 50 to 55% scrim pass 4.5:1 at 768 to 1024px without
+  burying the photo. Unset: body HTML identical to 1.15.2 and 0 px difference at 1440, 1024,
+  768 and 390.
+
 ## [1.15.2] - 2026-10-19
 
 ### Fixed

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

@@ -5,7 +5,7 @@
 			heightClass,
 			alignmentClasses,
 			verticalAlignClasses,
-			{ 'pt-20': includeNavPadding },
+			{ 'pt-20': includeNavPadding, 'x-hero-cts': constrain },
 		]"
 	>
 		<!-- Background -->
@@ -81,7 +81,11 @@
 
 		<!-- Content -->
 		<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-			<div class="max-w-3xl pb-6 md:pb-8" :class="contentAlignmentClasses">
+			<div
+				class="max-w-3xl pb-6 md:pb-8"
+				:class="[contentAlignmentClasses, { 'x-hero-cts-col': constrain }]"
+				v-bind="constrain ? { style: constrainStyle } : {}"
+			>
 				<!-- Eyebrow -->
 				<p v-if="eyebrow" class="xText-eyebrow text-white/70 mb-4">
 					{{ eyebrow }}
@@ -260,6 +264,18 @@ const props = defineProps({
 		default: "",
 		validator: (v) => ["", "bottom"].includes(v),
 	},
+	/**
+	 * scrim-left only, opt-in (1.15.3). At md and up, caps the text column so its right
+	 * edge stays inside the 90% scrim zone: max width = effective scrim width (scrimWidth,
+	 * or 55% when unset) minus the container's left offset and a 2rem inner gap, never
+	 * wider than the default max-w-3xl and never narrower than 14rem. Left-aligned
+	 * content only (center/right alignment is unaffected). Below md nothing changes,
+	 * including scrimMobile="bottom". Unset (default): output identical to 1.15.2.
+	 */
+	constrainToScrim: {
+		type: Boolean,
+		default: false,
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -293,6 +309,19 @@ const mobileBottom = computed(
 
 const softScrim = computed(() => props.overlay === "scrim-left" && !!props.scrimWidth);
 
+// constrainToScrim (1.15.3): only meaningful for left-aligned content over scrim-left.
+const constrain = computed(
+	() => props.constrainToScrim && props.overlay === "scrim-left" && props.align === "left",
+);
+
+// Effective scrim width in units that resolve against the hero section (a size container
+// at md+ when constrained): N% of the section becomes Ncqw; other lengths pass through.
+const constrainStyle = computed(() => {
+	if (!constrain.value) return undefined;
+	const w = props.scrimWidth || "55%";
+	return { "--x-cts-w": w.endsWith("%") ? `${parseFloat(w)}cqw` : w };
+});
+
 const heightClass = computed(() => {
 	const heights = {
 		full: "min-h-[calc(100svh-var(--ui-header-height))]",
@@ -370,6 +399,29 @@ const contentAlignmentClasses = computed(() => {
 		);
 	}
 }
+/* constrainToScrim (1.15.3), md+ only: the section is an inline-size container so the
+ * text column can be capped against the section width. Column left edge = container
+ * offset (max(0, (100cqw - 80rem) / 2)) + container padding (md 1.5rem, lg 2rem). */
+@media (min-width: 768px) {
+	.x-hero-cts {
+		container-type: inline-size;
+	}
+	.x-hero-cts-col {
+		--x-cts-pad: 1.5rem;
+		max-width: min(
+			48rem,
+			max(
+				14rem,
+				calc(var(--x-cts-w, 55cqw) - max(0px, (100cqw - 80rem) / 2) - var(--x-cts-pad) - 2rem)
+			)
+		);
+	}
+}
+@media (min-width: 1024px) {
+	.x-hero-cts-col {
+		--x-cts-pad: 2rem;
+	}
+}
 /* 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.2",
+  "version": "1.15.3",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",