@nxgt/material 3.3.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @nxgt/material
 
+## 3.5.0
+
+### Minor Changes
+
+- [#1352](https://github.com/softistx/nxgt-material/pull/1352) [`9327a9f`](https://github.com/softistx/nxgt-material/commit/9327a9f742f66a533a6a5eb1ff8e81d8754fa70e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` takes a `backdrop` node, drawn behind the frame in place of its gradient and blobs: a `Background` preset from `@nxgt/material/backgrounds` (`<ActivityLayout backdrop={<Background preset="shapes" motif={{ shapes: MOTIF_SHAPES_ALL }} />}>`). It fills the layout in an `inert`, `aria-hidden` layer that takes no pointer; the root carries `data-backdrop` and plain CSS hides the blobs. Without the prop nothing changes. The `/backgrounds` entry is still never imported by the main one.
+
+## 3.4.0
+
+### Minor Changes
+
+- [#1331](https://github.com/softistx/nxgt-material/pull/1331) [`4fcec1d`](https://github.com/softistx/nxgt-material/commit/4fcec1df66d8c617cc8a3d26c7c099b6c8421a66) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add six geometry background presets: `hexagons` (a honeycomb with a seeded tenth of its cells tinted), `circuit` (a printed circuit board of chips, pins, 45 degree traces and pads, seeded), `graph-paper` (a soft 20 px grid, every fifth line barely stronger, fading toward the edges, with fine line doodles near the edges), `checker` (a fine checkerboard of two close tints, fading toward the edges, with small motif shapes on some cells), `diagonal-checker` (the same turned 45 degrees) and `chevrons` (four large, very pale bands with small motifs along them). `BackgroundPreset` and `BACKGROUND_PRESETS` list them. Each follows `tone` and `intensity`, lifts in dark, and with `animated` moves subtly (pausable, off under reduced motion). All six follow `seed`.
+
+- [#1333](https://github.com/softistx/nxgt-material/pull/1333) [`1cbc91c`](https://github.com/softistx/nxgt-material/commit/1cbc91cd768177e8de4c442281b8a20e7ab7663d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add six light background presets: `rays` (a sunburst, a conic gradient from the top centre), `halo` (a ring of light through the tone's three colours), `plasma` (a seeded soft colour field), `glass` (frosted panes over soft colour blobs; a background has no backdrop to blur, so the frost is faked), `ripples` (rings from three seeded centres) and `blobs` (soft organic blobs in the tone's colours, so the tone colours them). `BackgroundPreset` and `BACKGROUND_PRESETS` list them. Each follows `tone` and `intensity`, adds light in dark, and with `animated` moves slowly (pausable, off under reduced motion). `plasma`, `glass`, `ripples` and `blobs` follow `seed`.
+
+- [#1347](https://github.com/softistx/nxgt-material/pull/1347) [`44ca0ee`](https://github.com/softistx/nxgt-material/commit/44ca0eede1e2f15855af962202c5bbb179e34365) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `AVAILABLE_BACKGROUND_PRESETS` lists the 44 ids `@nxgt/material` draws (the 42 new presets, `gradient` and `grain`). The `blobs` preset also honours `--nxgt-bg-blob-1..3`, the variables that recolour the gradient's blobs (any colour; unset keeps the tone's `--nxgt-bg-c1..c3`).
+
+- [#1336](https://github.com/softistx/nxgt-material/pull/1336) [`4a53dae`](https://github.com/softistx/nxgt-material/commit/4a53dae5d046f2cdf3a1728486a6a9451c0d378a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add four texture background presets, discreet enough for body text: `paper` (fibre grain on a warm tint that the tone cools or warms), `linen` (a plain weave of 1 px threads every 4 px, crisp at 1x with no moire, and faint slubs), `concrete` (a soft mottle and small pores on a cool grey) and `marble` (a cloudy body and soft, very low contrast veins). `BackgroundPreset` and `BACKGROUND_PRESETS` list them. Each follows `tone`, `intensity` and the theme (the specks turn white in dark) and `seed`; `intensity` never goes above the default for them (`vivid` draws as the default, so body text stays readable); they are still, so `animated` adds nothing. The noise is an `feTurbulence` filter run once on a seamless tile (400 to 960 px, in screen pixels) that the browser repeats, so the cost does not grow with the page; `marble`'s veins are blurred seeded curves, not cut noise, so they never band.
+
+- [#1330](https://github.com/softistx/nxgt-material/pull/1330) [`519adfe`](https://github.com/softistx/nxgt-material/commit/519adfec4eb77a40b86c99af2e93b07ca494614b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add 15 motif shapes. `MotifShape` now also takes `star`, `heart`, `hexagon`, `diamond`, `wave`, `zigzag` and `spiral`, and eight Material 3 Expressive shapes from the shapes registry: `m3-cookie-6`, `m3-cookie-9`, `m3-flower`, `m3-clover-4`, `m3-soft-burst`, `m3-sunny`, `m3-gem`, `m3-puffy`. `motif={{ shapes: ['star', 'm3-flower'] }}` works on the `shapes` and `confetti-grid` presets, filled and outlined. The new `MOTIF_SHAPES_ALL` lists all 22 shapes; `MOTIF_SHAPES` and the default stay the first seven, so a background drawn with the same seed and options is unchanged. Nothing breaks: the new shapes are opt-in. The 15 added shapes are drawn once per scene as a pattern in `confetti-grid` and `shapes`, so their tone, fill and (in `confetti-grid`) turn and size are fixed per shape; the first seven are unchanged.
+
+- [#1338](https://github.com/softistx/nxgt-material/pull/1338) [`f7eb7f1`](https://github.com/softistx/nxgt-material/commit/f7eb7f113290bd382f1024de67bc360486de7ee3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add eight illustrated background presets in the `motif` family: `school`, `night-sky`, `bubbles`, `leaves`, `science`, `music`, `travel` and `sport`. Each draws fine tonal line art of its theme (stroke only, round caps, about 1.5 px at 1440 px wide) in the tone's three colours: pencils and books, a moon and stars, soap bubbles, leaves and a fern, flasks and an atom, notes and a clef, a plane and a globe, balls and a trophy. The drawings are denser toward the edges and thin out and fade around the middle of the frame, where the content sits (a mask keeps it nearly empty), and their placement is seeded, so a scene never looks tiled. They follow `tone`, `intensity` and the theme (`vivid` draws as the default, so body text stays readable), and read `density`, `size`, `opacitySpread` and `rotate` from `motif` (a drawing tilts up to 8 degrees, up to 35 with `rotate`). They are still by default; with `animated` (and no reduced-motion preference) the stars of `night-sky` twinkle, the bubbles rise and the leaves sway, as classes, so no inline style is needed under a strict CSP. Together with the other background changesets of this release, `BackgroundPreset` and the `BACKGROUND_PRESETS` table now list 44 ids, and `MOTIF_SHAPES_ALL` lists 22 motif shapes. The existing presets draw the same as before.
+  
+  Their CSS is in `@nxgt/material` only (`@nxgt/material/backgrounds.css`, or one file such as `@nxgt/material/backgrounds/school.css`); `@nxgt/material-vue` keeps drawing `gradient` and `grain`. The `/backgrounds` entry grows, over the whole effort, to about 23 KB gzipped (budget 24 KB); nothing breaks.
+
+### Patch Changes
+
+- Updated dependencies [[`4fcec1d`](https://github.com/softistx/nxgt-material/commit/4fcec1df66d8c617cc8a3d26c7c099b6c8421a66), [`1cbc91c`](https://github.com/softistx/nxgt-material/commit/1cbc91cd768177e8de4c442281b8a20e7ab7663d), [`4a53dae`](https://github.com/softistx/nxgt-material/commit/4a53dae5d046f2cdf3a1728486a6a9451c0d378a), [`519adfe`](https://github.com/softistx/nxgt-material/commit/519adfec4eb77a40b86c99af2e93b07ca494614b), [`f7eb7f1`](https://github.com/softistx/nxgt-material/commit/f7eb7f113290bd382f1024de67bc360486de7ee3)]:
+  - @nxgt/material-core@0.26.0
+
 ## 3.3.0
 
 ### Minor Changes

package/README.md

@@ -161,7 +161,7 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@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/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 ids `Background` draws), 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/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)) |
 | `@nxgt/material/editor/viewer` | `RichTextViewer`: shows a saved document (HTML, JSON or Markdown) read-only, **server-safe**, with no editor instance and no `'use client'` ([RichTextViewer](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#richtextviewer)) |
 | `@nxgt/material/code-editor` | `CodeEditor`, `CodeEditorFormField` and `CodeDiff` on Monaco, their theme presets (`theme`: `'app'`, `'moonlight'`, `'soft'`, `CODE_THEMES`), `defineCodeTheme` for your own, the `CodeMarker` and `CodeMarkerSeverity` types of the `markers` prop, `CodeEditorHandle` (its `ref`), `CodeFile` (its `files`), and `configureMonaco` to bundle Monaco instead of loading it from the CDN. **Client-only**: import it from a `'use client'` file. They are no longer exported from the barrels (removed in 3.0; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/code-editor.md)) |
@@ -179,7 +179,7 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@nxgt/material/styles.css` | source Tailwind v4 tokens. **This** is the file the app imports |
 | `@nxgt/material/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
 | `@nxgt/material/galleries.css` | the Gallery's shaped tiles (`shape`, `preset="shaped"`): `clip-path: shape()` for twelve shapes, about 9 KB gzipped. Opt-in, not part of `styles.css`; without it a shaped tile keeps a rounded corner |
-| `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one. Not part of `styles.css` |
+| `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
 
 ## Usage
 
@@ -309,7 +309,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) | wiring fields to React Hook Form and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link), the `<main>` landmark, the `h1` title and document scrolling |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link), the `<main>` landmark, the `h1` title, document scrolling, and a background preset behind the shell (`backdrop`) |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [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` |
@@ -524,7 +524,7 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; `backdrop` puts a `/backgrounds` preset behind it in place of the gradient. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then an optional Theme choice (`themeChoice`) and a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
@@ -541,7 +541,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; twenty presets on `/backgrounds`. | `Background` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 44 presets on `/backgrounds`. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
 
 ### Overlays & menus

package/dist/backgrounds/backgrounds.css

@@ -1,5 +1,6 @@
 /* Every background preset's CSS, opt-in: `import "@nxgt/material/backgrounds.css"`
- * (the same file in @nxgt/material-vue). Not part of styles.css, which carries
+ * (Vue's copy imports only the shared `css/` presets; `css-react/` is React
+ * only). Not part of styles.css, which carries
  * only the base, the gradient and the motion `Background` (from /components)
  * needs. One preset alone: `@nxgt/material/backgrounds/<preset>.css`. */
 @import "./css/base.css";
@@ -20,6 +21,34 @@
 @import "./css/low-poly.css";
 @import "./css/topography.css";
 @import "./css/waves.css";
+/* geometry, React only (css-react/: not in scripts/shared-paths.ts, so no Vue copy) */
+@import "./css-react/hexagons.css";
+@import "./css-react/circuit.css";
+@import "./css-react/graph-paper.css";
+@import "./css-react/checker.css";
+@import "./css-react/diagonal-checker.css";
+@import "./css-react/chevrons.css";
+/* light, more (React only) */
+@import "./css-react/rays.css";
+@import "./css-react/halo.css";
+@import "./css-react/plasma.css";
+@import "./css-react/glass.css";
+@import "./css-react/ripples.css";
+@import "./css-react/blobs.css";
+/* textures (React only) */
+@import "./css-react/paper.css";
+@import "./css-react/linen.css";
+@import "./css-react/concrete.css";
+@import "./css-react/marble.css";
+/* illustrated scenes (React only) */
+@import "./css-react/school.css";
+@import "./css-react/night-sky.css";
+@import "./css-react/bubbles.css";
+@import "./css-react/leaves.css";
+@import "./css-react/science.css";
+@import "./css-react/music.css";
+@import "./css-react/travel.css";
+@import "./css-react/sport.css";
 /* motifs */
 @import "./css/motifs.css";
 @import "./css/shapes.css";

package/dist/backgrounds/css-react/blobs.css

@@ -0,0 +1,65 @@
+/* The `blobs` preset: soft organic blobs in the tone's colours. A seeded SVG
+ * of smooth shapes in c1, c2 and c3 (`bl1..3`), slightly blurred, over a tint
+ * (`wash`). Blended with the page: it adds light in dark. Motion (opt-in,
+ * `animated`): each blob drifts at its own pace (`bd1..3`). React only:
+ * nothing in the shared `css/` folder. `--nxgt-bg-blob-1..3` recolour the blobs
+ * as they do the gradient's; unset, a blob keeps `--nxgt-bg-c1..c3`. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="blobs"] {
+		isolation: isolate;
+	}
+	[data-background="blobs"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			200deg,
+			color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a1), transparent),
+			transparent 70%
+		);
+	}
+	[data-background="blobs"] > [data-scene] > svg {
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+	}
+	[data-background="blobs"] > [data-scene] .bl {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.42);
+	}
+	[data-background="blobs"] > [data-scene] .bl1 {
+		fill: var(--nxgt-bg-blob-1, var(--nxgt-bg-c1));
+	}
+	[data-background="blobs"] > [data-scene] .bl2 {
+		fill: var(--nxgt-bg-blob-2, var(--nxgt-bg-c2));
+	}
+	[data-background="blobs"] > [data-scene] .bl3 {
+		fill: var(--nxgt-bg-blob-3, var(--nxgt-bg-c3));
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-blobs-drift {
+		from {
+			transform: translate(-30px, 18px);
+		}
+		to {
+			transform: translate(34px, -26px);
+		}
+	}
+
+	@layer components {
+		[data-background="blobs"][data-animated] > [data-scene] .bl-g {
+			animation: nxgt-bg-blobs-drift 19s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="blobs"][data-animated] > [data-scene] .bd1 {
+			animation-direction: alternate;
+		}
+		[data-background="blobs"][data-animated] > [data-scene] .bd2 {
+			animation-duration: 26s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background="blobs"][data-animated] > [data-scene] .bd3 {
+			animation-duration: 33s;
+		}
+	}
+}

package/dist/backgrounds/css-react/bubbles.css

@@ -0,0 +1,41 @@
+/* The `bubbles` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a bubble rises and sinks back, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-bubbles-up {
+		to {
+			translate: 0 -46px;
+		}
+	}
+
+	@layer components {
+		[data-background="bubbles"][data-animated] > [data-scene] .up {
+			animation: nxgt-bg-bubbles-up 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="bubbles"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/dist/backgrounds/css-react/checker.css

@@ -0,0 +1,47 @@
+/* The `checker` preset: a fine checkerboard of 24 unit cells in two tints of
+ * the tone that sit close together, fading out toward the edges (stronger in
+ * dark, as the isometric: `--nxgt-bg-iso-k`), with a seeded eighth of the cells
+ * near the edges carrying a small tonal motif. One layer, the SVG scene
+ * (`ck-a`, `ck-b` the cells, `ck-m` the motifs), with nothing over it; the
+ * scene covers the background, so the cells follow the viewport. For the
+ * diagonal one, see `diagonal-checker.css`. React only: nothing in the shared
+ * `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="checker"] > [data-scene] .fade-1 {
+		stop-color: white;
+	}
+	[data-background="checker"] > [data-scene] .fade-0 {
+		stop-color: black;
+	}
+	[data-background="checker"] > [data-scene] .ck-a {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.14 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="checker"] > [data-scene] .ck-b {
+		fill: var(--nxgt-bg-c2);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.07 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="checker"] > [data-scene] .ck-m,
+	[data-background="checker"] > [data-scene] .ck-p {
+		color: var(--nxgt-bg-c1);
+		stroke-opacity: 0.85;
+		fill-opacity: calc(0.4 * var(--nxgt-bg-iso-k));
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-checker-drift {
+		to {
+			transform: translate(24px, 24px);
+		}
+	}
+
+	@layer components {
+		[data-background="checker"][data-animated] > [data-scene] .ck-drift {
+			animation: nxgt-bg-checker-drift 22s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/dist/backgrounds/css-react/chevrons.css

@@ -0,0 +1,46 @@
+/* The `chevrons` preset: a few large, very pale chevron bands leaning across
+ * the frame, c1 and c2 in turn, over a faint tint. Layers: `wash` (a tint) and
+ * the SVG scene (`ch-a`, `ch-b` the bands, in the group `ch-field`). The SVG
+ * covers the background, so the bands are sized by the viewport. `animated`
+ * drifts the group slowly down and back. `ch-m`: small motifs along the bands. React only: nothing in the shared
+ * `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="chevrons"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			0deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			transparent 65%
+		);
+	}
+	[data-background="chevrons"] > [data-scene] .ch-a {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.16);
+	}
+	[data-background="chevrons"] > [data-scene] .ch-b {
+		fill: var(--nxgt-bg-c2);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+	[data-background="chevrons"] > [data-scene] .ch-m {
+		color: var(--nxgt-bg-c1);
+		fill-opacity: 0.55;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-chevrons-drift {
+		to {
+			transform: translateY(40px);
+		}
+	}
+
+	@layer components {
+		[data-background="chevrons"][data-animated] > [data-scene] .ch-field {
+			animation: nxgt-bg-chevrons-drift 18s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/dist/backgrounds/css-react/circuit.css

@@ -0,0 +1,111 @@
+/* The `circuit` preset: a printed circuit board. Layers: `wash` (a tint) and
+ * the SVG scene (`cb-trace` and `cb-l1..3` the traces, `cb-pin`, `cb-chip`,
+ * `cb-pad`, and `cb-sig`, the dash that runs along a trace when `animated`).
+ * React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="circuit"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a2), transparent),
+			transparent 65%
+		);
+	}
+	[data-background="circuit"] > [data-scene] {
+		-webkit-mask-image: radial-gradient(
+			ellipse 75% 75% at 50% 50%,
+			rgb(0 0 0 / 0.4) 0%,
+			black 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 75% 75% at 50% 50%,
+			rgb(0 0 0 / 0.4) 0%,
+			black 100%
+		);
+	}
+	[data-background="circuit"] > [data-scene] :is(.cb-trace, .cb-pin, .cb-sig) {
+		fill: none;
+		stroke: var(--nxgt-bg-c1);
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	[data-background="circuit"] > [data-scene] .cb-trace {
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.85);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l1 {
+		stroke: var(--nxgt-bg-c1);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l2 {
+		stroke: var(--nxgt-bg-c2);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l3 {
+		stroke: var(--nxgt-bg-c3);
+	}
+	[data-background="circuit"] > [data-scene] .cb-pin {
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.85);
+	}
+	[data-background="circuit"] > [data-scene] .cb-chip {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.16);
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.7);
+	}
+	[data-background="circuit"] > [data-scene] .cb-pad {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.2);
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.8);
+	}
+	/* The signals are only drawn while they move (below). */
+	[data-background="circuit"] > [data-scene] .cb-signals {
+		display: none;
+	}
+	[data-background="circuit"] > [data-scene] .cb-sig {
+		stroke: color-mix(in oklab, var(--nxgt-bg-c2) 55%, white);
+		stroke-width: 3.4;
+		stroke-opacity: 0.9;
+		stroke-dashoffset: 14;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	/* The dash starts 14 units before the trace and runs 540 units, past the
+	 * end of the longest one. */
+	@keyframes nxgt-bg-circuit-signal {
+		from {
+			stroke-dashoffset: 14;
+		}
+		to {
+			stroke-dashoffset: -540;
+		}
+	}
+
+	@layer components {
+		[data-background="circuit"][data-animated] > [data-scene] .cb-signals {
+			display: inline;
+		}
+		[data-background="circuit"][data-animated] > [data-scene] .cb-sig {
+			animation: nxgt-bg-circuit-signal 7s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="circuit"][data-animated]
+			> [data-scene]
+			.cb-sig:nth-child(3n + 1) {
+			animation-duration: 9s;
+			animation-delay: -2s;
+		}
+		[data-background="circuit"][data-animated]
+			> [data-scene]
+			.cb-sig:nth-child(3n + 2) {
+			animation-duration: 11s;
+			animation-delay: -6s;
+		}
+	}
+}

package/dist/backgrounds/css-react/concrete.css

@@ -0,0 +1,41 @@
+/* The `concrete` preset: poured concrete. A seeded mottle and small pores (an
+ * SVG of `feTurbulence` specks on a seamless 640 px tile: black in light,
+ * white in dark) over a cool grey tint that takes a little of the tone
+ * (`wash`). Intensity never goes above the default (`vivid` draws as the default). Static: `animated` does nothing. React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="concrete"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="concrete"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) var(--nxgt-bg-a1),
+				color-mix(in oklab, var(--foreground) 5%, transparent)
+			),
+			color-mix(in oklab, var(--foreground) 3%, transparent)
+		);
+	}
+	[data-background="concrete"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+		opacity: calc(1 - var(--nxgt-bg-grain-invert) * 0.3);
+	}
+	[data-background="concrete"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+	[data-background="concrete"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.26);
+	}
+	[data-background="concrete"] > [data-scene] .tx3 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+}

package/dist/backgrounds/css-react/diagonal-checker.css

@@ -0,0 +1,48 @@
+/* The `diagonal-checker` preset: the fine checkerboard turned 45 degrees
+ * (diamonds of c1 touching at their corners, c2 between them), in two tints
+ * that sit close together, fading out toward the edges, with a seeded sixth of
+ * the cells near the edges carrying a small tonal motif. One layer, the SVG
+ * scene (`dc-a` the diamonds, `dc-b` the corners, `dc-m` the motifs), with
+ * nothing over it. The scene covers the background, so the cells follow the
+ * viewport. React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="diagonal-checker"] > [data-scene] .fade-1 {
+		stop-color: white;
+	}
+	[data-background="diagonal-checker"] > [data-scene] .fade-0 {
+		stop-color: black;
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-a {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.11 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-b {
+		fill: var(--nxgt-bg-c2);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.055 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-m,
+	[data-background="diagonal-checker"] > [data-scene] .dc-p {
+		color: var(--nxgt-bg-c1);
+		stroke-opacity: 0.85;
+		fill-opacity: calc(0.4 * var(--nxgt-bg-iso-k));
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-diagonal-checker-drift {
+		to {
+			transform: translate(17px, 17px);
+		}
+	}
+
+	@layer components {
+		[data-background="diagonal-checker"][data-animated]
+			> [data-scene]
+			.dc-drift {
+			animation: nxgt-bg-diagonal-checker-drift 22s ease-in-out infinite
+				alternate var(--nxgt-bg-play, running);
+		}
+	}
+}

package/dist/backgrounds/css-react/glass.css

@@ -0,0 +1,99 @@
+/* The `glass` preset: frosted panes over soft colour. A background layer has
+ * no backdrop to blur, so the frost is faked: soft blobs (radial
+ * gradients in the tone's three colours, `gl-b`) under a grid of pale panes with a bright edge
+ * (`gl-p`, `gl-p1..3` for how frosted), over a tint (`wash`). Motion
+ * (opt-in, `animated`): the blobs drift behind the panes. React only: nothing
+ * in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="glass"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a1), transparent)
+		);
+	}
+	[data-background="glass"] > [data-scene] .gl-b {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.8);
+	}
+	[data-background="glass"] > [data-scene] .gl-p {
+		stroke: color-mix(in oklab, white 55%, transparent);
+		stroke-width: 1.5;
+	}
+	[data-background="glass"] > [data-scene] .gl-p1 {
+		fill: color-mix(in oklab, white 10%, transparent);
+	}
+	[data-background="glass"] > [data-scene] .gl-p2 {
+		fill: color-mix(in oklab, white 18%, transparent);
+	}
+	[data-background="glass"] > [data-scene] .gl-p3 {
+		fill: color-mix(in oklab, white 26%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p {
+		stroke: color-mix(in oklab, white 22%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p1,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p1 {
+		fill: color-mix(in oklab, white 4%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p2,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p2 {
+		fill: color-mix(in oklab, white 8%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p3,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p3 {
+		fill: color-mix(in oklab, white 12%, transparent);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-glass-drift {
+		from {
+			transform: translate(-90px, -40px);
+		}
+		to {
+			transform: translate(90px, 50px);
+		}
+	}
+
+	@layer components {
+		[data-background="glass"][data-animated] > [data-scene] .gl-d {
+			animation: nxgt-bg-glass-drift 26s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d1 {
+			animation-direction: alternate;
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d2 {
+			animation-duration: 33s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d3 {
+			animation-duration: 41s;
+		}
+	}
+}