@nxgt/material 3.4.0 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @nxgt/material
 
+## 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
+
+- [#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

package/README.md

@@ -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) |

package/dist/components/components.css

@@ -56,6 +56,7 @@
 @import "./ui/actions/button-group/button-group.css";
 /* ActivityLayout: the route transition (cross-fade, none under reduced motion). */
 @import "./ui/layout/app-shell/route-transition.css";
+@import "./ui/layout/app-shell/activity-backdrop.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
 @import "./ui/collections/data-table/data-table-items.css";
 @import "./ui/collections/data-table/data-table-items-compact.css";

package/dist/components/theme-tokens.css

@@ -3,52 +3,57 @@
  * 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);
+	--ring: oklch(0.704 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 +79,65 @@
 	--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.704 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. */
+	   3.9:1 on --background and 3.5:1 on --card. Lightened, 5.4 and 5.0:1. */
 	--error-text: color-mix(in oklab, var(--error) 80%, white);
 	/* 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);
+	--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 +145,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 +158,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 +175,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/app-shell/activity-backdrop.css

@@ -0,0 +1,24 @@
+/* ActivityLayout's `backdrop` prop: a node (a `Background` preset from
+ * `@nxgt/material/backgrounds`) drawn behind the frame instead of the built-in
+ * gradient. `data-backdrop` is on the layout's root only while one is given, so
+ * without it nothing here matches and the gradient is unchanged.
+ *
+ * Plain CSS, no inline `style`, in `@layer components` like the rest: an app's
+ * utilities still win. The layer itself (`data-slot="activity-layout-backdrop"`)
+ * is positioned by classes in activity-layout.tsx. */
+@layer components {
+	/* The gradient's own tint and blobs give way to the backdrop. */
+	[data-slot="activity-layout"][data-backdrop] {
+		background-image: none;
+	}
+	[data-slot="activity-layout"][data-backdrop] > [data-layer] {
+		display: none;
+	}
+
+	/* A preset fills the layer: the layer's size, not `100lvw x 100lvh`, which
+	 * counts the scrollbar and a phone's toolbar. */
+	[data-slot="activity-layout-backdrop"] > [data-background] {
+		width: 100%;
+		height: 100%;
+	}
+}

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"] {

package/dist/{components-p7VoF7gR.js → components-BCYZgeoV.js}

@@ -91644,17 +91644,24 @@ function iHe(e, t) {
 }
 //#endregion
 //#region lib/components/ui/layout/app-shell/activity-layout.tsx
-function aHe({ items: e, brand: t, logo: n, name: r, context: a, headerTitle: o, breadcrumbRoot: s, headerActions: c, avatar: l, linkComponent: u, contentAs: d = "main", scroll: f = "document", align: p, menuOpen: m, onMenuOpenChange: h, routeTransition: g = !0, children: _, className: v, ...y }) {
-	let b = f === "container", x = wVe(), S = R(null);
-	return iHe(S, b), /* @__PURE__ */ V(HZ, {
+function aHe({ items: e, brand: t, logo: n, name: r, context: a, headerTitle: o, breadcrumbRoot: s, headerActions: c, avatar: l, linkComponent: u, contentAs: d = "main", scroll: f = "document", align: p, menuOpen: m, onMenuOpenChange: h, routeTransition: g = !0, backdrop: _, children: v, className: y, ...b }) {
+	let x = f === "container", S = _ != null && _ !== !1, C = wVe(), w = R(null);
+	return iHe(w, x), /* @__PURE__ */ H(HZ, {
 		"data-slot": "activity-layout",
 		"data-scroll": f,
 		"data-route-transition": g === !1 ? void 0 : "",
-		className: i("size-auto min-h-dvh", b && "h-dvh overflow-hidden", v),
-		...y,
-		children: /* @__PURE__ */ H("div", {
+		"data-backdrop": S ? "" : void 0,
+		className: i("size-auto min-h-dvh", x && "h-dvh overflow-hidden", y),
+		...b,
+		children: [S && /* @__PURE__ */ V("div", {
+			"data-slot": "activity-layout-backdrop",
+			"aria-hidden": "true",
+			inert: !0,
+			className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden",
+			children: _
+		}), /* @__PURE__ */ H("div", {
 			"data-slot": "activity-layout-frame",
-			className: i("flex flex-1 self-stretch min-w-0 gap-2 bg-background-paper", "pt-[max(0.5rem,env(safe-area-inset-top))] pr-[max(0.5rem,env(safe-area-inset-right))] pb-[calc(max(0.5rem,env(safe-area-inset-bottom))+var(--nxgt-media-dock,0px))] pl-[max(0.5rem,env(safe-area-inset-left))]", b && "min-h-0"),
+			className: i("flex flex-1 self-stretch min-w-0 gap-2 bg-background-paper", "pt-[max(0.5rem,env(safe-area-inset-top))] pr-[max(0.5rem,env(safe-area-inset-right))] pb-[calc(max(0.5rem,env(safe-area-inset-bottom))+var(--nxgt-media-dock,0px))] pl-[max(0.5rem,env(safe-area-inset-left))]", x && "min-h-0"),
 			children: [/* @__PURE__ */ V(Q2, {
 				items: e,
 				brand: t,
@@ -91680,21 +91687,21 @@ function aHe({ items: e, brand: t, logo: n, name: r, context: a, headerTitle: o,
 						className: "bg-background/40 backdrop-blur-sm rounded sticky top-[max(0.5rem,env(safe-area-inset-top))] z-10",
 						children: /* @__PURE__ */ V(rHe, {
 							headerTitle: o,
-							...x
+							...C
 						})
 					}),
 					/* @__PURE__ */ V(z2, { root: s }),
 					/* @__PURE__ */ V(BVe, {
 						as: d,
-						regionRef: S,
-						titleId: x.titleId,
-						contained: b,
+						regionRef: w,
+						titleId: C.titleId,
+						contained: x,
 						transition: g,
-						children: _
+						children: v
 					})
 				]
 			})]
-		})
+		})]
 	});
 }
 //#endregion
@@ -100932,7 +100939,7 @@ function Rqe({ solid: e, children: t }) {
 		value: !0,
 		children: /* @__PURE__ */ H(ei, { children: [/* @__PURE__ */ V(oi, {
 			ref: a.overlayRef,
-			className: "bg-[color:oklch(0.14_0.036_258.53/0.82)] backdrop-blur-sm"
+			className: "bg-[color:oklch(0.192_0.016_290.5/0.82)] backdrop-blur-sm"
 		}), /* @__PURE__ */ H(mi, {
 			ref: Na(a.ref, s),
 			"data-slot": "media-lightbox",

package/dist/components.js

@@ -3,7 +3,7 @@ import { n as Z, t as Xe } from "./icon-button-BXlI3DJ_.js";
 import { i as Ze, n as Qe, r as $e, s as et, t as tt } from "./tooltip-tmFoTU_d.js";
 import { a as nt, c as rt, d as it, f as at, i as ot, l as st, n as ct, o as lt, r as ut, s as dt, t as ft, u as pt } from "./dropdown-menu-DiZvX4tG.js";
 import { a as mt, c as ht, f as gt, i as _t, l as vt, n as yt, o as bt, p as xt, r as St, s as Ct, t as wt, u as Tt } from "./dialog-JQT6iETD.js";
-import { $ as Et, $a as Dt, $c as Ot, $d as kt, $i as At, $l as jt, $n as Mt, $o as Nt, $r as Pt, $s as Ft, $t as It, $u as Lt, A as Rt, Aa as zt, Ac as Bt, Ad as Vt, Ai as Ht, Al as Ut, An as Wt, Ao as Gt, Ar as Kt, As as qt, At as Jt, Au as Yt, B as Xt, Ba as Zt, Bc as Qt, Bd as $t, Bi as en, Bl as tn, Bn as nn, Bo as rn, Br as an, Bs as on, Bt as sn, Bu as cn, C as ln, Ca as un, Cc as dn, Cd as fn, Cf as pn, Ci as mn, Cl as hn, Cn as gn, Co as _n, Cr as vn, Cs as yn, Ct as bn, Cu as xn, D as Sn, Da as Cn, Dc as wn, Dd as Tn, Di as En, Dl as Dn, Dn as On, Do as kn, Dr as An, Ds as jn, Dt as Mn, Du as Nn, E as Pn, Ea as Fn, Ec as In, Ed as Ln, Ei as Rn, El as zn, En as Bn, Eo as Vn, Er as Hn, Es as Un, Et as Wn, Eu as Gn, F as Kn, Fa as qn, Fc as Jn, Fd as Yn, Fi as Xn, Fl as Zn, Fn as Qn, Fo as $n, Fr as er, Fs as tr, Ft as nr, Fu as rr, G as ir, Ga as ar, Gc as or, Gd as sr, Gi as cr, Gl as lr, Gn as ur, Go as dr, Gr as fr, Gs as pr, Gt as mr, Gu as hr, H as gr, Ha as _r, Hc as vr, Hd as yr, Hi as br, Hl as xr, Hn as Sr, Ho as Cr, Hr as wr, Hs as Tr, Ht as Er, Hu as Dr, I as Or, Ia as kr, Ic as Ar, Id as jr, Ii as Mr, Il as Nr, In as Pr, Io as Fr, Ir, Is as Lr, It as Rr, Iu as zr, J as Br, Ja as Vr, Jc as Hr, Jd as Ur, Ji as Wr, Jl as Gr, Jn as Kr, Jo as qr, Jr, Js as Yr, Jt as Xr, Ju as Zr, K as Qr, Ka as $r, Kc as ei, Kd as ti, Ki as ni, Kl as ri, Kn as ii, Ko as ai, Kr as oi, Ks as si, Kt as ci, Ku as li, L as ui, La as di, Lc as fi, Ld as pi, Li as mi, Ll as hi, Ln as gi, Lo as _i, Lr as vi, Ls as yi, Lt as bi, Lu as xi, M as Si, Ma as Ci, Mc as wi, Md as Ti, Mi as Ei, Ml as Di, Mn as Oi, Mo as ki, Mr as Ai, Ms as ji, Mt as Mi, Mu as Ni, N as Pi, Na as Fi, Nc as Ii, Nd as Li, Ni as Ri, Nl as zi, Nn as Bi, No as Vi, Nr as Hi, Ns as Ui, Nt as Wi, Nu as Gi, O as Ki, Oa as qi, Oc as Ji, Od as Yi, Oi as Xi, Ol as Zi, On as Qi, Oo as $i, Or as ea, Os as ta, Ot as na, Ou as ra, P as ia, Pa as aa, Pc as oa, Pd as sa, Pi as ca, Pl as la, Pn as ua, Po as da, Pr as fa, Ps as pa, Pt as ma, Pu as ha, Q as ga, Qa as _a, Qc as va, Qd as ya, Qi as ba, Ql as xa, Qn as Sa, Qo as Ca, Qr as wa, Qs as Ta, Qt as Ea, Qu as Da, R as Oa, Ra as ka, Rc as Aa, Rd as ja, Ri as Ma, Rl as Na, Rn as Pa, Ro as Fa, Rr as Ia, Rs as La, Rt as Ra, Ru as za, S as Ba, Sa as Va, Sc as Ha, Sd as Ua, Sf as Wa, Si as Ga, Sl as Ka, Sn as qa, So as Ja, Sr as Ya, Ss as Xa, St as Za, Su as Qa, T as $a, Ta as eo, Tc as to, Td as no, Ti as ro, Tl as io, Tn as ao, To as oo, Tr as so, Ts as co, Tt as lo, Tu as uo, U as fo, Ua as po, Uc as mo, Ud as ho, Ui as go, Ul as _o, Un as vo, Uo as yo, Ur as bo, Us as xo, Ut as So, Uu as Co, V as wo, Va as To, Vc as Eo, Vd as Do, Vi as Oo, Vl as ko, Vn as Ao, Vo as jo, Vr as Mo, Vs as No, Vt as Po, Vu as Fo, W as Io, Wa as Lo, Wc as Ro, Wd as zo, Wi as Bo, Wl as Vo, Wn as Ho, Wo as Uo, Wr as Wo, Ws as Go, Wt as Ko, Wu as qo, X as Jo, Xa as Yo, Xc as Xo, Xd as Zo, Xi as Qo, Xl as $o, Xn as es, Xo as ts, Xr as ns, Xs as rs, Xt as is, Xu as as, Y as os, Ya as ss, Yc as cs, Yd as ls, Yi as us, Yl as ds, Yn as fs, Yo as ps, Yr as ms, Ys as hs, Yt as gs, Yu as _s, Z as vs, Za as ys, Zc as bs, Zd as xs, Zi as Ss, Zl as Cs, Zn as ws, Zo as Ts, Zr as Es, Zs as Ds, Zt as Os, Zu as ks, _ as As, _a as js, _c as Ms, _d as Ns, _f as Ps, _i as Fs, _l as Is, _n as Ls, _o as Rs, _r as zs, _s as Bs, _t as Vs, _u as Hs, a as Us, aa as Ws, ac as Gs, ad as Ks, af as qs, ai as Js, al as Ys, an as Xs, ao as Zs, ar as Qs, as as $s, at as ec, au as tc, b as nc, ba as rc, bc as ic, bd as ac, bf as oc, bi as sc, bl as cc, bn as lc, bo as uc, br as dc, bs as fc, bt as pc, bu as Q, c as mc, ca as hc, cc as gc, cd as _c, cf as vc, ci as yc, cl as bc, cn as xc, co as Sc, cr as Cc, cs as wc, ct as Tc, cu as Ec, d as Dc, da as Oc, dc as kc, dd as Ac, df as jc, di as Mc, dl as Nc, dn as Pc, do as Fc, dr as Ic, ds as Lc, dt as Rc, du as zc, ea as Bc, ec as Vc, ed as Hc, ef as Uc, ei as Wc, el as Gc, en as Kc, eo as qc, er as Jc, es as Yc, et as Xc, eu as Zc, f as Qc, fa as $c, fc as el, fd as tl, ff as nl, fi as rl, fl as il, fn as al, fo as ol, fr as sl, fs as cl, ft as ll, fu as ul, g as dl, ga as fl, gc as pl, gd as ml, gf as hl, gi as gl, gl as _l, gn as vl, go as yl, gr as bl, gs as xl, gt as Sl, gu as Cl, h as wl, ha as Tl, hc as El, hd as Dl, hf as Ol, hi as kl, hl as Al, hn as jl, ho as Ml, hr as Nl, hs as Pl, ht as Fl, hu as Il, i as Ll, ia as Rl, ic as zl, id as Bl, if as Vl, ii as Hl, il as Ul, in as Wl, io as Gl, ir as Kl, is as ql, it as Jl, iu as Yl, j as Xl, ja as Zl, jc as Ql, jd as $l, ji as eu, jl as tu, jn as nu, jo as ru, jr as iu, js as au, jt as ou, ju as su, k as cu, ka as lu, kc as uu, kd as du, ki as fu, kl as pu, kn as mu, ko as hu, kr as gu, ks as _u, kt as vu, ku as yu, l as bu, la as xu, lc as Su, ld as Cu, lf as wu, li as Tu, ll as Eu, ln as Du, lo as Ou, lr as ku, ls as Au, lt as ju, lu as Mu, m as Nu, ma as Pu, mc as Fu, md as Iu, mf as Lu, mi as Ru, ml as zu, mn as Bu, mo as Vu, mr as Hu, ms as Uu, mt as Wu, mu as Gu, n as Ku, na as qu, nc as Ju, nd as Yu, nf as Xu, ni as Zu, nl as Qu, nn as $u, no as ed, nr as td, ns as nd, nt as rd, nu as id, o as ad, oa as od, oc as sd, od as cd, of as ld, oi as ud, ol as dd, on as fd, oo as pd, or as md, os as hd, ot as gd, ou as _d, p as vd, pa as yd, pc as bd, pd as xd, pf as Sd, pi as Cd, pl as wd, pn as Td, po as Ed, pr as Dd, ps as Od, pt as kd, pu as Ad, q as jd, qa as Md, qc as Nd, qd as Pd, qi as Fd, ql as Id, qn as Ld, qo as Rd, qr as zd, qs as Bd, qt as Vd, qu as Hd, r as Ud, ra as Wd, rc as Gd, rd as Kd, rf as qd, ri as Jd, rl as Yd, rn as Xd, ro as Zd, rr as Qd, rs as $d, rt as ef, ru as tf, s as nf, sa as rf, sc as af, sd as of, sf, si as cf, sl as lf, sn as uf, so as df, sr as ff, ss as pf, st as mf, su as hf, t as gf, ta as _f, tc as vf, td as yf, tf as bf, ti as xf, tl as Sf, tn as Cf, to as wf, tr as Tf, ts as Ef, tt as Df, tu as Of, u as kf, ua as Af, uc as jf, ud as Mf, uf as Nf, ui as Pf, ul as Ff, un as If, uo as Lf, ur as Rf, us as zf, ut as Bf, uu as Vf, v as Hf, va as Uf, vc as Wf, vd as Gf, vf as Kf, vi as qf, vl as Jf, vn as Yf, vo as Xf, vr as Zf, vs as Qf, vt as $f, vu as ep, w as tp, wa as np, wc as rp, wd as ip, wi as ap, wl as op, wn as sp, wo as cp, wr as lp, ws as up, wt as dp, wu as fp, x as pp, xa as mp, xc as hp, xd as gp, xf as _p, xi as vp, xl as yp, xn as bp, xo as xp, xr as Sp, xs as Cp, xt as wp, xu as Tp, y as Ep, ya as Dp, yc as Op, yd as kp, yf as Ap, yi as jp, yl as Mp, yn as Np, yo as Pp, yr as Fp, ys as Ip, yt as Lp, yu as Rp, z as zp, za as Bp, zc as Vp, zd as Hp, zi as Up, zl as Wp, zn as Gp, zo as Kp, zr as qp, zs as Jp, zt as Yp, zu as Xp } from "./components-p7VoF7gR.js";
+import { $ as Et, $a as Dt, $c as Ot, $d as kt, $i as At, $l as jt, $n as Mt, $o as Nt, $r as Pt, $s as Ft, $t as It, $u as Lt, A as Rt, Aa as zt, Ac as Bt, Ad as Vt, Ai as Ht, Al as Ut, An as Wt, Ao as Gt, Ar as Kt, As as qt, At as Jt, Au as Yt, B as Xt, Ba as Zt, Bc as Qt, Bd as $t, Bi as en, Bl as tn, Bn as nn, Bo as rn, Br as an, Bs as on, Bt as sn, Bu as cn, C as ln, Ca as un, Cc as dn, Cd as fn, Cf as pn, Ci as mn, Cl as hn, Cn as gn, Co as _n, Cr as vn, Cs as yn, Ct as bn, Cu as xn, D as Sn, Da as Cn, Dc as wn, Dd as Tn, Di as En, Dl as Dn, Dn as On, Do as kn, Dr as An, Ds as jn, Dt as Mn, Du as Nn, E as Pn, Ea as Fn, Ec as In, Ed as Ln, Ei as Rn, El as zn, En as Bn, Eo as Vn, Er as Hn, Es as Un, Et as Wn, Eu as Gn, F as Kn, Fa as qn, Fc as Jn, Fd as Yn, Fi as Xn, Fl as Zn, Fn as Qn, Fo as $n, Fr as er, Fs as tr, Ft as nr, Fu as rr, G as ir, Ga as ar, Gc as or, Gd as sr, Gi as cr, Gl as lr, Gn as ur, Go as dr, Gr as fr, Gs as pr, Gt as mr, Gu as hr, H as gr, Ha as _r, Hc as vr, Hd as yr, Hi as br, Hl as xr, Hn as Sr, Ho as Cr, Hr as wr, Hs as Tr, Ht as Er, Hu as Dr, I as Or, Ia as kr, Ic as Ar, Id as jr, Ii as Mr, Il as Nr, In as Pr, Io as Fr, Ir, Is as Lr, It as Rr, Iu as zr, J as Br, Ja as Vr, Jc as Hr, Jd as Ur, Ji as Wr, Jl as Gr, Jn as Kr, Jo as qr, Jr, Js as Yr, Jt as Xr, Ju as Zr, K as Qr, Ka as $r, Kc as ei, Kd as ti, Ki as ni, Kl as ri, Kn as ii, Ko as ai, Kr as oi, Ks as si, Kt as ci, Ku as li, L as ui, La as di, Lc as fi, Ld as pi, Li as mi, Ll as hi, Ln as gi, Lo as _i, Lr as vi, Ls as yi, Lt as bi, Lu as xi, M as Si, Ma as Ci, Mc as wi, Md as Ti, Mi as Ei, Ml as Di, Mn as Oi, Mo as ki, Mr as Ai, Ms as ji, Mt as Mi, Mu as Ni, N as Pi, Na as Fi, Nc as Ii, Nd as Li, Ni as Ri, Nl as zi, Nn as Bi, No as Vi, Nr as Hi, Ns as Ui, Nt as Wi, Nu as Gi, O as Ki, Oa as qi, Oc as Ji, Od as Yi, Oi as Xi, Ol as Zi, On as Qi, Oo as $i, Or as ea, Os as ta, Ot as na, Ou as ra, P as ia, Pa as aa, Pc as oa, Pd as sa, Pi as ca, Pl as la, Pn as ua, Po as da, Pr as fa, Ps as pa, Pt as ma, Pu as ha, Q as ga, Qa as _a, Qc as va, Qd as ya, Qi as ba, Ql as xa, Qn as Sa, Qo as Ca, Qr as wa, Qs as Ta, Qt as Ea, Qu as Da, R as Oa, Ra as ka, Rc as Aa, Rd as ja, Ri as Ma, Rl as Na, Rn as Pa, Ro as Fa, Rr as Ia, Rs as La, Rt as Ra, Ru as za, S as Ba, Sa as Va, Sc as Ha, Sd as Ua, Sf as Wa, Si as Ga, Sl as Ka, Sn as qa, So as Ja, Sr as Ya, Ss as Xa, St as Za, Su as Qa, T as $a, Ta as eo, Tc as to, Td as no, Ti as ro, Tl as io, Tn as ao, To as oo, Tr as so, Ts as co, Tt as lo, Tu as uo, U as fo, Ua as po, Uc as mo, Ud as ho, Ui as go, Ul as _o, Un as vo, Uo as yo, Ur as bo, Us as xo, Ut as So, Uu as Co, V as wo, Va as To, Vc as Eo, Vd as Do, Vi as Oo, Vl as ko, Vn as Ao, Vo as jo, Vr as Mo, Vs as No, Vt as Po, Vu as Fo, W as Io, Wa as Lo, Wc as Ro, Wd as zo, Wi as Bo, Wl as Vo, Wn as Ho, Wo as Uo, Wr as Wo, Ws as Go, Wt as Ko, Wu as qo, X as Jo, Xa as Yo, Xc as Xo, Xd as Zo, Xi as Qo, Xl as $o, Xn as es, Xo as ts, Xr as ns, Xs as rs, Xt as is, Xu as as, Y as os, Ya as ss, Yc as cs, Yd as ls, Yi as us, Yl as ds, Yn as fs, Yo as ps, Yr as ms, Ys as hs, Yt as gs, Yu as _s, Z as vs, Za as ys, Zc as bs, Zd as xs, Zi as Ss, Zl as Cs, Zn as ws, Zo as Ts, Zr as Es, Zs as Ds, Zt as Os, Zu as ks, _ as As, _a as js, _c as Ms, _d as Ns, _f as Ps, _i as Fs, _l as Is, _n as Ls, _o as Rs, _r as zs, _s as Bs, _t as Vs, _u as Hs, a as Us, aa as Ws, ac as Gs, ad as Ks, af as qs, ai as Js, al as Ys, an as Xs, ao as Zs, ar as Qs, as as $s, at as ec, au as tc, b as nc, ba as rc, bc as ic, bd as ac, bf as oc, bi as sc, bl as cc, bn as lc, bo as uc, br as dc, bs as fc, bt as pc, bu as Q, c as mc, ca as hc, cc as gc, cd as _c, cf as vc, ci as yc, cl as bc, cn as xc, co as Sc, cr as Cc, cs as wc, ct as Tc, cu as Ec, d as Dc, da as Oc, dc as kc, dd as Ac, df as jc, di as Mc, dl as Nc, dn as Pc, do as Fc, dr as Ic, ds as Lc, dt as Rc, du as zc, ea as Bc, ec as Vc, ed as Hc, ef as Uc, ei as Wc, el as Gc, en as Kc, eo as qc, er as Jc, es as Yc, et as Xc, eu as Zc, f as Qc, fa as $c, fc as el, fd as tl, ff as nl, fi as rl, fl as il, fn as al, fo as ol, fr as sl, fs as cl, ft as ll, fu as ul, g as dl, ga as fl, gc as pl, gd as ml, gf as hl, gi as gl, gl as _l, gn as vl, go as yl, gr as bl, gs as xl, gt as Sl, gu as Cl, h as wl, ha as Tl, hc as El, hd as Dl, hf as Ol, hi as kl, hl as Al, hn as jl, ho as Ml, hr as Nl, hs as Pl, ht as Fl, hu as Il, i as Ll, ia as Rl, ic as zl, id as Bl, if as Vl, ii as Hl, il as Ul, in as Wl, io as Gl, ir as Kl, is as ql, it as Jl, iu as Yl, j as Xl, ja as Zl, jc as Ql, jd as $l, ji as eu, jl as tu, jn as nu, jo as ru, jr as iu, js as au, jt as ou, ju as su, k as cu, ka as lu, kc as uu, kd as du, ki as fu, kl as pu, kn as mu, ko as hu, kr as gu, ks as _u, kt as vu, ku as yu, l as bu, la as xu, lc as Su, ld as Cu, lf as wu, li as Tu, ll as Eu, ln as Du, lo as Ou, lr as ku, ls as Au, lt as ju, lu as Mu, m as Nu, ma as Pu, mc as Fu, md as Iu, mf as Lu, mi as Ru, ml as zu, mn as Bu, mo as Vu, mr as Hu, ms as Uu, mt as Wu, mu as Gu, n as Ku, na as qu, nc as Ju, nd as Yu, nf as Xu, ni as Zu, nl as Qu, nn as $u, no as ed, nr as td, ns as nd, nt as rd, nu as id, o as ad, oa as od, oc as sd, od as cd, of as ld, oi as ud, ol as dd, on as fd, oo as pd, or as md, os as hd, ot as gd, ou as _d, p as vd, pa as yd, pc as bd, pd as xd, pf as Sd, pi as Cd, pl as wd, pn as Td, po as Ed, pr as Dd, ps as Od, pt as kd, pu as Ad, q as jd, qa as Md, qc as Nd, qd as Pd, qi as Fd, ql as Id, qn as Ld, qo as Rd, qr as zd, qs as Bd, qt as Vd, qu as Hd, r as Ud, ra as Wd, rc as Gd, rd as Kd, rf as qd, ri as Jd, rl as Yd, rn as Xd, ro as Zd, rr as Qd, rs as $d, rt as ef, ru as tf, s as nf, sa as rf, sc as af, sd as of, sf, si as cf, sl as lf, sn as uf, so as df, sr as ff, ss as pf, st as mf, su as hf, t as gf, ta as _f, tc as vf, td as yf, tf as bf, ti as xf, tl as Sf, tn as Cf, to as wf, tr as Tf, ts as Ef, tt as Df, tu as Of, u as kf, ua as Af, uc as jf, ud as Mf, uf as Nf, ui as Pf, ul as Ff, un as If, uo as Lf, ur as Rf, us as zf, ut as Bf, uu as Vf, v as Hf, va as Uf, vc as Wf, vd as Gf, vf as Kf, vi as qf, vl as Jf, vn as Yf, vo as Xf, vr as Zf, vs as Qf, vt as $f, vu as ep, w as tp, wa as np, wc as rp, wd as ip, wi as ap, wl as op, wn as sp, wo as cp, wr as lp, ws as up, wt as dp, wu as fp, x as pp, xa as mp, xc as hp, xd as gp, xf as _p, xi as vp, xl as yp, xn as bp, xo as xp, xr as Sp, xs as Cp, xt as wp, xu as Tp, y as Ep, ya as Dp, yc as Op, yd as kp, yf as Ap, yi as jp, yl as Mp, yn as Np, yo as Pp, yr as Fp, ys as Ip, yt as Lp, yu as Rp, z as zp, za as Bp, zc as Vp, zd as Hp, zi as Up, zl as Wp, zn as Gp, zo as Kp, zr as qp, zs as Jp, zt as Yp, zu as Xp } from "./components-BCYZgeoV.js";
 import { a as Zp, i as Qp } from "./field-blur-context-Dw9ZAgBr.js";
 import { i as $p, n as em, r as tm, t as nm } from "./hover-card-D5iHS9q1.js";
 import { _ as rm, a as im, c as am, d as om, f as sm, g as cm, i as lm, l as um, o as dm, p as fm, r as pm, s as mm, t as hm, u as gm } from "./public-Cde8_SN8.js";

package/dist/lib/components/ui/layout/app-shell/activity-layout.d.ts

@@ -78,6 +78,28 @@ export type ActivityLayoutProps = {
      * app shell guide, "Route transitions".
      */
     routeTransition?: RouteTransition;
+    /**
+     * A decorative background drawn behind the frame, in place of the built-in
+     * gradient and its three blobs: typically a `Background` preset from
+     * `@nxgt/material/backgrounds`. It fills the whole layout, sits under the
+     * sidebar, the header and the content, and is `inert`, `aria-hidden` and
+     * never takes a pointer. Leave it out and the gradient is drawn as before.
+     * The preset's stylesheet (`@nxgt/material/backgrounds.css`) is the app's to
+     * import. See the app shell guide, "Use a background preset behind the shell".
+     *
+     * @example
+     * ```tsx
+     * import { Background, MOTIF_SHAPES_ALL } from '@nxgt/material/backgrounds';
+     *
+     * <ActivityLayout
+     *   items={items}
+     *   backdrop={<Background preset="shapes" motif={{ shapes: MOTIF_SHAPES_ALL }} />}
+     * >
+     *   <Outlet />
+     * </ActivityLayout>
+     * ```
+     */
+    backdrop?: ReactNode;
 } & ComponentProps<'div'>;
 /**
  * The application chrome: sidebar, header, breadcrumbs, and the routed content.
@@ -94,4 +116,4 @@ export type ActivityLayoutProps = {
  * phone's toolbar (the bottom of the screen hidden). The bottom keeps clear
  * of a `MediaPlayerHost`'s docked bar (`--nxgt-media-dock`).
  */
-export declare function ActivityLayout({ items, brand, logo, name, context, headerTitle, breadcrumbRoot, headerActions, avatar, linkComponent, contentAs: Content, scroll, align, menuOpen, onMenuOpenChange, routeTransition, children, className, ...props }: ActivityLayoutProps): import("react").JSX.Element;
+export declare function ActivityLayout({ items, brand, logo, name, context, headerTitle, breadcrumbRoot, headerActions, avatar, linkComponent, contentAs: Content, scroll, align, menuOpen, onMenuOpenChange, routeTransition, backdrop, children, className, ...props }: ActivityLayoutProps): import("react").JSX.Element;