@xenterprises/nuxt-x-marketing 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -30,6 +30,35 @@ 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.10.0] - 2026-10-12
+
+Additive; existing output (including markdown tables) is identical to 1.9.0.
+
+### Added
+
+- **`XMarkTable`**: `columns` (`[{ key, label, align? }]`), `rows`, `caption` (a real `<caption>`),
+  `container` (XMarkSection values), `striped`, `scrollLabel`, `rowKey`, and `#cell-<key>` slots.
+  The table sits in an `overflow-x-auto` wrapper that is a keyboard-focusable `role="region"`
+  named by `scrollLabel`, then `caption`, then "Table".
+- **`XMarkProseTable`** (opt-in): Nuxt UI's ProseTable with its scroll wrapper made a labelled,
+  focusable region. Enable with `content: { renderer: { alias: { table: 'XMarkProseTable' } } }`.
+
+## [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/assets/css/x-marketing.css

@@ -724,3 +724,12 @@ html.x-container-7xl {
   outline: 2px solid #111;
   outline-offset: 2px;
 }
+
+/* 1.10.0: XMarkTable / XMarkProseTable scroll region focus ring (keyboard only) */
+.x-table-scroll:focus-visible {
+  outline: 2px solid #111827;
+  outline-offset: 2px;
+}
+.dark .x-table-scroll:focus-visible {
+  outline-color: #ffffff;
+}

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

@@ -0,0 +1,120 @@
+<template>
+	<div :class="containerClasses">
+		<div
+			class="x-table-scroll overflow-x-auto"
+			role="region"
+			tabindex="0"
+			:aria-label="regionLabel"
+		>
+			<table class="w-full border-collapse text-left text-sm text-neutral-700 dark:text-neutral-300">
+				<caption
+					v-if="caption"
+					class="caption-top pb-3 text-left text-sm font-medium text-neutral-900 dark:text-white"
+				>
+					{{ caption }}
+				</caption>
+				<thead>
+					<tr class="border-b border-neutral-300 dark:border-neutral-700">
+						<th
+							v-for="col in columns"
+							:key="col.key"
+							scope="col"
+							class="whitespace-nowrap px-4 py-3 font-semibold text-neutral-900 dark:text-white"
+							:class="alignClass(col.align)"
+						>
+							{{ col.label }}
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="(row, i) in rows"
+						:key="rowKey ? row[rowKey] : i"
+						class="border-b border-neutral-200 dark:border-neutral-800"
+						:class="striped && i % 2 === 1 ? 'bg-neutral-50 dark:bg-neutral-900' : ''"
+					>
+						<td
+							v-for="col in columns"
+							:key="col.key"
+							class="px-4 py-3 align-top"
+							:class="alignClass(col.align)"
+						>
+							<slot
+								:name="`cell-${col.key}`"
+								:row="row"
+								:value="row[col.key]"
+							>
+								{{ row[col.key] }}
+							</slot>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</template>
+
+<script setup>
+/**
+ * XMarkTable (1.10.0) - simple data table for marketing pages.
+ * The scroll wrapper is a labelled, keyboard-focusable region so wide tables can be
+ * scrolled with arrow keys on small screens.
+ */
+const props = defineProps({
+	/** [{ key, label, align?: 'left' | 'center' | 'right' }] */
+	columns: {
+		type: Array,
+		required: true,
+		validator: (v) => Array.isArray(v) && v.every((c) => c && typeof c.key === "string" && typeof c.label === "string"),
+	},
+	/** Array of plain objects keyed by column key */
+	rows: {
+		type: Array,
+		default: () => [],
+	},
+	/** Rendered as a real <caption>; also names the scroll region */
+	caption: {
+		type: String,
+		default: "",
+	},
+	/** Same values and classes as XMarkSection container */
+	container: {
+		type: String,
+		default: "lg",
+		validator: (v) => ["sm", "md", "lg", "xl", "full", "none"].includes(v),
+	},
+	/** Zebra rows */
+	striped: {
+		type: Boolean,
+		default: false,
+	},
+	/** Accessible name for the scroll region; defaults to caption, then "Table" */
+	scrollLabel: {
+		type: String,
+		default: "",
+	},
+	/** Optional row field used as the v-for key */
+	rowKey: {
+		type: String,
+		default: "",
+	},
+});
+
+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 regionLabel = computed(() => props.scrollLabel || props.caption || "Table");
+
+function alignClass(a) {
+	return a === "center" ? "text-center" : a === "right" ? "text-right" : "text-left";
+}
+</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
@@ -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/app/components/content/XMarkProseTable.vue

@@ -0,0 +1,24 @@
+<template>
+	<ProseTable
+		role="region"
+		tabindex="0"
+		:aria-label="label"
+	>
+		<slot />
+	</ProseTable>
+</template>
+
+<script setup>
+/**
+ * XMarkProseTable (1.10.0, opt-in) - Nuxt UI's ProseTable (same look, same overflow-x-auto
+ * wrapper) with the wrapper made a labelled, keyboard-focusable region.
+ * Not used unless mapped: nuxt.config `content: { renderer: { alias: { table: 'XMarkProseTable' } } }`.
+ */
+defineProps({
+	/** Accessible name of the scroll region */
+	label: {
+		type: String,
+		default: "Scrollable table",
+	},
+});
+</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.10.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",