@xenterprises/nuxt-x-marketing 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -30,6 +30,22 @@ 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.

package/app/app.config.ts

@@ -57,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/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
@@ -13,6 +14,40 @@
 				{{ 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>
+
 			<nav
 				v-if="resolvedLinks.length"
 				class="text-center md:text-right flex flex-wrap justify-center gap-4"
@@ -58,6 +93,15 @@ const props = defineProps({
 		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],
@@ -73,6 +117,20 @@ const innerClass = computed(() => {
 		: "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

@@ -1,5 +1,5 @@
 <template>
-	<a :href="`#${target}`" class="x-skip-link">{{ label }}</a>
+	<a :href="`#${target}`" class="x-skip-link" @click="onActivate">{{ label }}</a>
 </template>
 
 <script setup>
@@ -8,7 +8,7 @@
  * Visually hidden until focused (first Tab), then shown top-left.
  * Pair with <main id="main"> (or set target).
  */
-defineProps({
+const props = defineProps({
 	/** id of the main content element, without # */
 	target: {
 		type: String,
@@ -20,4 +20,13 @@ defineProps({
 		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/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",