@nxgt/material 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nxgt/material
 
+## 3.7.0
+
+### Minor Changes
+
+- [#1362](https://github.com/softistx/nxgt-material/pull/1362) [`bd12b85`](https://github.com/softistx/nxgt-material/commit/bd12b85722ff941b4d0411c646ea547e69056c8e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Vector drawing in React, on the framework-free scenes of `@nxgt/material-core/draw`: accessible, themeable SVG that is strict-CSP safe (no inline `style`, no `<style>`) and hydration safe (no `<title>`, deterministic ids).
+  
+  - `@nxgt/material/draw`: `Drawing` renders a `scene` of plain data or JSX primitives (`Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path`, `Text`, `Group`, `Image`). Its type requires a `title` or `decorative`. Colours are theme roles, `tone()` or free colours, mapped to classes in `styles.css`, so a drawing follows light and dark. Interactive nodes are focusable buttons with a focus ring and Enter/Space, their events given by scene id (`handlers`, `onNodeClick`) or as primitive props. Wrapped text is laid out with Inter's metrics and refined by the browser once mounted (`exactText`). The builders, paints, `toSVG`, `shape`, `morph` and the layout helpers are re-exported by name from core.
+  - `@nxgt/material/draw/sketch`: `<Sketch seed fill>` and `sketch()`, the seeded hand-drawn style.
+  - `@nxgt/material/draw/animate`: `drawOn` and `appear` (animated by `styles.css`, stopped under reduced motion), `useDrawingControls(ref)` to replay, pause or finish them, `MorphDrawing` and `useSceneMorph` to spring between two scenes, `morphScenes`.
+  - `@nxgt/material/draw/png`: `drawingToPng` and `downloadDrawingPng`.
+  - `@nxgt/material/print`: the `drawing(scene, { width, align })` node and the `PrintDrawing` block, a vector drawing in a PDF document.
+  
+  Nothing to change in an existing app: each is its own entry, not in `/components` or the main entry. Keep `@nxgt/material/styles.css` imported, and render `Drawing`, `Sketch` and the animation hooks from a `'use client'` file (the built entries carry no directive). `text` and `image` from `/draw` clash with `/print`'s: import one under another name (`import { text as drawText }`). See the Drawing guide (`docs/guides/drawing.md`).
+
+### Patch Changes
+
+- [#1364](https://github.com/softistx/nxgt-material/pull/1364) [`174b543`](https://github.com/softistx/nxgt-material/commit/174b54343e62d9faa6451a24bace205b9975a503) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix two contrast regressions of the violet-tinted neutrals. The dark `--error-text` is lightened (76 % `--error` mixed with white, was 80 %): 4.78:1 instead of 4.45:1 on a focused error menu item, and still above 5:1 on `--background` and `--card`. The light `--ring` (and `--sidebar-ring`) is darkened to `oklch(0.62 0.04 291)`, so the focus indicator reaches 3.4:1 on `--background`, 3.7:1 on `--card` and 3.2:1 on `--muted` (was 2.4, 2.7 and 2.3:1; WCAG 1.4.11). Fixes [#1363](https://github.com/softistx/nxgt-material/issues/1363).
+- Updated dependencies [[`bd12b85`](https://github.com/softistx/nxgt-material/commit/bd12b85722ff941b4d0411c646ea547e69056c8e)]:
+  - @nxgt/material-core@0.27.0
+
 ## 3.6.0
 
 ### Minor Changes

package/README.md

@@ -157,9 +157,11 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
 | `@nxgt/material/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
-| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders); `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
+| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders); `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
 | `@nxgt/material/pdf-reader` | `PdfReader`, the redesigned PDF reader (header, floating page pill, rail and panel; `embedded`, `dialog`, `page` and `fullscreen` modes; single page and two-page layouts; `look="expressive"` by default, `"classic"` to opt out, type `PdfReaderLook`) and `configurePdfReader` for pdf.js's worker and assets. **Its own entry, browser-only** (pdf.js loads on first render); also exported as `PdfReader` from `/components` since 3.0 ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md)) |
 | `@nxgt/material/charts` | Native SVG charts (d3-scale and d3-shape for the maths only) with keyboard point navigation, a screen-reader summary, a "View data" table and `patterns`: `LineChart` and `AreaChart` (`LineChartProps`, `AreaChartProps`, `ChartCurve`), `BarChart` (`BarChartProps`, `BarLayout`, `BarOrientation`), `PieChart` (`PieChartProps`), `DonutChart` (`DonutChartProps`), `Gauge` (`GaugeProps`, `GaugeSize`), `RadialBarChart` (`RadialBarChartProps`), `FunnelChart` (`FunnelChartProps`), `HeatmapChart` (`HeatmapChartProps`, `HeatColumn`), `RadarChart` (`RadarChartProps`), `ScatterChart` (`ScatterChartProps`, `ScatterSeries`, `ScatterPoint`), `ComboChart` (`ComboChartProps`, `ComboSeries`: bars, areas and lines, each on a left or a right axis), `zoom` (a mini overview with a window and two slider handles that picks the rows shown; `range`, `defaultRange`, `onRangeChange`) and `scroll` (a dense plot scrolls sideways on a phone, the value axis pinned) on the line, area, bar and combo charts (`ChartRangeProps`, `ChartZoomOptions`, `ChartScrollOptions`, `ChartRange`), `onPointClick` on every chart but `Gauge`, `palette` (`'soft'`: the soft palette, or `data-chart-palette="soft"` on an ancestor; `ChartPalette`) on every chart, and the shared types (`ChartSlice`, `ChartRow`, `ChartValue`, `ChartColor`, `ChartShape`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartPoint`, `ChartBaseProps`). `categoryLabel` names the "View data" table's category column: on Line, Area, Bar and Combo it defaults to the x axis label, on Radar and Heatmap it is always "Category" unless set. **Its own entry, client-only** (import it from a `'use client'` file), not in the barrel above; replaces the Nivo charts (removed in 3.0) of `/components` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)) |
+| `@nxgt/material/draw` | Vector drawing: a scene of plain data or JSX primitives drawn as accessible, themeable SVG that is safe under a strict CSP and identical on the server and in the browser. `Drawing` (`DrawingProps`, `NodeHandlers`; `scene` or `w`/`h` with children; a `title` or `decorative`, enforced by the type), the primitives `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path` (takes `node`), `Text`, `Group` and `Image`, and the builders of `@nxgt/material-core/draw` re-exported by name (`scene`, `rect`, `ellipse`, `circle`, `line`, `polygon`, `path`, `text`, `group`, `image`, `linear`, `radial`, `pattern`, `hatch`, `tone`, `toSVG`, `compileScene`, `ROLES`, `DRAW_PALETTE`, and the types `Scene`, `DrawNode`, `Paint`, `Role`, `ToneRef`), plus Material 3 Expressive's shapes (`shape`, `morph`, `SHAPE_NAMES`, `toCubics`) and the layout helpers (`bbox`, `stack`, `grid`, `align`, `distribute`) re-exported by name. Colours are theme roles (`primary-container`, `on-surface`...) mapped to classes in `styles.css`, so import it. Interactive nodes are focusable `button`s with a focus ring; wrapped text is re-measured by the browser once mounted. **Its own entry, client-only** (render `Drawing` from a `'use client'` file; the builders and `toSVG` run anywhere), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)) |
+| `@nxgt/material/draw/sketch` | The sketchy, hand-drawn style for a drawing: `Sketch` (`seed`, `roughness`, `bowing`, `fill`: `hachure`, `cross-hatch`, `solid` or `none`, `hachureAngle`, `hachureGap`, `strokeWidth`) wraps a `Drawing`, or primitives inside one, and draws shapes as double wobbling strokes with hatched fills; `sketch(sceneOrNode, options)` does it to plain data for `toSVG`. Seeded, so the server and the client draw the same lines; ids, labels, focus rings and events keep working. **Its own entry, client-only** (render `Sketch` from a `'use client'` file), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#sketch)) |
 | `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md)) |
 | `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill` and `motif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 44 ids `Background` draws), `MOTIF_SHAPES_ALL` (the 22 motif shapes), the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
 | `@nxgt/material/editor` | The rich text editor: `DocumentEditor` and `DocumentEditorFormField` (with an `outline`, a block handle, focus mode, find and replace, `onUpload`, `onAssist` and `comments`), `CompactEditor` and `CompactEditorFormField`, `RichChatComposer`, `EditorRoot` and the parts (`EditorToolbar`, `EditorContent`, `EditorFooter`, `EditorAssistantPanel`, ...), `useEditor`, the kits (`documentKit`, `compactKit`, `chatKit`, `formNodesKit`), `withFeatures` / `withoutFeatures` and `defineFeature`, and the converters `toHtml`, `toJson`, `toMarkdown`, `fromMarkdown` and `looksLikeMarkdown` — **its own entry, and not in the barrel above**. **Client-only**: import it from a `'use client'` file; `/editor/viewer` is the server-safe one. The `.nxgt-prose` page styles ship in `styles.css` with the component CSS ([DocumentEditor](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#documenteditor)) |
@@ -168,6 +170,8 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@nxgt/material/editor/collab` | `collaboration({ doc, provider, user, seed, ready, field })`: real-time editing of a Yjs document **your app supplies** (the library ships no server and no provider), for `DocumentEditor`'s `collaboration` prop; carets, undo and the `EditorPresence` avatars and connection chip (`useEditorPresence` for your own UI; both from `/editor`). Its own entry with optional peers `yjs` and `y-protocols` ([Collaboration](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#collaboration)) |
 | `@nxgt/material/editor/pm` | The editor's own tiptap and ProseMirror (`Extension`, `Node`, `Mark`, `mergeAttributes`, the input and paste rules, `Plugin`, `PluginKey`, `TextSelection`, `NodeSelection`, `ProseMirrorNode`, `Fragment`, `Slice`, `Decoration`, `DecorationSet`, …) for a custom feature's extensions, so its `instanceof` checks and the nodes it builds agree with the editor. Shares the editor's code (next to `/editor`, a list of exports, not a second copy), **server-safe** ([A custom feature](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#a-custom-feature)) |
 | `@nxgt/material/media-hls` | `hlsStreaming()` (options `HlsStreamingOptions`, module type `HlsModule`), the HLS adapter for `MediaPlayer`'s `streaming` prop: `hls.js` (an optional peer) loaded lazily wherever the browser has MSE, native HLS otherwise (or with `preferNative`), its levels as the quality menu; its own entry ([streaming guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/media-streaming.md)) |
+| `@nxgt/material/draw/animate` | Animation for `/draw`: `drawOn(scene)` traces strokes and `appear(scene)` fades nodes in, one after the next (`staggerSteps`; they add class names that `styles.css` animates, so a server renders them and there is no inline style); `useDrawingControls(ref)` replays, pauses, plays and finishes them (Web Animations); `morphScenes(a, b, t)`, `useSceneMorph(from, to, active)` and `MorphDrawing` (`from`, `to`, `active`) spring one scene into another. All stop under reduced motion and show the last frame; its own entry, client-only for the hooks ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#animate), [reference](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/draw.md#animation-nxgtmaterial-coredrawanimate)) |
+| `@nxgt/material/draw/png` | `drawingToPng(sceneOrSvg, { scale?, background?, colorsFrom? })` and `downloadDrawingPng(source, fileName)` — a drawing (a scene, or a live `<svg>` such as `svgRef.current` of a `<Drawing ref={svgRef}>`) as a PNG `Blob` in the browser, with the page's theme colours resolved, `data:` images inlined and CORS errors named; its own entry, DOM only when called ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#png), [reference](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/draw.md#png-nxgtmaterial-coredrawpng)) |
 | `@nxgt/material/vite` | build-time helpers for consumers: `nxgtMaterial()` (a strict CSP by hash or nonce, self-hosted fonts, a styles check, serves the pdf.js worker on the Vite 5–7 dev server, PDFs on a bundled server with `nxgtMaterial({ pdf: { bundle: true } })`: [Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/vite-plugin.md)), `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/csp.md#katex-fonts)) |
 | `@nxgt/material/next` | `withNxgtPrint(nextConfig)`: the `next.config.ts` a Next.js route handler that imports `/print` needs, `output: 'standalone'` included. Node only, no dependency on `next` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
 | `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, `useFocusOnMount`, `useSubmitOnce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialhooks)) |
@@ -301,6 +305,45 @@ It adds `'@nxgt/material'` to `serverExternalPackages` and, when
 `outputFileTracingIncludes`, merged with what your config already has. More:
 [Next.js](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone).
 
+### Drawings
+
+`@nxgt/material/draw` draws a scene (plain data) or JSX primitives as accessible
+SVG in the theme's colours, with no inline `style`, so it is safe under a strict
+CSP and the same on the server and in the browser. Render `Drawing` from a
+`'use client'` file; colour roles come from `styles.css`.
+
+```tsx
+'use client';
+
+import { Drawing, path, rect, scene, text, tone } from '@nxgt/material/draw';
+
+const flow = scene({ w: 240, h: 120 }, [
+	rect({ x: 8, y: 8, w: 224, h: 104, r: 16, fill: 'primary-container', stroke: 'outline' }),
+	path((p) => p.moveTo(24, 90).curveTo(60, 20, 120, 20, 200, 60), {
+		stroke: tone('success'),
+		strokeWidth: 3,
+		arrow: { end: 'triangle' },
+	}),
+	text('Shipped', { x: 120, y: 64, anchor: 'middle', size: 18, weight: 600, fill: 'on-primary-container' }),
+]);
+
+export const Flow = () => <Drawing scene={flow} title="Release flow" />;
+```
+
+Three more entries, each loaded only by the apps that use it:
+
+```tsx
+import { Sketch } from '@nxgt/material/draw/sketch'; // hand-drawn: <Sketch seed={7}><Drawing … /></Sketch>
+import { drawOn, useDrawingControls } from '@nxgt/material/draw/animate'; // <Drawing scene={drawOn(flow)} … />
+import { downloadDrawingPng } from '@nxgt/material/draw/png'; // await downloadDrawingPng(flow, 'release-flow')
+```
+
+`toSVG(flow, { standalone: true, theme: 'light' })` (from `@nxgt/material/draw`)
+gives an SVG string with literal colours, for a file or an e-mail, and `drawing(flow)`
+from `@nxgt/material/print` puts it in a PDF as vectors. The
+[drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)
+covers colours, accessibility, events, sketch, animation, PNG, PDF and e-mail.
+
 ## Guides
 
 Each area a consumer starts from has its own page under `docs/guides/`.
@@ -314,6 +357,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
 | [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md) | using `@nxgt/material/map` — browser-only, optional leaflet peers, `map.css` |
 | [Charts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md) | drawing charts with `@nxgt/material/charts` (client-only): the twelve charts, shared props, legend, View data, `onPointClick`, zoom and phone scroll, right-to-left pages, keyboard and accessibility, theming the `--chart-*` tokens, and migrating from the Nivo charts, removed in 3.0 |
+| [Drawing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md) | drawing diagrams, badges and illustrations from code with `@nxgt/material/draw`: a scene or JSX, theme roles and tones, strict CSP, accessibility, events, sketch, animation, PNG, PDF and e-mail |
 | [Backgrounds](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md) | tones, intensity, the opt-in `backgrounds.css` and per-preset files, custom tone tokens, motion and CSP |
 | [Media players](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/media.md) | `MediaPlayer`, `AudioPlayer`, playlists, chapters and transcript, sound that keeps playing across pages (`MediaPlayerHost`), the lightbox, HLS, CSP and keyboard |
 | [Streaming (HLS)](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/media-streaming.md) | `hlsStreaming()` from `@nxgt/material/media-hls`, the optional `hls.js` peer, native HLS, the quality menu, the CSP worker line |
@@ -626,6 +670,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#codeeditor) · `CodeEditorFormField` | Monaco code field in theme presets (App, Moonlight, Soft, or your own `defineCodeTheme`), with a floating tool pill, a status bar, `markers` for your own problems, a `readOnly` reader look, view props, a `ref` handle, file tabs (`files`) and full screen. From `@nxgt/material/code-editor`. | `CodeEditor`, `CodeEditorFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-codeeditor-diff.webp" width="120" alt="CodeDiff"> | [`CodeDiff`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#codediff) | A Monaco diff in the code editor's frame and themes: side by side or inline (always inline on a phone), previous/next change, `+N −M` counts and copy. From `@nxgt/material/code-editor`. | `CodeDiff` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#quiz), `QuestionCard` | Exam or practice quizzes: step progress, instant feedback with explanations and hints, a time limit, keyboard shortcuts, and a results screen with a score ring, a breakdown and a retry of the misses. Container queries. | `Quiz`, `QuestionCard` (modes and results: React only for now) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-drawing.webp" width="120" alt="Drawing"> | [`Drawing`, `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path`, `Text`, `Group`, `Image`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#drawing) from `@nxgt/material/draw` | Vector drawings from a scene of plain data or from JSX: theme-role colours that follow light and dark, no inline style (strict CSP), a `title` or `decorative` enforced by the type, focusable nodes with `onClick` and a focus ring, text that wraps with Inter's metrics and is refined by the browser. Client-only entry. | React only for now |
 
 `RadioGroupField`, `SliderField` and `SwitchField` are aliases of the
 labelled `RadioGroup`, `Slider` and `Switch`, under the names

package/dist/components/components.css

@@ -196,3 +196,5 @@
 @import "../backgrounds/css/base.css";
 @import "../backgrounds/css/gradient.css";
 @import "../backgrounds/css/motion.css";
+@import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
+@import "./ui/widgets/drawing/drawing-animate.css";

package/dist/components/theme-tokens.css

@@ -53,7 +53,9 @@
 	--destructive: var(--error);
 	--border: oklch(0.912 0.016 293.7);
 	--input: oklch(0.912 0.016 293.7);
-	--ring: oklch(0.704 0.04 291);
+	/* The focus indicator (WCAG 1.4.11, 3:1): 3.40:1 on --background, 3.69:1 on
+	   --card, 3.23:1 on --muted. */
+	--ring: oklch(0.62 0.04 291);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
 	--chart-3: oklch(0.398 0.07 227.392);
@@ -86,7 +88,7 @@
 	--sidebar-accent: oklch(0.955 0.012 292);
 	--sidebar-accent-foreground: oklch(0.227 0.017 290);
 	--sidebar-border: oklch(0.912 0.016 293.7);
-	--sidebar-ring: oklch(0.704 0.04 291);
+	--sidebar-ring: oklch(0.62 0.04 291);
 }
 
 .dark,
