@nxgt/material 3.5.0 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @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
+
+- [#1358](https://github.com/softistx/nxgt-material/pull/1358) [`74ef6b1`](https://github.com/softistx/nxgt-material/commit/74ef6b152c24a7e94bdf709c66c846b019eb829d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The neutrals of both themes move from a blue slate (hue 247 to 266; the dark background was a deep navy) to a softly violet-tinted palette (hue about 290, low chroma). Primary, the status hues and the layout do not change; `@nxgt/material-vue` ships the same token file, so it follows.
+  
+  Light, old to new:
+  
+  | Token | Old | New |
+  | --- | --- | --- |
+  | `--background` | `oklch(1 0 0)` | `oklch(0.973 0.008 293.9)` (`#f6f5fb`) |
+  | `--foreground`, `--card-foreground`, `--popover-foreground`, `--accent-foreground`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-accent-foreground` | `oklch(0.14 0.036 258.53)` / `oklch(0.129 0.042 264.695)` / `oklch(0.216 0.006 56.043)` / `oklch(0.208 0.042 265.755)` | `oklch(0.227 0.017 290)` |
+  | `--muted`, `--track`, `--sidebar-accent` | `oklch(0.968 0.007 247.896)` | `oklch(0.955 0.012 292)` |
+  | `--muted-foreground` | `oklch(0.52 0.046 257.417)` | `oklch(0.478 0.032 292)` |
+  | `--accent` | `oklch(0.9182 0.0077 228.86)` | `oklch(0.91 0.016 293)` |
+  | `--border`, `--input`, `--sidebar-border` | `oklch(0.929 0.013 255.508)` | `oklch(0.912 0.016 293.7)` |
+  | `--ring`, `--sidebar-ring` | `oklch(0.704 0.04 256.788)` | `oklch(0.704 0.04 291)` |
+  | `--sidebar` | `oklch(0.984 0.003 247.858)` | `oklch(0.985 0.006 293.9)` |
+  | `--tooltip` | `oklch(0.446 0.043 257.281)` | `oklch(0.446 0.043 291)` |
+  | `--secondary` / `--success` / `--info` | lightness 0.50 / 0.48 / 0.50 | 0.48 / 0.46 / 0.48 |
+  | `--primary-text` (light) | `var(--primary)` | `color-mix(in oklab, var(--primary) 96%, black)` (the fill `--primary` is unchanged) |
+  | `--nxgt-tone-ring-share` | `65%` | `68%` |
+  | `--nxgt-field-border` (light) | 13 % of `--foreground` | 14 % |
+  | `--error-text` | `color-mix(in oklab, var(--error) 94%, black)` | `... 92%, black)` |
+  
+  Dark, old to new:
+  
+  | Token | Old | New |
+  | --- | --- | --- |
+  | `--background` | `oklch(0.14 0.036 258.53)` | `oklch(0.192 0.016 290.5)` (`#14131b`) |
+  | `--card`, `--popover`, `--sidebar` | `oklch(0.208 0.042 265.755)` | `oklch(0.232 0.019 289.4)` (`#1d1c26`) |
+  | `--foreground`, `--card-foreground`, `--popover-foreground`, `--accent-foreground`, `--sidebar-foreground`, `--sidebar-accent-foreground` | `oklch(0.984 0.003 247.858)` / `oklch(0.985 0.001 106.423)` | `oklch(0.943 0.012 291.3)` (`#ecebf4`) |
+  | `--primary-foreground`, `--secondary-foreground`, `--success-foreground`, `--info-foreground`, `--warning-foreground`, `--error-foreground`, `--sidebar-primary-foreground` | `oklch(0.984 0.003 247.858)` | `oklch(0.995 0.002 291.3)` |
+  | `--tertiary-foreground` | `oklch(0.14 0.036 258.53)` | `oklch(0.192 0.016 290.5)` |
+  | `--muted`, `--sidebar-accent` | `oklch(0.279 0.041 260.031)` | `oklch(0.27 0.022 290)` |
+  | `--accent` | `oklch(0.268 0.007 34.298)` | `oklch(0.27 0.022 290)` |
+  | `--muted-foreground` | `oklch(0.66 0.046 257.417)` | `oklch(0.725 0.03 292.2)` |
+  | `--border`, `--sidebar-border` | `oklch(1 0 0 / 10%)` | `oklch(0.301 0.025 291.4)` (`#2e2c3a`) |
+  | `--input` | `oklch(1 0 0 / 15%)` | `oklch(0.34 0.027 291.4)` |
+  | `--ring`, `--sidebar-ring` | `oklch(0.551 0.027 264.364)` | `oklch(0.551 0.03 290)` |
+  | `--track` | `oklch(0.52 0.03 257.417)` | `oklch(0.53 0.03 290)` |
+  | `--tooltip` / `--tooltip-foreground` | `oklch(0.929 0.013 255.508)` / `oklch(0.446 0.043 257.281)` | `oklch(0.925 0.012 291.3)` / `oklch(0.446 0.043 291)` |
+  | `--secondary` | `oklch(0.66 0.1135 245.65)` | `oklch(0.675 0.1135 245.65)` |
+  
+  The lightness nudges (light `--secondary`, `--success`, `--info`, `--error-text`; dark `--secondary`) keep every contrast the token comments and the theming guide state at 4.5:1 (text) or 3:1 (UI) on the new surfaces. The dialog scrim, the lightbox backdrop and a few shadows took the same hue.
+  
+  To keep the old slate, redefine the tokens after importing the stylesheet, under the same selectors, with the values in the "Old" columns above, for example:
+  
+  ```css
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.14 0.036 258.53);
+    --muted: oklch(0.968 0.007 247.896);
+    --muted-foreground: oklch(0.52 0.046 257.417);
+    --border: oklch(0.929 0.013 255.508);
+    --input: oklch(0.929 0.013 255.508);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --background: oklch(0.14 0.036 258.53);
+    --foreground: oklch(0.984 0.003 247.858);
+    --card: oklch(0.208 0.042 265.755);
+    --popover: oklch(0.208 0.042 265.755);
+    --muted: oklch(0.279 0.041 260.031);
+    --muted-foreground: oklch(0.66 0.046 257.417);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+  }
+  ```
+  
+  Screenshot tests of an app on the default theme need new baselines.
+
 ## 3.5.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

