@xenterprises/nuxt-x-marketing 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -30,6 +30,40 @@ 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.8.0] - 2026-10-12
+
+All additions are opt-in; with none of them used, rendered HTML and pixels are identical to 1.7.0.
+
+### Added
+
+- **`XMarkMedia`**: full-width image block (e.g. under an H1-only thin hero). Props `img`
+  (`{ src, alt?, sources? }`, `sources` renders `<picture>` like XMarkHero), `aspectRatio`
+  (CSS ratio, default `16/9`), `container` (same values as XMarkSection, default `lg`),
+  `rounded` (`none` default, `sm` to `xl`), `caption` (`<figure>`/`<figcaption>`),
+  `imagePosition`, `loading` (default `eager`).
+- **`XXFooter` / `XXLegal` `container`**: `"lg"` uses `max-w-7xl px-4 sm:px-6 lg:px-8`,
+  matching XMarkHero/XMarkSection. Default output unchanged.
+- **`appConfig.xMarketing.container: "7xl"`**: adds `html.x-container-7xl`, which sets
+  `--ui-container` to `80rem` so the header lines up with max-w-7xl, and makes XXFooter/XXLegal
+  default to `container="lg"`. Unset keeps `--ui-container: 1440px`.
+- **`cta` color palette** (`--color-cta-*`, shade 500 = `#c2410c`): opt in with
+  `ui: { colors: { primary: 'cta' } }`; solid primary buttons get white text at 5.18:1.
+- **`XXSkipLink`**: skip-to-content link (`href="#main"` by default), visually hidden until
+  focused. Opt-in; place it first inside `<UApp>`.
+
+## [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/app.config.ts