@@ -120,8 +122,10 @@
 	--error: oklch(0.577 0.245 27.325);
 	--error-foreground: oklch(0.995 0.002 291.3);
 	/* --error stays the fill under near-white text; as text it would give only
-	   3.9:1 on --background and 3.5:1 on --card. Lightened, 5.4 and 5.0:1. */
-	--error-text: color-mix(in oklab, var(--error) 80%, white);
+	   3.9:1 on --background and 3.5:1 on --card. Lightened (76 % --error), 5.85
+	   and 5.35:1, and 4.78:1 on a focused error menu item (bg-error/20 over the
+	   popover; 4.45:1 at the former 80 %, which missed 4.5:1 once rendered). */
+	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	/* The light brights: on the dark surfaces they read as text and as the
 	   badge's 60% tint, which keeps its contrast under near-white text (success
 	   7.1:1, info 5.6:1, error 9.1:1). */
@@ -137,6 +141,7 @@
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.301 0.025 291.4);
 	--input: oklch(0.34 0.027 291.4);
+	/* 3.78:1 on --background, 3.45:1 on --card, 3.09:1 on --muted. */
 	--ring: oklch(0.551 0.03 290);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);

package/dist/components/ui/widgets/drawing/drawing-animate.css

@@ -0,0 +1,123 @@
+/* Entry animations (`drawOn` and `appear` of @nxgt/material/draw/animate).
+ * A node carries `nxgt-draw-on` or `nxgt-draw-appear`, a delay step
+ * `nxgt-draw-d-<0..19>` and a duration `nxgt-draw-t-<s|m|l>`: never an inline
+ * style. The delay is the step times `--nxgt-draw-stagger` (60ms), set on the
+ * drawing or an ancestor to speed it up or slow it down. The animations fill
+ * both ways, so a replay (`useDrawingControls`) can find them and the last
+ * frame is the drawing itself: a stroke is traced with a dash as long as its
+ * path (`pathLength` 1), a fill fades in, a node fades and grows in. */
+.nxgt-draw-t-s {
+	--nxgt-draw-dur: 300ms;
+}
+.nxgt-draw-t-m {
+	--nxgt-draw-dur: 600ms;
+}
+.nxgt-draw-t-l {
+	--nxgt-draw-dur: 1000ms;
+}
+.nxgt-draw-d-0 {
+	--nxgt-draw-i: 0;
+}
+.nxgt-draw-d-1 {
+	--nxgt-draw-i: 1;
+}
+.nxgt-draw-d-2 {
+	--nxgt-draw-i: 2;
+}
+.nxgt-draw-d-3 {
+	--nxgt-draw-i: 3;
+}
+.nxgt-draw-d-4 {
+	--nxgt-draw-i: 4;
+}
+.nxgt-draw-d-5 {
+	--nxgt-draw-i: 5;
+}
+.nxgt-draw-d-6 {
+	--nxgt-draw-i: 6;
+}
+.nxgt-draw-d-7 {
+	--nxgt-draw-i: 7;
+}
+.nxgt-draw-d-8 {
+	--nxgt-draw-i: 8;
+}
+.nxgt-draw-d-9 {
+	--nxgt-draw-i: 9;
+}
+.nxgt-draw-d-10 {
+	--nxgt-draw-i: 10;
+}
+.nxgt-draw-d-11 {
+	--nxgt-draw-i: 11;
+}
+.nxgt-draw-d-12 {
+	--nxgt-draw-i: 12;
+}
+.nxgt-draw-d-13 {
+	--nxgt-draw-i: 13;
+}
+.nxgt-draw-d-14 {
+	--nxgt-draw-i: 14;
+}
+.nxgt-draw-d-15 {
+	--nxgt-draw-i: 15;
+}
+.nxgt-draw-d-16 {
+	--nxgt-draw-i: 16;
+}
+.nxgt-draw-d-17 {
+	--nxgt-draw-i: 17;
+}
+.nxgt-draw-d-18 {
+	--nxgt-draw-i: 18;
+}
+.nxgt-draw-d-19 {
+	--nxgt-draw-i: 19;
+}
+.nxgt-draw-on,
+.nxgt-draw-appear {
+	animation-duration: var(--nxgt-draw-dur, 600ms);
+	animation-delay: calc(var(--nxgt-draw-i, 0) * var(--nxgt-draw-stagger, 60ms));
+	animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+	animation-fill-mode: both;
+}
+.nxgt-draw-on {
+	animation-name: nxgt-draw-trace, nxgt-draw-fill;
+}
+.nxgt-draw-appear {
+	animation-name: nxgt-draw-fade, nxgt-draw-grow;
+	transform-box: fill-box;
+	transform-origin: center;
+}
+@keyframes nxgt-draw-trace {
+	from {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+	}
+	to {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes nxgt-draw-fill {
+	from {
+		fill-opacity: 0;
+	}
+}
+@keyframes nxgt-draw-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nxgt-draw-grow {
+	from {
+		scale: 0.92;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.nxgt-draw-on,
+	.nxgt-draw-appear {
+		animation: none;
+	}
+}