@nxgt/material 3.93.0 → 3.94.0

package/docs/guides/csp.md

@@ -38,7 +38,7 @@ Components outside this table need nothing more. Measured per component:
 | --- | --- | --- |
 | `PdfReader` | `worker-src 'self'` (the worker is a file of the package), `connect-src` for the PDF's and the assets' origins, and `script-src 'wasm-unsafe-eval'` for the JPEG 2000 and ICC WebAssembly decoders (without it: a JavaScript fallback for JPEG 2000, device colours for ICC profiles) | worker checked in the same Playwright run (Vite production build under `worker-src 'self'`), the rest read from pdf.js's code: [PDF reader guide](pdf-reader.md#content-security-policy) |
 | `CodeEditor`, `CodeDiff` (Monaco) | `@monaco-editor/react` loads Monaco from `https://cdn.jsdelivr.net/npm/monaco-editor@…/min/vs` by default: that host in `style-src-elem` (Monaco's CSS) and `font-src` (its icon font), plus `worker-src blob:` | not yet verified in a browser. Safe default: allow `https://cdn.jsdelivr.net` in `script-src`, `style-src-elem` and `font-src`, and `worker-src blob:`; or stay on `'self'` by [serving Monaco yourself](#monaco-on-self) |
-| `Markdown` (maths, mermaid, code) | nothing beyond the policy above, in a client render | checked in Chromium under that policy with `style-src-attr 'none'`, no `img-src data:` and no `'unsafe-eval'`: [Markdown under a strict CSP](#markdown-katex-mermaid-and-code-under-a-strict-csp) |
+| `Markdown` (maths, mermaid, code) | nothing beyond the policy above, on the server or the client (math needs `NonceProvider`); mermaid's mindmap and architecture diagrams still add an un-nonced `<style>` | checked in Chromium under that policy with `style-src-attr 'none'`, no `img-src data:` and no `'unsafe-eval'`: [Markdown under a strict CSP](#markdown-katex-mermaid-and-code-under-a-strict-csp) |
 | `RichTextViewer` (`@nxgt/material/editor/viewer`) | none, but it emits `style` attributes: a text colour, a highlight, a text alignment or a table cell's background in the saved document becomes an inline `style` (only allow-listed properties with plain values survive), so a page that shows such a document needs `style-src-attr 'unsafe-inline'`. A document with none sends no style | measured by reading the renderers; a strict `style-src-attr 'none'` page shows the document without those colours |
 | `Camera` | none: `getUserMedia` is not governed by CSP; the captured photo is a `data:` image | `media-src` for the live preview is not yet verified. Safe default: `media-src 'self' blob:` (a `srcObject` stream usually needs nothing) |
 | `MediaPlayer` with `hlsStreaming()` | `connect-src` and `media-src blob:` for the stream; `worker-src blob:` only with `config: { enableWorker: true }` (the adapter defaults to no worker) | see the [streaming guide](media-streaming.md#content-security-policy) |
@@ -211,6 +211,7 @@ mermaid and pdf.js's font fallback are the [known gaps](#known-gaps).
 | `Spinner` (variant `4`), `PdfReader` (search highlights, night mode) | nothing | their rules are in the stylesheet (`spinner.css`, `pdf-viewer.css`) |
 | `Progress`, `CircularProgress` | nothing | the server draws SVG percentages, SMIL and path data, and the rules are in the stylesheet (`progress.css`); no `style` attribute |
 | `ScrollArea`, `Select` (Radix) | the nonce | Radix renders a `<style>` element with `NonceProvider`'s nonce: wrap the app in [`NonceProvider`](#nonceprovider) |
+| `Markdown` (math) | the nonce | one `<style>` of `mk-` rules replacing KaTeX's `style` attributes, with `NonceProvider`'s nonce |
 | `RichTextEditor` (tiptap) | the nonce | tiptap, on mount, with `NonceProvider`'s nonce as `injectNonce` |
 | `Dialog`, `AlertDialog`, `Sheet`, `ConfirmationDialog`, … (Radix scroll lock) | the nonce | react-style-singleton, when a modal opens: see below |
 
@@ -278,8 +279,17 @@ the page carry the nonce in its meta tag).
   (`data-scheme`), and `maxHeight` is a custom property written through the
   CSSOM in a layout effect (a server-rendered block is full height until
   hydration).
-- **KaTeX**: on a client render React writes its styles through the CSSOM.
-  Its fonts are files ([KaTeX fonts](#katex-fonts)).
+- **KaTeX**: its markup carries inline `style="…"` attributes (offsets,
+  heights, widths), which `style-src-attr 'none'` blocks on a server render
+  (hydration does not rewrite them). `Markdown` turns each into a class
+  (`mk-<hash>`, one per distinct declaration list, the same on the server and
+  the client) and appends one `<style>` with the rules, given the nonce of the
+  nearest `NonceProvider`: `style-src-elem 'nonce-…'` allows it, and the
+  formula is laid out as before, with server and client rendering the same
+  markup. So `NonceProvider` is required for math under a nonce policy
+  (without it the `<style>` has no nonce and is blocked); a declaration that
+  is not a plain `property:value` is dropped, never copied to the sheet. Its
+  fonts are files ([KaTeX fonts](#katex-fonts)).
 - **Mermaid**: the diagram stays an image, now from a `blob:` URL (revoked when
   the diagram goes), so the SVG's own `<style>` and `style` attributes live in
   the image and the page needs neither `data:` nor `style-src-attr` for them.
@@ -293,11 +303,13 @@ the page carry the nonce in its meta tag).
   each is a pass-through once the last render ends and is restored only if
   no other script patched it since). Unrelated calls, such as an editor
   parsing HTML, are left alone.
-- **Left**: a page whose HTML the server renders with math carries KaTeX's
-  `style="…"` attributes in the markup, which `style-src-attr 'none'` blocks
-  (the formula loses its spacing until `style-src-attr 'unsafe-inline'`, or a
-  client-only render of the `Markdown`). Mermaid's mindmap and architecture
-  diagrams add a `<style>` to `<head>` ([known gaps](#known-gaps)).
+- **Left**: mermaid's mindmap and architecture diagrams (cytoscape) add a
+  `<style>` to `<head>` with no nonce, which `style-src-elem 'nonce-…'` blocks:
+  the diagram still draws, without that sheet's rules. The classes mechanism
+  above does not reach it; allow that element (a hash of the sheet, or
+  `style-src-elem 'unsafe-inline'`) only if you show those two diagram types
+  ([known gaps](#known-gaps)). Flowcharts, sequence and the other types are
+  checked and need nothing.
 
 ### Known gaps
 

package/docs/guides/forms.md

@@ -490,6 +490,7 @@ or fails validation.
 | --- | --- | --- |
 | `TextField` · `TextFormField` | `string`. With `type="number"`: `number \| null` | `''` |
 | `TextareaField` · `TextareaFormField` | `string` | `''` |
+| `MarkdownTextareaField` · `MarkdownTextareaFormField` | `string` (Markdown source) | `''` |
 | `EmailField` · `EmailFormField` | `string` (as typed; the field shows its own "Enter a valid email" hint on blur) | `''` |
 | `PasswordField` · `PasswordFormField` | `string` | `''` |
 | `NumberField` · `NumberFormField` | `number \| null`. `null` when cleared; clamped to `min` / `max` on blur | `null` |

package/docs/guides/i18n.md

@@ -247,7 +247,7 @@ until the bar is drawn), the `ThreadLayout` stepper's `nav` name `material.navig
 single value's input, when nothing names the slider, `material.slider.value`
 ("Value", "Valeur"). `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
 "Copy failed"). An overflowing `TabsList`'s scroll buttons read
-`material.tabs.scroll-left` / `scroll-right` ("Scroll tabs left" / "Scroll tabs right"). The other icon-only buttons are named from it too: the
+`material.tabs.scroll-left` / `scroll-right` ("Scroll tabs left" / "Scroll tabs right"). `QuestionCard`'s rich content reads `material.quiz.rich.*` (the hint button and names "Show hint 1 of 3" / "Hint 1 of 3", "About each answer", "References", "Examples" with its Input / Expected headers). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
 (`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
 (`material.table.labels.expand`), its loading status, "Loading data…" /

package/docs/troubleshooting.md

@@ -43,6 +43,7 @@ words in your error.
 - [`IconRefError` from `IconSpritesProvider`](#iconreferror-from-iconspritesprovider)
 - [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)
+- [An `EntityHeader` metadata test that measured the label beside its value now fails](#an-entityheader-metadata-test-that-measured-the-label-beside-its-value-now-fails)
 - [A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`](#a-control-in-an-entityheaders-icon-is-hidden-from-assistive-tech-squashed-and-reports-aria-hidden-focus)
 - [A `Switcher` in link mode leaves focus on the trigger after a navigation, and the new page's title never gets it](#a-switcher-in-link-mode-leaves-focus-on-the-trigger-after-a-navigation-and-the-new-pages-title-never-gets-it)
 - [An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link](#an-accessibility-audit-reports-low-contrast-on-a-tonal-or-outlined-button-a-selected-list-tile-or-a-hovered-badge-link)
@@ -1152,6 +1153,21 @@ Elements mounted after the layer opens are not made inert: mount them
 first, or pass them to `inertOthers` in `keep` when they must stay
 reachable.
 
+### An `EntityHeader` metadata test that measured the label beside its value now fails
+
+**When:** after the metadata became a grid, a test reads the label and the value
+of an `EntityHeader` on one line, or measures their positions or heights.
+**Why:** each fact is now a grid cell with the label (`dt`) above its value
+(`dd`), as many columns as the width allows; a link or a text button in a value
+keeps the text's height.
+**Fix:** update the numbers, or assert on the text and on
+`data-slot="entity-metadata"` instead of the geometry.
+
+```tsx
+const meta = container.querySelector('[data-slot="entity-metadata"]');
+expect(meta).toHaveTextContent('Owner');
+```
+
 ### A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`
 
 **When:** an `EntityHeader` gets a `Switcher`, a button or a link as its `icon`.
@@ -8086,14 +8102,14 @@ with `style-src-elem` for a `<style>` element and `style-src-attr` for a
 **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).
-`ScrollArea`, `Select`, `RichTextEditor` and the scroll lock of dialogs and
+`ScrollArea`, `Select`, `RichTextEditor`, `Markdown` (math) and the scroll lock of dialogs and
 sheets take the nonce from `NonceProvider`, and report this when the app has
-none (or gives it another nonce than the header's). Mermaid and KaTeX
-need none of this on a client render
+none (or gives it another nonce than the header's). Math needs no
+`style-src-attr` on the server or the client, but needs `NonceProvider` (its
+`mk-` rules are one nonce'd `<style>`)
 ([Markdown under a strict CSP](guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp));
-the two left are a server-rendered page with math (KaTeX's `style` attributes
-need `style-src-attr 'unsafe-inline'`) and the `<style>` cytoscape adds to
-`<head>` for mermaid's mindmap and architecture diagrams.
+the one left is the `<style>` cytoscape adds to `<head>` for mermaid's mindmap
+and architecture diagrams.
 `Toaster`, `Drawer`,
 `InputOTP`, `ImageCropper`, `Spinner` and `PdfReader` create none: their CSS is in the stylesheet, so if one of them looks unstyled, the
 app imports neither `styles.css` nor `dist/material.css`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.93.0",
+	"version": "3.94.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"