@nxgt/material-vue 0.31.0 → 0.33.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)
@@ -36,6 +37,9 @@ words in your error.
 - [An end-to-end test no longer finds a required field by a name ending in `*`](#an-end-to-end-test-no-longer-finds-a-required-field-by-a-name-ending-in-)
 - [A test no longer finds `aria-invalid` on an upload field's group or drop zone](#a-test-no-longer-finds-aria-invalid-on-an-upload-fields-group-or-drop-zone)
 - [A test no longer finds `aria-invalid` on a `Switch` row or an `Autocomplete` box](#a-test-no-longer-finds-aria-invalid-on-a-switch-row-or-an-autocomplete-box)
+- [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
+- [`@query-change` runs more often after upgrading](#query-change-runs-more-often-after-upgrading)
+- [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A test no longer finds a sidebar entry by the `button` role](#a-test-no-longer-finds-a-sidebar-entry-by-the-button-role)
@@ -47,6 +51,7 @@ words in your error.
 - [A test no longer finds a calendar day by its number](#a-test-no-longer-finds-a-calendar-day-by-its-number)
 - [A `QRCode`'s `aria-label` is no longer on its wrapper](#a-qrcodes-aria-label-is-no-longer-on-its-wrapper)
 - [A `CheckboxGroup` or `RadioGroupField` option selected by `#<id>-<value>` stops matching](#a-checkboxgroup-or-radiogroupfield-option-selected-by-id-value-stops-matching)
+- [One option of a `RadioGroupField` cannot be disabled](#one-option-of-a-radiogroupfield-cannot-be-disabled)
 - [A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container](#a-tables-id-aria--or-style-is-no-longer-on-its-scrolling-container)
 
 **Feedback**
@@ -200,6 +205,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)
 
 ---
@@ -364,6 +377,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
@@ -578,6 +606,56 @@ await expect(page.getByRole('switch', { name: 'Notifications' })).toHaveAttribut
 await expect(page.getByLabel('Country')).toHaveAttribute('aria-invalid', 'true');
 ```
 
+### An `Autocomplete` lists more options than before, or "ecole" finds "École"
+
+**When:** after upgrading to 0.31.0, typing in an `Autocomplete` with local
+`options` keeps options it used to drop: `e` keeps "Évry", `orle` keeps
+"Orléans".
+**Why:** local matching is now accent-insensitive by default (`filter`
+defaults to `'accent-insensitive'`): the label or value and the query are
+both lowercased in the provider's language and stripped of their accents
+before they are compared. Before, an accent had to be typed to match.
+**Fix:** nothing, if that is what your users expect. To match as before,
+pass your own `filter`; to show `options` exactly as you give them (they are
+filtered on your server), pass `filter="none"`:
+
+```vue
+<!-- Back to a plain case-insensitive match, accents counted: -->
+<Autocomplete
+  v-model="value"
+  :options="options"
+  :filter="(option, query) => option.label.toLowerCase().includes(query.toLowerCase())"
+/>
+```
+
+### `@query-change` runs more often after upgrading
+
+**When:** after upgrading to 0.31.0, `@query-change` is called sooner after the
+user stops typing, so a server you fetch from there gets more requests.
+**Why:** the pause it waits for is now `debounceMs`, 250 ms by default; it
+was a fixed 300 ms.
+**Fix:** set the pause you had, `:debounce-ms="300"`, or move the fetch to `on-search`, which
+also aborts the previous request and drops a stale response.
+
+### An older search's results replace the newer ones in an `Autocomplete`
+
+**When:** you fetch `options` yourself from `@query-change`, and a slow response
+for an earlier query lands after a faster one for the latest: the list shows
+the results of what the user typed before.
+**Why:** each of your requests resolves whenever the server answers, and
+the last one to resolve wins.
+**Fix:** use `on-search`. It hands each search an `AbortSignal` (pass it to
+`fetch`), aborts the previous search, and drops any response that lands for
+an older query, even from an API that ignores the signal:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :on-search="(query, { signal }) =>
+    fetch(`/api/people?q=${encodeURIComponent(query)}`, { signal }).then((r) => r.json())"
+/>
+```
+
 ### A test no longer finds `aria-invalid` on an `OtpField` slot
 
 **When:** `[data-slot="input-otp-slot"][aria-invalid]` (or
@@ -793,6 +871,30 @@ which a `group` may not carry: assert its description instead,
 hidden hint sits inside the helper element, so match its text with
 `getByText('Pick any.', { exact: false })` or the description with a RegExp.
 
+### One option of a `RadioGroupField` cannot be disabled
+
+**When:** you need one choice greyed out (a person already linked, a plan the
+account cannot take) and `disabled` on the group disables all of them. Before
+this release the options had no `disabled`, so apps listed the unavailable ones
+apart or hand-built the group from `RadioGroupItem`.
+**Why:** an option was only `{ value, label }`; `disabled` was the group's.
+**Fix:** upgrade, and set `disabled` on the option. It is rendered and
+announced as disabled, its label is muted (still 4.5:1) and the arrow keys
+skip it; the group's own `disabled` still disables every option. An option
+that is disabled while it is the current `value` stays checked, as in the
+Radix and Reka primitives:
+
+```vue
+<RadioGroupField
+  v-model="person"
+  label="Person"
+  :options="[
+    { value: 'ada', label: 'Ada' },
+    { value: 'bob', label: 'Bob (already linked)', disabled: true },
+  ]"
+/>
+```
+
 ### A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container
 
 **When:** after upgrading to 0.24.0, either:
@@ -3635,6 +3737,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,10 +1,15 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.31.0",
+	"version": "0.33.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
 	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/softistx/nxgt-material.git",
+		"directory": "packages/material-vue"
+	},
 	"type": "module",
 	"files": [
 		"dist",
@@ -23,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": {
@@ -101,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",
@@ -119,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.7.1",
+		"@nxgt/material-core": "^0.9.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",

package/dist/lib/components/ui/fields/search-field/debounce.d.ts

@@ -1,5 +0,0 @@
-export type Debounced<Args extends unknown[]> = ((...args: Args) => void) & {
-    cancel: () => void;
-    flush: () => void;
-};
-export declare function debounce<Args extends unknown[]>(fn: (...args: Args) => void, ms: number): Debounced<Args>;