@@ -3,52 +3,59 @@
  * after importing the stylesheet, under the same selectors. */
 :root {
 	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.14 0.036 258.53);
+	--background: oklch(0.973 0.008 293.9);
+	--foreground: oklch(0.227 0.017 290);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
+	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.129 0.042 264.695);
+	--popover-foreground: oklch(0.227 0.017 290);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
 	/* Primary drawn as text or an icon on a normal surface (`text-primary-text`):
-	   the colour itself in light; the dark theme lifts it. */
-	--primary-text: var(--primary);
-	--secondary: oklch(50% 0.1135 245.65);
+	   the colour mixed 4 % toward black in light, which keeps it 7.3:1 or more on
+	   the violet page (7.9:1 on a Card; the colour itself gives 6.8:1 on the
+	   page); the dark theme lifts it. */
+	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	/* --secondary, --success and --info are 0.02 darker than before: on the
+	   violet page tint (--background, 97.3 %) their own 15 % tonal tint gave the
+	   text 4.3 to 4.5:1; now 4.7:1 or more on the page and on a Card. */
+	--secondary: oklch(48% 0.1135 245.65);
 	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.52 0.046 257.417);
+	--muted: oklch(0.955 0.012 292);
+	--muted-foreground: oklch(0.478 0.032 292);
 	/* Non-text (WCAG 1.4.11): the empty part of a slider, a meter, a drawer
 	   handle. Light keeps the pale track; the value reads from the thumb. */
-	--track: oklch(0.968 0.007 247.896);
+	--track: oklch(0.955 0.012 292);
 	--track-fill: var(--primary);
-	--tooltip: oklch(0.446 0.043 257.281);
+	--tooltip: oklch(0.446 0.043 291);
 	--tooltip-foreground: oklch(1 0 0);
-	--accent: oklch(0.9182 0.0077 228.86);
-	--accent-foreground: oklch(0.216 0.006 56.043);
+	--accent: oklch(0.91 0.016 293);
+	--accent-foreground: oklch(0.227 0.017 290);
 	/* Darker than the dark theme's: near-white text on a filled error surface
 	   reaches 4.8:1 (4.6 at 0.577), and the colour as text 5.0:1 on white. */
 	--error: oklch(0.56 0.245 27.325);
 	--error-foreground: oklch(0.984 0.003 247.858);
 	/* Error drawn as text (a field's message, HelperText, a focused error menu
-	   item): 5.7:1 on white and 4.8:1 on the menu's bg-error/10 tint, where
-	   --error itself gives 5.0 and 4.2:1. */
-	--error-text: color-mix(in oklab, var(--error) 94%, black);
+	   item): 6.0:1 on white and 5.0:1 on the menu's bg-error/10 tint (4.7:1 on that
+	   tint over the violet page), where --error itself gives 5.0 and 4.2:1. */
+	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	/* The foregrounds are near-white: these three are dark enough for WCAG AA
 	   text (4.5:1) on them, and for the same colours used as text on white. */
