@nxgt/material 3.12.1 → 3.13.1

package/docs/troubleshooting.md

@@ -2233,6 +2233,20 @@ const query = parseFilterQuery(params, STUDENT_FILTERS, { locked: LOCKED });
 const asWritten = parseFilterQuery(params, STUDENT_FILTERS);
 ```
 
+### `?archived=0` now shows every row
+
+**When:** a stored link or bookmark with a `style: 'flag'` alias at `0`
+(`?archived=0`) used to keep only the rows where the switch is "No"; it now
+shows every row.
+**Why:** a flag alias reads `1` as on and `0` as off, and off is no condition
+(a switch that widens the list was counted as an active filter at `0`).
+**Fix:** to filter on "No", write the condition under `f=`. The serializer
+already does, so only a hand-written or stored link needs the change:
+
+```
+?f=archived:is:0
+```
+
 ### `defineFilterModel: field "level" cannot use "gt" on a select field`
 
 **When:** the module that calls `defineFilterModel` is imported (at boot on a
@@ -3384,6 +3398,51 @@ renders.
 **Fix:** build the document with `pdfDocument()` or `definePdfDocument()`,
 which stamp `version: 1`, rather than by hand.
 
+### A PDF accessibility checker says the PDF is not tagged
+
+**When:** a checker (Acrobat's accessibility check, PAC, veraPDF with the PDF/UA profile) reports "document is not tagged" or "no structure tree" on a PDF made with `@nxgt/material/print`.
+**Why:** `@react-pdf/renderer` 4.9 writes no structure tree, so no PDF made here is a tagged PDF, and none claims PDF/UA. This is the renderer's limit, not a missing option. What the library does write is the language, the title (shown as the window title), the outline and the reading order of the nodes.
+**Fix:** set what can be set, and say the rest in the page: `language` and `meta.title` on the document, `outline: true` for a long one, text beside a drawing or an image. If a tagged PDF is a requirement, offer an accessible HTML version of the same data. See [what is written, and what is not tagged](guides/printing.md#what-is-written-and-what-is-not-tagged).
+
+```ts
+pdfDocument({ language: 'fr', meta: { title: 'Facture INV-42' }, outline: true, pages });
+```
+
+### The PDF's font is substituted, or a PDF/A validator rejects the file
+
+**When:** a viewer shows a different Helvetica than the one you designed with (other widths, a missing euro sign, or the narrow no-break space of French thousands drawn as a wrong glyph), or a PDF/A validator reports "font not embedded".
+**Why:** the default fonts (Helvetica, Times-Roman, Courier) are pdfkit's standard fonts: the file names them and the viewer draws its own.
+**Fix:** embed a family with `registerPdfFont` and name it in the theme; see [Embedding a font and archiving](guides/printing.md#embedding-a-font-and-archiving).
+
+```ts
+const sans = registerPdfFont({ family: 'Inter', regular: interRegular, bold: interBold });
+pdfDocument({ theme: { fonts: { sans } }, conformance: 'PDF/A-2b', pages });
+```
+
+### An embedded font has no bold
+
+**When:** `registerPdfFont` was given a variable font (`inter-latin-wght-normal.woff2`): bold text looks regular, and in some builds rendering fails while writing the font.
+**Why:** react-pdf draws a variable font at its default instance, so bold has nothing to switch to (a bold request on a variable woff2 also failed in our tests).
+**Fix:** give one static file per style (`@fontsource/inter` ships `inter-latin-400-normal.woff` and `inter-latin-700-normal.woff`).
+
+### A `Drawing` `description` is never read
+
+**When:** a `Drawing` with `description` writes no `<desc>`, or a screen reader says only the name.
+**Why:** a description is read after the name, so it needs a `title`; a `decorative` drawing is hidden from assistive technology, and the type refuses `description` on it. `toSVG` takes the same `description` option and throws without a `title` or with `decorative`, so an exported file or an e-mail carries it too.
+**Fix:** give the drawing a `title`, and keep the title short and the description long (`toSVG(scene, { title, description })` does the same for a file):
+
+```tsx
+<Drawing scene={chart} title="Sales by month" description="January 12, February 18, March 25: rising." />
+```
+
+### `iconMotif.quiet` changes nothing
+
+A theme that defines `iconMotif.quiet` with a value other than `start`, `end` or `center` is rejected by `defineTheme`; see the core troubleshooting.
+
+**When:** text over `<Background preset="icons">` still sits on icons although `iconMotif={{ quiet: 'start' }}` is set.
+**Why:** `quiet` is a CSS mask the `icons` preset's stylesheet draws: another preset ignores it, the band is `--background-quiet` wide (42% by default) and fades back in over 30% more, and on a phone the text can be wider than the band.
+**Fix:** use `preset="icons"`, import `@nxgt/material/backgrounds.css`, and widen the band: `className="[--background-quiet:60%]"`. See [Keeping text clear of the icons](guides/backgrounds.md#keeping-text-clear-of-the-icons-quiet).
+
 ### `'invoice' is of type 'unknown'` in a `definePdfDocument` template
 
 **When:** compiling a template whose data parameter has no type,

package/lib/backgrounds/css-react/icons-quiet.css

@@ -0,0 +1,43 @@
+/* `iconMotif.quiet` of the `icons` preset (React only). */
+@layer components {
+	/* `quiet`: the icons fade out over a band, so text can sit on the motif. The
+	 * band is `--background-quiet` wide (42%), then the icons fade back in over
+	 * 30%. `start` and `end` follow the reading direction. A mask, not a colour:
+	 * the text underneath keeps the wash's own contrast. */
+	[data-background="icons"] > [data-scene] > :is(.ic-q-start, .ic-q-end) {
+		--nxgt-quiet-to: to right;
+		-webkit-mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+		mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-end,
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-start {
+		--nxgt-quiet-to: to left;
+	}
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-end {
+		--nxgt-quiet-to: to right;
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-center {
+		-webkit-mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+		mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+	}
+}

package/lib/backgrounds/css-react/icons.css

@@ -16,6 +16,8 @@
  * its place. React only: nothing in the shared `css/` folder. */
 @import "../css/motifs.css";
 
+@import "./icons-quiet.css";
+
 @layer components {
 	[data-background="icons"] > [data-layer="wash"] {
 		position: absolute;

package/lib/components/components.css

@@ -135,6 +135,8 @@
 @import "./ui/display/period-cards/period-cards.css";
 @import "./ui/layout/sidebar/sidebar-tokens.css";
 @import "./ui/display/avatar/avatar.css";
+/* Alert and Banner span the row in the form grids (#1497). */
+@import "./ui/feedback/alert/alert.css";
 @import "./ui/display/stat-card/stat-card.css";
 /* The native charts (@nxgt/material/charts): held series colours, grid, marks;
  * then the frame, legend keys, tooltip (float and phone bottom card), table. */

package/lib/components/ui/display/avatar/avatar.css

@@ -10,3 +10,20 @@
 		--nxgt-tone-ring-share-own: var(--avatar-ring-share);
 	}
 }
+
+/* The initials scale with the avatar (#1492): the avatar is a size container,
+ * and its fallback text is 40 % of the diameter (`cqw`), never under 10 px, so
+ * two letters keep clear of the edge at 32 px and the text grows with a
+ * larger avatar. The share is `--avatar-text-share` (a unitless percentage,
+ * 40 by default). The rule reads the avatar's own size, so it only applies to
+ * a fallback inside an `avatar` (a bare `AvatarFallback` keeps inheriting).
+ * Colours are the tone's, unchanged: the text stays AA on its container. */
+@layer components {
+	[data-slot="avatar"] {
+		container-type: inline-size;
+	}
+	[data-slot="avatar"] [data-slot="avatar-fallback"] {
+		font-size: max(0.625rem, calc(var(--avatar-text-share, 40) * 1cqw));
+		line-height: 1;
+	}
+}

package/lib/components/ui/feedback/alert/alert.css

@@ -0,0 +1,16 @@
+/* An Alert or a Banner placed in a form's grid takes the whole row (#1497),
+ * like a FormSection: no `col-span-full w-full` from the app. Direct children
+ * of the form grid's `[data-slot="form-fields"]` (inside `.form-grid-layout`)
+ * or of a FormSection's `[data-slot="form-section-fields"]`, so an alert deeper
+ * in a field is untouched. In the components layer: a utility class of the
+ * app on the alert (`col-span-1`, `w-fit`) still wins. */
+@layer components {
+	:is(
+			.form-grid-layout [data-slot="form-fields"],
+			[data-slot="form-section-fields"]
+		)
+		> :is([data-slot="alert"], [data-slot="banner"]) {
+		grid-column: 1 / -1;
+		width: 100%;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.12.1",
+	"version": "3.13.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -320,6 +320,10 @@
 			"style": "./lib/backgrounds/css-react/icons.css",
 			"default": "./lib/backgrounds/css-react/icons.css"
 		},
+		"./backgrounds/icons-quiet.css": {
+			"style": "./lib/backgrounds/css-react/icons-quiet.css",
+			"default": "./lib/backgrounds/css-react/icons-quiet.css"
+		},
 		"./backgrounds/illustrated.css": {
 			"style": "./lib/backgrounds/css-react/illustrated.css",
 			"default": "./lib/backgrounds/css-react/illustrated.css"
@@ -353,7 +357,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.29.1",
+		"@nxgt/material-core": "^0.30.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",