@nxgt/material-vue 0.32.0 → 0.34.0

package/docs/troubleshooting.md

@@ -17,6 +17,7 @@ words in your error.
 **Styles & assets**
 
 - [Components render unstyled, with no error](#components-render-unstyled-with-no-error)
+- [Math renders in the system fonts](#math-renders-in-the-system-fonts)
 - [`<Icon>` renders nothing](#icon-renders-nothing)
 - [An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry](#an-accessibility-audit-reports-low-contrast-on-a-badge-a-button-a-toast-or-a-menu-entry)
 - [`ARIA hidden element must not be focusable or contain focusable elements`](#aria-hidden-element-must-not-be-focusable-or-contain-focusable-elements)
@@ -157,6 +158,7 @@ words in your error.
 - [A test no longer finds an icon badge by role `button`, or an `Icon` named "Icon {name}" inside a button](#a-test-no-longer-finds-an-icon-badge-by-role-button-or-an-icon-named-icon-name-inside-a-button)
 - [A button named "Icon plus Add" is now named "Add"](#a-button-named-icon-plus-add-is-now-named-add)
 - [`An invalid form control with name='…' is not focusable` (an `UploadField`)](#an-invalid-form-control-with-name-is-not-focusable)
+- [The date field shows MM/DD/YYYY on a French page](#the-date-field-shows-mmddyyyy-on-a-french-page)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is nowhere in the page](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-nowhere-in-the-page)
 - [A test no longer finds the label or helper text inside a date or time picker's trigger](#a-test-no-longer-finds-the-label-or-helper-text-inside-a-date-or-time-pickers-trigger)
 - [A test no longer finds a `DurationField` input by the field's label, or a `Slider`'s `aria-label` on its root](#a-test-no-longer-finds-a-durationfield-input-by-the-fields-label-or-a-sliders-aria-label-on-its-root)
@@ -204,6 +206,14 @@ words in your error.
 - [`@page-change` reports another page after opening on `initialPage`](#page-change-reports-another-page-after-opening-on-initialpage)
 - [`FilePreview` shows a file card with a Download link for a PDF](#filepreview-shows-a-file-card-with-a-download-link-for-a-pdf)
 - [`FilePreview` says "This file could not be previewed."](#filepreview-says-this-file-could-not-be-previewed)
+
+**Content Security Policy**
+
+- [`Refused to apply inline style because it violates the following Content Security Policy directive`](#refused-to-apply-inline-style-because-it-violates-the-following-content-security-policy-directive)
+- [`Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`](#refused-to-load-the-font-datafontwoff2-because-it-violates-the-following-content-security-policy-directive-font-src-self)
+- [`Refused to load the font 'https://fonts.gstatic.com/…' because it violates the following Content Security Policy directive: "font-src 'self'"`](#refused-to-load-the-font-httpsfontsgstaticcom-because-it-violates-the-following-content-security-policy-directive-font-src-self)
+- [`Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script`](#refused-to-evaluate-a-string-as-javascript-because-unsafe-eval-is-not-an-allowed-source-of-script)
+
 - [Reporting a bug](#reporting-a-bug)
 
 ---
@@ -368,6 +378,21 @@ to 0.22.0.
 stylesheet up to 0.21.0: an app without Tailwind adds
 `@import "vue-advanced-cropper/dist/style.css";` on an older version too.
 
+### Math renders in the system fonts
+
+**When:** a formula in `Markdown` (or `ChatMarkdown`) shows in a serif or
+sans-serif system font: letters look upright or thin, `\mathbb{R}` is a
+plain R, large brackets and roots are mis-sized, and the network tab shows a
+`404` for `fonts/katex/KaTeX_*.woff2`, or no request at all.
+**Why:** the compiled stylesheet (`dist/material-vue.css`) loads KaTeX's fonts from
+`dist/fonts/katex/`, through a relative `url()`. The stylesheet was served
+without that folder beside it (copied alone to a public folder or a CDN).
+**Fix:** serve `dist/fonts/` next to the stylesheet, at the same relative
+path, or let your bundler import it through the `style` condition
+(`@import "@nxgt/material-vue";`), which emits the fonts as files (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section). On the Tailwind route
+(`@nxgt/material-vue/styles.css`) the fonts come from `katex` itself, and your bundler
+emits them.
+
 ### `<Icon>` renders nothing
 
 **When:** every `Icon` (and anything that uses one: the app shell menu, the
@@ -2905,6 +2930,27 @@ stops on it with the browser's own "select a file" message. If vee-validate
 validates the form (`UploadFormField`) and you do not want the browser's check,
 put `novalidate` on the `<form>`.
 
+### The date field shows MM/DD/YYYY on a French page
+
+**When:** a `DateField`, `DateFormField`, `DateRangeField` or `DateRangeFormField` (and a `TimeField`, which shows `2:30 PM` instead of `14:30`) under a French
+`I18nProvider` shows 1 September 2028 as `09/01/2028` in its trigger, while the
+calendar inside it is in French. No error is printed.
+**Why:** the trigger formatted the date without a locale, so it was always
+English (`MM/DD/YYYY`), whatever the language of the page.
+**Fix:** upgrade: the trigger now writes the date (and the time, for a
+`TimeField` or a `DateRangeField` with `withTime`) in the language of the
+page: the `I18nProvider` language, else English. Mount the provider above the
+field:
+
+```vue
+<I18nProvider initial-language="fr">
+  <DateField v-model="value" label="Livraison" />
+</I18nProvider>
+```
+
+With no provider, or in English, the output is unchanged (`09/01/2028`). The
+document's `<html lang>` and the browser's language are not read.
+
 ### An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is nowhere in the page
 
 **When:** with 0.21.0 or earlier: `getByTestId` finds nothing, a hint is not read as
@@ -3713,6 +3759,121 @@ beginning is shown, with "Showing the first … of this file." below.
 
 ---
 
+## Content Security Policy
+
+How to set up the policy is in the [Content Security Policy guide](guides/csp.md).
+
+### `Refused to apply inline style because it violates the following Content Security Policy directive`
+
+**When:** a component mounts, or a modal opens, on a page that sends
+`style-src-elem` or `style-src` without `'unsafe-inline'`. The message ends
+with `style-src-elem` for a `<style>` element and `style-src-attr` for a
+`style="…"` attribute.
+**Why:** a `<style>` element needs the page's nonce, an attribute cannot carry
+one. The usual sources are the components listed in
+[the guide](guides/csp.md#style-elements-the-components-inject). reka's
+`Select`, `Combobox`, `ScrollArea` and `Splitter`, `InputOTP` and
+`RichTextEditor` take the nonce from `NonceProvider`, and report this when the
+app has none (or gives it another nonce than the header's). A `<style>` in
+mermaid's SVG is a [known gap](guides/csp.md#known-gaps). `Toaster`,
+`ImageCropper`, `Spinner` and `PdfReader` create none: if one of them looks
+unstyled, the app does not import `styles.css`.
+**Fix:** for `style-src-attr`, allow attributes: they cannot be nonced.
+
+```http
+Content-Security-Policy: style-src-elem 'self' 'nonce-X'; style-src-attr 'unsafe-inline'
+```
+
+For `style-src-elem`, hand the nonce over:
+
+```vue
+<NonceProvider :nonce="nonce">
+  <!-- the app -->
+</NonceProvider>
+```
+
+on the server and on the client, with the nonce of the header
+([the guide](guides/csp.md#nonceprovider); with Nuxt, nuxt-security's
+`useNonce()` on the server). For a mermaid diagram, serve that route with
+`'unsafe-inline'` in `style-src-elem` instead of the nonce (a nonce in the
+same directive makes browsers ignore `'unsafe-inline'`).
+
+Once a page has a header-delivered CSP, browsers blank the `nonce` attribute,
+so Vue's development build may log `Hydration attribute mismatch` when it
+hydrates a server-rendered `<style nonce>`. The warning is harmless.
+
+### `Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`
+
+**When:** a formula renders in `Markdown`, with `font-src 'self'`.
+**Why:** a KaTeX font reached the browser as a `data:` URI. Vite inlines any
+asset under its 4096-byte limit, and `KaTeX_Size3-Regular.woff2` is 3.6 KB:
+on the Tailwind route (`@nxgt/material-vue/styles.css`), and on the compiled route
+when your Vite build processes `dist/material-vue.css`. Earlier versions' compiled
+stylesheet inlined all 60 KaTeX fonts itself; it now ships them as files.
+**Fix:** upgrade, then stop Vite from inlining fonts:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    assetsInlineLimit: (file) => (/\.(woff2?|ttf)$/.test(file) ? false : undefined),
+  },
+});
+```
+
+### `Refused to load the font 'https://fonts.gstatic.com/…' because it violates the following Content Security Policy directive: "font-src 'self'"`
+
+**When:** the page loads a font from `https://fonts.googleapis.com` or
+`https://fonts.gstatic.com`, or from `rsms.me`, on a page whose `font-src` is
+`'self'` (the message names the font's URL). The stylesheet that declares it
+is refused too, as a `style-src-elem` violation.
+**Why:** the app's `<link>` or `@import` for Inter asks another origin for CSS
+and woff2 files, and the policy allows only your own.
+**Fix:** host the font: install `@fontsource-variable/inter`, import it, and set
+`--font-sans` to `"Inter Variable"` followed by the system stack in the root
+`@theme`. The woff2 files then come from your build
+([CSP guide](guides/csp.md#inter--the-sans-font)):
+
+```css
+@import "@fontsource-variable/inter";
+
+@theme {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Delete the Google Fonts `<link>`, and the `fonts.googleapis.com` and
+`fonts.gstatic.com` sources you may have added to the policy.
+
+### `Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script`
+
+**When:** an `EvalError` with this message, or a CSP report with
+`effectiveDirective: script-src` and `sample: ''`, from a stack that ends in
+zod (`allowsEval`, in `zod/v4/core/util.js`), on a page whose `script-src`
+has no `'unsafe-eval'`. Nothing visibly breaks.
+**Why:** the first `z.object()` built in the page makes zod test whether
+`new Function` works. The error is caught, but the browser sends the
+violation report. The library builds no schema at import any more (zod is
+not bundled, its schemas are factories), so the report comes from a schema
+built before `z.config({ jitless: true })` ran: one of yours, or the first
+render of a component that validates. Versions that bundled zod built their
+own schemas at import, before the app could configure anything.
+**Fix:** switch zod to its interpreter in a module the app imports before
+anything else, and build your own schemas inside functions rather than at
+module scope when that module may load first
+([CSP guide](guides/csp.md#zod-and-unsafe-eval)):
+
+```ts
+// zod-config.ts, imported first in the app entry
+import { z } from 'zod';
+
+z.config({ jitless: true });
+```
+
+---
+
 ## Reporting a bug
 
 If an error comes from inside this package and none of the entries above

package/lib/components/components.css

@@ -6,7 +6,8 @@
  * The code theme (CodeBlock); PdfReader's text layer, highlights and pdf.js's
  * annotation layer; KaTeX (Markdown), highlight.js (RichTextEditor code
  * blocks), vue-sonner (Toaster), vue-advanced-cropper (ImageCropper); and the
- * components styled by a stylesheet of their own. */
+ * components styled by a stylesheet of their own, input-otp.css among them:
+ * the rules vue-input-otp also injects, here for a strict CSP. */
 @import "./ui/display/code/code-moonlight.css";
 @import "./ui/media/pdf-viewer/pdf-viewer.css";
 @import "./ui/media/pdf-viewer/pdf-annotation-layer.css";
@@ -15,6 +16,7 @@
 @import "vue-sonner/style.css";
 @import "vue-advanced-cropper/dist/style.css";
 @import "./ui/feedback/spinner/spinner.css";
+@import "./ui/fields/otp-field/input-otp.css";
 @import "./ui/media/image-cropper/partials/image-cropper-canvas.css";
 @import "./ui/actions/button-group/button-group.css";
 @import "./ui/primitives/label/label.css";

package/lib/components/ui/fields/otp-field/input-otp.css

@@ -0,0 +1,48 @@
+/* The rules input-otp (React, 1.4.2) and vue-input-otp (0.4.0) add on mount,
+ * through `insertRule` into a `<style id="input-otp-style">`: the hidden
+ * input's caret, selection and autofill stay invisible behind the slots.
+ * Here so a strict CSP blocks nothing. @nxgt/material strips input-otp's
+ * injection at build (build/strip-style-injection.ts); vue-input-otp is
+ * external, still injects, and takes the nonce (NonceProvider). The same file
+ * in both libraries (scripts/shared-paths.ts). */
+/* biome-ignore-all lint/complexity/noImportantStyles: input-otp's own rules */
+[data-input-otp]::selection {
+	background: transparent !important;
+	color: transparent !important;
+}
+
+/* Two rules: a browser that does not know one pseudo-class drops the list. */
+[data-input-otp]:autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+[data-input-otp]:-webkit-autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+@supports (-webkit-touch-callout: none) {
+	[data-input-otp] {
+		letter-spacing: -0.6em !important;
+		font-weight: 100 !important;
+		font-stretch: ultra-condensed;
+		font-optical-sizing: none !important;
+		left: -1px !important;
+		right: 1px !important;
+	}
+}
+
+[data-input-otp] + * {
+	pointer-events: all !important;
+}

package/lib/nuxt/auto-imports.ts

@@ -11,6 +11,7 @@ export const COMPOSABLE_IMPORTS = [
 	'useOptions',
 	'useSearchParam',
 	'useAllowedTransitions',
+	'useCspNonce',
 	'resolveTheme',
 	'applyResolvedTheme',
 ] as const;

package/lib/nuxt/component-names.ts

@@ -349,6 +349,7 @@ export const COMPONENT_NAMES = [
 	'NavigationRail',
 	'NetworkUploadField',
 	'NetworkUploadFormField',
+	'NonceProvider',
 	'NoticeCard',
 	'Notifications',
 	'NumberField',

package/lib/vite/index.ts

@@ -2,6 +2,10 @@
  * 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` there.
+ * the subpath consumers already import. See `pdfkitStandardFonts` and
+ * `cspAssetsInlineLimit` there.
  */
-export { pdfkitStandardFonts } from '@nxgt/material-core/vite';
+export {
+	cspAssetsInlineLimit,
+	pdfkitStandardFonts,
+} from '@nxgt/material-core/vite';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.32.0",
+	"version": "0.34.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -28,9 +28,9 @@
 	],
 	"exports": {
 		".": {
-			"import": "./dist/main.js",
 			"style": "./dist/material-vue.css",
 			"types": "./dist/lib/main.d.ts",
+			"import": "./dist/main.js",
 			"require": "./dist/main.js"
 		},
 		"./components": {
@@ -106,7 +106,7 @@
 		"dev": "bun storybook",
 		"generate:nuxt-names": "bun scripts/generate-nuxt-names.ts",
 		"build": "bun run generate:nuxt-names && vue-tsc -b && vite build",
-		"postbuild": "bun ../../scripts/copy-styles.ts && bun run verify:ssr && bun run verify:dts",
+		"postbuild": "bun ../../scripts/copy-styles.ts && bun ../../scripts/katex-fonts.ts && bun run verify:ssr && bun run verify:dts",
 		"prepack": "bun run verify:dts",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.8.0",
+		"@nxgt/material-core": "^0.9.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",