@@ -27,6 +27,9 @@ export default defineAppConfig({
     },
   },
   xMarketing: {
+    /** 1.8.0 opt-in. "7xl" aligns --ui-container (header) and XXFooter/XXLegal with
+     *  the max-w-7xl column used by XMarkHero/XMarkSection. Unset keeps 1440px. */
+    container: undefined as undefined | "7xl",
     /** Site name — used by the shipped shell for the SEO title template
      *  ("%s | name") and og:site_name. Leave undefined to keep bare titles. */
     name: undefined,

package/app/assets/css/x-marketing.css

@@ -459,6 +459,21 @@
   --color-brand-950: #000a1a;
 
   /* Deep blacks with warm undertone */
+  /* cta (1.8.0, opt-in): AA orange palette whose shade 500 is orange-700, so
+   * solid buttons with white text pass AA (5.18:1). Opt in from app.config:
+   * ui: { colors: { primary: 'cta' } }. */
+  --color-cta-50: #fff7ed;
+  --color-cta-100: #ffedd5;
+  --color-cta-200: #fed7aa;
+  --color-cta-300: #fdba74;
+  --color-cta-400: #ea580c;
+  --color-cta-500: #c2410c;
+  --color-cta-600: #9a3412;
+  --color-cta-700: #7c2d12;
+  --color-cta-800: #6c2710;
+  --color-cta-900: #431407;
+  --color-cta-950: #2a0c04;
+
   --color-deep-50: #f5f5f4;
   --color-deep-100: #e8e8e3;
   --color-deep-200: #c5c5bd;
@@ -682,3 +697,30 @@ body {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
+
+/* Opt-in (1.8.0): appConfig.xMarketing.container = "7xl" adds html.x-container-7xl,
+ * aligning UContainer / UHeader (--ui-container) with max-w-7xl (80rem), the
+ * XMarkHero and XMarkSection column. Default stays 1440px. */
+html.x-container-7xl {
+  --ui-container: 80rem;
+}
+
+/* XXSkipLink (1.8.0) */
+.x-skip-link {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  z-index: 100;
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  color: #111;
+  border-radius: 0.25rem;
+  font-weight: 600;
+  transform: translateY(-200%);
+}
+.x-skip-link:focus,
+.x-skip-link:focus-visible {
+  transform: none;
+  outline: 2px solid #111;
+  outline-offset: 2px;
+}

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/app/components/X/Mark/Media/index.vue

@@ -0,0 +1,120 @@
+<template>
+	<div :class="containerClasses">
+		<figure class="m-0">
+			<div
+				class="relative w-full overflow-hidden"
+				:class="roundedClass"
+				:style="aspectStyle"
+			>
+				<picture v-if="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 || ''"
+						:loading="loading"
+						class="absolute inset-0 w-full h-full object-cover"
+						:style="positionStyle"
+					>
+				</picture>
+				<img
+					v-else
+					:src="img.src"
+					:alt="img.alt || ''"
+					:loading="loading"
+					class="absolute inset-0 w-full h-full object-cover"
+					:style="positionStyle"
+				>
+			</div>
+			<figcaption
+				v-if="caption"
+				class="mt-3 text-sm text-neutral-600"
+			>
+				{{ caption }}
+			</figcaption>
+		</figure>
+	</div>
+</template>
+
+<script setup>
+/**
+ * XMarkMedia (1.8.0) - full-width image block, e.g. directly under a thin H1 hero.
+ * img.sources renders <picture> (same shape as XMarkHero img.sources).
+ */
+const props = defineProps({
+	/** { src, alt?, sources?: [{ srcset, type?, media?, sizes? }] } */
+	img: {
+		type: Object,
+		required: true,
+		validator: (v) =>
+			!!v &&
+			typeof v.src === "string" &&
+			(v.sources === undefined ||
+				(Array.isArray(v.sources) &&
+					v.sources.every((x) => x && typeof x.srcset === "string"))),
+	},
+	/** CSS aspect-ratio, e.g. "16/9", "21/9", "4/3" */
+	aspectRatio: {
+		type: String,
+		default: "16/9",
+		validator: (v) => /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(v),
+	},
+	/** Same values and classes as XMarkSection container */
+	container: {
+		type: String,
+		default: "lg",
+		validator: (v) => ["sm", "md", "lg", "xl", "full", "none"].includes(v),
+	},
+	/** Corner radius: none, sm, md, lg, xl */
+	rounded: {
+		type: String,
+		default: "none",
+		validator: (v) => ["none", "sm", "md", "lg", "xl"].includes(v),
+	},
+	/** Optional caption, rendered as <figcaption> */
+	caption: {
+		type: String,
+		default: "",
+	},
+	/** CSS object-position, e.g. "center 30%" */
+	imagePosition: {
+		type: String,
+		default: "",
+	},
+	/** Native loading hint; eager by default since it sits above the fold */
+	loading: {
+		type: String,
+		default: "eager",
+		validator: (v) => ["eager", "lazy"].includes(v),
+	},
+});
+
+const containerClasses = computed(() => {
+	const containers = {
+		sm: "max-w-[42rem] mx-auto px-4 sm:px-6",
+		md: "max-w-[64rem] mx-auto px-4 sm:px-6 lg:px-8",
+		lg: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8",
+		xl: "max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8",
+		full: "w-full px-4 sm:px-6 lg:px-8",
+		none: "",
+	};
+	return containers[props.container];
+});
+
+const roundedClass = computed(() => {
+	const r = { none: "rounded-none", sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", xl: "rounded-xl" };
+	return r[props.rounded];
+});
+
+const aspectStyle = computed(() => ({ aspectRatio: props.aspectRatio.replace(/\s+/g, " ") }));
+
+const positionStyle = computed(() =>
+	props.imagePosition ? { objectPosition: props.imagePosition } : undefined,
+);
+</script>

package/app/components/X/X/Footer/index.vue

@@ -18,9 +18,7 @@
 				:src="footer?.bg?.img?.src"
 				:alt="footer?.bg?.img?.alt"
 			/>
-			<div
-				class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
-			>
+			<div :class="innerClass">
 				<div class="pb-24">
 					<div
 						class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
@@ -97,4 +95,24 @@
 const emit = defineEmits(["newsletter-submit"]);
 const appConfig = useAppConfig();
 const footer = appConfig?.xMarketing?.footer;
+
+const props = defineProps({
+	/**
+	 * Inner container (1.8.0+, opt-in). "lg" = max-w-7xl px-4 sm:px-6 lg:px-8, the
+	 * XMarkHero / XMarkSection column. Empty follows appConfig.xMarketing.container
+	 * ("7xl" means "lg"); otherwise the default max-w-screen-2xl output is unchanged.
+	 */
+	container: {
+		type: String,
+		default: "",
+		validator: (v) => ["", "default", "lg"].includes(v),
+	},
+});
+
+const innerClass = computed(() => {
+	const c = props.container || (appConfig?.xMarketing?.container === "7xl" ? "lg" : "default");
+	return c === "lg"
+		? "relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
+		: "relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8";
+});
 </script>

package/app/components/X/X/Legal/index.vue

@@ -8,9 +8,7 @@
 			:alt="resolvedLogo.alt"
 			class="h-6 w-6 mx-auto -mt-4 relative z-10"
 		/>
-		<div
-			class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto gap-4"
-		>
+		<div :class="innerClass">
 			<div class="text-center md:text-left">
 				{{ resolvedCopyright }}
 			</div>
@@ -51,6 +49,15 @@ const props = defineProps({
 		type: Array,
 		default: null,
 	},
+	/**
+	 * Inner container (1.8.0+, opt-in). "lg" = max-w-7xl px-4 sm:px-6 lg:px-8. Empty follows
+	 * appConfig.xMarketing.container ("7xl" means "lg"); otherwise output is unchanged.
+	 */
+	container: {
+		type: String,
+		default: "",
+		validator: (v) => ["", "default", "lg"].includes(v),
+	},
 	/** Logo object { src, alt } (defaults to X Enterprises logo). Pass false to hide. href is ignored; logo is display-only. */
 	logo: {
 		type: [Object, Boolean],
@@ -58,6 +65,14 @@ const props = defineProps({
 	},
 });
 
+const appConfig = useAppConfig();
+const innerClass = computed(() => {
+	const c = props.container || (appConfig?.xMarketing?.container === "7xl" ? "lg" : "default");
+	return c === "lg"
+		? "flex flex-col md:flex-row justify-between items-center px-4 sm:px-6 lg:px-8 pt-3 pb-5 max-w-7xl mx-auto gap-4"
+		: "flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto gap-4";
+});
+
 // Default X Enterprises values
 const defaultLogo = {
 	src: "https://cdn.x.enterprises/logo-x.png",

package/app/components/X/X/SkipLink/index.vue

@@ -0,0 +1,23 @@
+<template>
+	<a :href="`#${target}`" class="x-skip-link">{{ label }}</a>
+</template>
+
+<script setup>
+/**
+ * XXSkipLink (1.8.0) - skip-to-content link. Opt-in: place it first in app.vue.
+ * Visually hidden until focused (first Tab), then shown top-left.
+ * Pair with <main id="main"> (or set target).
+ */
+defineProps({
+	/** id of the main content element, without # */
+	target: {
+		type: String,
+		default: "main",
+	},
+	/** Link text */
+	label: {
+		type: String,
+		default: "Skip to content",
+	},
+});
+</script>

package/app/plugins/x-container.ts

@@ -0,0 +1,10 @@
+/**
+ * 1.8.0 opt-in: appConfig.xMarketing.container === "7xl" adds html.x-container-7xl,
+ * which sets --ui-container to 80rem (max-w-7xl). Unset: no head change at all.
+ */
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig() as { xMarketing?: { container?: string } };
+  if (appConfig?.xMarketing?.container === "7xl") {
+    useHead({ htmlAttrs: { class: "x-container-7xl" } });
+  }
+});

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.8.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",