-	--success: oklch(0.48 0.118 184.704);
+	--success: oklch(0.46 0.118 184.704);
 	--success-foreground: oklch(0.984 0.003 247.858);
-	--info: oklch(0.5 0.165 254.624);
+	--info: oklch(0.48 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
 	/* Amber, a hue apart from --error (27): a warning must not read as a
 	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: var(--error);
-	--border: oklch(0.929 0.013 255.508);
-	--input: oklch(0.929 0.013 255.508);
-	--ring: oklch(0.704 0.04 256.788);
+	--border: oklch(0.912 0.016 293.7);
+	--input: oklch(0.912 0.016 293.7);
+	/* 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);
@@ -74,63 +81,68 @@
 	--chart-soft-4-ink: oklch(0.52 0.16 310);
 	--chart-soft-5: oklch(0.9 0.05 25);
 	--chart-soft-5-ink: oklch(0.56 0.15 25);
-	--sidebar: oklch(0.984 0.003 247.858);
-	--sidebar-foreground: oklch(0.129 0.042 264.695);
-	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar: oklch(0.985 0.006 293.9);
+	--sidebar-foreground: oklch(0.227 0.017 290);
+	--sidebar-primary: oklch(0.227 0.017 290);
 	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.968 0.007 247.896);
-	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-	--sidebar-border: oklch(0.929 0.013 255.508);
-	--sidebar-ring: oklch(0.704 0.04 256.788);
+	--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.62 0.04 291);
 }
 
 .dark,
 [data-theme="dark"] {
-	--background: oklch(0.14 0.036 258.53);
-	--foreground: oklch(0.984 0.003 247.858);
-	--card: oklch(0.208 0.042 265.755);
-	--card-foreground: oklch(0.984 0.003 247.858);
-	--popover: oklch(0.208 0.042 265.755);
-	--popover-foreground: oklch(0.984 0.003 247.858);
+	--background: oklch(0.192 0.016 290.5);
+	--foreground: oklch(0.943 0.012 291.3);
+	--card: oklch(0.232 0.019 289.4);
+	--card-foreground: oklch(0.943 0.012 291.3);
+	--popover: oklch(0.232 0.019 289.4);
+	--popover-foreground: oklch(0.943 0.012 291.3);
 	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
+	--primary-foreground: oklch(0.995 0.002 291.3);
 	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
 	   on --background and --card. */
 	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
-	/* Brighter than the light one: it is read as text on the dark surfaces (6.5:1
-	   on --background, 5.8:1 on --card); a filled secondary surface mixes it toward --background
-	   (the opaque 70 % mix) to keep 5.2:1 under its near-white text. */
-	--secondary: oklch(0.66 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.279 0.041 260.031);
-	--muted-foreground: oklch(0.66 0.046 257.417);
-	/* 3.6:1 on --background, 3.2:1 on --card; the fill 3.4:1 on the track. */
-	--track: oklch(0.52 0.03 257.417);
+	/* Brighter than the light one: it is read as text on the dark surfaces (6.3:1
+	   on --background, 5.8:1 on --card; 4.6:1 on its own 15 % tonal tint over a
+	   Card). A filled secondary surface mixes it toward --background (the opaque
+	   70 % mix) to keep 5.2:1 under its near-white text (4.9:1 over a Card). */
+	--secondary: oklch(0.675 0.1135 245.65);
+	--secondary-foreground: oklch(0.995 0.002 291.3);
+	--muted: oklch(0.27 0.022 290);
+	--muted-foreground: oklch(0.725 0.03 292.2);
+	/* 3.5:1 on --background, 3.2:1 on --card; the fill 3.3:1 on the track. */
+	--track: oklch(0.53 0.03 290);
 	--track-fill: oklch(0.85 0.09 276.35);
-	--tooltip: oklch(0.929 0.013 255.508);
-	--tooltip-foreground: oklch(0.446 0.043 257.281);
-	--accent: oklch(0.268 0.007 34.298);
-	--accent-foreground: oklch(0.985 0.001 106.423);
+	--tooltip: oklch(0.925 0.012 291.3);
+	--tooltip-foreground: oklch(0.446 0.043 291);
+	--accent: oklch(0.27 0.022 290);
+	--accent-foreground: oklch(0.943 0.012 291.3);
 	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
+	--error-foreground: oklch(0.995 0.002 291.3);
 	/* --error stays the fill under near-white text; as text it would give only
-	   4.2:1 on --background and 3.8:1 on --card. Lightened, 5.9 and 5.3: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 (7.3, 5.7 and 7.5:1). */
+	   badge's 60% tint, which keeps its contrast under near-white text (success
+	   7.1:1, info 5.6:1, error 9.1:1). */
 	--success: oklch(0.6 0.118 184.704);
