@nxgt/material 3.8.1 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @nxgt/material
 
+## 3.9.0
+
+### Minor Changes
+
+- [#1413](https://github.com/softistx/nxgt-material/pull/1413) [`ffb9b9d`](https://github.com/softistx/nxgt-material/commit/ffb9b9dbce46bc9103d9b298fcf0d4a3eb392a7f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New entry `@nxgt/material/illustrations/education` exports `EDUCATION_SCENES`, `EDUCATION_SCENE_IDS`, `EDUCATION_SUGGESTED_ICONS` and the type `EducationScene`. `<IllustrationDefaults sets={[EDUCATION_SCENES]}>` registers the ten scenes (`classroom`, `homework`, `exam-grades`, `timetable`, `attendance`, `enrolment`, `library`, `graduation`, `no-students`, `report-card`), so `<Illustration scene="classroom" />` and `<EmptyState illustration="no-students" />` work; importing the entry adds the ids to `SceneId`. An app that does not import it does not carry the table.
+
+- [#1410](https://github.com/softistx/nxgt-material/pull/1410) [`dbf208c`](https://github.com/softistx/nxgt-material/commit/dbf208cca40ae8e877c47dcefe9db01de28b1fd5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Illustration` draws five more scenes (`forbidden`, `maintenance`, `invitation`, `sign-in`, `empty-inbox`), and takes a `scenes` table. New entry `@nxgt/material/illustrations/health` exports `HEALTH_SCENES`, `HEALTH_SCENE_IDS`, `HEALTH_SUGGESTED_ICONS` and the type `HealthScene`. New types `SceneId`, `RegisteredScene`, `IllustrationSceneRegistry`, `SceneRow` and `SceneTable`. `<IllustrationDefaults sets={[HEALTH_SCENES]}>` registers any number of scene sets, so their ids work as strings in `Illustration`, a state's `illustration` and `emptyIllustration` (the `scenes` prop on one `Illustration` wins; an unknown id warns in development and draws the built-in art). Importing the health entry adds its ids to `SceneId` (module augmentation of `IllustrationSceneRegistry`); base ids stay strict, and an app that does not import it does not carry the table. `ErrorState` kinds `unauthorized` and `maintenance` now draw the `forbidden` and `maintenance` scenes where scenes are on, instead of `error`; `IllustrationDefaults` `icons` may name a domain scene's id.
+
+- [#1407](https://github.com/softistx/nxgt-material/pull/1407) [`e619bf7`](https://github.com/softistx/nxgt-material/commit/e619bf7b936b19b289283c92e33e72ec7ffd8f45) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New entry `@nxgt/material/illustrations`: `Illustration` draws state scenes (`empty`, `no-results`, `not-found`, `error`, `offline`, `success`, `welcome`; the generic extras and the health and education sets are the entries below), a hero icon on a Material 3 Expressive plate with satellites and sparkles, from the Font Awesome sprites your app serves (`IconSpritesProvider` says where). It is decorative, or an image with an `aria-label` when it has a `title`, and has `size`, `animated`, `hero`, `satellites`, `iconStyle`, `tone` and `duotone`; the plate loads on demand and the server and client markup agree. `IllustrationDefaults` opts a subtree's `EmptyState` and `ErrorState` into the scenes (`icons: 'suggested'` or a table, `iconStyle`). `EmptyState`, `ErrorState` and the `DataTable` empty row (`emptyIllustration`) accept a scene id or `true` for `illustration`, next to a node or `false`; without it, and without the provider, they draw the same art as before. The `ill-*` classes ship in `styles.css`.
+
+- [#1409](https://github.com/softistx/nxgt-material/pull/1409) [`c2e81f4`](https://github.com/softistx/nxgt-material/commit/c2e81f43b92f8c700d81b426e8c9ea70d2a4f114) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Background` draws the four celestial presets and a `sky` overlay (50 ids in `AVAILABLE_BACKGROUND_PRESETS`, 46 with `icons`). `preset="eclipse" | "meteor-shower" | "ringed-planet" | "northern-lights"` draws a discreet sky in the tone's colours (a faint multiplied watermark in light, silver light in dark, the body halved in a container under 640 px wide), and the new `sky` prop (`'moon'` or one of those four) lays one over any preset, after its layers and before the grain, with its own SVG ids. The theme's `background.sky` is read too, and a prop wins. The scenes come from `@nxgt/material-core/backgrounds/celestial`, loaded on demand: the first paint and the server's HTML hold the layers and the SVG fills in once the chunk has loaded (no hydration mismatch, and the registry bundle does not grow). `animated` twinkles the stars, glides and fades the meteors and drifts the ribbons, never under `prefers-reduced-motion`. New stylesheet `@nxgt/material/backgrounds/celestial.css` (also in `backgrounds.css`). `ThemePicker` draws a mini background for a theme that uses one of the four presets. React only.
+
+- [#1408](https://github.com/softistx/nxgt-material/pull/1408) [`c64600e`](https://github.com/softistx/nxgt-material/commit/c64600e3271dd60383da60b67e666e3a3cf68bae) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Background` draws the new `icons` preset (46 ids in `AVAILABLE_BACKGROUND_PRESETS`, 50 with the celestial presets): Font Awesome icons as `<use>` of sprites your app serves, in four layouts (`scatter`, `grid`, `constellation`, `drift`). New props `icons` (a pack name, or up to 48 names and references; default the `school` pack), `iconStyle` (one style or a list of at most 8) and `iconMotif` (`layout`, `sizeRange`, `rotation`, `duotone`, `secondaryOpacity`, `calm`); a theme's `icons`, `iconStyle` and `iconMotif` are read too. The sprite base comes from `IconSpritesProvider`. The scene builder loads lazily, so the registry does not grow, and icons that cannot be drawn draw `scatter-icons` with a development warning. The stylesheet is `@nxgt/material/backgrounds/icons.css`, also in `backgrounds.css`; the animation is opt-in and never runs under `prefers-reduced-motion`. React only.
+
+- [#1415](https://github.com/softistx/nxgt-material/pull/1415) [`b468b35`](https://github.com/softistx/nxgt-material/commit/b468b35e9ccea03a60297da1d2b32b4e056fc3ce) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A theme that names an icon motif (`background: { preset: 'icons', icons, iconStyle, iconMotif, sky }`) now shows it in `ThemePicker`: its tile draws the first four icons as `<use>` of the app's sprites (the `IconSpritesProvider` base, the `school` pack when the theme names none) in the tile's tones, and keeps its plain wash when a sprite or a name cannot be drawn. The picker stylesheet gains `theme-tile-icons.css`. `Background` and `ActivityLayout` already read the theme's icon keys; a new test pins that a theme alone dresses an `ActivityLayout`, and the theme guide has an "Icon motifs in a theme" section. The 14 shipped themes are unchanged.
+
+- [#1397](https://github.com/softistx/nxgt-material/pull/1397) [`8ddec10`](https://github.com/softistx/nxgt-material/commit/8ddec1050129d8a964f7091310b5b2514cf209e6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `IconSpritesProvider` and `useSpriteBase` (from `@nxgt/material/components`): serve the Font Awesome sprites from another root-relative path, such as `<IconSpritesProvider base="/static/icons/">`; every `Icon` below it uses that base, and an unsafe base throws an `IconRefError`. `Icon` now renders `href` instead of `xlink:href` on its `<use>`. Fix: `<Icon family="duotone" type="solid" />` asked for the missing `duotone-solid.svg`; it now reads `duotone.svg`. Every other family and style keeps its URL. Needs `@nxgt/material-core` with the `/icons` subpath.
+
+### Patch Changes
+
+- [#1425](https://github.com/softistx/nxgt-material/pull/1425) [`282e44d`](https://github.com/softistx/nxgt-material/commit/282e44db4a6e2b73580d348206540d2e79eecccf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The docs preview images are drawn with Font Awesome Free sprites only, never Pro: `bun run docs:previews` serves Free sheets and fails when a story draws a Pro one.
+
+- [#1428](https://github.com/softistx/nxgt-material/pull/1428) [`32c9151`](https://github.com/softistx/nxgt-material/commit/32c9151c2d2fbd1541abb64ef9177fda4ec5719f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Final polish of the icon motifs. The READMEs and the components gallery credit the icons of the previews: Font Awesome Free 7.3.1 by Fonticons, Inc., CC BY 4.0. `iconStyle` (`IconStyleRef`) takes `{ family?, type? }` or one of the 37 sprite file names (`IconSpriteFile`), which the editor completes; any other string is a type error (the run-time check is unchanged). `@nxgt/material/backgrounds` re-exports `IconMotifOptions`, `IconLayout`, `SkyPreset`, `CelestialPreset`, `IconsInput`, `IconStyleInput` and `IconStyleRef`, and `/illustrations` re-exports `IconStyleInput` and `IconStyleRef`.
+
+- [#1424](https://github.com/softistx/nxgt-material/pull/1424) [`4b4ec0a`](https://github.com/softistx/nxgt-material/commit/4b4ec0a912434621424b3eafaa6dd1f1fc710315) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs for the icon motifs: a new guide, `docs/guides/icon-motifs.md`, ties together serving your own Font Awesome sprites (the packages ship none), `IconSpritesProvider`, icon backgrounds, the celestial presets and `sky`, the illustrations with the health and education sets, and a theme that names its motif; preview images drawn with the Free sprites; troubleshooting entries for blank icons, the `scatter-icons` fallback warning and an unknown scene; and the suggested icon names that exist in Font Awesome Pro only, with Free neighbours.
+
+- [#1426](https://github.com/softistx/nxgt-material/pull/1426) [`d89cd18`](https://github.com/softistx/nxgt-material/commit/d89cd187296d4760b79f1ebd2c73f00fd030e767) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` keeps the shapes of a background clear of the header strips that are rendered only: a strip with no client rects (the breadcrumb, hidden on a phone) no longer puts the app bar's resting line at 0, which had hidden every icon of the `icons` preset under it.
+
+- [#1412](https://github.com/softistx/nxgt-material/pull/1412) [`c7ece6a`](https://github.com/softistx/nxgt-material/commit/c7ece6ae778830bfa1d3b39776c0a7110dfb4aa6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The `teal` preset's success colour no longer shares its primary's hue ([#1411](https://github.com/softistx/nxgt-material/issues/1411)). Success moves from hue 185 to 145 (a clearly greener `oklch(0.46 0.118 145)` in light, `oklch(0.6 0.118 145)` in dark), so a primary `Button` and a success `Badge` read as two colours; the lightness and chroma are the default's, so every success pair stays AA (light 6.77:1 on the page, dark 5.24:1). This is a visible change for apps on `teal` (success badges, alerts and toasts turn green); the primary and the 13 other presets are unchanged. `themeToCss` also judges `hue-near-status` against the status hue a theme's `tokens` end with, so the `teal` stylesheet no longer carries that warning.
+- Updated dependencies [[`ffb9b9d`](https://github.com/softistx/nxgt-material/commit/ffb9b9dbce46bc9103d9b298fcf0d4a3eb392a7f), [`dbf208c`](https://github.com/softistx/nxgt-material/commit/dbf208cca40ae8e877c47dcefe9db01de28b1fd5), [`aa5c6f3`](https://github.com/softistx/nxgt-material/commit/aa5c6f3dcd9ebfb234d808080f437ddfed8bae38), [`54e50e0`](https://github.com/softistx/nxgt-material/commit/54e50e0a6026bf4943a3f0f57af1066897edc65b), [`3ba3551`](https://github.com/softistx/nxgt-material/commit/3ba3551b0612fb34514926ec8099289e7696476d), [`32c9151`](https://github.com/softistx/nxgt-material/commit/32c9151c2d2fbd1541abb64ef9177fda4ec5719f), [`4b4ec0a`](https://github.com/softistx/nxgt-material/commit/4b4ec0a912434621424b3eafaa6dd1f1fc710315), [`de6f680`](https://github.com/softistx/nxgt-material/commit/de6f6800cb2146f66d55efaa3b6fe2ea0ca56611), [`72e0865`](https://github.com/softistx/nxgt-material/commit/72e0865b07227fea1a3059f0807dc7aff0c07134), [`4d3b6d4`](https://github.com/softistx/nxgt-material/commit/4d3b6d4591907912c5922c390ea556f10d81052f), [`8ddec10`](https://github.com/softistx/nxgt-material/commit/8ddec1050129d8a964f7091310b5b2514cf209e6), [`1efc672`](https://github.com/softistx/nxgt-material/commit/1efc6721228e9684e13d734fe56403c058381816), [`c7ece6a`](https://github.com/softistx/nxgt-material/commit/c7ece6ae778830bfa1d3b39776c0a7110dfb4aa6)]:
+  - @nxgt/material-core@0.29.0
+
 ## 3.8.1
 
 ### Patch Changes

package/README.md

@@ -151,6 +151,23 @@ the FA Pro licence covers use in your own products, not redistribution inside
 a library. `files` includes `"!dist/assets"` so a local build cannot leak them
 into a tarball. A missing sheet renders nothing, with no error and no fallback.
 
+Serve them somewhere else with `IconSpritesProvider`, a root-relative path on
+your own origin (a URL, `//host`, `..` or `:` throws an `IconRefError`):
+
+```tsx
+import { Icon, IconSpritesProvider } from '@nxgt/material/components';
+
+<IconSpritesProvider base="/static/icons/">
+	<Icon name="atom" type="solid" />
+</IconSpritesProvider>;
+// → /static/icons/solid.svg#atom
+```
+
+`useSpriteBase()` reads the base. `family="duotone"` with `type="solid"` now
+reads `duotone.svg`, the file that exists (it used to ask for the missing
+`duotone-solid.svg`). The reference helpers (`spriteHref`, `resolveIcons`) are in
+[`@nxgt/material-core/icons`](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/icons.md).
+
 ## Subpaths
 
 | Specifier | What is in it |
@@ -165,7 +182,10 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@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/themes` | `NxgtThemeProvider` (the registry, the persisted theme name, `<html data-nxgt-theme>`, `defaultMode`; renders no element; `useTheme({ defaultMode })` takes the first-visit mode too), `NxgtTheme` (a zone in another theme, `mode`, `asChild`), `useThemeContext`, `defineTheme`, `ThemeDefinitionError`, `themeBootScript` and `THEME_BOOT_SCRIPT` (with `ThemeBootOptions`), the 14 presets and `THEME_PRESETS`, `ThemeName` and `NxgtThemes` (augmentable), with the `NxgtThemeProps`, `NxgtThemeProviderProps`, `ThemeContextValue`, `Theme`, `ThemeDefinition` and `ThemeBackground` types ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#the-provider-and-zones)). `Background` and `ActivityLayout` take their background from the nearest theme |
 | `@nxgt/material/theme-picker` | `ThemePicker`, the theme and mode chooser (swatches and a mini background per theme; `themes`, `value`, `onValueChange`, `showMode`, `showBackground`, `layout`) and `ThemePickerProps`; its own entry so `/themes` stays small ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#let-users-choose)) |
-| `@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 45 ids `Background` draws), `MoonOptions` (the `moon` prop), `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/illustrations` | State illustrations: `Illustration` (`scene`: `empty`, `no-results`, `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`, `maintenance`, `invitation`, `sign-in`, `empty-inbox`, or an id of the `scenes` table it is given; `size`, `title`, `animated`, `hero`, `satellites`, `iconStyle`, `tone`, `duotone`) draws a hero icon on a Material 3 Expressive plate with satellites, from the Font Awesome sprites your app serves (no icon artwork ships); `IllustrationDefaults` (`icons`: `'suggested'` or a table, `iconStyle`, `sets`) opts a subtree's `EmptyState` and `ErrorState` into them; `ILLUSTRATION_SCENES`, `SUGGESTED_ICONS` and the types re-exported from `@nxgt/material-core/illustrations` (`SceneRow`, `SceneTable`), plus `IconStyleInput` and `IconStyleRef` (the `iconStyle` types: `{ family?, type? }` or one of the 37 sprite file names), `SceneId`, `RegisteredScene` and `IllustrationSceneRegistry`, the scene id type that an imported set's ids widen. `unauthorized` and `maintenance` states draw the `forbidden` and `maintenance` scenes. `EmptyState`, `ErrorState` and the `DataTable` empty row (`emptyIllustration`) also take `illustration` as a scene id or `true`. Colours are theme tones in `styles.css`; its own entry ([illustrations guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md)) |
+| `@nxgt/material/illustrations/health` | The health scenes: `HEALTH_SCENES` (`patient-record`, `consultation`, `appointment`, `lab-sample`, `prescription`, `vaccination`, `hospitalisation`, `emergency`, `no-patients`, `lab-results`), `HEALTH_SCENE_IDS`, `HEALTH_SUGGESTED_ICONS`, `HealthScene`; register it with `<IllustrationDefaults sets={[HEALTH_SCENES]}>` so `<Illustration scene="patient-record" />` and `<EmptyState illustration="no-patients" />` work (or pass `scenes={HEALTH_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
+| `@nxgt/material/illustrations/education` | The education scenes: `EDUCATION_SCENES` (`classroom`, `homework`, `exam-grades`, `timetable`, `attendance`, `enrolment`, `library`, `graduation`, `no-students`, `report-card`), `EDUCATION_SCENE_IDS`, `EDUCATION_SUGGESTED_ICONS`, `EducationScene`; register it with `<IllustrationDefaults sets={[EDUCATION_SCENES]}>` so `<Illustration scene="classroom" />` and `<EmptyState illustration="no-students" />` work (or pass `scenes={EDUCATION_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
+| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill`, `motif`, and for `preset="icons"` `icons`, `iconStyle` and `iconMotif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 50 ids `Background` draws), `MoonOptions` (the `moon` prop), `IconMotifOptions` (`iconMotif`), `IconLayout`, `SkyPreset` and `CelestialPreset` (the `sky` ids), `IconsInput` (`icons`), `IconStyleInput` and `IconStyleRef` (`iconStyle`: `{ family?, type? }` or one of the 37 sprite file names, completed by the editor, any other string is a type error), `sky` (`'moon'` or a celestial preset over any preset, also read from the theme's `background.sky`; the four celestial presets and `sky` share the opt-in `@nxgt/material/backgrounds/celestial.css`, also in `backgrounds.css`), `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)) |
@@ -185,7 +205,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 (the illustrated scenes share `backgrounds/illustrated.css`). 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 (`icons.css` for `preset="icons"`, `celestial.css` for the sky) (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
 | `@nxgt/material/theme-picker.css` | the tiles of `ThemePicker` (the mini backgrounds included), for the apps that use `@nxgt/material/theme-picker`. Import it after `styles.css`. Not part of `styles.css` |
 | `@nxgt/material/themes/<name>.css` | one shipped theme (`lavande`, `ocean`, `foret`, `ambre`, `ardoise`, `corail`, `menthe`, `prune`, `sable`, `slate`, `pink`, `bleumono`, `bluemoon`, `teal`) under `[data-nxgt-theme="<name>"]`, on `<html>` or on a zone. Import it after `styles.css`. Not part of `styles.css`: the default Lavande stays in `:root` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#themes)) |
 
@@ -391,6 +411,8 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [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 |
+| [Illustrations](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md) | `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, icons from your sprites, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
+| [Icon motifs](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/icon-motifs.md) | icon backgrounds, celestial skies, illustrations and themes together: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, a theme naming its motif, Free fallbacks for Pro-only names |
 | [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 |
 | [SSR](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/ssr.md) | rendering on a server: what the barrels guarantee, and `import()` + `clientOnly` (React's `use(browser())`) for browser-only code |
@@ -417,6 +439,8 @@ preview, an example and the options that matter. In the
 *Component* column, `·` separates a field from its React Hook Form wrapper.
 The last column gives the matching export in `@nxgt/material-vue`, or `—` when
 Vue has none. "(same parts)" means Vue exports the same sub-components.
+
+Icons in the previews: Font Awesome Free 7.3.1 by Fonticons, Inc., CC BY 4.0 — https://fontawesome.com/license/free
 React-only today: `Combobox` (not planned in Vue), `StepperIndicator`, and for now `Fab`, `FabDock`, `FabMenu`, `Toolbar` and `ToolbarPair` (#866); Vue's `SplitButton` keeps the earlier look until then.
 
 ### Foundations
@@ -426,7 +450,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | — | [`animate-*` classes](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/animations.md) | Tailwind 4 animations and their modifiers, pure CSS: `animate-fade-in-up animate-duration-500 animate-delay-200`, with the Material 3 springs by default. Entrances and exits, attention seekers, loops and ambient motion, stagger (`animate-stagger-100`), text reveals, scroll-driven animation (`animate-on-view`) and appear/disappear (`animate-appear-*`); under reduced motion a short fade, or no motion for loops and scroll. | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/foundations-themes-themepicker.webp" width="120" alt="ThemePicker"> | [`ThemePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/foundations.md#themepicker) (from `@nxgt/material/theme-picker`) | A radiogroup of theme tiles, each previewing its own theme (three swatches and a mini background, drawn by CSS) beside the light / dark / system control; `grid` or `list` layout, controlled or stored. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/foundations-themes-themepicker.webp" width="120" alt="ThemePicker"> | [`ThemePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/foundations.md#themepicker) (from `@nxgt/material/theme-picker`) | A radiogroup of theme tiles, each previewing its own theme (three swatches and a mini background, drawn by CSS, with a few icons for a theme that names an icon motif) beside the light / dark / system control; `grid` or `list` layout, controlled or stored. | — |
 
 ### Primitives
 
@@ -618,7 +642,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; 45 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; 50 presets on `/backgrounds`, and a `sky` overlay. | `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/background-CAWV_qSk.js

@@ -0,0 +1,247 @@
+import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
+import { t } from "./is-production-GLw59WU8.js";
+import { n } from "./icon-sprites-CZ3vcD7P.js";
+import { a as r, t as i } from "./theme-context-Cofk6vgs.js";
+import { t as a } from "./compose-refs-DZ0iIVF-.js";
+import { t as o } from "./use-background-activity-KxQgelFF.js";
+import { t as s } from "./scene-svg-DJKa5vsg.js";
+import { n as c, r as l, t as u } from "./scene-options-CCy3V7XS.js";
+import { Suspense as d, lazy as f, memo as p, useId as ee, useMemo as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { IconRefError as y, resolveIconStyles as b, resolveIcons as x } from "@nxgt/material-core/icons";
+import { SCENE_LAYER as S, buildBackgroundScene as C, presetLayers as w, resolveBackgroundPreset as T, svgIdPrefix as E } from "@nxgt/material-core/backgrounds";
+//#region lib/backgrounds/background/available.ts
+var D = [
+	"gradient",
+	"grain",
+	"mesh",
+	"aurora",
+	"spotlight",
+	"bokeh",
+	"rays",
+	"halo",
+	"plasma",
+	"glass",
+	"ripples",
+	"blobs",
+	"paper",
+	"linen",
+	"concrete",
+	"marble"
+], O = [
+	"isometric",
+	"blueprint",
+	"dots",
+	"stripes",
+	"low-poly",
+	"topography",
+	"waves",
+	"hexagons",
+	"circuit",
+	"graph-paper",
+	"checker",
+	"diagonal-checker",
+	"chevrons"
+], k = [
+	"shapes",
+	"confetti-grid",
+	"constellation",
+	"halftone",
+	"truchet",
+	"floating",
+	"scatter-icons",
+	"school",
+	"night-sky",
+	"bubbles",
+	"leaves",
+	"science",
+	"music",
+	"travel",
+	"sport",
+	"moon",
+	"icons"
+], A = [
+	"eclipse",
+	"meteor-shower",
+	"ringed-planet",
+	"northern-lights"
+], j = (e) => A.includes(e), M = [
+	...D,
+	...O,
+	...k,
+	...A
+], N = f(() => import("./icons-scene-bA7I4wdP.js"));
+function P(e) {
+	return /* @__PURE__ */ _("div", {
+		"data-scene": "",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ _(d, {
+			fallback: null,
+			children: /* @__PURE__ */ _(N, { ...e })
+		})
+	});
+}
+//#endregion
+//#region lib/backgrounds/background/partials/background-layers.tsx
+var F = f(() => import("./celestial-scene-DaOsRFF3.js")), I = p(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
+	return /* @__PURE__ */ v(g, { children: [
+		w(e).map((n) => n === S ? i ? /* @__PURE__ */ _(P, { ...i }, n) : j(e) ? /* @__PURE__ */ _("div", {
+			"data-scene": "",
+			"data-celestial": "",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ _(d, {
+				fallback: null,
+				children: /* @__PURE__ */ _(F, {
+					name: e,
+					as: "preset",
+					...a
+				})
+			})
+		}, n) : t && /* @__PURE__ */ _("div", {
+			"data-scene": "",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ _(s, { node: t })
+		}, n) : /* @__PURE__ */ _("div", {
+			"data-layer": n,
+			"aria-hidden": "true"
+		}, n)),
+		r && /* @__PURE__ */ _("div", {
+			"data-layer": "sky-scene",
+			"data-scene": "",
+			"data-celestial": "",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ _(d, {
+				fallback: null,
+				children: /* @__PURE__ */ _(F, {
+					name: r,
+					as: "sky",
+					base: e,
+					...a
+				})
+			})
+		}),
+		n && /* @__PURE__ */ _("div", {
+			"data-overlay": "grain",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ _(s, { node: n })
+		})
+	] });
+});
+//#endregion
+//#region lib/backgrounds/background/partials/icons-check.ts
+function L(e, t) {
+	try {
+		return e !== void 0 && x(e), b(t), null;
+	} catch (e) {
+		if (e instanceof y) return e.message;
+		throw e;
+	}
+}
+//#endregion
+//#region lib/backgrounds/background/partials/icons-keys.ts
+var R = Object.keys({
+	layout: 1,
+	sizeRange: 1,
+	rotation: 1,
+	duotone: 1,
+	secondaryOpacity: 1,
+	calm: 1
+});
+function z(e) {
+	return JSON.stringify(Object.fromEntries(R.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
+}
+//#endregion
+//#region lib/backgrounds/background/partials/use-icons-scene.ts
+function B(e, { icons: r, iconStyle: i, iconMotif: a, seed: o, animated: s }) {
+	let c = n(), l = JSON.stringify(r ?? null), u = JSON.stringify(i ?? null), d = z(a), f = m(() => {
+		if (e !== "icons") return null;
+		let n = L(JSON.parse(l) ?? void 0, JSON.parse(u) ?? void 0);
+		return n && !t() && console.warn(`Background: icons cannot be drawn (${n}); drawing "scatter-icons" instead.`), n;
+	}, [
+		e,
+		l,
+		u
+	]) ? "scatter-icons" : e;
+	return {
+		preset: f,
+		iconsScene: m(() => f === "icons" ? {
+			seed: o,
+			iconsKey: l,
+			styleKey: u,
+			motifKey: d,
+			spriteBase: c,
+			animated: s
+		} : void 0, [
+			f,
+			o,
+			l,
+			u,
+			d,
+			c,
+			s
+		])
+	};
+}
+//#endregion
+//#region lib/backgrounds/background/background.tsx
+var V = /* @__PURE__ */ e({ Background: () => G }), H = (e) => console.warn(e);
+function U(e, t, n, r, i, a) {
+	return e === "grain" ? null : C(e, l(t, n, r, i, a));
+}
+function W(e, t) {
+	return C("grain", {
+		idPrefix: `${e}-grain`,
+		seed: t
+	});
+}
+function G({ children: e, ref: n, preset: s, tone: l, intensity: d, animated: f, grain: p, seed: g, motif: y, moon: b, sky: x, icons: S, iconStyle: C, iconMotif: w, fill: D = "viewport", ...O }) {
+	let k = r()?.background || i, A = s ?? k.preset, j = l ?? k.tone ?? i.tone, N = d ?? k.intensity ?? i.intensity, P = f ?? k.animated ?? !1, F = p ?? k.grain ?? !1, L = g ?? k.seed ?? 0, R = y ?? k.motif, z = b ?? k.moon, V = x ?? k.sky, G = h(null), K = m(() => a(G, n), [n]), q = o(G, P), J = E(ee()), { preset: Y, iconsScene: te } = B(T(A, M, t() ? void 0 : H), {
+		icons: S ?? k.icons,
+		iconStyle: C ?? k.iconStyle,
+		iconMotif: w ?? k.iconMotif,
+		seed: L,
+		animated: P
+	}), X = F || Y === "grain", Z = R?.shapes ? [...new Set(R.shapes)].sort().join(",") : void 0, Q = JSON.stringify(c(R)), $ = JSON.stringify(u(z)), ne = m(() => U(Y, J, L, Z, Q, $), [
+		Y,
+		J,
+		L,
+		Z,
+		Q,
+		$
+	]), re = m(() => X ? W(J, L) : null, [
+		X,
+		J,
+		L
+	]);
+	return /* @__PURE__ */ v("div", {
+		"data-slot": "background",
+		...O,
+		ref: K,
+		"data-background": Y === "grain" ? "gradient" : Y,
+		"data-preset": Y,
+		"data-tone": j,
+		"data-intensity": N,
+		"data-fill": D === "container" ? D : void 0,
+		"data-animated": P ? "" : void 0,
+		"data-grain": X ? "" : void 0,
+		"data-sky": V,
+		"data-paused": P && q ? "" : void 0,
+		children: [/* @__PURE__ */ _(I, {
+			preset: Y,
+			scene: ne,
+			grain: re,
+			sky: V,
+			idPrefix: J,
+			seed: L,
+			shapesKey: Z,
+			scalarsKey: Q,
+			moonKey: $,
+			icons: te
+		}), /* @__PURE__ */ _("div", {
+			"data-slot": "background-content",
+			children: e
+		})]
+	});
+}
+//#endregion
+export { V as n, M as r, G as t };

package/dist/backgrounds/backgrounds.css

@@ -51,6 +51,10 @@
 @import "./css-react/sport.css";
 /* the moon (React only) */
 @import "./css-react/moon.css";
+/* the celestial presets and the sky overlay (React only) */
+@import "./css-react/celestial.css";
+/* icons (React only) */
+@import "./css-react/icons.css";
 /* motifs */
 @import "./css/motifs.css";
 @import "./css/shapes.css";

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

@@ -0,0 +1,200 @@
+/* The celestial presets (`eclipse`, `meteor-shower`, `ringed-planet`,
+ * `northern-lights`) and the `sky` overlay, which draws the moon or one of
+ * them over any preset. Core's `/backgrounds/celestial` builds the scenes: the
+ * root is `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes
+ * of scene.css, and a scene holds no inline style. Both kinds of scene sit in
+ * a `[data-scene][data-celestial]` div, which is what this file styles, so the
+ * look is the same alone and as a sky. Discreet like `moon.css`: a faint
+ * watermark in light (multiplied into the page), silver light in dark.
+ *
+ * Motion (opt-in, `animated`): stars twinkle, meteors glide, ribbons drift;
+ * never under `prefers-reduced-motion`. React only. */
+@import "../css/scene.css";
+
+@layer components {
+	/* The wash behind a celestial preset, as the moon's: two faint pools of
+	 * the tone, the strength each intensity sets. */
+	:is(
+		[data-background="eclipse"],
+		[data-background="meteor-shower"],
+		[data-background="ringed-planet"]
+	) > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 70% 60% at 80% 16%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 55% at 12% 92%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	/* The lights hang from the top edge: a pool across it, one at the foot. */
+	[data-background="northern-lights"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 90% 45% at 50% 0%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 75%
+			),
+			radial-gradient(
+				ellipse 60% 50% at 14% 96%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	[data-background] > [data-scene][data-celestial] {
+		overflow: hidden;
+		container: nxgt-sky / inline-size;
+		/* In light the scene is multiplied into the page: a faint watermark. */
+		mix-blend-mode: multiply;
+	}
+
+	/* The scene is written for 0.8 at the default strength: subtle 0.47,
+	 * vivid the full 1. */
+	[data-background] > [data-scene][data-celestial] > .mn :is(.mo, .mh) {
+		opacity: calc(var(--nxgt-bg-op) / 0.9);
+	}
+
+	/* The scene has no viewBox (lengths are pixels, positions shares of the
+	 * container): its bodies, halos and stars draw past their own origin. */
+	[data-background] > [data-scene][data-celestial] .pt {
+		overflow: visible;
+	}
+
+	/* The lit part of the body is lighter still. */
+	[data-background] > [data-scene][data-celestial] .md {
+		opacity: 0.55;
+	}
+
+	/* A narrow container: the moon and the eclipse at half size and the
+	 * planet and its ring at two thirds, so they stay whole in their corner
+	 * (the cut-out of an eclipse or a planet is in its halo too). */
+	@container nxgt-sky (max-width: 640px) {
+		[data-background]
+			> [data-scene][data-celestial]
+			.mn:not(.cl-ringed-planet)
+			.mg
+			> .mo,
+		[data-background] > [data-scene][data-celestial] .cl-eclipse .mh > circle {
+			transform: scale(0.5);
+		}
+		[data-background]
+			> [data-scene][data-celestial]
+			.cl-ringed-planet
+			:is(.mg > .mo, .mh > circle) {
+			transform: scale(0.65);
+		}
+	}
+
+	/* In dark it adds nothing but light, and the body is silver, lighter than the lifted tone. */
+	:is(.dark, [data-theme="dark"])
+		[data-background]
+		> [data-scene][data-celestial],
+	[data-background]:is(.dark, [data-theme="dark"])
+		> [data-scene][data-celestial] {
+		mix-blend-mode: normal;
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background]
+		> [data-scene][data-celestial]
+		.md,
+	[data-background]:is(.dark, [data-theme="dark"])
+		> [data-scene][data-celestial]
+		.md {
+		color: color-mix(in oklab, var(--nxgt-bg-c2) 30%, white);
+		opacity: 0.78;
+	}
+
+	/* The delay classes (`l1..l4`) only set a number, which the animations
+	 * above read: one rule each, whatever an animation's own specificity. */
+	[data-background] > [data-scene][data-celestial] .l1 {
+		--nxgt-sky-delay: 0s;
+	}
+	[data-background] > [data-scene][data-celestial] .l2 {
+		--nxgt-sky-delay: -2.5s;
+	}
+	[data-background] > [data-scene][data-celestial] .l3 {
+		--nxgt-sky-delay: -5s;
+	}
+	[data-background] > [data-scene][data-celestial] .l4 {
+		--nxgt-sky-delay: -7.5s;
+	}
+
+	/* The ribbons and the meteors move from their own box. */
+	[data-background] > [data-scene][data-celestial] .cl-northern-lights .au {
+		transform-box: fill-box;
+		transform-origin: 50% 0;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-sky-twinkle {
+		to {
+			opacity: 0.3;
+		}
+	}
+	@keyframes nxgt-bg-sky-meteor-fade {
+		0%,
+		100% {
+			opacity: 0;
+		}
+		6% {
+			opacity: 1;
+		}
+		30% {
+			opacity: 0;
+		}
+	}
+	@keyframes nxgt-bg-sky-meteor-glide {
+		0%,
+		100% {
+			transform: translate(0, 0);
+		}
+		30% {
+			transform: translate(-72px, 48px);
+		}
+	}
+	@keyframes nxgt-bg-sky-drift {
+		to {
+			transform: translate(3px, 1px) scaleY(1.1);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated] > [data-scene][data-celestial] .tw {
+			animation: nxgt-bg-sky-twinkle 8s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-meteor-shower
+			.mt {
+			animation: nxgt-bg-sky-meteor-fade 10s linear var(--nxgt-sky-delay, 0s)
+				infinite var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-meteor-shower
+			.mt
+			> .mo {
+			animation: nxgt-bg-sky-meteor-glide 10s ease-out var(--nxgt-sky-delay, 0s)
+				infinite var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-northern-lights
+			.au {
+			animation: nxgt-bg-sky-drift 14s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+	}
+}