@xenterprises/nuxt-x-marketing 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -30,6 +30,43 @@ 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.9.0] - 2026-10-12
+
+All additions are opt-in; with none of them used, rendered HTML and pixels are identical to 1.8.0.
+
+### Added
+
+- **`XXLegal` affiliate disclosure** (`disclosure` prop, or `appConfig.xMarketing.footer.disclosure`),
+  shaped `{ before, link: { label, to }, after? }`. Renders one `<p>` above the copyright row with a
+  same-tab `NuxtLink` inline. Follows the 1.8.0 `container` prop and `xMarketing.container: '7xl'`.
+  `disclosure: false` suppresses an appConfig value on one instance.
+
+### Fixed
+
+- **`XXSkipLink`** now moves focus to the target on activation (adds `tabindex="-1"` when the
+  target is not focusable), so the next Tab continues inside main content. No style changes.
+
+## [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

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,
@@ -54,6 +57,9 @@ export default defineAppConfig({
     footer: {
       /** Set false to opt out of the default footer in the shipped shell. */
       active: true as boolean,
+      /** 1.9.0 opt-in affiliate disclosure rendered by XXLegal:
+       *  { before: string, link: { label, to }, after?: string } */
+      disclosure: undefined as undefined | { before: string; link: { label: string; to: string }; after?: string },
       logo: {
         src: undefined,
         alt: 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/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

@@ -1,5 +1,6 @@
 <template>
 	<footer
+		v-if="!resolvedDisclosure"
 		class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
 	>
 		<img
@@ -8,9 +9,41 @@
 			: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>
+
+			<nav
+				v-if="resolvedLinks.length"
+				class="text-center md:text-right flex flex-wrap justify-center gap-4"
+			>
+				<a
+					v-for="link in resolvedLinks"
+					:key="link.label"
+					:href="link.href"
+					class="hover:underline"
+					target="_blank"
+				>
+					{{ link.label }}
+				</a>
+			</nav>
+		</div>
+	</footer>
+	<footer
+		v-else
+		class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
+	>
+		<img
+			v-if="resolvedLogo.src"
+			:src="resolvedLogo.src"
+			:alt="resolvedLogo.alt"
+			class="h-6 w-6 mx-auto -mt-4 relative z-10"
+		/>
+		<p :class="disclosureClass" data-x-disclosure>
+			{{ resolvedDisclosure.before }}<NuxtLink :to="resolvedDisclosure.link.to" class="underline hover:text-white">{{ resolvedDisclosure.link.label }}</NuxtLink>{{ resolvedDisclosure.after }}
+		</p>
+		<div :class="innerClass">
 			<div class="text-center md:text-left">
 				{{ resolvedCopyright }}
 			</div>
@@ -51,6 +84,24 @@ 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),
+	},
+	/**
+	 * Affiliate disclosure (1.9.0+, opt-in). { before, link: { label, to }, after? } rendered as one
+	 * <p> with a same-tab NuxtLink inline, above the copyright row. Falls back to
+	 * appConfig.xMarketing.footer.disclosure. Pass false to suppress the appConfig value.
+	 */
+	disclosure: {
+		type: [Object, Boolean],
+		default: null,
+	},
 	/** 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 +109,28 @@ 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";
+});
+
+const isDisclosure = (d) =>
+	!!d && typeof d === "object" && typeof d.before === "string" && !!d.link && !!d.link.label && !!d.link.to;
+const resolvedDisclosure = computed(() => {
+	if (props.disclosure === false) return null;
+	const d = props.disclosure || appConfig?.xMarketing?.footer?.disclosure;
+	return isDisclosure(d) ? { before: d.before, link: d.link, after: d.after || "" } : null;
+});
+const disclosureClass = computed(() => {
+	const c = props.container || (appConfig?.xMarketing?.container === "7xl" ? "lg" : "default");
+	return c === "lg"
+		? "px-4 sm:px-6 lg:px-8 pt-3 max-w-7xl mx-auto text-center md:text-left"
+		: "px-6 pt-3 max-w-screen-2xl mx-auto text-center md:text-left";
+});
+
 // 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,32 @@
+<template>
+	<a :href="`#${target}`" class="x-skip-link" @click="onActivate">{{ 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).
+ */
+const props = defineProps({
+	/** id of the main content element, without # */
+	target: {
+		type: String,
+		default: "main",
+	},
+	/** Link text */
+	label: {
+		type: String,
+		default: "Skip to content",
+	},
+});
+
+/** 1.9.0: move focus to the target so the next Tab continues from main content. */
+function onActivate() {
+	if (typeof document === "undefined") return;
+	const el = document.getElementById(props.target);
+	if (!el) return;
+	if (!el.hasAttribute("tabindex") && el.tabIndex < 0) el.setAttribute("tabindex", "-1");
+	el.focus();
+}
+</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.7.0",
+  "version": "1.9.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",