-	--success-foreground: oklch(0.984 0.003 247.858);
+	--success-foreground: oklch(0.995 0.002 291.3);
 	--info: oklch(0.707 0.165 254.624);
-	--info-foreground: oklch(0.984 0.003 247.858);
-	/* Amber too, as text: 7.3:1 on --background and 6.5:1 on --card, 6.6:1 and
-	   5.8:1 on its 10% tint; the badge's 60% fill under near-white text is
-	   6.0:1 on a page and 5.6:1 on a Card. */
+	--info-foreground: oklch(0.995 0.002 291.3);
+	/* Amber too, as text: 6.7:1 on --background and 6.1:1 on --card, 5.9:1 and
+	   5.3:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   5.8:1 on a page and 5.5:1 on a Card. */
 	--warning: oklch(0.7 0.15 70);
-	--warning-foreground: oklch(0.984 0.003 247.858);
+	--warning-foreground: oklch(0.995 0.002 291.3);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.551 0.027 264.364);
+	--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);
 	--chart-3: oklch(0.769 0.188 70.08);
@@ -138,7 +150,7 @@
 	--chart-5: oklch(0.645 0.246 16.439);
 	/* The soft palette on the dark card: mid-tone fills (L 0.49, the sand a
 	   warmer 0.5 0.1 75), light inks of the same hues. Ink on the card:
-	   1 8.90:1, 2 10.01, 3 10.80, 4 8.48, 5 8.52; at the 0.85 dim 6.44:1 or
+	   1 8.44:1, 2 9.46, 3 10.17, 4 8.03, 5 8.06; at the 0.85 dim 6.17:1 or
 	   more. Ink on its own fill (the outline): 1 3.13:1, 2 3.40, 3 3.69,
 	   4 3.11, 5 3.13. Every pair at least 54 degrees and ΔEOK 0.109 apart. */
 	--chart-soft-1: oklch(0.49 0.08 255);
@@ -151,14 +163,14 @@
 	--chart-soft-4-ink: oklch(0.78 0.13 310);
 	--chart-soft-5: oklch(0.49 0.09 25);
 	--chart-soft-5-ink: oklch(0.78 0.11 25);
-	--sidebar: oklch(0.208 0.042 265.755);
-	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar: oklch(0.232 0.019 289.4);
+	--sidebar-foreground: oklch(0.943 0.012 291.3);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.279 0.041 260.031);
-	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
+	--sidebar-primary-foreground: oklch(0.995 0.002 291.3);
+	--sidebar-accent: oklch(0.27 0.022 290);
+	--sidebar-accent-foreground: oklch(0.943 0.012 291.3);
+	--sidebar-border: oklch(0.301 0.025 291.4);
+	--sidebar-ring: oklch(0.551 0.03 290);
 }
 
 /* The tertiary colour (the strix violet), for accents and backgrounds beside
@@ -168,10 +180,10 @@
 	--tertiary-foreground: oklch(0.984 0.003 247.858);
 }
 
-/* Dark: lifted like --secondary, as it is read as text (7.0:1 on --background,
-   6.3:1 on --card); its foreground is the dark surface, 7.0:1 on the fill. */
+/* Dark: lifted like --secondary, as it is read as text (6.5:1 on --background,
+   5.9:1 on --card); its foreground is the dark surface, 6.5:1 on the fill. */
 .dark,
 [data-theme="dark"] {
 	--tertiary: oklch(0.7 0.15 310.75);
-	--tertiary-foreground: oklch(0.14 0.036 258.53);
+	--tertiary-foreground: oklch(0.192 0.016 290.5);
 }

package/dist/components/tones/tokens.css

@@ -23,14 +23,14 @@
 	 * one, which the zone never touches. */
 	--nxgt-tint-status: 20%;
 	/* The share of the tone's text colour in a hairline (--nxgt-tone-ring): 3:1
-	 * or more against the surface in light and dark at 65 %. */
-	--nxgt-tone-ring-share: 65%;
+	 * or more against the surface in light and dark at 68 %. */
+	--nxgt-tone-ring-share: 68%;
 
 	/* Neutral, the grey tone: the muted foreground, on the page colour. */
 	--neutral: var(--muted-foreground);
 	--neutral-foreground: var(--background);
 
