@nxgt/material-vue 0.41.0 → 0.43.0

package/lib/backgrounds/css/motion.css

@@ -0,0 +1,30 @@
+/* Motion, off by default: a background moves only when the app sets
+ * `animated` (`data-animated`) and the user has not asked for less motion.
+ * The animation is declared nowhere else, so a rule test can check that every
+ * `animation` sits inside this gate. `data-paused` (base.css) stops it while
+ * the page is hidden or the background is off screen. */
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-background-drift {
+		from {
+			transform: translate3d(0, 0, 0) scale(1);
+		}
+		to {
+			transform: translate3d(6%, -8%, 0) scale(1.1);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated] > [data-layer] {
+			animation: nxgt-background-drift 18s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			will-change: transform;
+		}
+		[data-background][data-animated] > [data-layer="blob-2"] {
+			animation-duration: 24s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background][data-animated] > [data-layer="blob-3"] {
+			animation-duration: 30s;
+		}
+	}
+}

package/lib/components/base.css

@@ -56,8 +56,11 @@
 			font-weight: var(--font-weight-medium);
 		}
 		/* A sidebar entry is a link styled as a menu entry: the prose link style
-		   (underline, info tint on hover and focus) must not reach it (#566). */
-		a:not(:has(> button)):not([data-slot="sidebar-menu-item"]) {
+		   (underline, info tint on hover and focus) must not reach it (#566). A component
+		   link that has its own look opts out with the `nxgt-plain-link` class (#575). */
+		a:not(:has(> button)):not([data-slot="sidebar-menu-item"]):not(
+			.nxgt-plain-link
+		) {
 			@apply focus:underline underline-offset-4 hover:underline cursor-pointer;
 			@apply text-info [&_svg]:data-[slot=icon]:text-info hover:bg-info/10 active:bg-info/5 focus:bg-info/15;
 		}

package/lib/components/components.css

@@ -26,3 +26,8 @@
 @import "./ui/fields/opening-hours/opening-hours-item.css";
 @import "./ui/fields/attributes/partials/attribute-form.css";
 @import "./ui/fields/attributes/partials/attribute-values-form.css";
+/* Background (from /components): the gradient preset's CSS, plain and shared
+ * (lib/backgrounds/css). The other presets are opt-in: backgrounds.css. */
+@import "../backgrounds/css/base.css";
+@import "../backgrounds/css/gradient.css";
+@import "../backgrounds/css/motion.css";

package/lib/components/theme-tokens.css

@@ -12,6 +12,9 @@
 	--popover-foreground: oklch(0.129 0.042 264.695);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
+	/* Primary drawn as text or an icon on a normal surface (`text-primary-text`):
+	   the colour itself in light; the dark theme lifts it. */
+	--primary-text: var(--primary);
 	--secondary: oklch(50% 0.1135 245.65);
 	--secondary-foreground: oklch(0.984 0.003 247.858);
 	--muted: oklch(0.968 0.007 247.896);
@@ -71,6 +74,9 @@
 	--popover-foreground: oklch(0.984 0.003 247.858);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
+	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
+	   on --background and --card. */
+	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.5:1
 	   on --background, 5.8:1 on --card); a filled secondary surface mixes it toward --background
 	   (the opaque 70 % mix) to keep 5.2:1 under its near-white text. */
@@ -119,3 +125,18 @@
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.551 0.027 264.364);
 }
+
+/* The tertiary colour (the strix violet), for accents and backgrounds beside
+   primary and secondary. Light: 7.6:1 under its near-white foreground. */
+:root {
+	--tertiary: var(--strix);
+	--tertiary-foreground: oklch(0.984 0.003 247.858);
+}
+
+/* Dark: lifted like --secondary, as it is read as text (7.0:1 on --background,
+   6.3:1 on --card); its foreground is the dark surface, 7.0:1 on the fill. */
+.dark,
+[data-theme="dark"] {
+	--tertiary: oklch(0.7 0.15 310.75);
+	--tertiary-foreground: oklch(0.14 0.036 258.53);
+}

package/lib/nuxt/component-names.ts