-	/* Text: the tone darkened (80 % tone, 20 % black), 6.6:1 or more on
+	/* Text: the tone darkened (80 % tone, 20 % black), 6.1:1 or more on
 	 * --background and --card and on its own container (over either). Primary and error keep
 	 * the tokens theme-tokens.css defines. */
 	--secondary-text: color-mix(in oklab, var(--secondary) 80%, black);
@@ -88,8 +88,8 @@
 	--neutral-text: color-mix(in oklab, var(--neutral) 75%, white);
 
 	/* On the fill: the dark theme lifts these tones, and near-white on them
-	 * would give 2.5 to 3.5:1. The page colour is 5.4:1 or more on each.
-	 * Primary, tertiary and error keep their foreground (7.0, 7.0, 4.6:1). */
+	 * would give 2.5 to 3.5:1. The page colour is 5.0:1 or more on each.
+	 * Primary, tertiary and error keep their foreground (7.2, 6.5, 4.7:1). */
 	--primary-on: var(--primary-foreground);
 	--tertiary-on: var(--tertiary-foreground);
 	--error-on: var(--error-foreground);

package/dist/components/ui/display/chip/chip-hairline.css

@@ -27,7 +27,7 @@
 		--chip-face: var(--background);
 		border-color: var(--chip-line);
 		background: var(--chip-face);
-		box-shadow: 0 1px 1px oklch(0.2 0.03 265 / 0.05);
+		box-shadow: 0 1px 1px oklch(0.2 0.03 290 / 0.05);
 	}
 	.nxgt-chip[data-look="hairline"][data-size="sm"] {
 		--chip-r: 0.4375rem;

package/dist/components/ui/layout/sidebar/sidebar-tokens.css

@@ -20,7 +20,7 @@
 .dark,
 [data-theme="dark"] {
 	/* The dark theme's primary is too dark to read on its surfaces (2.5:1), so
-	 * the rail's label is a saturated lavender of its hue (6.3:1: lightness
+	 * the rail's label is a saturated lavender of its hue (5.3:1: lightness
 	 * 0.72, chroma 0.15) on a denser pill (30 %, 35 % hovered). Light keeps the
 	 * lightness and chroma of primary (the `l` and `c` fallbacks). */
 	--nxgt-sidebar-active-share: 30%;

package/dist/components/ui/overlays/dialog/dialog.css

@@ -10,10 +10,10 @@
  * motion: reduced-motion.css ends every animation at once. */
 @layer components {
 	.nxgt-scrim {
-		background-color: oklch(0.2 0.035 265 / 0.42);
+		background-color: oklch(0.2 0.035 290 / 0.42);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-scrim {
-		background-color: oklch(0.04 0.01 265 / 0.62);
+		background-color: oklch(0.04 0.01 290 / 0.62);
 	}
 	.nxgt-scrim[data-scrim="blur"] {
 		-webkit-backdrop-filter: blur(6px) saturate(1.15);

package/dist/components/ui/primitives/field-box/field-box-tokens.css

@@ -26,7 +26,7 @@
 		var(--error) 5%,
 		var(--background)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 13%, transparent);
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 14%, transparent);
 	--nxgt-field-border-hover: color-mix(
 		in oklab,
 		var(--foreground) 24%,

package/dist/components/ui/primitives/toggle-group/toggle-group-segmented.css

@@ -13,8 +13,8 @@
 		--tg-pill: color-mix(in oklab, var(--primary) 10%, var(--background));
 		--tg-ring: color-mix(in oklab, var(--primary-text) 82%, var(--background));
 		--tg-lift:
-			0 1px 2px oklch(0.2 0.04 265 / 0.1),
-			0 2px 6px -2px oklch(0.2 0.04 265 / 0.12);
+			0 1px 2px oklch(0.2 0.04 290 / 0.1),
+			0 2px 6px -2px oklch(0.2 0.04 290 / 0.12);
 		--tg-i: 0;
 		--tg-n: 1;
 		position: relative;

package/dist/components/ui/primitives/toggle-group/toggle-group-separate.css

@@ -23,7 +23,7 @@
 		--tg-lift:
 			0 1px 2px oklch(0.25 0.06 270 / 0.08),
 			0 3px 8px -3px oklch(0.35 0.1 276 / 0.22);
-		--tg-rest: 0 1px 1px oklch(0.2 0.03 265 / 0.04);
+		--tg-rest: 0 1px 1px oklch(0.2 0.03 290 / 0.04);
 		gap: 0.375rem;
 	}
 	.nxgt-toggle-group[data-variant="separate"][data-size="sm"] {