@@ -4,6 +4,7 @@ export const COMPONENT_NAMES = [
 	'AccordionContent',
 	'AccordionItem',
 	'AccordionTrigger',
+	'AccountMenu',
 	'ActionCard',
 	'Activity',
 	'ActivityContent',
@@ -237,6 +238,7 @@ export const COMPONENT_NAMES = [
 	'EmptyState',
 	'EnrolmentSecret',
 	'EntityHeader',
+	'ErrorState',
 	'EventCalendar',
 	'EventCard',
 	'EventChip',

package/lib/nuxt/module.ts

@@ -2,33 +2,34 @@ import {
 	addComponent,
 	addImports,
 	addPlugin,
+	addVitePlugin,
 	createResolver,
 	defineNuxtModule,
 	extendViteConfig,
 	useLogger,
 } from '@nuxt/kit';
 import { pdfkitStandardFontFiles } from '@nxgt/material-core/pdfkit-fonts';
+import { nxgtMaterial } from '../vite/index';
 import { COMPOSABLE_IMPORTS, I18N_IMPORTS } from './auto-imports';
 import { COMPONENT_NAMES } from './component-names';
 import { addPdfFontsPlugin, addPdfFontsTrace } from './pdf-fonts';
+import {
+	addInterFont,
+	addZodJitless,
+	BUNDLE_DEPRECATION,
+	bundlesPdf,
+	type NuxtLike,
+	type NuxtVitePartOptions,
+	toPluginOptions,
+} from './plugin-options';
 
-export type ModuleOptions = {
+export type ModuleOptions = NuxtVitePartOptions & {
 	/** Prepended to auto-imported component names. Empty by default. */
 	prefix?: string;
 	/** Auto-import PascalCase components. Default true. */
 	components?: boolean;
 	/** Auto-import composables and i18n helpers. Default true. */
 	imports?: boolean;
-	pdf?: {
-		/**
-		 * Bundle pdfkit's standard fonts into the Nitro server, for
-		 * `@nxgt/material-vue/pdf` in a server whose runtime image has no
-		 * `node_modules` (`nitro.noExternals`). Default false: Nitro keeps the
-		 * renderer external, and the module adds pdfkit's font files to what
-		 * Nitro traces into `.output/server/node_modules`.
-		 */
-		bundleStandardFonts?: boolean;
-	};
 };
 
 /**
@@ -49,14 +50,17 @@ export default defineNuxtModule<ModuleOptions>({
 		components: true,
 		imports: true,
 	},
-	setup(
+	async setup(
 		options: ModuleOptions,
-		nuxt: {
-			options: { rootDir: string; build: { transpile: string[] } };
+		nuxt: NuxtLike & {
+			options: { build: { transpile: string[] } };
 			hook: (name: 'nitro:config', fn: (config: object) => void) => void;
 		},
 	) {
 		const resolver = createResolver(import.meta.url);
+		if (options.pdf?.bundleStandardFonts !== undefined) {
+			useLogger('@nxgt/material-vue').warn(BUNDLE_DEPRECATION);
+		}
 
 		nuxt.options.build.transpile.push('@nxgt/material-vue');
 
@@ -106,9 +110,19 @@ export default defineNuxtModule<ModuleOptions>({
 					logger.warn(`pdf fonts: ${message}`),
 				),
 			);
-			if (options.pdf?.bundleStandardFonts) addPdfFontsPlugin(config);
+			if (bundlesPdf(options)) addPdfFontsPlugin(config);
 		});
 
+		// Fonts and the styles check only; the CSP part is off under Nuxt.
+		addVitePlugin(nxgtMaterial(toPluginOptions(options)));
+		addZodJitless(nuxt, options.csp);
+		await addInterFont(
+			nuxt,
+			options.fonts,
+			resolver.resolve('./runtime/inter.css'),
+			(message) => useLogger('@nxgt/material-vue').warn(message),
+		);
+
 		addPlugin(resolver.resolve('./runtime/plugin'));
 	},
 });

package/lib/nuxt/pdf-fonts.ts

@@ -7,7 +7,7 @@ type NitroConfigLike = {
 
 /**
  * Adds `pdfkitStandardFonts()` to a Nitro config's Rollup plugins, for the
- * `pdf.bundleStandardFonts` module option. Only a fully inlined server
+ * `pdf.bundle` module option. Only a fully inlined server
  * (no `node_modules` in the runtime image) needs it: Nitro keeps
  * `@react-pdf/renderer` external by default, and `addPdfFontsTrace` copies
  * the fonts pdfkit loads into `.output/server/node_modules`.

package/lib/nuxt/plugin-options.ts

@@ -0,0 +1,92 @@
+import { tryResolveModule } from '@nuxt/kit';
+import { type NxgtMaterialOptions, ZOD_JITLESS_SCRIPT } from '../vite/index';
+
+export const INTER_PACKAGE = '@fontsource-variable/inter';
+
+export type NuxtCspOptions = {
+	/**
+	 * Add zod's jitless inline script to every page's head, so zod never
+	 * probes `new Function` under a CSP without `'unsafe-eval'`. Default false:
+	 * the script is inline, so a strict CSP needs `nuxt-security` to stamp it
+	 * (`nonce: true`) or hash it.
+	 */
+	zodJitless?: boolean;
+};
+
+export type NuxtVitePartOptions = {
+	/** Only `zodJitless` applies; the policy itself is `nuxt-security`'s. */
+	csp?: boolean | NuxtCspOptions;
+	/** `katex` defaults to true; `sans: 'inter'` is opt-in (default false). */
+	fonts?: boolean | { katex?: boolean; sans?: 'inter' | false };
+	/** The styles check. Default false in Nuxt: see the guide. */
+	styles?: boolean | { check?: boolean };
+	pdf?: {
+		/** Bundle pdfkit's standard fonts into the Nitro server. */
+		bundle?: boolean;
+		/** @deprecated Use `bundle`. */
+		bundleStandardFonts?: boolean;
+	};
+};
+
+/** The part of the Nuxt instance this file touches. */
+export type NuxtLike = {
+	options: {
+		rootDir: string;
+		css: string[];
+		app: { head?: { script?: unknown[] } };
+	};
+};
+
+/**
+ * What `nxgtMaterial()` is given under Nuxt. The CSP part is always off: Nuxt
+ * has no `index.html` for it to hash or stamp, and a header on the Vite dev
+ * server never reaches the pages Nitro renders. pdf is off too: Nitro owns it
+ * (`addPdfFontsPlugin`), not Vite. Inter is off because the module loads it
+ * through `nuxt.options.css`.
+ */
+export function toPluginOptions(o: NuxtVitePartOptions): NxgtMaterialOptions {
+	const f = typeof o.fonts === 'object' ? o.fonts : {};
+	return {
+		csp: false,
+		pdf: false,
+		fonts: o.fonts === false ? false : { katex: f.katex ?? true, sans: false },
+		styles: o.styles ?? false,
+	};
+}
+
+/** `pdf.bundle`, or its deprecated spelling. */
+export const bundlesPdf = (o: NuxtVitePartOptions): boolean =>
+	Boolean(o.pdf?.bundle ?? o.pdf?.bundleStandardFonts);
+
+export function addZodJitless(nuxt: NuxtLike, csp: NuxtVitePartOptions['csp']) {
+	if (typeof csp !== 'object' || !csp.zodJitless) return;
+	const app = nuxt.options.app;
+	app.head ??= {};
+	app.head.script = [
+		...(app.head.script ?? []),
+		{ innerHTML: ZOD_JITLESS_SCRIPT, tagPriority: 'critical' },
+	];
+}
+
+export async function addInterFont(
+	nuxt: NuxtLike,
+	fonts: NuxtVitePartOptions['fonts'],
+	runtimeCss: string,
+	warn: (message: string) => void,
+	resolve = tryResolveModule,
+): Promise<void> {
+	if (typeof fonts !== 'object' || fonts.sans !== 'inter') return;
+	if (!(await resolve(`${INTER_PACKAGE}/index.css`, nuxt.options.rootDir))) {
+		warn(INTER_MISSING);
+		return;
+	}
+	nuxt.options.css.unshift(`${INTER_PACKAGE}/index.css`, runtimeCss);
+}
+
+/** Inter never fails a build: without the package the system font stays. */
+export const INTER_MISSING =
+	`[nxgt-material] ${INTER_PACKAGE} is not installed: keeping the system font. ` +
+	`Install it to use Inter (bun add ${INTER_PACKAGE}), or drop fonts: { sans: 'inter' }.`;
+
+export const BUNDLE_DEPRECATION =
+	'[nxgt-material] pdf.bundleStandardFonts is deprecated: use pdf.bundle.';

package/lib/nuxt/runtime/inter.css

@@ -0,0 +1,6 @@
+/* Unlayered, so it beats Tailwind's layered `@theme` --font-sans. */
+:root {
+	--font-sans:
+		"Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

package/lib/styles.css

@@ -34,10 +34,14 @@
 	--color-popover-foreground: var(--popover-foreground);
 	--color-primary: var(--primary);
 	--color-primary-foreground: var(--primary-foreground);
+	--color-primary-text: var(--primary-text);
 	--color-primary-container: --alpha(var(--primary-foreground) / 20%);
 	--color-secondary: var(--secondary);
 	--color-secondary-foreground: var(--secondary-foreground);
 	--color-secondary-container: --alpha(var(--secondary-foreground) / 20%);
+	--color-tertiary: var(--tertiary);
+	--color-tertiary-foreground: var(--tertiary-foreground);
+	--color-tertiary-container: --alpha(var(--tertiary) / 20%);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
 	--color-track: var(--track);

package/lib/vite/index.ts

@@ -2,10 +2,27 @@
  * Build-time helpers for the apps that consume this library: Node code that
  * runs inside a consumer's `vite.config.ts`. The one copy lives in
  * `@nxgt/material-core/vite`, shared with the sister library; this entry keeps
- * the subpath consumers already import. See `pdfkitStandardFonts` and
- * `cspAssetsInlineLimit` there.
+ * the subpath consumers already import. `nxgtMaterial()` is the one plugin to
+ * add (a strict CSP, fonts, a styles check); `pdfkitStandardFonts` and
+ * `cspAssetsInlineLimit` are its parts.
  */
+import {
+	nxgtMaterial as coreNxgtMaterial,
+	type NxgtMaterialOptions,
+} from '@nxgt/material-core/vite';
+
 export {
+	CSP_NONCE_PLACEHOLDER,
 	cspAssetsInlineLimit,
+	type NxgtMaterialCspOptions,
+	type NxgtMaterialOptions,
 	pdfkitStandardFonts,
+	ZOD_JITLESS_SCRIPT,
 } from '@nxgt/material-core/vite';
+
+/** The plugin for this library: see the Vite plugin guide. */
+export function nxgtMaterial(
+	options?: NxgtMaterialOptions,
+): ReturnType<typeof coreNxgtMaterial> {
+	return coreNxgtMaterial(options, '@nxgt/material-vue');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.41.0",
+	"version": "0.43.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -20,6 +20,8 @@
 		"lib/vite/index.ts",
 		"lib/styles.css",
 		"lib/map/map.css",
+		"lib/backgrounds/backgrounds.css",
+		"lib/backgrounds/css/*.css",
 		"lib/components/**/*.css",
 		"docs",
 		"README.md",
@@ -43,6 +45,11 @@
 			"types": "./dist/lib/pdf/index.d.ts",
 			"require": "./dist/pdf.js"
 		},
+		"./backgrounds": {
+			"import": "./dist/backgrounds.js",
+			"types": "./dist/lib/backgrounds/index.d.ts",
+			"require": "./dist/backgrounds.js"
+		},
 		"./vite": {
 			"import": "./dist/vite.js",
 			"types": "./dist/lib/vite/index.d.ts",
@@ -91,6 +98,14 @@
 			"style": "./lib/map/map.css",
 			"default": "./lib/map/map.css"
 		},
+		"./backgrounds.css": {
+			"style": "./lib/backgrounds/backgrounds.css",
+			"default": "./lib/backgrounds/backgrounds.css"
+		},
+		"./backgrounds/*.css": {
+			"style": "./lib/backgrounds/css/*.css",
+			"default": "./lib/backgrounds/css/*.css"
+		},
 		"./nuxt": {
 			"types": "./lib/nuxt/module.ts",
 			"import": "./lib/nuxt/module.ts",
@@ -124,7 +139,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.11.1",
+		"@nxgt/material-core": "^0.13.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",
@@ -183,6 +198,7 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^5.3.1",
+		"@fontsource-variable/inter": "^5",
 		"@nxgt/material-testing": "0.0.0",
 		"@nxgt/playwright": "^0.1.0",
 		"@react-pdf/renderer": "^4.9.0",
@@ -190,6 +206,7 @@
 		"@storybook/addon-docs": "10.6.0",
 		"@storybook/addon-vitest": "10.6.0",
 		"@storybook/vue3-vite": "10.6.0",
+		"@tailwindcss/node": "^4.3.3",
 		"@tailwindcss/vite": "^4.3.3",
 		"@tanstack/vue-table": "^9.1.2",
 		"@types/bun": "^1.4.2",
@@ -207,6 +224,7 @@
 		"ajv": "^8.20.0",
 		"globals": "^17.7.0",
 		"leaflet": "^1.9.4",
+		"lightningcss": "^1.33.0",
 		"monaco-editor": "^0.56.0",
 		"pinia": "^3.0.3",
 		"playwright": "^1.63.0",
@@ -222,6 +240,7 @@
 		"vue-tsc": "^3.1.0"
 	},
 	"peerDependencies": {
+		"@fontsource-variable/inter": ">=5",
 		"@react-pdf/renderer": "^4.9.0",
 		"@tanstack/vue-table": "^9.1.2",
 		"@vue-leaflet/vue-leaflet": "^0.10.1",
@@ -235,6 +254,9 @@
 		"vue-router": "^4.5.0 || ^5.0.0"
 	},
 	"peerDependenciesMeta": {
+		"@fontsource-variable/inter": {
+			"optional": true
+		},
 		"@react-pdf/renderer": {
 			"optional": true
 		},